<div class="min-h-screen gap-4 flex flex-col">
  <h1 class="text-3xl font-bold text-gray-800 dark:text-white">Dashboard principale PJP</h1>

  <!-- Loading / Error -->
  @if (statsLoading()) {
  <div class="text-sm text-gray-500 dark:text-gray-400">Chargement des statistiques…</div>
  } @if (statsError()) {
  <div class="text-sm text-red-500">{{ statsError() }}</div>
  }

  <!-- Live / upcoming courses with hippodrome & reunion -->
  <div class="grid gap-4">
    <z-card class="w-full">
      <div class="flex items-center justify-between mb-3">
        <div>
          <div class="text-sm text-gray-500 dark:text-gray-400">Courses en direct & à venir</div>
          <div class="text-xs text-gray-400 dark:text-gray-500">
            Statuts RUNNING & PROGRAMMEE, triés par heure de départ
          </div>
        </div>
      </div>
      @if (liveCourses().length) {
      <div class="divide-y divide-gray-100 dark:divide-gray-800 text-xs sm:text-sm">
        @for (c of liveCourses(); track c.id) {
        <div class="py-3 flex flex-col gap-2">
          <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
            <div class="flex flex-col gap-1.5">
              <div class="flex items-center gap-2 flex-wrap">
                <span
                  class="inline-flex items-center justify-center rounded-full px-2 py-0.5 text-[10px] font-semibold bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-300"
                >
                  N° {{ c.numero }}
                </span>
                <span class="font-medium text-gray-900 dark:text-gray-100 truncate">
                  {{ c.nom }}
                </span>
                @if (c.discipline) {
                <span
                  class="inline-flex items-center px-2 py-0.5 rounded text-[10px] font-medium bg-indigo-50 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-300"
                >
                  {{ c.discipline }}
                </span>
                }
              </div>
              <div
                class="flex flex-wrap items-center gap-2 text-[11px] text-gray-500 dark:text-gray-400"
              >
                <span class="flex items-center gap-1">
                  <svg
                    class="w-3 h-3"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="2"
                      d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
                    ></path>
                  </svg>
                  {{
                    c.heureDepartPrevue
                  }}
                </span>
                <span class="h-1 w-1 rounded-full bg-gray-400"></span>
                <span class="font-medium">
                  {{ c.nom }}
                </span>
                <span class="h-1 w-1 rounded-full bg-gray-400"></span>
                <span> Distance {{ c.distanceMetres | number : '1.0-0' }} m </span>
              </div>
              <div
                class="flex flex-wrap items-center gap-2 text-[11px] text-gray-600 dark:text-gray-300"
              >
                <span class="flex items-center gap-1 font-medium">
                  <svg
                    class="w-3.5 h-3.5"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="2"
                      d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
                    ></path>
                  </svg>
                  {{ c.nombrePartants }} partant{{ c.nombrePartants > 1 ? 's' : '' }}
                </span>
                @if (c.nonPartants && c.nonPartants.length > 0) {
                <span class="h-1 w-1 rounded-full bg-gray-400"></span>
                <span class="text-orange-600 dark:text-orange-400">
                  {{ c.nonPartants.length }} non-partant{{ c.nonPartants.length > 1 ? 's' : '' }}
                </span>
                } @if (c.numero) {
                <span class="h-1 w-1 rounded-full bg-gray-400"></span>
                <span class="italic">{{ c.numero }}</span>
                } @if (c.discipline) {
                <span class="h-1 w-1 rounded-full bg-gray-400"></span>
                <span class="text-blue-600 dark:text-blue-400">⭐ {{ c.discipline }}</span>
                }
              </div>
            </div>
            <div class="flex items-center gap-2 sm:gap-3">
              <span
                class="px-2 py-1 rounded-full text-[10px] font-semibold"
                [ngClass]="{
                  'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300':
                    (c.statut || '').toUpperCase() === 'RUNNING',
                  'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-300':
                    (c.statut || '').toUpperCase() === 'PROGRAMMEE',
                  'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300':
                    (c.statut || '').toUpperCase() === 'VALIDATED'
                }"
              >
                {{
                  (c.statut || '').toUpperCase() === 'RUNNING'
                    ? 'En cours'
                    : (c.statut || '').toUpperCase() === 'PROGRAMMEE'
                    ? 'Programmée'
                    : (c.statut || '').toUpperCase() === 'VALIDATED'
                    ? 'Validée'
                    : c.statut
                }}
              </span>
            </div>
          </div>
        </div>
        }
      </div>
      } @else {
      <div class="py-6 text-xs text-gray-400 dark:text-gray-500 text-center">
        Aucune course en cours ou à venir pour le moment.
      </div>
      }
    </z-card>
  </div>

  <!-- Global entities overview -->
  <div class="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
    <z-card class="w-full max-w-sm !mt-0 p-4">
      <div class="text-sm text-gray-500 dark:text-gray-400">Utilisateurs</div>
      <div class="mt-1 text-2xl font-semibold text-gray-900 dark:text-gray-100">
        {{ totalUsers() }}
      </div>
    </z-card>

    <z-card class="w-full max-w-sm !mt-0 p-4">
      <div class="text-sm text-gray-500 dark:text-gray-400">Agents</div>
      <div class="mt-1 text-2xl font-semibold text-gray-900 dark:text-gray-100">
        {{ totalAgents() }}
      </div>
    </z-card>

    <z-card class="w-full max-w-sm !mt-0 p-4">
      <div class="text-sm text-gray-500 dark:text-gray-400">TPE</div>
      <div class="mt-1 text-2xl font-semibold text-gray-900 dark:text-gray-100">
        {{ totalTpes() }}
      </div>
    </z-card>

    <z-card class="w-full max-w-sm !mt-0 p-4">
      <div class="text-sm text-gray-500 dark:text-gray-400">Limites agents</div>
      <div class="mt-1 text-2xl font-semibold text-gray-900 dark:text-gray-100">
        {{ totalAgentLimits() }}
      </div>
    </z-card>
  </div>

  <!-- Racing & network overview -->
  <div class="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
    <z-card class="w-full max-w-sm p-4">
      <div class="text-sm text-gray-500 dark:text-gray-400">Hippodromes</div>
      <div class="mt-1 text-2xl font-semibold text-gray-900 dark:text-gray-100">
        {{ totalHippodromes() }}
      </div>
    </z-card>

    <z-card class="w-full max-w-sm p-4">
      <div class="text-sm text-gray-500 dark:text-gray-400">Réunions</div>
      <div class="mt-1 text-2xl font-semibold text-gray-900 dark:text-gray-100">
        {{ totalReunions() }}
      </div>
    </z-card>

    <z-card class="w-full max-w-sm p-4">
      <div class="text-sm text-gray-500 dark:text-gray-400">Courses</div>
      <div class="mt-1 text-2xl font-semibold text-gray-900 dark:text-gray-100">
        {{ totalCourses() }}
      </div>
    </z-card>

    <z-card class="w-full max-w-sm p-4">
      <div class="text-sm text-gray-500 dark:text-gray-400">Membres de famille d'agents</div>
      <div class="mt-1 text-2xl font-semibold text-gray-900 dark:text-gray-100">
        {{ totalAgentFamilyMembers() }}
      </div>
    </z-card>
  </div>

  <!-- TPE charts & activity -->
  <div class="grid gap-4 lg:grid-cols-12">
    <!-- TPE status donut -->
    <z-card class="w-full lg:col-span-4">
      <div class="flex items-center justify-between mb-2">
        <div class="text-sm text-gray-500 dark:text-gray-400">Répartition TPE par statut</div>
        <div class="text-xs text-gray-400 dark:text-gray-500">Total&nbsp;: {{ totalTpes() }}</div>
      </div>
      <div class="flex items-center gap-4">
        <!-- Donut / Pie chart -->
        <div class="relative h-28 w-28">
          <div
            class="h-28 w-28 rounded-full transition-all duration-700 ease-out shadow-inner"
            [style.backgroundImage]="tpePieGradient()"
          ></div>
          <div
            class="absolute inset-4 rounded-full bg-white dark:bg-gray-900 flex items-center justify-center text-xs text-gray-700 dark:text-gray-200"
          >
            {{ totalTpes() }}
          </div>
        </div>
        <!-- Legend -->
        <div class="grid grid-cols-1 gap-1 text-xs flex-1">
          @for (item of tpeStatusBreakdown(); track item.statut) {
          <div class="flex items-center gap-2">
            <span
              class="inline-block h-2 w-2 rounded-full"
              [style.backgroundColor]="item.color"
            ></span>
            <span class="truncate">
              {{ item.statut }} ({{ item.count }}) — {{ item.percent }}%
            </span>
          </div>
          } @if (!tpeStatusBreakdown().length) {
          <div class="text-gray-400 dark:text-gray-500 text-xs">
            Aucune donnée de statut TPE disponible.
          </div>
          }
        </div>
      </div>
    </z-card>

    <!-- TPE assignment gauge -->
    <z-card class="w-full lg:col-span-4">
      <div class="text-sm text-gray-500 dark:text-gray-400">TPE assignés</div>
      <div class="mt-1 flex items-baseline gap-2">
        <div class="text-3xl font-semibold text-gray-900 dark:text-gray-100">
          {{ tpeAssignRate() }}%
        </div>
        <div class="text-xs text-gray-500 dark:text-gray-400">
          ({{ tpeAssignedCount() }} / {{ totalTpes() }})
        </div>
      </div>
      <div class="mt-3 h-2 rounded-full bg-gray-100 dark:bg-gray-800 overflow-hidden">
        <div
          class="h-full bg-emerald-500 dark:bg-emerald-400 transition-all duration-700 ease-out"
          [style.width.%]="tpeAssignRate()"
        ></div>
      </div>
      <p class="mt-2 text-xs text-gray-500 dark:text-gray-400">
        Pourcentage de TPE actuellement affectés à un agent.
      </p>
    </z-card>

    <!-- Line chart: relative volume par entité -->
    <z-card class="w-full lg:col-span-4">
      <div class="flex items-center justify-between mb-2">
        <div class="text-sm text-gray-500 dark:text-gray-400">Activité par entité</div>
      </div>
      <div class="h-32 w-full">
        <svg viewBox="0 0 100 40" class="w-full h-full">
          <!-- Gradient background -->
          <defs>
            <linearGradient id="entityLineGradient" x1="0" y1="0" x2="1" y2="0">
              <stop offset="0%" stop-color="#22c55e" />
              <stop offset="50%" stop-color="#3b82f6" />
              <stop offset="100%" stop-color="#a855f7" />
            </linearGradient>
          </defs>
          <!-- Baseline -->
          <line x1="0" y1="38" x2="100" y2="38" stroke="#e5e7eb" stroke-width="0.5" />
          <!-- Area under line -->
          @if (entityPolylinePoints()) {
          <polyline
            [attr.points]="'0,40 ' + entityPolylinePoints() + ' 100,40'"
            fill="url(#entityLineGradient)"
            fill-opacity="0.15"
          ></polyline>
          <!-- Line -->
          <polyline
            [attr.points]="entityPolylinePoints()"
            fill="none"
            stroke="url(#entityLineGradient)"
            stroke-width="1.5"
            stroke-linejoin="round"
            stroke-linecap="round"
          ></polyline>
          }
        </svg>
      </div>
      <div class="mt-3 grid grid-cols-3 gap-2 text-xs text-gray-600 dark:text-gray-300">
        <div>
          <div class="text-[10px] uppercase tracking-wide text-gray-400">Users</div>
          <div class="font-semibold">{{ totalUsers() }}</div>
        </div>
        <div>
          <div class="text-[10px] uppercase tracking-wide text-gray-400">Agents</div>
          <div class="font-semibold">{{ totalAgents() }}</div>
        </div>
        <div>
          <div class="text-[10px] uppercase tracking-wide text-gray-400">TPE</div>
          <div class="font-semibold">{{ totalTpes() }}</div>
        </div>
        <div>
          <div class="text-[10px] uppercase tracking-wide text-gray-400">Reunions</div>
          <div class="font-semibold">{{ totalReunions() }}</div>
        </div>
        <div>
          <div class="text-[10px] uppercase tracking-wide text-gray-400">Courses</div>
          <div class="font-semibold">{{ totalCourses() }}</div>
        </div>
      </div>
    </z-card>
  </div>
</div>
