<script setup>
import { Brain, PieChart, Circle } from "lucide-vue-next";
import { useSportsStore } from "../stores/sports";
import { getLifestyleBg } from "../composables/useHelpers";

const store = useSportsStore();
</script>

<template>
  <div class="space-y-6">
    <!-- KPI Cards -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
      <div
        class="bg-white p-6 rounded-3xl card-shadow border-l-8 border-blue-500"
      >
        <p class="text-gray-500 text-sm font-medium uppercase tracking-tighter">
          Étudiants Inscrits
        </p>
        <h3 class="text-4xl font-black text-blue-900">
          {{ store.students.length }}
        </h3>
      </div>
      <div
        class="bg-white p-6 rounded-3xl card-shadow border-l-8 border-sky-400"
      >
        <p class="text-gray-500 text-sm font-medium uppercase tracking-tighter">
          Activités Loguées
        </p>
        <h3 class="text-4xl font-black text-blue-900">
          {{ store.activities.length }}
        </h3>
      </div>
      <div
        class="bg-white p-6 rounded-3xl card-shadow border-l-8 border-indigo-500"
      >
        <p class="text-gray-500 text-sm font-medium uppercase tracking-tighter">
          Minutes Totales
        </p>
        <h3 class="text-4xl font-black text-blue-900">
          {{ Math.round(store.totalMinutes) }}
        </h3>
      </div>
      <div
        class="bg-white p-6 rounded-3xl card-shadow border-l-8 border-green-500"
      >
        <p class="text-gray-500 text-sm font-medium uppercase tracking-tighter">
          % Réussite Méd.
        </p>
        <h3 class="text-4xl font-black text-blue-900">
          {{ store.successRate }}%
        </h3>
      </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
      <!-- Lifestyle chart -->
      <div class="bg-white p-8 rounded-3xl card-shadow">
        <h4
          class="text-xl font-bold text-blue-900 mb-6 flex items-center gap-2"
        >
          <Brain class="w-5 h-5" /> État de Sédentarité (Global)
        </h4>
        <div class="space-y-4">
          <div v-for="(stat, key) in store.activityLifestyleStats" :key="key">
            <div
              class="flex justify-between text-[10px] font-black uppercase mb-1"
            >
              <span class="text-blue-900">{{ key }}</span>
              <span class="text-blue-500">{{ stat.count }} logs</span>
            </div>
            <div class="h-2 w-full bg-gray-100 rounded-full overflow-hidden">
              <div
                :style="{ width: stat.percentage + '%' }"
                :class="[
                  'h-full transition-all duration-700',
                  getLifestyleBg(key),
                ]"
              />
            </div>
          </div>
        </div>
      </div>

      <!-- Grade chart -->
      <div class="bg-white p-8 rounded-3xl card-shadow">
        <h4
          class="text-xl font-bold text-blue-900 mb-6 flex items-center gap-2"
        >
          <PieChart class="w-5 h-5" /> Résultats Académiques (Moyennes)
        </h4>
        <div
          class="flex h-10 w-full rounded-2xl overflow-hidden mb-6 border border-gray-100"
        >
          <div
            :style="{ width: store.gradeStats.excellent + '%' }"
            class="bg-green-500 h-full"
          />
          <div
            :style="{ width: store.gradeStats.tresBien + '%' }"
            class="bg-indigo-500 h-full"
          />
          <div
            :style="{ width: store.gradeStats.bien + '%' }"
            class="bg-blue-500 h-full"
          />
          <div
            :style="{ width: store.gradeStats.assezBien + '%' }"
            class="bg-sky-400 h-full"
          />
          <div
            :style="{ width: store.gradeStats.redouble + '%' }"
            class="bg-red-400 h-full"
          />
        </div>
        <div class="flex flex-wrap gap-4 text-[9px] font-black uppercase">
          <span class="text-green-600 flex items-center gap-1"
            ><Circle class="w-2 h-2 fill-current" /> Excellent</span
          >
          <span class="text-indigo-600 flex items-center gap-1"
            ><Circle class="w-2 h-2 fill-current" /> Très Bien</span
          >
          <span class="text-blue-600 flex items-center gap-1"
            ><Circle class="w-2 h-2 fill-current" /> Bien</span
          >
          <span class="text-sky-500 flex items-center gap-1"
            ><Circle class="w-2 h-2 fill-current" /> Assez Bien</span
          >
          <span class="text-red-500 flex items-center gap-1"
            ><Circle class="w-2 h-2 fill-current" /> Redouble</span
          >
        </div>
      </div>
    </div>
  </div>
</template>
