<script setup>
import { ref, computed } from "vue";
import { UserCog, UserPlus, Pencil, Trash2 } from "lucide-vue-next";
import { useSportsStore } from "../stores/sports";
import {
  calcIMC,
  getIMCInterpretation,
  getIMCBgClass,
} from "../composables/useHelpers";

const store = useSportsStore();

const editingId = ref(null);
const form = ref(emptyForm());

function emptyForm() {
  return {
    firstName: "",
    lastName: "",
    age: null,
    sex: "H",
    weight: null,
    height: null,
  };
}

const currentFormIMC = computed(() =>
  calcIMC(form.value.weight, form.value.height),
);

function saveStudent() {
  const f = form.value;
  if (!f.firstName || !f.lastName || !f.weight || !f.height) return;
  store.saveStudent(f, editingId.value);
  editingId.value = null;
  form.value = emptyForm();
}

function prepareEdit(student) {
  editingId.value = student.id;
  form.value = { ...student };
  window.scrollTo({ top: 0, behavior: "smooth" });
  store.showNotification("Modification du profil...");
}

function cancelEdit() {
  editingId.value = null;
  form.value = emptyForm();
}
</script>

<template>
  <div class="space-y-6">
    <!-- Form card -->
    <div
      class="bg-white p-8 rounded-3xl card-shadow border-t-8 transition-all"
      :class="editingId ? 'border-amber-500' : 'border-blue-500'"
    >
      <div class="flex justify-between items-center mb-6">
        <h4
          class="text-xl font-bold text-blue-900 italic flex items-center gap-2"
        >
          <component :is="editingId ? UserCog : UserPlus" class="w-5 h-5" />
          {{
            editingId
              ? "Modifier le profil étudiant"
              : "Inscrire un nouvel étudiant"
          }}
        </h4>
        <button
          v-if="editingId"
          @click="cancelEdit"
          class="text-xs font-black text-rose-500 uppercase px-3 py-1 border border-rose-200 rounded-full hover:bg-rose-50"
        >
          Annuler
        </button>
      </div>

      <form @submit.prevent="saveStudent" class="space-y-6">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div>
            <label
              class="block text-xs font-black text-blue-400 mb-2 uppercase tracking-widest"
              >Prénom</label
            >
            <input
              v-model="form.firstName"
              type="text"
              placeholder="Prénom"
              class="w-full p-4 rounded-2xl bg-blue-50 border-none outline-none focus:ring-2 focus:ring-blue-500 font-bold"
            />
          </div>
          <div>
            <label
              class="block text-xs font-black text-blue-400 mb-2 uppercase tracking-widest"
              >Nom</label
            >
            <input
              v-model="form.lastName"
              type="text"
              placeholder="Nom de famille"
              class="w-full p-4 rounded-2xl bg-blue-50 border-none outline-none focus:ring-2 focus:ring-blue-500 font-bold"
            />
          </div>
        </div>

        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
          <div>
            <label
              class="block text-xs font-black text-blue-400 mb-2 uppercase tracking-widest"
              >Âge</label
            >
            <input
              v-model.number="form.age"
              type="number"
              class="w-full p-4 rounded-2xl bg-blue-50 border-none outline-none focus:ring-2 focus:ring-blue-500 font-bold"
            />
          </div>
          <div>
            <label
              class="block text-xs font-black text-blue-400 mb-2 uppercase tracking-widest"
              >Sexe</label
            >
            <select
              v-model="form.sex"
              class="w-full p-4 rounded-2xl bg-blue-50 border-none outline-none focus:ring-2 focus:ring-blue-500 font-bold"
            >
              <option value="H">Homme</option>
              <option value="F">Femme</option>
            </select>
          </div>
          <div>
            <label
              class="block text-xs font-black text-blue-400 mb-2 uppercase tracking-widest"
              >Poids (kg)</label
            >
            <input
              v-model.number="form.weight"
              type="number"
              step="0.1"
              class="w-full p-4 rounded-2xl bg-blue-50 border-none outline-none focus:ring-2 focus:ring-blue-500 font-bold"
            />
          </div>
          <div>
            <label
              class="block text-xs font-black text-blue-400 mb-2 uppercase tracking-widest"
              >Taille (cm)</label
            >
            <input
              v-model.number="form.height"
              type="number"
              class="w-full p-4 rounded-2xl bg-blue-50 border-none outline-none focus:ring-2 focus:ring-blue-500 font-bold"
            />
          </div>
        </div>

        <!-- Live IMC preview -->
        <div
          v-if="form.weight && form.height"
          class="p-6 bg-blue-50 rounded-2xl border border-blue-100 flex items-center justify-between"
        >
          <div>
            <p class="text-xs font-black text-blue-900 uppercase">
              IMC actualisé :
            </p>
            <h5 class="text-2xl font-black text-blue-600">
              {{ currentFormIMC }} <small class="text-xs">kg/m²</small>
            </h5>
          </div>
          <span
            :class="[
              'px-4 py-2 rounded-full text-xs font-black uppercase text-white shadow-sm',
              getIMCBgClass(currentFormIMC),
            ]"
          >
            {{ getIMCInterpretation(currentFormIMC) }}
          </span>
        </div>

        <button
          type="submit"
          class="w-full py-4 rounded-2xl text-white font-black shadow-lg transition-all uppercase tracking-widest"
          :class="
            editingId
              ? 'bg-amber-500 hover:bg-amber-600'
              : 'gradient-brand hover:opacity-90'
          "
        >
          {{
            editingId ? "Mettre à jour le profil" : "Finaliser l'inscription"
          }}
        </button>
      </form>
    </div>

    <!-- Students table -->
    <div class="bg-white rounded-3xl card-shadow overflow-hidden">
      <div class="overflow-x-auto">
        <table class="w-full text-left">
          <thead class="bg-blue-50 border-b border-blue-100">
            <tr>
              <th class="p-6 text-xs font-black text-blue-900 uppercase">
                Étudiant
              </th>
              <th
                class="p-6 text-xs font-black text-blue-900 uppercase text-center"
              >
                IMC
              </th>
              <th
                class="p-6 text-xs font-black text-blue-900 uppercase text-right"
              >
                Actions
              </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/30 transition-colors"
            >
              <td class="p-6">
                <div class="flex items-center gap-3">
                  <div
                    class="w-10 h-10 rounded-xl gradient-brand flex items-center justify-center text-white font-black"
                  >
                    {{ student.firstName.charAt(0) }}
                  </div>
                  <div>
                    <p class="font-bold text-blue-900">
                      {{ student.lastName }} {{ student.firstName }}
                    </p>
                    <p class="text-[10px] text-gray-400 font-bold uppercase">
                      {{ student.age }} ans •
                      {{ student.sex === "H" ? "H" : "F" }}
                    </p>
                  </div>
                </div>
              </td>
              <td class="p-6 text-center">
                <div class="flex flex-col items-center">
                  <span class="text-sm font-black text-blue-900">{{
                    student.imc
                  }}</span>
                  <span
                    :class="[
                      'text-[8px] px-2 py-0.5 rounded-full font-black uppercase text-white w-fit',
                      getIMCBgClass(student.imc),
                    ]"
                  >
                    {{ getIMCInterpretation(student.imc) }}
                  </span>
                </div>
              </td>
              <td class="p-6 text-right">
                <div class="flex justify-end gap-2">
                  <button
                    @click="prepareEdit(student)"
                    class="text-blue-300 hover:text-amber-500 transition-colors"
                  >
                    <Pencil class="w-4 h-4" />
                  </button>
                  <button
                    @click="store.deleteStudent(student.id)"
                    class="text-red-300 hover:text-red-600 transition-colors"
                  >
                    <Trash2 class="w-4 h-4" />
                  </button>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>
