'use client';
import React, { useState, useEffect } from 'react';
import ToggleSwitch from '@/components/Form/ToggleSwitch';
import SelectChoice from '@/components/Form/SelectChoice';
import { BASE_URL } from '@/utils/Url';
import {
  fetchSchoolFileTemplatesFromRegistrationFiles,
  fetchParentFileTemplatesFromRegistrationFiles,
} from '@/app/actions/subscriptionAction';
import logger from '@/utils/logger';
import { School, CheckCircle, Hourglass, FileText } from 'lucide-react';
import SectionHeader from '@/components/SectionHeader';
import Button from '@/components/Form/Button';

export default function ValidateSubscription({
  studentId,
  firstName,
  lastName,
  sepa_file,
  student_file,
  onAccept,
  classes,
}) {
  const [schoolFileTemplates, setSchoolFileTemplates] = useState([]);
  const [parentFileTemplates, setParentFileTemplates] = useState([]);
  const [currentTemplateIndex, setCurrentTemplateIndex] = useState(0);
  const [mergeDocuments, setMergeDocuments] = useState(false);
  const [isPageValid, setIsPageValid] = useState(false);

  const [formData, setFormData] = useState({
    associated_class: null,
  });

  useEffect(() => {
    if (classes.length > 0) {
      // Si l'étudiant a déjà une classe associée, initialisez formData avec cette classe
      const initialClass = classes.find(
        (classe) => classe.id === formData.associated_class
      );
      setFormData({
        associated_class: initialClass ? initialClass.id : null,
      });
    }
  }, [classes]);

  // Mettre à jour isPageValid en fonction de la sélection de la classe
  useEffect(() => {
    setIsPageValid(!!formData.associated_class); // true si une classe est sélectionnée, sinon false
  }, [formData.associated_class]);

  useEffect(() => {
    // Récupérer les fichiers schoolFileTemplates
    fetchSchoolFileTemplatesFromRegistrationFiles(studentId)
      .then((data) => {
        setSchoolFileTemplates(data);
        logger.debug('Fichiers schoolFileTemplates récupérés:', data);
      })
      .catch((error) =>
        logger.error(
          'Erreur lors de la récupération des schoolFileTemplates:',
          error
        )
      );

    // Récupérer les fichiers parentFileTemplates
    fetchParentFileTemplatesFromRegistrationFiles(studentId)
      .then((data) => {
        setParentFileTemplates(data);
        logger.debug('Fichiers parentFileTemplates récupérés:', data);
      })
      .catch((error) =>
        logger.error(
          'Erreur lors de la récupération des parentFileTemplates:',
          error
        )
      );
  }, [studentId]);

  const handleToggleMergeDocuments = () => {
    setMergeDocuments((prevState) => !prevState);
  };

  const handleAssignClass = () => {
    if (formData.associated_class) {
      const data = {
        student: {
          associated_class: formData.associated_class,
        },
        status: 5,
        fusionParam: mergeDocuments,
      };

      onAccept(data);
    } else {
      logger.warn('Aucune classe sélectionnée.');
    }
  };

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

  const allTemplates = [
    { name: 'Fiche élève', file: student_file, type: 'main' },
    ...schoolFileTemplates.map((template) => ({
      name: template.name || 'Document scolaire',
      file: template.file,
      description: template.description,
    })),
    ...parentFileTemplates.map((template) => ({
      name: template.master_name || 'Document parent',
      file: template.file,
      description: template.description,
    })),
    ...(sepa_file
      ? [
          {
            name: 'Mandat SEPA',
            file: sepa_file,
            description: 'Mandat SEPA pour prélèvement automatique',
          },
        ]
      : []),
  ];
  logger.debug(allTemplates);

  return (
    <div className="mb-4 w-full mx-auto">
      {/* En-tête de la section */}
      <SectionHeader
        icon={School}
        title={`Validation du dossier de ${firstName} ${lastName}`}
        description={`Année scolaire ${new Date().getFullYear()}-${new Date().getFullYear() + 1}`}
      />

      {/* Contenu principal */}
      <div className="flex gap-8">
        {/* Colonne gauche : Affichage du fichier actuel */}
        <div className="w-3/4">
          {currentTemplateIndex < allTemplates.length && (
            <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
              <h3 className="text-lg font-semibold text-gray-800 mb-4">
                {allTemplates[currentTemplateIndex].name || 'Document sans nom'}
              </h3>
              <iframe
                src={`${BASE_URL}${allTemplates[currentTemplateIndex].file}`}
                title={
                  allTemplates[currentTemplateIndex].type === 'main'
                    ? 'Document Principal'
                    : 'Document Viewer'
                }
                className="w-full"
                style={{
                  height: '75vh',
                  border: 'none',
                }}
              />
            </div>
          )}
        </div>

        {/* Colonne droite : Liste des documents, Option de fusion et Affectation */}
        <div className="w-1/4 flex flex-col gap-4">
          {/* Liste des documents */}
          <div className="flex-1 bg-gray-50 p-4 rounded-lg shadow-sm border border-gray-200 overflow-y-auto">
            <h3 className="text-lg font-semibold text-gray-800 mb-4">
              Liste des documents
            </h3>
            <ul className="space-y-2">
              {allTemplates.map((template, index) => (
                <li
                  key={index}
                  className={`flex items-center cursor-pointer ${
                    index === currentTemplateIndex
                      ? 'text-blue-600 font-bold'
                      : template.file !== null
                        ? 'text-green-600'
                        : 'text-gray-600'
                  }`}
                  onClick={() => setCurrentTemplateIndex(index)}
                >
                  <span className="mr-2">
                    {template.file !== null && (
                      <FileText className="w-5 h-5 text-green-600" />
                    )}
                  </span>
                  {template.name}
                </li>
              ))}
            </ul>
          </div>

          {/* Option de fusion */}
          <div className="bg-gray-50 p-4 rounded-lg shadow-sm border border-gray-200">
            <h3 className="text-lg font-semibold text-gray-800 mb-4">
              Option de fusion
            </h3>
            <div className="flex items-center justify-between">
              <ToggleSwitch
                label="Fusionner les documents"
                checked={mergeDocuments}
                onChange={handleToggleMergeDocuments}
              />
            </div>
          </div>

          {/* Section Affectation */}
          <div className="bg-white p-4 rounded-lg shadow-sm border border-gray-200">
            <h3 className="text-lg font-semibold text-gray-800 mb-4">
              Affectation à une classe
            </h3>
            <div className="flex flex-col gap-4">
              <SelectChoice
                name="associated_class"
                label="Classe"
                placeHolder="Sélectionner une classe"
                selected={formData.associated_class || ''} // La valeur actuelle de la classe associée
                callback={(e) => onChange('associated_class', e.target.value)} // Met à jour formData
                choices={classes.map((classe) => ({
                  value: classe.id,
                  label: classe.atmosphere_name,
                }))} // Liste des classes disponibles
                required
              />
              <Button
                text="Valider le dossier d'inscription"
                onClick={(e) => {
                  e.preventDefault();
                  handleAssignClass();
                }}
                primary
                className={`px-4 py-2 rounded-md shadow-sm focus:outline-none ${
                  !isPageValid
                    ? 'bg-gray-300 text-gray-700 cursor-not-allowed'
                    : 'bg-emerald-500 text-white hover:bg-emerald-600'
                }`}
                disabled={!isPageValid}
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}