'use client';
import React, { useState, useEffect } from 'react';
import SelectChoice from '@/components/Form/SelectChoice';
import AcademicResults from '@/components/Grades/AcademicResults';
import Attendance from '@/components/Grades/Attendance';
import Remarks from '@/components/Grades/Remarks';
import WorkPlan from '@/components/Grades/WorkPlan';
import Homeworks from '@/components/Grades/Homeworks';
import SpecificEvaluations from '@/components/Grades/SpecificEvaluations';
import Orientation from '@/components/Grades/Orientation';
import GradesStatsCircle from '@/components/Grades/GradesStatsCircle';
import Button from '@/components/Form/Button';
import logger from '@/utils/logger';
import {
  FE_ADMIN_GRADES_STUDENT_COMPETENCIES_URL,
  BASE_URL,
} from '@/utils/Url';
import { useRouter } from 'next/navigation';
import {
  fetchStudents,
  fetchStudentCompetencies,
  searchStudents,
  fetchAbsences,
  editAbsences,
  deleteAbsences,
} from '@/app/actions/subscriptionAction';
import { useEstablishment } from '@/context/EstablishmentContext';
import { useClasses } from '@/context/ClassesContext';
import { Award, FileText } from 'lucide-react';
import SectionHeader from '@/components/SectionHeader';
import GradesDomainBarChart from '@/components/Grades/GradesDomainBarChart';
import InputText from '@/components/Form/InputText';
import dayjs from 'dayjs';
import { useCsrfToken } from '@/context/CsrfContext';

export default function Page() {
  const router = useRouter();
  const csrfToken = useCsrfToken();
  const { selectedEstablishmentId, selectedEstablishmentEvaluationFrequency } =
    useEstablishment();
  const { getNiveauLabel } = useClasses();
  const [formData, setFormData] = useState({
    selectedStudent: null,
  });

  const [students, setStudents] = useState([]);
  const [studentCompetencies, setStudentCompetencies] = useState(null);
  const [grades, setGrades] = useState({});
  const [searchTerm, setSearchTerm] = useState('');
  const [selectedPeriod, setSelectedPeriod] = useState(null);
  const [allAbsences, setAllAbsences] = useState([]);

  // Définir les périodes selon la fréquence
  const getPeriods = () => {
    if (selectedEstablishmentEvaluationFrequency === 1) {
      return [
        { label: 'Trimestre 1', value: 1, start: '09-01', end: '12-31' },
        { label: 'Trimestre 2', value: 2, start: '01-01', end: '03-31' },
        { label: 'Trimestre 3', value: 3, start: '04-01', end: '07-15' },
      ];
    }
    if (selectedEstablishmentEvaluationFrequency === 2) {
      return [
        { label: 'Semestre 1', value: 1, start: '09-01', end: '01-31' },
        { label: 'Semestre 2', value: 2, start: '02-01', end: '07-15' },
      ];
    }
    if (selectedEstablishmentEvaluationFrequency === 3) {
      return [{ label: 'Année', value: 1, start: '09-01', end: '07-15' }];
    }
    return [];
  };

  // Sélection automatique de la période courante
  useEffect(() => {
    if (!formData.selectedStudent) {
      setSelectedPeriod(null);
      return;
    }
    const periods = getPeriods();
    const today = dayjs();
    const current = periods.find((p) => {
      const start = dayjs(`${today.year()}-${p.start}`);
      const end = dayjs(`${today.year()}-${p.end}`);
      return (
        today.isAfter(start.subtract(1, 'day')) &&
        today.isBefore(end.add(1, 'day'))
      );
    });
    setSelectedPeriod(current ? current.value : null);
  }, [formData.selectedStudent, selectedEstablishmentEvaluationFrequency]);

  const academicResults = [
    {
      subject: 'Mathématiques',
      grade: 16,
      average: 14,
      appreciation: 'Très bon travail',
    },
    {
      subject: 'Français',
      grade: 15,
      average: 13,
      appreciation: 'Bonne participation',
    },
  ];

  const remarks = [
    {
      date: '2023-09-10',
      teacher: 'Mme Dupont',
      comment: 'Participation active en classe.',
    },
    {
      date: '2023-09-20',
      teacher: 'M. Martin',
      comment: 'Doit améliorer la concentration.',
    },
  ];

  const workPlan = [
    {
      objective: 'Renforcer la lecture',
      support: 'Exercices hebdomadaires',
      followUp: 'En cours',
    },
    {
      objective: 'Maîtriser les tables de multiplication',
      support: 'Jeux éducatifs',
      followUp: 'À démarrer',
    },
  ];

  const homeworks = [
    { title: 'Rédaction', dueDate: '2023-10-10', status: 'Rendu' },
    { title: 'Exercices de maths', dueDate: '2023-10-12', status: 'À faire' },
  ];

  const specificEvaluations = [
    {
      test: 'Bilan de compétences',
      date: '2023-09-25',
      result: 'Bon niveau général',
    },
  ];

  const orientation = [
    {
      date: '2023-10-01',
      counselor: 'Mme Leroy',
      advice: 'Poursuivre en filière générale',
    },
  ];

  const handleChange = (field, value) =>
    setFormData((prev) => ({ ...prev, [field]: value }));

  useEffect(() => {
    if (selectedEstablishmentId) {
      fetchStudents(selectedEstablishmentId, null, 5)
        .then((studentsData) => {
          setStudents(studentsData);
        })
        .catch((error) => logger.error('Error fetching students:', error));
    }
  }, [selectedEstablishmentId]);

  // Charger les compétences et générer les grades à chaque changement d'élève sélectionné
  useEffect(() => {
    if (formData.selectedStudent && selectedPeriod) {
      const periodString = getPeriodString(
        selectedPeriod,
        selectedEstablishmentEvaluationFrequency
      );
      fetchStudentCompetencies(formData.selectedStudent, periodString)
        .then((data) => {
          setStudentCompetencies(data);
          // Générer les grades à partir du retour API
          if (data && data.data) {
            const initialGrades = {};
            data.data.forEach((domaine) => {
              domaine.categories.forEach((cat) => {
                cat.competences.forEach((comp) => {
                  initialGrades[comp.competence_id] = comp.score ?? 0;
                });
              });
            });
            setGrades(initialGrades);
          }
        })
        .catch((error) =>
          logger.error('Error fetching studentCompetencies:', error)
        );
    } else {
      setGrades({});
      setStudentCompetencies(null);
    }
  }, [formData.selectedStudent, selectedPeriod]);

  useEffect(() => {
    if (selectedEstablishmentId) {
      fetchAbsences(selectedEstablishmentId)
        .then((data) => setAllAbsences(data))
        .catch((error) =>
          logger.error('Erreur lors du fetch des absences:', error)
        );
    }
  }, [selectedEstablishmentId]);

  // Transforme les absences backend pour l'élève sélectionné
  const absences = React.useMemo(() => {
    if (!formData.selectedStudent) return [];
    return allAbsences
      .filter((a) => a.student === formData.selectedStudent)
      .map((a) => ({
        id: a.id,
        date: a.day,
        type: [2, 1].includes(a.reason) ? 'Absence' : 'Retard',
        reason: a.reason, // tu peux mapper le code vers un label si besoin
        justified: [1, 3].includes(a.reason), // 1 et 3 = justifié
        moment: a.moment,
        commentaire: a.commentaire,
      }));
  }, [allAbsences, formData.selectedStudent]);

  // Fonction utilitaire pour convertir la période sélectionnée en string backend
  function getPeriodString(selectedPeriod, frequency) {
    const year = dayjs().month() >= 8 ? dayjs().year() : dayjs().year() - 1; // année scolaire commence en septembre
    const nextYear = (year + 1).toString();
    const schoolYear = `${year}-${nextYear}`;
    if (frequency === 1) return `T${selectedPeriod}_${schoolYear}`;
    if (frequency === 2) return `S${selectedPeriod}_${schoolYear}`;
    if (frequency === 3) return `A_${schoolYear}`;
    return '';
  }

  // Callback pour justifier/non justifier une absence
  const handleToggleJustify = (absence) => {
    // Inverser l'état justifié (1/3 = justifié, 2/4 = non justifié)
    const newReason =
      absence.type === 'Absence'
        ? absence.justified
          ? 2 // Absence non justifiée
          : 1 // Absence justifiée
        : absence.justified
          ? 4 // Retard non justifié
          : 3; // Retard justifié

    editAbsences(absence.id, { ...absence, reason: newReason }, csrfToken)
      .then(() => {
        setAllAbsences((prev) =>
          prev.map((a) =>
            a.id === absence.id ? { ...a, reason: newReason } : a
          )
        );
      })
      .catch((e) => {
        logger.error('Erreur lors du changement de justification', e);
      });
  };

  // Callback pour supprimer une absence
  const handleDeleteAbsence = (absence) => {
    return deleteAbsences(absence.id, csrfToken)
      .then(() => {
        setAllAbsences((prev) => prev.filter((a) => a.id !== absence.id));
      })
      .catch((e) => {
        logger.error("Erreur lors de la suppression de l'absence", e);
      });
  };

  return (
    <div className="p-8 space-y-8">
      <SectionHeader
        icon={Award}
        title="Suivi pédagogique"
        description="Suivez le parcours d'un élève"
      />

      {/* Section haute : filtre + bouton + photo élève */}
      <div className="flex flex-row gap-8 items-start">
        {/* Colonne gauche : InputText + bouton */}
        <div className="w-4/5 flex items-end gap-4">
          <div className="flex-[3_3_0%]">
            <InputText
              name="studentSearch"
              type="text"
              label="Recherche élève"
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              placeholder="Rechercher un élève"
              required={false}
              enable={true}
            />
          </div>
          <div className="flex-[1_1_0%]">
            <SelectChoice
              name="period"
              label="Période"
              placeHolder="Choisir la période"
              choices={getPeriods().map((period) => {
                const today = dayjs();
                const start = dayjs(`${today.year()}-${period.start}`);
                const end = dayjs(`${today.year()}-${period.end}`);
                const isPast = today.isAfter(end);
                return {
                  value: period.value,
                  label: period.label,
                  disabled: isPast,
                };
              })}
              selected={selectedPeriod || ''}
              callback={(e) => setSelectedPeriod(Number(e.target.value))}
              disabled={!formData.selectedStudent}
            />
          </div>
          <div className="flex-[1_1_0%] flex items-end">
            <Button
              primary
              onClick={() => {
                const periodString = getPeriodString(
                  selectedPeriod,
                  selectedEstablishmentEvaluationFrequency
                );
                const url = `${FE_ADMIN_GRADES_STUDENT_COMPETENCIES_URL}?studentId=${formData.selectedStudent}&period=${periodString}`;
                router.push(url);
              }}
              className="mb-1 px-4 py-2 rounded-md shadow bg-emerald-500 text-white hover:bg-emerald-600 w-full"
              icon={<Award className="w-6 h-6" />}
              text="Evaluer"
              title="Evaluez l'élève"
              disabled={!formData.selectedStudent || !selectedPeriod}
            />
          </div>
        </div>
        {/* Colonne droite : Photo élève */}
        <div className="w-1/5 flex flex-col items-center justify-center">
          {formData.selectedStudent &&
            (() => {
              const student = students.find(
                (s) => s.id === formData.selectedStudent
              );
              if (!student) return null;
              return (
                <>
                  {student.photo ? (
                    <img
                      src={`${BASE_URL}${student.photo}`}
                      alt={`${student.first_name} ${student.last_name}`}
                      className="w-32 h-32 object-cover rounded-full border-4 border-emerald-200 mb-4 shadow"
                    />
                  ) : (
                    <div className="w-24 h-24 flex items-center justify-center bg-gray-200 rounded-full text-gray-500 font-bold text-3xl mb-4 border-4 border-emerald-100">
                      {student.first_name?.[0]}
                      {student.last_name?.[0]}
                    </div>
                  )}
                </>
              );
            })()}
        </div>
      </div>

      {/* Section basse : liste élèves + infos */}
      <div className="flex flex-row gap-8 items-start mt-8">
        {/* Colonne 1 : Liste des élèves */}
        <div className="w-full max-w-xs">
          <h3 className="text-lg font-semibold text-emerald-700 mb-4">
            Liste des élèves
          </h3>
          <ul className="rounded-lg bg-stone-50 shadow border border-gray-100">
            {students
              .filter(
                (student) =>
                  !searchTerm ||
                  `${student.last_name} ${student.first_name}`
                    .toLowerCase()
                    .includes(searchTerm.toLowerCase())
              )
              .map((student) => (
                <li
                  key={student.id}
                  className={`flex items-center gap-4 px-4 py-3 hover:bg-emerald-100 cursor-pointer transition ${
                    formData.selectedStudent === student.id
                      ? 'bg-emerald-100 border-l-4 border-emerald-400'
                      : 'border-l-2 border-gray-200'
                  }`}
                  onClick={() => handleChange('selectedStudent', student.id)}
                >
                  {student.photo ? (
                    <img
                      src={`${BASE_URL}${student.photo}`}
                      alt={`${student.first_name} ${student.last_name}`}
                      className="w-10 h-10 object-cover rounded-full border-2 border-emerald-200"
                    />
                  ) : (
                    <div className="w-10 h-10 flex items-center justify-center bg-gray-200 rounded-full text-gray-500 font-bold text-lg border-2 border-emerald-100">
                      {student.first_name?.[0]}
                      {student.last_name?.[0]}
                    </div>
                  )}
                  <div className="flex-1">
                    <div className="font-semibold text-emerald-800">
                      {student.last_name} {student.first_name}
                    </div>
                    <div className="text-xs text-gray-600">
                      Niveau :{' '}
                      <span className="font-medium">
                        {getNiveauLabel(student.level)}
                      </span>
                      {' | '}
                      Classe :{' '}
                      <span className="font-medium">
                        {student.associated_class_name}
                      </span>
                    </div>
                  </div>
                  {/* Icône PDF si bilan dispo pour la période sélectionnée */}
                  {selectedPeriod &&
                    student.bilans &&
                    Array.isArray(student.bilans) &&
                    (() => {
                      // Génère la string de période attendue
                      const periodString = getPeriodString(
                        selectedPeriod,
                        selectedEstablishmentEvaluationFrequency
                      );
                      const bilan = student.bilans.find(
                        (b) => b.period === periodString && b.file
                      );
                      if (bilan) {
                        return (
                          <a
                            href={`${BASE_URL}${bilan.file}`}
                            target="_blank"
                            rel="noopener noreferrer"
                            className="ml-2 text-emerald-600 hover:text-emerald-800"
                            title="Télécharger le bilan de compétences"
                            onClick={(e) => e.stopPropagation()} // Pour ne pas sélectionner à nouveau l'élève
                          >
                            <FileText className="w-5 h-5" />
                          </a>
                        );
                      }
                      return null;
                    })()}
                </li>
              ))}
          </ul>
        </div>
        {/* Colonne 2 : Reste des infos */}
        <div className="flex-1">
          {formData.selectedStudent && (
            <div className="flex flex-col gap-8 w-full justify-center items-stretch">
              <div className="w-full flex flex-row items-stretch gap-4">
                <div className="flex-1 flex items-stretch justify-center h-full">
                  <Attendance
                    absences={absences}
                    onToggleJustify={handleToggleJustify}
                    onDelete={handleDeleteAbsence}
                  />
                </div>
                <div className="flex-1 flex items-stretch justify-center h-full">
                  <GradesStatsCircle grades={grades} />
                </div>
              </div>
              <div className="flex items-center justify-center">
                <GradesDomainBarChart
                  studentCompetencies={studentCompetencies}
                />
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}