{# ========================================
   ADMIN DASHBOARD
   Tableau de bord — KPIs du mois, sélecteur de période, graphiques CA/statuts, top bateaux, mouvements du jour
   ======================================== #}
{% extends 'base.twig' %}

{% block title %}Administration - Nautiloc{% endblock %}

{% block content %}
<div class="grid gap-5 lg:grid-cols-[260px_1fr]">
  {% include 'components/admin/admin-sidebar.twig' with { admin: admin, current_resource: '' } %}

  <section>
    <section class="mb-6 flex flex-col gap-3 md:flex-row md:items-end md:justify-between">
      <div>
        <p class="text-xs font-black uppercase tracking-wider text-abyss-800">Centre de pilotage</p>
        <h1 class="text-3xl font-black uppercase">Tableau de bord admin</h1>
      </div>
    </section>

    {# ======== KPIs du mois ======== #}
    <section class="mb-6 grid gap-4 sm:grid-cols-2 xl:grid-cols-5">
      <article class="rounded-xl border-4 border-abyss-900 bg-white p-4 shadow-[5px_5px_0_0_#041824]">
        <p class="text-xs font-black uppercase">CA du mois</p>
        <p class="mt-1 text-2xl font-black">{{ stats.ca_mois|number_format(0, ',', ' ') }}€</p>
      </article>
      <article class="rounded-xl border-4 border-abyss-900 bg-white p-4 shadow-[5px_5px_0_0_#041824]">
        <p class="text-xs font-black uppercase">Résas du mois</p>
        <p class="mt-1 text-2xl font-black">{{ stats.reservations_mois }}</p>
      </article>
      <article class="rounded-xl border-4 border-abyss-900 bg-white p-4 shadow-[5px_5px_0_0_#041824]">
        <p class="text-xs font-black uppercase">Annulations mois</p>
        <p class="mt-1 text-2xl font-black">{{ stats.annulations_mois }}</p>
      </article>
      <article class="rounded-xl border-4 border-abyss-900 bg-white p-4 shadow-[5px_5px_0_0_#041824]">
        <p class="text-xs font-black uppercase">Remboursements</p>
        <p class="mt-1 text-2xl font-black">{{ stats.remboursements_mois|number_format(0, ',', ' ') }}€</p>
      </article>
      <article class="rounded-xl border-4 border-abyss-900 bg-abyss-900 p-4 text-sand-100 shadow-[5px_5px_0_0_#ff6b57]">
        <p class="text-xs font-black uppercase">Revenu net</p>
        <p class="mt-1 text-2xl font-black">{{ stats.revenu_net|number_format(0, ',', ' ') }}€</p>
      </article>
    </section>

    {# ======== Sélecteur de période ======== #}
    <section class="mb-6 flex flex-col gap-3 rounded-xl border-4 border-abyss-900 bg-white p-4 shadow-[5px_5px_0_0_#041824] md:flex-row md:items-center md:justify-between">
      <div>
        <p class="text-xs font-black uppercase tracking-wider text-abyss-800">Période des indicateurs</p>
        <p class="text-xl font-black uppercase">{{ stats_month.label }}</p>
      </div>
      <form method="get" action="/admin" class="flex flex-wrap items-center gap-2">
        <a href="/admin?month={{ stats_month.previous }}" class="inline-flex h-10 w-10 items-center justify-center rounded-lg border-2 border-abyss-900 bg-sand-100 text-lg font-black shadow-[3px_3px_0_0_#041824]" aria-label="Mois précédent">←</a>
        <input type="month" name="month" value="{{ stats_month.value }}" class="h-10 rounded-lg border-2 border-abyss-900 bg-sand-100 px-3 text-sm font-black">
        <button class="h-10 rounded-lg border-2 border-abyss-900 bg-coral-500 px-4 text-xs font-black uppercase text-white shadow-[3px_3px_0_0_#041824]">Appliquer</button>
        <a href="/admin?month={{ stats_month.next }}" class="inline-flex h-10 w-10 items-center justify-center rounded-lg border-2 border-abyss-900 bg-sand-100 text-lg font-black shadow-[3px_3px_0_0_#041824]" aria-label="Mois suivant">→</a>
      </form>
    </section>

    {# ======== Graphiques CA et répartition statuts (Chart.js via admin-dashboard.js) ======== #}
    <section class="mb-6 grid gap-5 xl:grid-cols-2" data-dashboard-charts data-revenue='{{ revenue_by_day|json_encode|e('html_attr') }}' data-status='{{ status_breakdown|json_encode|e('html_attr') }}'>
      <article class="rounded-xl border-4 border-abyss-900 bg-white p-4 shadow-[5px_5px_0_0_#041824]">
        <h2 class="text-sm font-black uppercase">Évolution CA · {{ stats_month.label }}</h2>
        <canvas id="chart-revenue" class="mt-3"></canvas>
      </article>
      <article class="rounded-xl border-4 border-abyss-900 bg-white p-4 shadow-[5px_5px_0_0_#041824]">
        <h2 class="text-sm font-black uppercase">Répartition statuts</h2>
        <canvas id="chart-status" class="mt-3"></canvas>
      </article>
    </section>

    {# ======== Top bateaux + mouvements du jour ======== #}
    <section class="mb-6 grid gap-5 xl:grid-cols-2">
      <article class="rounded-xl border-4 border-abyss-900 bg-white p-4 shadow-[5px_5px_0_0_#041824]">
        <h2 class="text-sm font-black uppercase">Top 5 bateaux</h2>
        <div class="mt-3 space-y-2 text-sm">
          {% for boat in top_boats %}
          <div class="rounded-lg border-2 border-abyss-900 bg-sand-100 px-3 py-2">
            <p class="font-black">{{ boat.nom }}</p>
            <p class="text-xs font-semibold">{{ boat.reservations_count }} réservations · {{ boat.revenue|number_format(0, ',', ' ') }}€</p>
          </div>
          {% else %}
          <p class="text-sm font-semibold">Aucune donnée.</p>
          {% endfor %}
        </div>
      </article>
      <article class="rounded-xl border-4 border-abyss-900 bg-white p-4 shadow-[5px_5px_0_0_#041824]">
        <h2 class="text-sm font-black uppercase">Mouvements du jour</h2>
        <div class="mt-3 space-y-2 text-sm">
          {% for movement in today_movements %}
          <a href="/admin/reservations?q={{ movement.numero }}" class="block rounded-lg border-2 border-abyss-900 bg-sand-100 px-3 py-2 hover:bg-sand-200">
            <p class="font-black">{{ movement.numero }} · {{ movement.bateau_nom }}</p>
            <p class="text-xs font-semibold">{{ movement.client_nom }} · {{ movement.formule_libelle }} · {{ movement.port_nom }} · {{ movement.statut }}</p>
          </a>
          {% else %}
          <p class="text-sm font-semibold">Aucun mouvement aujourd’hui.</p>
          {% endfor %}
        </div>
      </article>
    </section>
  </section>
</div>
{% endblock %}

{% block scripts %}
{{ parent() }}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="/assets/js/admin-dashboard.js"></script>
{% endblock %}