<script setup>
import { Award } from "lucide-vue-next";
import { useSportsStore } from "../stores/sports";
import { getGradeStyle, getGradeBgClass } from "../composables/useHelpers";

const store = useSportsStore();
</script>

<template>
  <div class="max-w-4xl mx-auto space-y-6">
    <div class="bg-white rounded-3xl card-shadow overflow-hidden">
      <div
        class="p-6 bg-blue-900 text-white font-black uppercase text-sm tracking-widest flex justify-between items-center"
      >
        <span>Récapitulatif des Moyennes Académiques</span>
        <Award class="w-5 h-5" />
      </div>
      <table class="w-full text-left">
        <thead class="bg-blue-50">
          <tr>
            <th class="p-6 text-[10px] font-black text-blue-900 uppercase">
              Étudiant
            </th>
            <th
              class="p-6 text-[10px] font-black text-blue-900 uppercase text-center"
            >
              Nbr Eval.
            </th>
            <th class="p-6 text-[10px] font-black text-blue-900 uppercase">
              Moyenne Littérale
            </th>
            <th
              class="p-6 text-[10px] font-black text-blue-900 uppercase text-right"
            >
              Niveau
            </th>
          </tr>
        </thead>
        <tbody class="divide-y divide-blue-50">
          <tr
            v-for="student in store.students"
            :key="student.id"
            class="hover:bg-blue-50/50 transition-colors"
          >
            <td class="p-6 font-bold text-blue-900">
              {{ student.lastName }} {{ student.firstName }}
            </td>
            <td class="p-6 text-center text-gray-500 font-bold">
              {{ store.getStudentEvaluationsCount(student.id) }}
            </td>
            <td class="p-6">
              <span
                :class="[
                  'px-3 py-1 rounded-full text-[10px] font-black uppercase border',
                  getGradeStyle(store.getStudentAverageLiteral(student.id)),
                ]"
              >
                {{ store.getStudentAverageLiteral(student.id) }}
              </span>
            </td>
            <td class="p-6 text-right">
              <div
                class="w-24 bg-gray-100 h-2 rounded-full overflow-hidden inline-block"
              >
                <div
                  :style="{
                    width:
                      (store.getStudentAveragePoints(student.id) / 4) * 100 +
                      '%',
                  }"
                  :class="[
                    'h-full transition-all duration-1000',
                    getGradeBgClass(store.getStudentAverageLiteral(student.id)),
                  ]"
                />
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>
