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

export default function ValidateSubscription({
  studentId,
  firstName,
  email,
  lastName,
  sepa_file,
  student_file,
  onAccept,
  onRefuse,
  classes,
  handleValidateOrRefuseDoc,
  csrfToken,
}) {
  const [schoolFileTemplates, setSchoolFileTemplates] = useState([]);
  const [parentFileTemplates, setParentFileTemplates] = useState([]);
  const [currentTemplateIndex, setCurrentTemplateIndex] = useState(0);
  const [mergeDocuments, setMergeDocuments] = useState(false);
  const [isPageValid, setIsPageValid] = useState(false);
  // Pour la validation/refus des documents
  const [docStatuses, setDocStatuses] = useState({}); // {index: 'accepted'|'refused'}

  // Met à jour docStatuses selon isValidated des templates récupérés
  useEffect(() => {
    // On construit la map index -> status à partir des templates
    const newStatuses = {};
    // Fiche élève (pas de validation individuelle)
    newStatuses[0] = undefined;
    // School templates
    schoolFileTemplates.forEach((tpl, i) => {
      if (typeof tpl.isValidated === 'boolean') {
        newStatuses[1 + i] = tpl.isValidated ? 'accepted' : 'refused';
      }
    });
    // Parent templates
    parentFileTemplates.forEach((tpl, i) => {
      if (typeof tpl.isValidated === 'boolean') {
        newStatuses[1 + schoolFileTemplates.length + i] = tpl.isValidated
          ? 'accepted'
          : 'refused';
      }
    });
    setDocStatuses((s) => ({ ...s, ...newStatuses }));
  }, [schoolFileTemplates, parentFileTemplates]);
  const [showRefusedPopup, setShowRefusedPopup] = useState(false);

  // Affiche la popup de confirmation finale (tous docs validés et classe sélectionnée)
  const [showFinalValidationPopup, setShowFinalValidationPopup] =
    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,
        notes: 'Dossier validé',
      };
      onAccept(data);
    } else {
      logger.warn('Aucune classe sélectionnée.');
    }
  };

  const handleRefuseDossier = () => {
    // Message clair avec la liste des documents refusés
    let notes = 'Dossier non validé pour les raisons suivantes :\n';
    notes += refusedDocs.map((doc) => `- ${doc.name}`).join('\n');
    const data = {
      status: 2,
      notes,
    };
    if (onRefuse) {
      onRefuse(data);
    }
  };

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

  const allTemplates = [
    {
      name: 'Fiche élève',
      file: `/api/generate-pdf?studentId=${studentId}`,
      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',
          },
        ]
      : []),
  ];

  // Récupère la liste des documents refusés (inclut la fiche élève si refusée)
  const refusedDocs = allTemplates
    .map((doc, idx) => ({ ...doc, idx }))
    .filter((doc, idx) => docStatuses[idx] === 'refused');

  // Récupère la liste des documents à cocher (hors fiche élève)
  const docIndexes = allTemplates
    .map((_, idx) => idx)
    .filter((idx) => idx !== 0);
  const allChecked =
    docIndexes.length > 0 &&
    docIndexes.every(
      (idx) => docStatuses[idx] === 'accepted' || docStatuses[idx] === 'refused'
    );
  const allValidated =
    docIndexes.length > 0 &&
    docIndexes.every((idx) => docStatuses[idx] === 'accepted');
  const hasRefused = docIndexes.some((idx) => docStatuses[idx] === 'refused');
  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="font-headline text-lg font-semibold text-gray-800 mb-4">
                {allTemplates[currentTemplateIndex].name || 'Document sans nom'}
              </h3>
              <iframe
                src={
                  allTemplates[currentTemplateIndex].type === 'main'
                    ? allTemplates[currentTemplateIndex].file
                    : getSecureFileUrl(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, Affectation, Refus */}
        <div className="w-1/4 flex flex-col flex-1 gap-4 h-full">
          {/* 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="font-headline 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>
                  <span className="flex-1">{template.name}</span>
                  {/* 2 boutons : Validé / Refusé (sauf fiche élève) */}
                  {index !== 0 && (
                    <span className="ml-2 flex gap-1">
                      <button
                        type="button"
                        className={`px-2 py-1 rounded-full text-xs font-medium border transition-colors focus:outline-none focus:ring-2 focus:ring-blue-400 flex items-center gap-1
                          ${docStatuses[index] === 'accepted' ? 'bg-primary text-white border-primary' : 'bg-white text-primary border-primary/30'}`}
                        aria-pressed={docStatuses[index] === 'accepted'}
                        onClick={(e) => {
                          e.stopPropagation();
                          setDocStatuses((s) => ({
                            ...s,
                            [index]: 'accepted',
                          }));
                          // Appel API pour valider le document
                          if (handleValidateOrRefuseDoc) {
                            let template = null;
                            let type = null;
                            if (
                              index > 0 &&
                              index <= schoolFileTemplates.length
                            ) {
                              template = schoolFileTemplates[index - 1];
                              type = 'school';
                            } else if (
                              index > schoolFileTemplates.length &&
                              index <=
                                schoolFileTemplates.length +
                                  parentFileTemplates.length
                            ) {
                              template =
                                parentFileTemplates[
                                  index - 1 - schoolFileTemplates.length
                                ];
                              type = 'parent';
                            }
                            if (template && template.id) {
                              handleValidateOrRefuseDoc({
                                templateId: template.id,
                                type,
                                validated: true,
                                csrfToken,
                              });
                            }
                          }
                        }}
                      >
                        <span className="text-lg">✓</span> Validé
                      </button>
                      <button
                        type="button"
                        className={`px-2 py-1 rounded-full text-xs font-medium border transition-colors focus:outline-none focus:ring-2 focus:ring-blue-400 flex items-center gap-1
                          ${docStatuses[index] === 'refused' ? 'bg-red-500 text-white border-red-500' : 'bg-white text-red-600 border-red-300'}`}
                        aria-pressed={docStatuses[index] === 'refused'}
                        onClick={(e) => {
                          e.stopPropagation();
                          setDocStatuses((s) => ({ ...s, [index]: 'refused' }));
                          // Appel API pour refuser le document
                          if (handleValidateOrRefuseDoc) {
                            let template = null;
                            let type = null;
                            if (
                              index > 0 &&
                              index <= schoolFileTemplates.length
                            ) {
                              template = schoolFileTemplates[index - 1];
                              type = 'school';
                            } else if (
                              index > schoolFileTemplates.length &&
                              index <=
                                schoolFileTemplates.length +
                                  parentFileTemplates.length
                            ) {
                              template =
                                parentFileTemplates[
                                  index - 1 - schoolFileTemplates.length
                                ];
                              type = 'parent';
                            }
                            if (template && template.id) {
                              handleValidateOrRefuseDoc({
                                templateId: template.id,
                                type,
                                validated: false,
                                csrfToken,
                              });
                            }
                          }
                        }}
                      >
                        <span className="text-lg">✗</span> Refusé
                      </button>
                    </span>
                  )}
                </li>
              ))}
            </ul>
          </div>

          {/* Nouvelle section Options de validation : carte unique, sélecteur de classe (ligne 1), toggle fusion (ligne 2 aligné à droite) */}
          {allChecked && allValidated && (
            <div className="bg-white p-4 rounded-lg shadow-sm border border-gray-200 flex flex-col gap-4">
              <div>
                <SelectChoice
                  name="associated_class"
                  label="Liste des classes"
                  placeHolder="Sélectionner une classe"
                  selected={formData.associated_class || ''}
                  callback={(e) => onChange('associated_class', e.target.value)}
                  choices={classes.map((classe) => ({
                    value: classe.id,
                    label: classe.atmosphere_name,
                  }))}
                  required
                  className="w-full"
                />
              </div>
              <div className="flex justify-end items-center mt-2">
                <ToggleSwitch
                  label="Fusionner les documents"
                  checked={mergeDocuments}
                  onChange={handleToggleMergeDocuments}
                  className="ml-0"
                />
              </div>
            </div>
          )}

          {/* Boutons Valider/Refuser en bas, centrés */}
          <div className="mt-auto py-4">
            <Button
              text="Soumettre"
              onClick={(e) => {
                e.preventDefault();
                // 1. Si tous les documents ne sont pas cochés, rien ne se passe (bouton désactivé)
                // 2. Si tous cochés et au moins un refusé : popup refus
                if (allChecked && hasRefused) {
                  setShowRefusedPopup(true);
                  return;
                }
                // 3. Si tous cochés et tous validés mais pas de classe sélectionnée : bouton désactivé
                // 4. Si tous cochés, tous validés et classe sélectionnée : popup de validation finale
                if (allChecked && allValidated && formData.associated_class) {
                  setShowFinalValidationPopup(true);
                }
              }}
              primary
              className={`w-full h-12 rounded-md shadow-sm focus:outline-none ${
                !allChecked ||
                (allChecked && allValidated && !formData.associated_class)
                  ? 'bg-gray-300 text-gray-700 cursor-not-allowed'
                  : 'bg-primary text-white hover:bg-primary'
              }`}
              disabled={
                !allChecked ||
                (allChecked && allValidated && !formData.associated_class)
              }
            />
          </div>

          {/* Popup de confirmation si refus */}
          <Popup
            isOpen={showRefusedPopup}
            onCancel={() => setShowRefusedPopup(false)}
            onConfirm={() => {
              setShowRefusedPopup(false);
              handleRefuseDossier();
            }}
            message={
              <span>
                {`Le dossier d'inscription de ${firstName} ${lastName} va être refusé. Un email sera envoyé au responsable à l'adresse : `}
                <span className="font-semibold text-blue-700">{email}</span>
                {' avec la liste des documents non validés :'}
                <ul className="list-disc ml-6 mt-2">
                  {refusedDocs.map((doc) => (
                    <li key={doc.idx}>{doc.name}</li>
                  ))}
                </ul>
              </span>
            }
          />

          {/* Popup de confirmation finale si tous validés et classe sélectionnée */}
          <Popup
            isOpen={showFinalValidationPopup}
            onCancel={() => setShowFinalValidationPopup(false)}
            onConfirm={() => {
              setShowFinalValidationPopup(false);
              handleAssignClass();
            }}
            message={
              <span>
                {`Le dossier d'inscription de ${lastName} ${firstName} va être validé et l'élève affecté à la classe sélectionnée.`}
              </span>
            }
          />
        </div>
      </div>
    </div>
  );
}