{% extends 'base.html.twig' %}
{% trans_default_domain 'home' %}

{% block title %}Statistiques - J'agis{% endblock %}

{% block body %}
<div data-controller="statistiques">
  {{ include('Statistiques/_header.html.twig') }}

  <div class="bg-gray-100 dark:bg-gray-900 min-h-screen p-4 md:p-6">
    <div class="max-w-7xl mx-auto">

      {# Filtres de date #}
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4 mb-6">
        <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
          <h2 class="text-lg font-semibold text-gray-900 dark:text-white flex items-center">
            <span class="material-symbols-outlined mr-2">filter_list</span>
            Filtrer par période
          </h2>
          <div class="flex flex-col sm:flex-row items-center gap-4">
            <div class="flex items-center gap-2">
              <label class="text-sm text-gray-600 dark:text-gray-400">Du</label>
              <input type="date" id="startDate" data-statistiques-target="startDate"
                     class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
            </div>
            <div class="flex items-center gap-2">
              <label class="text-sm text-gray-600 dark:text-gray-400">Au</label>
              <input type="date" id="endDate" data-statistiques-target="endDate"
                     class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
            </div>
            <button type="button" data-action="click->statistiques#loadData"
                    class="text-white bg-gray-800 hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 dark:bg-gray-700 dark:hover:bg-gray-600">
              <span class="material-symbols-outlined align-middle mr-1">refresh</span>
              Actualiser
            </button>
          </div>
        </div>
      </div>

      {# Indicateur de chargement #}
      <div id="loadingIndicator" data-statistiques-target="loading" class="hidden">
        <div class="flex justify-center items-center py-12">
          <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-gray-800 dark:border-white"></div>
        </div>
      </div>

      {# Contenu des statistiques #}
      <div id="statsContent" data-statistiques-target="content">

        {# Cartes KPI principales #}
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
          {# Total signalements #}
          <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
            <div class="flex items-center">
              <div class="p-3 rounded-full bg-blue-100 dark:bg-blue-900">
                <span class="material-symbols-outlined text-blue-600 dark:text-blue-400">report</span>
              </div>
              <div class="ml-4">
                <p class="text-sm text-gray-500 dark:text-gray-400">Total signalements</p>
                <p class="text-2xl font-bold text-gray-900 dark:text-white" data-statistiques-target="totalSignalements">-</p>
              </div>
            </div>
          </div>

          {# Taux de traitement #}
          <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
            <div class="flex items-center">
              <div class="p-3 rounded-full bg-green-100 dark:bg-green-900">
                <span class="material-symbols-outlined text-green-600 dark:text-green-400">check_circle</span>
              </div>
              <div class="ml-4">
                <p class="text-sm text-gray-500 dark:text-gray-400">Taux de traitement</p>
                <p class="text-2xl font-bold text-gray-900 dark:text-white" data-statistiques-target="tauxTraitement">-</p>
              </div>
            </div>
          </div>

          {# Signalements traités #}
          <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
            <div class="flex items-center">
              <div class="p-3 rounded-full bg-emerald-100 dark:bg-emerald-900">
                <span class="material-symbols-outlined text-emerald-600 dark:text-emerald-400">done_all</span>
              </div>
              <div class="ml-4">
                <p class="text-sm text-gray-500 dark:text-gray-400">Traités</p>
                <p class="text-2xl font-bold text-gray-900 dark:text-white" data-statistiques-target="nbTraite">-</p>
              </div>
            </div>
          </div>

          {# Signalements en attente #}
          <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
            <div class="flex items-center">
              <div class="p-3 rounded-full bg-orange-100 dark:bg-orange-900">
                <span class="material-symbols-outlined text-orange-600 dark:text-orange-400">pending</span>
              </div>
              <div class="ml-4">
                <p class="text-sm text-gray-500 dark:text-gray-400">En attente</p>
                <p class="text-2xl font-bold text-gray-900 dark:text-white" data-statistiques-target="nbNonTraite">-</p>
              </div>
            </div>
          </div>
        </div>

        {# Section Temps de traitement #}
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6 mb-6">
          <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center">
            <span class="material-symbols-outlined mr-2">timer</span>
            Temps de traitement
          </h3>
          <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
            {# Temps moyen #}
            <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-4">
              <div class="flex items-center">
                <div class="p-2 rounded-full bg-purple-100 dark:bg-purple-900">
                  <span class="material-symbols-outlined text-purple-600 dark:text-purple-400 text-xl">avg_time</span>
                </div>
                <div class="ml-3">
                  <p class="text-xs text-gray-500 dark:text-gray-400">Temps moyen</p>
                  <p class="text-lg font-bold text-gray-900 dark:text-white" data-statistiques-target="tempsMoyen">-</p>
                </div>
              </div>
            </div>

            {# Temps médian #}
            <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-4">
              <div class="flex items-center">
                <div class="p-2 rounded-full bg-indigo-100 dark:bg-indigo-900">
                  <span class="material-symbols-outlined text-indigo-600 dark:text-indigo-400 text-xl">functions</span>
                </div>
                <div class="ml-3">
                  <p class="text-xs text-gray-500 dark:text-gray-400">Temps médian</p>
                  <p class="text-lg font-bold text-gray-900 dark:text-white" data-statistiques-target="tempsMedian">-</p>
                </div>
              </div>
            </div>

            {# Taux de réponse #}
            <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-4">
              <div class="flex items-center">
                <div class="p-2 rounded-full bg-teal-100 dark:bg-teal-900">
                  <span class="material-symbols-outlined text-teal-600 dark:text-teal-400 text-xl">reply</span>
                </div>
                <div class="ml-3">
                  <p class="text-xs text-gray-500 dark:text-gray-400">Taux de réponse</p>
                  <p class="text-lg font-bold text-gray-900 dark:text-white" data-statistiques-target="tauxReponse">-</p>
                </div>
              </div>
            </div>

            {# Avec / Sans réponse #}
            <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-4">
              <div class="flex items-center">
                <div class="p-2 rounded-full bg-amber-100 dark:bg-amber-900">
                  <span class="material-symbols-outlined text-amber-600 dark:text-amber-400 text-xl">mark_chat_read</span>
                </div>
                <div class="ml-3">
                  <p class="text-xs text-gray-500 dark:text-gray-400">Avec réponse</p>
                  <p class="text-lg font-bold text-gray-900 dark:text-white">
                    <span data-statistiques-target="avecReponse">-</span>
                    <span class="text-xs font-normal text-gray-500">/ <span data-statistiques-target="sansReponse">-</span> sans</span>
                  </p>
                </div>
              </div>
            </div>
          </div>

          {# Graphique distribution temps de traitement #}
          <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
            <div>
              <h4 class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">Distribution des temps de réponse</h4>
              <div class="h-48">
                <canvas id="chartDistributionTemps" data-statistiques-target="chartDistributionTemps"></canvas>
              </div>
            </div>
            <div>
              <h4 class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">Détail</h4>
              <div class="space-y-2" data-statistiques-target="detailTemps">
                <p class="text-gray-500 dark:text-gray-400 text-sm">Chargement...</p>
              </div>
            </div>
          </div>
        </div>

        {# Graphiques principaux #}
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
          {# Évolution dans le temps #}
          <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center">
              <span class="material-symbols-outlined mr-2">trending_up</span>
              Évolution des signalements
            </h3>
            <div class="h-64">
              <canvas id="chartEvolution" data-statistiques-target="chartEvolution"></canvas>
            </div>
          </div>

          {# Répartition par motif #}
          <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center">
              <span class="material-symbols-outlined mr-2">category</span>
              Répartition par type d'incident
            </h3>
            <div class="h-64">
              <canvas id="chartMotifs" data-statistiques-target="chartMotifs"></canvas>
            </div>
          </div>
        </div>

        {# Deuxième ligne de graphiques #}
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
          {# Par type de lieu #}
          <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center">
              <span class="material-symbols-outlined mr-2">place</span>
              Par type de lieu
            </h3>
            <div class="h-56">
              <canvas id="chartTransport" data-statistiques-target="chartTransport"></canvas>
            </div>
          </div>

          {# Mode de transport #}
          <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center">
              <span class="material-symbols-outlined mr-2">directions_transit</span>
              Mode de transport
            </h3>
            <div class="h-56">
              <canvas id="chartTransportMode" data-statistiques-target="chartTransportMode"></canvas>
            </div>
          </div>

          {# Traité vs non traité #}
          <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center">
              <span class="material-symbols-outlined mr-2">fact_check</span>
              Statut de traitement
            </h3>
            <div class="h-56">
              <canvas id="chartTraite" data-statistiques-target="chartTraite"></canvas>
            </div>
          </div>
        </div>

        {# Troisième ligne #}
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
          {# Par jour de la semaine #}
          <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center">
              <span class="material-symbols-outlined mr-2">calendar_month</span>
              Par jour de la semaine
            </h3>
            <div class="h-64">
              <canvas id="chartJours" data-statistiques-target="chartJours"></canvas>
            </div>
          </div>

          {# Par tranche horaire #}
          <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center">
              <span class="material-symbols-outlined mr-2">schedule</span>
              Par tranche horaire
            </h3>
            <div class="h-64">
              <canvas id="chartHeures" data-statistiques-target="chartHeures"></canvas>
            </div>
          </div>
        </div>

        {# Quatrième ligne #}
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
          {# Témoin vs victime #}
          <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center">
              <span class="material-symbols-outlined mr-2">visibility</span>
              Témoin vs Victime
            </h3>
            <div class="h-48">
              <canvas id="chartTemoin" data-statistiques-target="chartTemoin"></canvas>
            </div>
          </div>

          {# Veut être recontacté #}
          <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center">
              <span class="material-symbols-outlined mr-2">contact_phone</span>
              Souhaite être recontacté
            </h3>
            <div class="h-48">
              <canvas id="chartRecontact" data-statistiques-target="chartRecontact"></canvas>
            </div>
          </div>

          {# Top villes #}
          <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center">
              <span class="material-symbols-outlined mr-2">location_city</span>
              Top 10 villes
            </h3>
            <div class="overflow-y-auto max-h-48" data-statistiques-target="topVilles">
              <p class="text-gray-500 dark:text-gray-400 text-sm">Chargement...</p>
            </div>
          </div>
        </div>

        {# Cinquième ligne - Urgence et Qui signale #}
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
          {# Urgence #}
          <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center">
              <span class="material-symbols-outlined mr-2 text-red-500">warning</span>
              Signalements urgents
            </h3>
            <div class="grid grid-cols-2 gap-4 mb-4">
              <div class="bg-red-50 dark:bg-red-900/20 rounded-lg p-4 text-center">
                <p class="text-3xl font-bold text-red-600 dark:text-red-400" data-statistiques-target="nbUrgent">-</p>
                <p class="text-sm text-gray-600 dark:text-gray-400">Urgents</p>
              </div>
              <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-4 text-center">
                <p class="text-3xl font-bold text-gray-600 dark:text-gray-300" data-statistiques-target="nbNonUrgent">-</p>
                <p class="text-sm text-gray-600 dark:text-gray-400">Non urgents</p>
              </div>
            </div>
            <div class="h-40">
              <canvas id="chartUrgence" data-statistiques-target="chartUrgence"></canvas>
            </div>
          </div>

          {# Qui signale #}
          <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center">
              <span class="material-symbols-outlined mr-2">person_pin</span>
              Qui signale
            </h3>
            <div class="h-56">
              <canvas id="chartQuiSignale" data-statistiques-target="chartQuiSignale"></canvas>
            </div>
          </div>
        </div>

        {# ============================================ #}
        {# SECTION TRAJETS SOS #}
        {# ============================================ #}
        <div class="mt-10 mb-6">
          <div class="flex items-center mb-6">
            <div class="p-2 bg-red-100 dark:bg-red-900 rounded-lg mr-3">
              <span class="material-symbols-outlined text-red-600 dark:text-red-400 text-2xl">sos</span>
            </div>
            <h2 class="text-xl font-bold text-gray-900 dark:text-white">Trajets SOS</h2>
          </div>

          {# Cartes KPI SOS #}
          <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
            {# Total trajets SOS #}
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
              <div class="flex items-center">
                <div class="p-3 rounded-full bg-red-100 dark:bg-red-900">
                  <span class="material-symbols-outlined text-red-600 dark:text-red-400">route</span>
                </div>
                <div class="ml-4">
                  <p class="text-sm text-gray-500 dark:text-gray-400">Total trajets SOS</p>
                  <p class="text-2xl font-bold text-gray-900 dark:text-white" data-statistiques-target="totalSos">-</p>
                </div>
              </div>
            </div>

            {# Alertes danger déclenchées #}
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
              <div class="flex items-center">
                <div class="p-3 rounded-full bg-orange-100 dark:bg-orange-900">
                  <span class="material-symbols-outlined text-orange-600 dark:text-orange-400">emergency</span>
                </div>
                <div class="ml-4">
                  <p class="text-sm text-gray-500 dark:text-gray-400">Alertes danger</p>
                  <p class="text-2xl font-bold text-gray-900 dark:text-white" data-statistiques-target="sosDanger">-</p>
                </div>
              </div>
            </div>

            {# Arrivés à destination #}
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
              <div class="flex items-center">
                <div class="p-3 rounded-full bg-green-100 dark:bg-green-900">
                  <span class="material-symbols-outlined text-green-600 dark:text-green-400">check_circle</span>
                </div>
                <div class="ml-4">
                  <p class="text-sm text-gray-500 dark:text-gray-400">Arrivés à destination</p>
                  <p class="text-2xl font-bold text-gray-900 dark:text-white" data-statistiques-target="sosArrive">-</p>
                </div>
              </div>
            </div>

            {# Vers Safeplaces #}
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
              <div class="flex items-center">
                <div class="p-3 rounded-full bg-blue-100 dark:bg-blue-900">
                  <span class="material-symbols-outlined text-blue-600 dark:text-blue-400">home_pin</span>
                </div>
                <div class="ml-4">
                  <p class="text-sm text-gray-500 dark:text-gray-400">Vers Safeplaces</p>
                  <p class="text-2xl font-bold text-gray-900 dark:text-white" data-statistiques-target="sosSafeplace">-</p>
                </div>
              </div>
            </div>
          </div>

          {# Graphiques SOS #}
          <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
            {# Évolution des trajets SOS #}
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
              <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center">
                <span class="material-symbols-outlined mr-2">trending_up</span>
                Évolution des trajets SOS
              </h3>
              <div class="h-64">
                <canvas id="chartSosEvolution" data-statistiques-target="chartSosEvolution"></canvas>
              </div>
            </div>

            {# Répartition danger / arrivée / safeplace #}
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
              <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center">
                <span class="material-symbols-outlined mr-2">pie_chart</span>
                Répartition des trajets
              </h3>
              <div class="grid grid-cols-3 gap-4">
                {# Danger #}
                <div>
                  <h4 class="text-xs font-medium text-gray-500 dark:text-gray-400 mb-2 text-center">Alerte danger</h4>
                  <div class="h-32">
                    <canvas id="chartSosDanger" data-statistiques-target="chartSosDanger"></canvas>
                  </div>
                </div>
                {# Arrivée #}
                <div>
                  <h4 class="text-xs font-medium text-gray-500 dark:text-gray-400 mb-2 text-center">Arrivée</h4>
                  <div class="h-32">
                    <canvas id="chartSosArrivee" data-statistiques-target="chartSosArrivee"></canvas>
                  </div>
                </div>
                {# Safeplace #}
                <div>
                  <h4 class="text-xs font-medium text-gray-500 dark:text-gray-400 mb-2 text-center">Destination</h4>
                  <div class="h-32">
                    <canvas id="chartSosSafeplace" data-statistiques-target="chartSosSafeplace"></canvas>
                  </div>
                </div>
              </div>
            </div>
          </div>

          {# Horaires et jours SOS #}
          <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
            {# Par jour de la semaine #}
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
              <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center">
                <span class="material-symbols-outlined mr-2">calendar_month</span>
                Par jour de la semaine
              </h3>
              <div class="h-64">
                <canvas id="chartSosJours" data-statistiques-target="chartSosJours"></canvas>
              </div>
            </div>

            {# Par tranche horaire #}
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
              <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center">
                <span class="material-symbols-outlined mr-2">schedule</span>
                Par tranche horaire
              </h3>
              <div class="h-64">
                <canvas id="chartSosHeures" data-statistiques-target="chartSosHeures"></canvas>
              </div>
            </div>
          </div>
        </div>

        {# Tableau détaillé des motifs #}
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
          <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center">
            <span class="material-symbols-outlined mr-2">table_chart</span>
            Détail par type d'incident
          </h3>
          <div class="overflow-x-auto">
            <table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
              <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
                <tr>
                  <th scope="col" class="px-6 py-3">Type d'incident</th>
                  <th scope="col" class="px-6 py-3">Nombre</th>
                  <th scope="col" class="px-6 py-3">Pourcentage</th>
                  <th scope="col" class="px-6 py-3">Progression</th>
                </tr>
              </thead>
              <tbody data-statistiques-target="tableMotifs">
                <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
                  <td class="px-6 py-4" colspan="4">Chargement...</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>

      </div>
    </div>
  </div>
</div>
{% endblock %}