'use client';

import React, { useState, useEffect } from 'react';
import {
  Users,
  Layers,
  CheckCircle,
  Clock,
  XCircle,
  ClipboardList,
  Plus,
} from 'lucide-react';
import Table from '@/components/Table';
import Popup from '@/components/Popup';
import {
  fetchClasse,
  fetchSpecialities,
  fetchEvaluations,
  createEvaluation,
  updateEvaluation,
  deleteEvaluation,
  fetchStudentEvaluations,
  saveStudentEvaluations,
  deleteStudentEvaluation,
} from '@/app/actions/schoolAction';
import { useSearchParams } from 'next/navigation';
import logger from '@/utils/logger';
import { useClasses } from '@/context/ClassesContext';
import Button from '@/components/Form/Button';
import SelectChoice from '@/components/Form/SelectChoice';
import CheckBox from '@/components/Form/CheckBox';
import {
  fetchAbsences,
  createAbsences,
  editAbsences,
  deleteAbsences,
} from '@/app/actions/subscriptionAction';
import {
  EvaluationForm,
  EvaluationList,
  EvaluationGradeTable,
} from '@/components/Evaluation';

import { useCsrfToken } from '@/context/CsrfContext';
import { useEstablishment } from '@/context/EstablishmentContext';
import { useNotification } from '@/context/NotificationContext';
import dayjs from 'dayjs';

export default function Page() {
  const searchParams = useSearchParams();
  const { showNotification } = useNotification();
  const schoolClassId = searchParams.get('schoolClassId');
  const [classe, setClasse] = useState([]);
  const { getNiveauxLabels, getNiveauLabel } = useClasses();

  const [popupVisible, setPopupVisible] = useState(false);
  const [popupMessage, setPopupMessage] = useState('');
  const [selectedLevels, setSelectedLevels] = useState([]); // Par défaut, tous les niveaux sont sélectionnés
  const [filteredStudents, setFilteredStudents] = useState([]);
  const [isEditingAttendance, setIsEditingAttendance] = useState(false); // État pour le mode édition
  const [attendance, setAttendance] = useState({}); // État pour les cases cochées
  const [fetchedAbsences, setFetchedAbsences] = useState({}); // Absences récupérées depuis le backend
  const [formAbsences, setFormAbsences] = useState({}); // Absences modifiées localement

  // Tab system
  const [activeTab, setActiveTab] = useState('attendance'); // 'attendance' ou 'evaluations'

  // Evaluation states
  const [specialities, setSpecialities] = useState([]);
  const [evaluations, setEvaluations] = useState([]);
  const [studentEvaluations, setStudentEvaluations] = useState([]);
  const [showEvaluationForm, setShowEvaluationForm] = useState(false);
  const [selectedEvaluation, setSelectedEvaluation] = useState(null);
  const [selectedPeriod, setSelectedPeriod] = useState(null);
  const [editingEvaluation, setEditingEvaluation] = useState(null);

  const csrfToken = useCsrfToken();
  const { selectedEstablishmentId, selectedEstablishmentEvaluationFrequency } =
    useEstablishment();

  // Périodes selon la fréquence d'évaluation
  const getPeriods = () => {
    const year = dayjs().month() >= 8 ? dayjs().year() : dayjs().year() - 1;
    const nextYear = (year + 1).toString();
    const schoolYear = `${year}-${nextYear}`;

    if (selectedEstablishmentEvaluationFrequency === 1) {
      return [
        { label: 'Trimestre 1', value: `T1_${schoolYear}` },
        { label: 'Trimestre 2', value: `T2_${schoolYear}` },
        { label: 'Trimestre 3', value: `T3_${schoolYear}` },
      ];
    }
    if (selectedEstablishmentEvaluationFrequency === 2) {
      return [
        { label: 'Semestre 1', value: `S1_${schoolYear}` },
        { label: 'Semestre 2', value: `S2_${schoolYear}` },
      ];
    }
    if (selectedEstablishmentEvaluationFrequency === 3) {
      return [{ label: 'Année', value: `A_${schoolYear}` }];
    }
    return [];
  };

  // Auto-select current period
  useEffect(() => {
    const periods = getPeriods();
    if (periods.length > 0 && !selectedPeriod) {
      setSelectedPeriod(periods[0].value);
    }
  }, [selectedEstablishmentEvaluationFrequency]);

  // AbsenceMoment constants
  const AbsenceMoment = {
    MORNING: { value: 1, label: 'Matinée' },
    AFTERNOON: { value: 2, label: 'Après-midi' },
    TOTAL: { value: 3, label: 'Journée' },
  };

  // AbsenceReason constants
  const AbsenceReason = {
    JUSTIFIED_ABSENCE: { value: 1, label: 'Absence justifiée' },
    UNJUSTIFIED_ABSENCE: { value: 2, label: 'Absence non justifiée' },
    JUSTIFIED_LATE: { value: 3, label: 'Retard justifié' },
    UNJUSTIFIED_LATE: { value: 4, label: 'Retard non justifié' },
  };

  useEffect(() => {
    // Récupérer les données de la classe et initialiser les élèves filtrés
    if (schoolClassId) {
      fetchClasse(schoolClassId)
        .then((classeData) => {
          logger.debug('Classes récupérées :', classeData);
          setClasse(classeData);
          setFilteredStudents(classeData.students); // Initialiser les élèves filtrés
          setSelectedLevels(getNiveauxLabels(classeData.levels)); // Initialiser les niveaux sélectionnés
        })
        .catch(requestErrorHandler);
    }
  }, [schoolClassId]);

  useEffect(() => {
    // Récupérer les absences pour l'établissement sélectionné
    if (selectedEstablishmentId) {
      fetchAbsences(selectedEstablishmentId)
        .then((data) => {
          const absencesById = data.reduce((acc, absence) => {
            acc[absence.student] = absence;
            return acc;
          }, {});
          setFetchedAbsences(absencesById);
        })
        .catch((error) =>
          logger.error('Erreur lors de la récupération des absences :', error)
        );
    }
  }, [selectedEstablishmentId]);

  useEffect(() => {
    // Filtrer les élèves en fonction des niveaux sélectionnés
    if (classe && selectedLevels.length > 0) {
      const filtered = classe.students.filter((student) =>
        selectedLevels.includes(getNiveauLabel(student.level))
      );
      setFilteredStudents(filtered);
    } else {
      setFilteredStudents([]); // Aucun élève si aucun niveau n'est sélectionné
    }
  }, [selectedLevels, classe]);

  useEffect(() => {
    // Initialiser `attendance` et `formAbsences` en fonction des élèves filtrés et des absences
    if (filteredStudents.length > 0 && fetchedAbsences) {
      const today = new Date().toISOString().split('T')[0];

      const initialAttendance = {};
      const initialFormAbsences = {};

      filteredStudents.forEach((student) => {
        const existingAbsence =
          fetchedAbsences[student.id] &&
          fetchedAbsences[student.id].day === today
            ? fetchedAbsences[student.id]
            : null;

        if (existingAbsence) {
          // Si une absence existe pour aujourd'hui, décocher la case et pré-remplir les champs
          // Conversion reason -> type/justified
          let type = '';
          let justified = false;
          switch (existingAbsence.reason) {
            case AbsenceReason.JUSTIFIED_ABSENCE.value:
              type = 'absence';
              justified = true;
              break;
            case AbsenceReason.UNJUSTIFIED_ABSENCE.value:
              type = 'absence';
              justified = false;
              break;
            case AbsenceReason.JUSTIFIED_LATE.value:
              type = 'retard';
              justified = true;
              break;
            case AbsenceReason.UNJUSTIFIED_LATE.value:
              type = 'retard';
              justified = false;
              break;
            default:
              type = '';
              justified = false;
          }

          initialAttendance[student.id] = false;
          initialFormAbsences[student.id] = {
            ...existingAbsence,
            type,
            justified,
          };
        } else {
          // Sinon, cocher la case par défaut
          initialAttendance[student.id] = true;
        }
      });

      setAttendance(initialAttendance);
      setFormAbsences(initialFormAbsences);
    }
  }, [filteredStudents, fetchedAbsences]);

  // Load specialities for evaluations (filtered by current school year)
  useEffect(() => {
    if (selectedEstablishmentId) {
      const year = dayjs().month() >= 8 ? dayjs().year() : dayjs().year() - 1;
      const currentSchoolYear = `${year}-${year + 1}`;
      fetchSpecialities(selectedEstablishmentId, currentSchoolYear)
        .then((data) => setSpecialities(data))
        .catch((error) =>
          logger.error('Erreur lors du chargement des matières:', error)
        );
    }
  }, [selectedEstablishmentId]);

  // Load evaluations when tab is active and period is selected
  useEffect(() => {
    if (
      activeTab === 'evaluations' &&
      selectedEstablishmentId &&
      schoolClassId &&
      selectedPeriod
    ) {
      fetchEvaluations(selectedEstablishmentId, schoolClassId, selectedPeriod)
        .then((data) => setEvaluations(data))
        .catch((error) =>
          logger.error('Erreur lors du chargement des évaluations:', error)
        );
    }
  }, [activeTab, selectedEstablishmentId, schoolClassId, selectedPeriod]);

  // Load student evaluations when grading
  useEffect(() => {
    if (selectedEvaluation && schoolClassId) {
      fetchStudentEvaluations(null, selectedEvaluation.id, null, schoolClassId)
        .then((data) => setStudentEvaluations(data))
        .catch((error) =>
          logger.error('Erreur lors du chargement des notes:', error)
        );
    }
  }, [selectedEvaluation, schoolClassId]);

  // Handlers for evaluations
  const handleCreateEvaluation = async (data) => {
    try {
      await createEvaluation(data, csrfToken);
      showNotification('Évaluation créée avec succès', 'success', 'Succès');
      setShowEvaluationForm(false);
      // Reload evaluations
      const updatedEvaluations = await fetchEvaluations(
        selectedEstablishmentId,
        schoolClassId,
        selectedPeriod
      );
      setEvaluations(updatedEvaluations);
    } catch (error) {
      logger.error('Erreur lors de la création:', error);
      showNotification('Erreur lors de la création', 'error', 'Erreur');
    }
  };

  const handleEditEvaluation = (evaluation) => {
    setEditingEvaluation(evaluation);
    setShowEvaluationForm(true);
  };

  const handleUpdateEvaluation = async (data) => {
    try {
      await updateEvaluation(editingEvaluation.id, data, csrfToken);
      showNotification('Évaluation modifiée avec succès', 'success', 'Succès');
      setShowEvaluationForm(false);
      setEditingEvaluation(null);
      // Reload evaluations
      const updatedEvaluations = await fetchEvaluations(
        selectedEstablishmentId,
        schoolClassId,
        selectedPeriod
      );
      setEvaluations(updatedEvaluations);
    } catch (error) {
      logger.error('Erreur lors de la modification:', error);
      showNotification('Erreur lors de la modification', 'error', 'Erreur');
    }
  };

  const handleDeleteEvaluation = async (evaluationId) => {
    await deleteEvaluation(evaluationId, csrfToken);
    // Reload evaluations
    const updatedEvaluations = await fetchEvaluations(
      selectedEstablishmentId,
      schoolClassId,
      selectedPeriod
    );
    setEvaluations(updatedEvaluations);
  };

  const handleSaveGrades = async (gradesData) => {
    await saveStudentEvaluations(gradesData, csrfToken);
    // Reload student evaluations
    const updatedStudentEvaluations = await fetchStudentEvaluations(
      null,
      selectedEvaluation.id,
      null,
      schoolClassId
    );
    setStudentEvaluations(updatedStudentEvaluations);
  };

  const handleDeleteGrade = async (studentEvalId) => {
    await deleteStudentEvaluation(studentEvalId, csrfToken);
    setStudentEvaluations((prev) =>
      prev.filter((se) => se.id !== studentEvalId)
    );
  };

  const handleLevelClick = (label) => {
    setSelectedLevels(
      (prev) =>
        prev.includes(label)
          ? prev.filter((level) => level !== label) // Retirer le niveau si déjà sélectionné
          : [...prev, label] // Ajouter le niveau si non sélectionné
    );
  };

  const handleToggleAttendanceMode = () => {
    setIsEditingAttendance((prev) => !prev); // Basculer entre mode édition et visualisation
  };

  const handleValidateAttendance = () => {
    let hasError = false;

    // Pour chaque élève filtré (présents et absents)
    filteredStudents.forEach((student) => {
      const studentId = student.id;
      const isPresent = attendance[studentId];
      const existingAbsence = fetchedAbsences[studentId];

      if (isPresent) {
        // Si l'élève est présent et qu'une absence existe, la supprimer
        if (existingAbsence) {
          deleteAbsences(existingAbsence.id, csrfToken)
            .then(() => {
              logger.debug(
                `Absence pour l'élève ${studentId} supprimée (présent).`
              );
              setFetchedAbsences((prev) => {
                const updatedAbsences = { ...prev };
                delete updatedAbsences[studentId];
                return updatedAbsences;
              });
              setFormAbsences((prev) => {
                const updatedAbsences = { ...prev };
                delete updatedAbsences[studentId];
                return updatedAbsences;
              });
            })
            .catch((error) => {
              logger.error(
                `Erreur lors de la suppression de l'absence pour l'élève ${studentId}:`,
                error
              );
              showNotification(
                `Erreur lors de la suppression de l'absence pour l'élève ${studentId}`,
                'error',
                'Erreur'
              );
            });
        }
        // Si tu veux garder une trace de la présence, tu peux ici appeler une API ou enregistrer un "Présent"
      } else {
        // Si l'élève est absent, créer ou modifier l'absence
        const absenceData = formAbsences[studentId];
        if (!absenceData || !absenceData.type || !absenceData.moment) {
          logger.error(
            `Tous les champs requis doivent être fournis pour l'élève ${studentId}.`
          );
          showNotification(
            `Tous les champs requis doivent être fournis pour l'élève ${studentId}.`,
            'error',
            'Erreur'
          );
          hasError = true;
          // On ne fait pas de return ici, on continue la boucle pour les autres élèves
        } else {
          saveAbsence(studentId, absenceData);
        }
      }
    });

    // On ne quitte le mode édition que s'il n'y a pas d'erreur
    if (!hasError) {
      setIsEditingAttendance(false);
    }
  };

  const handleAttendanceChange = (studentId) => {
    const today = new Date().toISOString().split('T')[0]; // Obtenir la date actuelle au format YYYY-MM-DD

    setAttendance((prev) => {
      const updatedAttendance = {
        ...prev,
        [studentId]: !prev[studentId], // Inverser l'état de présence
      };

      // Si l'élève est décoché (absent)
      if (!updatedAttendance[studentId]) {
        // Vérifier s'il existe une absence pour le jour actuel
        const existingAbsence = Object.values(fetchedAbsences).find(
          (absence) => absence.student === studentId && absence.day === today
        );

        if (existingAbsence) {
          // Afficher l'absence existante pour le jour actuel
          setFormAbsences((prev) => ({
            ...prev,
            [studentId]: {
              ...existingAbsence,
            },
          }));
        } else {
          // Initialiser des champs vides pour créer une nouvelle absence
          setFormAbsences((prev) => ({
            ...prev,
            [studentId]: {
              day: today,
              reason: null,
              moment: null,
            },
          }));
        }
      } else {
        // Si l'élève est recoché (présent), supprimer l'absence existante
        const existingAbsence = Object.values(fetchedAbsences).find(
          (absence) => absence.student === studentId && absence.day === today
        );

        if (existingAbsence) {
          // Appeler la fonction pour supprimer l'absence
          deleteAbsences(existingAbsence.id, csrfToken)
            .then(() => {
              logger.debug(
                `Absence pour l'élève ${studentId} supprimée avec succès.`
              );
              // Mettre à jour les absences récupérées
              setFetchedAbsences((prev) => {
                const updatedAbsences = { ...prev };
                delete updatedAbsences[studentId];
                return updatedAbsences;
              });
            })
            .catch((error) => {
              logger.error(
                `Erreur lors de la suppression de l'absence pour l'élève ${studentId}:`,
                error
              );
            });
        }

        // Supprimer les données d'absence dans `formAbsences`
        setFormAbsences((prev) => {
          const updatedAbsences = { ...prev };
          delete updatedAbsences[studentId];
          return updatedAbsences;
        });
      }

      return updatedAttendance;
    });
  };

  const getAbsenceReason = (type, justified) => {
    if (type === 'absence') {
      return justified
        ? AbsenceReason.JUSTIFIED_ABSENCE.value
        : AbsenceReason.UNJUSTIFIED_ABSENCE.value;
    } else if (type === 'retard') {
      return justified
        ? AbsenceReason.JUSTIFIED_LATE.value
        : AbsenceReason.UNJUSTIFIED_LATE.value;
    }
    return null;
  };

  const saveAbsence = (studentId, absenceData) => {
    if (!absenceData.type || !studentId || !absenceData.moment) {
      logger.error('Tous les champs requis doivent être fournis.');
      showNotification(
        'Tous les champs requis doivent être fournis.',
        'error',
        'Erreur'
      );
      return;
    }

    const reason = getAbsenceReason(absenceData.type, absenceData.justified);

    const payload = {
      student: studentId,
      day: absenceData.day,
      reason: reason,
      moment: absenceData.moment,
      establishment: selectedEstablishmentId,
      commentaire: absenceData.commentaire,
    };

    if (absenceData.id) {
      // Modifier une absence existante
      editAbsences(absenceData.id, payload, csrfToken)
        .then(() => {
          logger.debug(
            `Absence pour l'élève ${studentId} modifiée avec succès.`
          );
          showNotification(
            'Opération effectuée avec succès.',
            'success',
            'Succès'
          );
          // Mettre à jour fetchedAbsences et formAbsences localement
          setFetchedAbsences((prev) => ({
            ...prev,
            [studentId]: { ...prev[studentId], ...payload },
          }));
          setFormAbsences((prev) => ({
            ...prev,
            [studentId]: { ...prev[studentId], ...payload },
          }));
        })
        .catch((error) => {
          logger.error(
            `Erreur lors de la modification de l'absence pour l'élève ${studentId}:`,
            error
          );
        });
    } else {
      // Créer une nouvelle absence
      createAbsences(payload, csrfToken)
        .then((response) => {
          logger.debug(`Absence pour l'élève ${studentId} créée avec succès.`);
          showNotification(
            'Opération effectuée avec succès.',
            'success',
            'Succès'
          );
          // Mettre à jour fetchedAbsences et formAbsences localement
          setFetchedAbsences((prev) => ({
            ...prev,
            [studentId]: { id: response.id, ...payload },
          }));
          setFormAbsences((prev) => ({
            ...prev,
            [studentId]: { id: response.id, ...payload },
          }));
        })
        .catch((error) => {
          logger.error(
            `Erreur lors de la création de l'absence pour l'élève ${studentId}:`,
            error
          );
        });
    }
  };

  const requestErrorHandler = (err) => {
    logger.error('Error fetching data:', err);
  };

  const today = new Date().toISOString().split('T')[0]; // Obtenez la date actuelle au format YYYY-MM-DD

  return (
    <div className="p-6 space-y-6">
      <h1 className="font-headline text-2xl font-bold">
        {classe?.atmosphere_name}
      </h1>

      {/* Section Niveaux et Enseignants */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        {/* Section Niveaux */}
        <div className="bg-white p-4 rounded-md shadow-sm">
          <h2 className="font-headline text-xl font-semibold mb-4 flex items-center">
            <Layers className="w-6 h-6 mr-2 text-primary" />
            Niveaux
          </h2>
          <p className="text-sm text-gray-500 mb-4">
            Filtrer les élèves par niveau
          </p>
          <div className="flex flex-wrap gap-2">
            {classe?.levels?.length > 0 ? (
              getNiveauxLabels(classe.levels).map((label, index) => (
                <button
                  key={index}
                  onClick={() => handleLevelClick(label)}
                  className={`px-4 py-2 rounded font-label font-medium cursor-pointer border transition-colors min-h-[44px] ${
                    selectedLevels.includes(label)
                      ? 'bg-primary/20 text-secondary border-primary/30 shadow-sm'
                      : 'bg-gray-200 text-gray-800 border-gray-300 hover:bg-gray-300'
                  }`}
                >
                  {selectedLevels.includes(label) ? (
                    <span className="flex items-center gap-2">
                      <CheckCircle className="w-4 h-4 text-primary" />
                      {label}
                    </span>
                  ) : (
                    label
                  )}
                </button>
              ))
            ) : (
              <span className="text-gray-500">Aucun niveau associé</span>
            )}
          </div>
        </div>

        {/* Section Enseignants */}
        <div className="bg-white p-4 rounded-md shadow-sm">
          <h2 className="font-headline text-xl font-semibold mb-4 flex items-center">
            <Users className="w-6 h-6 mr-2 text-primary" />
            Enseignants
          </h2>
          <p className="text-sm text-gray-500 mb-4">Liste des enseignants</p>
          <div className="flex flex-wrap gap-2">
            {classe?.teachers_details?.map((teacher) => (
              <span
                key={teacher.id}
                className="px-3 py-1 bg-primary/20 rounded text-secondary font-label text-sm"
              >
                {teacher.last_name} {teacher.first_name}
              </span>
            ))}
          </div>
        </div>
      </div>

      {/* Tabs Navigation */}
      <div className="bg-white rounded-md shadow-sm overflow-hidden">
        <div className="flex border-b border-gray-200">
          <button
            onClick={() => setActiveTab('attendance')}
            className={`flex-1 py-3 px-4 text-center font-label font-medium transition-colors min-h-[44px] ${
              activeTab === 'attendance'
                ? 'text-primary border-b-2 border-primary bg-primary/5'
                : 'text-gray-500 hover:text-secondary hover:bg-gray-50'
            }`}
          >
            <div className="flex items-center justify-center gap-2">
              <Clock className="w-5 h-5" />
              Appel du jour
            </div>
          </button>
          <button
            onClick={() => setActiveTab('evaluations')}
            className={`flex-1 py-3 px-4 text-center font-label font-medium transition-colors min-h-[44px] ${
              activeTab === 'evaluations'
                ? 'text-primary border-b-2 border-primary bg-primary/5'
                : 'text-gray-500 hover:text-secondary hover:bg-gray-50'
            }`}
          >
            <div className="flex items-center justify-center gap-2">
              <ClipboardList className="w-5 h-5" />
              Évaluations
            </div>
          </button>
        </div>
      </div>

      {/* Tab Content: Attendance */}
      {activeTab === 'attendance' && (
        <>
          {/* Affichage de la date du jour */}
          <div className="flex justify-between items-center mb-4 bg-white p-4 rounded-md shadow-sm">
            <div className="flex items-center space-x-3">
              <div className="flex items-center justify-center w-10 h-10 bg-primary/10 text-primary rounded">
                <Clock className="w-6 h-6" />
              </div>
              <h2 className="font-headline text-lg font-semibold text-gray-800">
                Appel du jour :{' '}
                <span className="ml-2 text-primary">{today}</span>
              </h2>
            </div>
            <div className="flex items-center">
              {!isEditingAttendance ? (
                <Button
                  text="Faire l'appel"
                  onClick={handleToggleAttendanceMode}
                  primary
                  className="px-4 py-2 bg-primary text-white font-label font-medium rounded shadow-sm hover:bg-secondary transition-colors min-h-[44px]"
                />
              ) : (
                <Button
                  text="Valider l'appel"
                  onClick={handleValidateAttendance}
                  primary
                  className="px-4 py-2 bg-primary text-white font-label font-medium rounded shadow-sm hover:bg-secondary transition-colors min-h-[44px]"
                />
              )}
            </div>
          </div>

          <Table
            columns={[
              {
                name: 'Nom',
                transform: (row) => (
                  <div className="text-center">{row.last_name}</div>
                ),
              },
              {
                name: 'Prénom',
                transform: (row) => (
                  <div className="text-center">{row.first_name}</div>
                ),
              },
              {
                name: 'Niveau',
                transform: (row) => (
                  <div className="text-center">{getNiveauLabel(row.level)}</div>
                ),
              },
              ...(isEditingAttendance
                ? [
                    {
                      name: "Gestion de l'appel",
                      transform: (row) => (
                        <div className="flex flex-col gap-2 items-center">
                          {/* Présence */}
                          <div className="flex items-center gap-2">
                            {attendance[row.id] ? (
                              <>
                                <CheckBox
                                  item={{ id: row.id }}
                                  formData={{
                                    attendance: attendance[row.id]
                                      ? [row.id]
                                      : [],
                                  }}
                                  handleChange={() =>
                                    handleAttendanceChange(row.id)
                                  }
                                  fieldName="attendance"
                                />
                                <span className="text-sm font-medium text-gray-700">
                                  Présent
                                </span>
                              </>
                            ) : (
                              <>
                                {/* Icône croix pour remettre l'élève en présent */}
                                <button
                                  type="button"
                                  onClick={() => handleAttendanceChange(row.id)}
                                  className="text-red-500 hover:text-red-700 transition"
                                  title="Annuler l'absence"
                                >
                                  <XCircle className="w-6 h-6" />
                                </button>
                                <span className="text-sm font-medium text-red-600">
                                  Effacer l&apos;absence
                                </span>
                              </>
                            )}
                          </div>

                          {/* Détails absence/retard */}
                          {!attendance[row.id] && (
                            <div className="w-full bg-primary/5 border border-primary/10 rounded-lg p-3 mt-2 shadow-sm">
                              <div className="flex items-center gap-2 mb-2">
                                <Clock className="w-4 h-4 text-primary" />
                                <span className="font-semibold text-secondary text-sm">
                                  Motif d&apos;absence
                                </span>
                              </div>
                              <div className="grid grid-cols-1 md:grid-cols-4 gap-2 items-center">
                                {/* Select Absence/Retard */}
                                <SelectChoice
                                  name={`type-${row.id}`}
                                  label=""
                                  placeHolder="Type"
                                  selected={formAbsences[row.id]?.type || ''}
                                  callback={(e) =>
                                    setFormAbsences((prev) => ({
                                      ...prev,
                                      [row.id]: {
                                        ...prev[row.id],
                                        type: e.target.value,
                                      },
                                    }))
                                  }
                                  choices={[
                                    { value: 'absence', label: 'Absence' },
                                    { value: 'retard', label: 'Retard' },
                                  ]}
                                />

                                {/* Select Moment */}
                                <SelectChoice
                                  name={`moment-${row.id}`}
                                  label=""
                                  placeHolder="Durée"
                                  selected={formAbsences[row.id]?.moment || ''}
                                  callback={(e) =>
                                    setFormAbsences((prev) => ({
                                      ...prev,
                                      [row.id]: {
                                        ...prev[row.id],
                                        moment: parseInt(e.target.value, 10),
                                      },
                                    }))
                                  }
                                  choices={Object.values(AbsenceMoment).map(
                                    (moment) => ({
                                      value: moment.value,
                                      label: moment.label,
                                    })
                                  )}
                                />

                                {/* Nouveau champ commentaire */}
                                <input
                                  type="text"
                                  className="border rounded px-2 py-1 text-sm w-full"
                                  placeholder="Commentaire"
                                  value={
                                    formAbsences[row.id]?.commentaire || ''
                                  }
                                  onChange={(e) =>
                                    setFormAbsences((prev) => ({
                                      ...prev,
                                      [row.id]: {
                                        ...prev[row.id],
                                        commentaire: e.target.value,
                                      },
                                    }))
                                  }
                                />

                                {/* Checkbox Justifié */}
                                <div className="flex items-center gap-2 justify-center">
                                  <CheckBox
                                    item={{ id: `justified-${row.id}` }}
                                    formData={{
                                      justified:
                                        !!formAbsences[row.id]?.justified,
                                    }}
                                    handleChange={() =>
                                      setFormAbsences((prev) => ({
                                        ...prev,
                                        [row.id]: {
                                          ...prev[row.id],
                                          justified: !prev[row.id]?.justified,
                                        },
                                      }))
                                    }
                                    fieldName="justified"
                                    itemLabelFunc={() => 'Justifié'}
                                  />
                                </div>
                              </div>
                            </div>
                          )}
                        </div>
                      ),
                    },
                  ]
                : [
                    {
                      name: 'Statut',
                      transform: (row) => {
                        const today = new Date().toISOString().split('T')[0];
                        const absence =
                          formAbsences[row.id] ||
                          Object.values(fetchedAbsences).find(
                            (absence) =>
                              absence.student === row.id &&
                              absence.day === today
                          );

                        if (!absence) {
                          return (
                            <div className="text-center text-green-500 flex justify-center items-center gap-2">
                              <CheckCircle className="w-5 h-5" />
                              Présent
                            </div>
                          );
                        }

                        switch (absence.reason) {
                          case AbsenceReason.JUSTIFIED_LATE.value:
                            return (
                              <div className="text-center text-yellow-500 flex justify-center items-center gap-2">
                                <Clock className="w-5 h-5" />
                                Retard justifié
                              </div>
                            );
                          case AbsenceReason.UNJUSTIFIED_LATE.value:
                            return (
                              <div className="text-center text-red-500 flex justify-center items-center gap-2">
                                <Clock className="w-5 h-5" />
                                Retard non justifié
                              </div>
                            );
                          case AbsenceReason.JUSTIFIED_ABSENCE.value:
                            return (
                              <div className="text-center text-blue-500 flex justify-center items-center gap-2">
                                <CheckCircle className="w-5 h-5" />
                                Absence justifiée
                              </div>
                            );
                          case AbsenceReason.UNJUSTIFIED_ABSENCE.value:
                            return (
                              <div className="text-center text-red-500 flex justify-center items-center gap-2">
                                <CheckCircle className="w-5 h-5" />
                                Absence non justifiée
                              </div>
                            );
                          default:
                            return (
                              <div className="text-center text-gray-500 flex justify-center items-center gap-2">
                                <CheckCircle className="w-5 h-5" />
                                Statut inconnu
                              </div>
                            );
                        }
                      },
                    },
                  ]),
            ]}
            data={filteredStudents} // Utiliser les élèves filtrés
          />
        </>
      )}

      {/* Tab Content: Evaluations */}
      {activeTab === 'evaluations' && (
        <div className="space-y-4">
          {/* Header avec sélecteur de période et bouton d'ajout */}
          <div className="bg-white p-4 rounded-md shadow-sm border border-gray-200">
            <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
              <div className="flex items-center gap-4">
                <ClipboardList className="w-6 h-6 text-primary" />
                <h2 className="font-headline text-lg font-semibold text-gray-800">
                  Évaluations de la classe
                </h2>
              </div>
              <div className="flex items-center gap-3 w-full sm:w-auto">
                <div className="w-48">
                  <SelectChoice
                    name="period"
                    placeHolder="Période"
                    choices={getPeriods()}
                    selected={selectedPeriod || ''}
                    callback={(e) => setSelectedPeriod(e.target.value)}
                  />
                </div>
                <Button
                  primary
                  text="Nouvelle évaluation"
                  icon={<Plus size={16} />}
                  onClick={() => setShowEvaluationForm(true)}
                />
              </div>
            </div>
          </div>

          {/* Formulaire de création/édition d'évaluation */}
          {showEvaluationForm && (
            <EvaluationForm
              specialities={specialities}
              period={selectedPeriod}
              schoolClassId={parseInt(schoolClassId)}
              establishmentId={selectedEstablishmentId}
              initialValues={editingEvaluation}
              onSubmit={
                editingEvaluation
                  ? handleUpdateEvaluation
                  : handleCreateEvaluation
              }
              onCancel={() => {
                setShowEvaluationForm(false);
                setEditingEvaluation(null);
              }}
            />
          )}

          {/* Liste des évaluations */}
          <div className="bg-white p-4 rounded-md shadow-sm border border-gray-200">
            <EvaluationList
              evaluations={evaluations}
              onDelete={handleDeleteEvaluation}
              onEdit={handleEditEvaluation}
              onGradeStudents={(evaluation) =>
                setSelectedEvaluation(evaluation)
              }
            />
          </div>

          {/* Modal de notation */}
          {selectedEvaluation && (
            <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
              <div className="w-full max-w-4xl max-h-[90vh] overflow-auto">
                <EvaluationGradeTable
                  evaluation={selectedEvaluation}
                  students={filteredStudents}
                  studentEvaluations={studentEvaluations}
                  onSave={handleSaveGrades}
                  onClose={() => setSelectedEvaluation(null)}
                  onDeleteGrade={handleDeleteGrade}
                />
              </div>
            </div>
          )}
        </div>
      )}

      {/* Popup */}
      <Popup
        isOpen={popupVisible}
        message={popupMessage}
        onConfirm={() => setPopupVisible(false)}
        onCancel={() => setPopupVisible(false)}
        uniqueConfirmButton={true}
      />
    </div>
  );
}
