'use client';
import React, { useState, useEffect } from 'react';
import FormRenderer from '@/components/Form/FormRenderer';
import FileUpload from '@/components/Form/FileUpload';
import SignatureField from '@/components/Form/SignatureField';
import Button from '@/components/Form/Button';
import {
  CheckCircle,
  Hourglass,
  FileText,
  Download,
  Upload,
  XCircle,
  PenTool,
} from 'lucide-react';
import logger from '@/utils/logger';
import { getSecureFileUrl } from '@/utils/fileUrl';

/**
 * Composant pour afficher et gérer les formulaires dynamiques d'inscription
 * @param {Array} schoolFileTemplates - Liste des templates de formulaires
 * @param {Object} existingResponses - Réponses déjà sauvegardées
 * @param {Function} onFormSubmit - Callback appelé quand un formulaire est soumis
 * @param {Boolean} enable - Si les formulaires sont modifiables
 * @param {Function} onFileUpload - Callback appelé quand un fichier est sélectionné
 * @param {Function} onSignatureSubmit - Callback appelé quand une signature est soumise
 */
export default function DynamicFormsList({
  schoolFileTemplates,
  existingResponses = {},
  onFormSubmit,
  enable = true,
  onValidationChange,
  onFileUpload,
  onSignatureSubmit,
}) {
  const [currentTemplateIndex, setCurrentTemplateIndex] = useState(0);
  const [formsData, setFormsData] = useState({});
  const [formsValidation, setFormsValidation] = useState({});
  const fileInputRefs = React.useRef({});

  const extractResponses = (data, maxDepth = 8) => {
    let current = data;
    for (let i = 0; i < maxDepth; i += 1) {
      if (!current || typeof current !== 'object') return {};
      if (current.responses && typeof current.responses === 'object') {
        current = current.responses;
        continue;
      }
      break;
    }

    if (!current || typeof current !== 'object') return {};

    const cleaned = { ...current };
    delete cleaned.formId;
    delete cleaned.id;
    delete cleaned.templateId;
    delete cleaned.responses;
    return cleaned;
  };

  const isDynamicForm = (template) =>
    template.formTemplateData &&
    Array.isArray(template.formTemplateData.fields) &&
    template.formTemplateData.fields.length > 0;

  const hasLocalCompletion = (templateId) => {
    if (formsValidation[templateId] === true) return true;

    const localData = formsData[templateId];
    if (localData instanceof FormData) return true;
    if (localData && typeof localData === 'object') {
      return Object.keys(localData).length > 0;
    }

    const savedResponses = existingResponses[templateId];
    if (
      savedResponses &&
      typeof savedResponses === 'object' &&
      Object.keys(savedResponses).length > 0
    ) {
      return true;
    }

    // Pour les formulaires non dynamiques (upload de fichier),
    // vérifier si un fichier a déjà été uploadé sur le template
    const template = schoolFileTemplates.find((tpl) => tpl.id === templateId);
    if (template && template.file && !isDynamicForm(template)) {
      // Si le document est refusé, on ne le considère pas comme complété
      if (template.isValidated === false) {
        return false;
      }
      return true;
    }

    // Vérifier si le document a été signé électroniquement ET non refusé
    if (
      template &&
      template.is_electronically_signed &&
      template.isValidated !== false
    ) {
      return true;
    }

    return false;
  };

  // Initialiser les données avec les réponses existantes
  useEffect(() => {
    // Initialisation complète de formsValidation et formsData pour chaque template
    if (schoolFileTemplates && schoolFileTemplates.length > 0) {
      // Fusionner avec l'état existant pour préserver les données locales
      setFormsData((prevData) => {
        const dataState = { ...prevData };
        schoolFileTemplates.forEach((tpl) => {
          // Ne mettre à jour que si on n'a pas encore de données locales ou si les données du serveur ont changé
          const hasLocalData =
            prevData[tpl.id] && Object.keys(prevData[tpl.id]).length > 0;
          const hasServerData =
            existingResponses &&
            existingResponses[tpl.id] &&
            Object.keys(existingResponses[tpl.id]).length > 0;

          if (!hasLocalData && hasServerData) {
            // Pas de données locales mais données serveur : utiliser les données serveur
            dataState[tpl.id] = existingResponses[tpl.id];
          } else if (!hasLocalData && !hasServerData) {
            // Pas de données du tout : initialiser à vide
            dataState[tpl.id] = {};
          }
          // Si hasLocalData : on garde les données locales existantes
        });
        return dataState;
      });

      // Fusionner avec l'état de validation existant
      setFormsValidation((prevValidation) => {
        const validationState = { ...prevValidation };
        schoolFileTemplates.forEach((tpl) => {
          const hasLocalValidation = prevValidation[tpl.id] === true;
          const hasServerData =
            existingResponses &&
            existingResponses[tpl.id] &&
            Object.keys(existingResponses[tpl.id]).length > 0;

          if (!hasLocalValidation && hasServerData) {
            // Pas validé localement mais données serveur : marquer comme validé
            validationState[tpl.id] = true;
          } else if (validationState[tpl.id] === undefined) {
            // Pas encore initialisé : initialiser à false
            validationState[tpl.id] = false;
          }
          // Si hasLocalValidation : on garde l'état local existant
        });
        return validationState;
      });
    }
  }, [existingResponses, schoolFileTemplates]);

  // Mettre à jour la validation globale quand la validation des formulaires change
  useEffect(() => {
    // Un document est considéré comme "validé" s'il est validé par l'école OU complété localement OU déjà existant
    const allFormsValid = schoolFileTemplates.every(
      (tpl) => tpl.isValidated === true || hasLocalCompletion(tpl.id)
    );

    onValidationChange(allFormsValid);
  }, [
    formsData,
    formsValidation,
    existingResponses,
    schoolFileTemplates,
    onValidationChange,
  ]);

  /**
   * Gère la soumission d'un formulaire individuel
   */
  const handleFormSubmit = async (formData, templateId) => {
    try {
      logger.debug('Soumission du formulaire:', { templateId, formData });

      const normalizedResponses = extractResponses(formData);

      // Sauvegarder les données du formulaire
      setFormsData((prev) => ({
        ...prev,
        [templateId]: normalizedResponses,
      }));

      // Marquer le formulaire comme complété
      setFormsValidation((prev) => ({
        ...prev,
        [templateId]: true,
      }));

      // Appeler le callback parent
      if (onFormSubmit) {
        await onFormSubmit(formData, templateId);
      }

      // Passer au formulaire suivant si disponible
      if (currentTemplateIndex < schoolFileTemplates.length - 1) {
        setCurrentTemplateIndex(currentTemplateIndex + 1);
      }

      logger.debug('Formulaire soumis avec succès');
    } catch (error) {
      logger.error('Erreur lors de la soumission du formulaire:', error);
    }
  };

  /**
   * Vérifie si un formulaire est complété
   */
  const isFormCompleted = (templateId) => {
    return hasLocalCompletion(templateId);
  };

  /**
   * Obtient l'icône de statut d'un formulaire
   */
  const getFormStatusIcon = (templateId, isActive) => {
    if (isFormCompleted(templateId)) {
      return <CheckCircle className="w-5 h-5 text-green-600" />;
    }
    if (isActive) {
      return <FileText className="w-5 h-5 text-blue-600" />;
    }
    return <Hourglass className="w-5 h-5 text-gray-400" />;
  };

  /**
   * Obtient le formulaire actuel à afficher
   */
  const getCurrentTemplate = () => {
    return schoolFileTemplates[currentTemplateIndex];
  };

  const currentTemplate = getCurrentTemplate();

  // Handler d'upload pour formulaire existant
  const handleUpload = async (file, selectedFile) => {
    if (!file || !selectedFile) return;
    try {
      const templateId = currentTemplate.id;
      if (onFileUpload) {
        await onFileUpload(file, selectedFile);
        setFormsData((prev) => {
          const newData = {
            ...prev,
            [templateId]: { uploaded: true, fileName: file.name },
          };
          return newData;
        });
        setFormsValidation((prev) => {
          const newValidation = {
            ...prev,
            [templateId]: true,
          };
          return newValidation;
        });
      }
    } catch (error) {
      logger.error("Erreur lors de l'upload du fichier :", error);
    }
  };

  // Handler pour soumettre la signature électronique
  const handleSignature = async (templateId, signatureData) => {
    if (!signatureData || !templateId) return;
    try {
      if (onSignatureSubmit) {
        await onSignatureSubmit(templateId, signatureData);
        setFormsData((prev) => ({
          ...prev,
          [templateId]: { ...prev[templateId], signed: true },
        }));
        setFormsValidation((prev) => ({
          ...prev,
          [templateId]: true,
        }));
        // Passer au formulaire suivant si disponible
        if (currentTemplateIndex < schoolFileTemplates.length - 1) {
          setCurrentTemplateIndex(currentTemplateIndex + 1);
        }
      }
    } catch (error) {
      logger.error('Erreur lors de la soumission de la signature :', error);
    }
  };

  if (!schoolFileTemplates || schoolFileTemplates.length === 0) {
    return (
      <div className="text-center py-8">
        <FileText className="w-16 h-16 text-gray-300 mx-auto mb-4" />
        <p className="text-gray-600 mb-4">Aucun formulaire à compléter</p>
      </div>
    );
  }

  return (
    <div className="mt-8 mb-4 w-full mx-auto flex flex-col lg:flex-row gap-8 overflow-x-hidden">
      {/* Liste des formulaires */}
      <div className="w-full lg:w-1/4 bg-gray-50 p-4 rounded-lg shadow-sm border border-gray-200">
        <h3 className="font-headline text-lg font-semibold text-gray-800 mb-4">
          Formulaires à compléter
        </h3>
        <div className="text-sm text-gray-600 mb-4">
          {/* Compteur x/y : inclut les documents validés */}
          {
            schoolFileTemplates.filter((tpl) => {
              // Validé ou complété localement
              return tpl.isValidated === true || hasLocalCompletion(tpl.id);
            }).length
          }
          {' / '}
          {schoolFileTemplates.length} complétés
        </div>

        {/* Tri des templates par état */}
        {(() => {
          // Helper pour état
          const getState = (tpl) => {
            if (tpl.isValidated === true) return 0; // validé
            const isCompletedLocally = hasLocalCompletion(tpl.id);
            if (isCompletedLocally) return 1; // complété (en attente de traitement)
            if (tpl.isValidated === false) return 2; // refusé
            return 3; // à compléter
          };
          const sortedTemplates = [...schoolFileTemplates].sort((a, b) => {
            return getState(a) - getState(b);
          });
          return (
            <ul className="space-y-2">
              {sortedTemplates.map((tpl, index) => {
                const isActive =
                  schoolFileTemplates[currentTemplateIndex]?.id === tpl.id;
                const isValidated =
                  typeof tpl.isValidated === 'boolean'
                    ? tpl.isValidated
                    : undefined;
                const isCompletedLocally = hasLocalCompletion(tpl.id);

                // Statut d'affichage
                let statusLabel = '';
                let statusColor = '';
                let icon = null;
                let bgClass = '';
                let borderClass = '';
                let textClass = '';
                let canEdit = true;

                if (isValidated === true) {
                  statusLabel = 'Validé';
                  statusColor = 'emerald';
                  icon = <CheckCircle className="w-5 h-5 text-primary" />;
                  bgClass = 'bg-primary/5';
                  borderClass = 'border border-primary/20';
                  textClass = 'text-secondary';
                  bgClass = isActive ? 'bg-primary/20' : bgClass;
                  borderClass = isActive
                    ? 'border border-primary/30'
                    : borderClass;
                  textClass = isActive
                    ? 'text-secondary font-semibold'
                    : textClass;
                  canEdit = false;
                } else if (isValidated === false && !isCompletedLocally) {
                  // Refusé uniquement si pas re-complété localement
                  statusLabel = 'Refusé';
                  statusColor = 'red';
                  icon = <Hourglass className="w-5 h-5 text-red-500" />;
                  bgClass = isActive ? 'bg-red-200' : 'bg-red-50';
                  borderClass = isActive
                    ? 'border border-red-300'
                    : 'border border-red-200';
                  textClass = isActive
                    ? 'text-red-900 font-semibold'
                    : 'text-red-700';
                  canEdit = true;
                } else if (isCompletedLocally) {
                  statusLabel = 'Complété';
                  statusColor = 'orange';
                  icon = <Hourglass className="w-5 h-5 text-orange-400" />;
                  bgClass = isActive ? 'bg-orange-200' : 'bg-orange-50';
                  borderClass = isActive
                    ? 'border border-orange-300'
                    : 'border border-orange-200';
                  textClass = isActive
                    ? 'text-orange-900 font-semibold'
                    : 'text-orange-700';
                  canEdit = true;
                } else {
                  statusLabel = 'À compléter';
                  statusColor = 'gray';
                  icon = <Hourglass className="w-5 h-5 text-gray-400" />;
                  bgClass = isActive ? 'bg-gray-200' : '';
                  borderClass = isActive ? 'border border-gray-300' : '';
                  textClass = isActive
                    ? 'text-gray-900 font-semibold'
                    : 'text-gray-600';
                  canEdit = true;
                }

                return (
                  <li
                    key={tpl.id}
                    className={`flex items-center cursor-pointer p-2 rounded-md transition-colors ${
                      isActive
                        ? `${bgClass.replace('50', '200')} ${borderClass.replace('200', '300')} ${textClass.replace('700', '900')} font-semibold`
                        : `${bgClass} ${borderClass} ${textClass}`
                    }`}
                    onClick={() =>
                      setCurrentTemplateIndex(
                        schoolFileTemplates.findIndex((t) => t.id === tpl.id)
                      )
                    }
                  >
                    <span className="mr-3">{icon}</span>
                    <div className="flex-1 min-w-0">
                      <div className="text-sm truncate flex items-center gap-2">
                        {tpl.formMasterData?.title ||
                          tpl.title ||
                          tpl.name ||
                          'Formulaire sans nom'}
                        <span
                          className={`ml-2 px-2 py-0.5 rounded bg-${statusColor}-100 text-${statusColor}-700 text-xs font-semibold`}
                        >
                          {statusLabel}
                        </span>
                      </div>
                      <div className="text-xs text-gray-500">
                        {tpl.formMasterData?.fields || tpl.fields
                          ? `${(tpl.formMasterData?.fields || tpl.fields).length} champ(s)`
                          : 'À compléter'}
                      </div>
                    </div>
                  </li>
                );
              })}
            </ul>
          );
        })()}
      </div>

      <div className="w-full lg:w-3/4 min-w-0">
        {currentTemplate && (
          <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200 overflow-x-hidden">
            <div className="mb-6">
              <div className="flex items-center gap-3 mb-2">
                <h3 className="font-headline text-xl font-semibold text-gray-800">
                  {currentTemplate.name}
                </h3>
                {/* Label d'état */}
                {currentTemplate.isValidated === true ? (
                  <span className="px-2 py-0.5 rounded bg-primary/10 text-secondary text-sm font-semibold">
                    Validé
                  </span>
                ) : hasLocalCompletion(currentTemplate.id) ? (
                  <span className="px-2 py-0.5 rounded bg-orange-100 text-orange-700 text-sm font-semibold">
                    Complété
                  </span>
                ) : currentTemplate.isValidated === false ? (
                  <span className="px-2 py-0.5 rounded bg-red-100 text-red-700 text-sm font-semibold">
                    Refusé
                  </span>
                ) : (
                  <span className="px-2 py-0.5 rounded bg-gray-100 text-gray-700 text-sm font-semibold">
                    En attente
                  </span>
                )}
              </div>
              <p className="text-sm text-gray-600">
                {currentTemplate.formTemplateData?.description ||
                  currentTemplate.description ||
                  ''}
              </p>
              <div className="text-xs text-gray-500 mt-1">
                Formulaire{' '}
                {(() => {
                  // Trouver l'index du template courant dans la liste triée
                  const getState = (tpl) => {
                    if (tpl.isValidated === true) return 0;
                    const isCompletedLocally = hasLocalCompletion(tpl.id);
                    if (isCompletedLocally) return 1;
                    if (tpl.isValidated === false) return 2;
                    return 3;
                  };
                  const sortedTemplates = [...schoolFileTemplates].sort(
                    (a, b) => getState(a) - getState(b)
                  );
                  const idx = sortedTemplates.findIndex(
                    (tpl) => tpl.id === currentTemplate.id
                  );
                  return idx + 1;
                })()}{' '}
                sur {schoolFileTemplates.length}
              </div>
            </div>

            {/* Affichage dynamique ou existant */}
            {isDynamicForm(currentTemplate) ? (
              <FormRenderer
                key={currentTemplate.id}
                formConfig={{
                  id: currentTemplate.id,
                  title:
                    currentTemplate.formTemplateData?.title ||
                    currentTemplate.title ||
                    currentTemplate.name ||
                    'Formulaire',
                  fields:
                    currentTemplate.formTemplateData?.fields ||
                    currentTemplate.fields ||
                    [],
                  submitLabel:
                    currentTemplate.formTemplateData?.submitLabel || 'Valider',
                }}
                masterFile={
                  currentTemplate.master_file_url ||
                  currentTemplate.file ||
                  null
                }
                initialValues={
                  extractResponses(formsData[currentTemplate.id]) ||
                  existingResponses[currentTemplate.id] ||
                  {}
                }
                onFormSubmit={(formData) =>
                  handleFormSubmit(formData, currentTemplate.id)
                }
                // Désactive le bouton suivant si le template est validé
                enable={currentTemplate.isValidated !== true}
              />
            ) : (
              // Formulaire existant (PDF, image, etc.)
              <div className="flex flex-col items-center gap-6">
                {/* Cas validé : affichage en iframe */}
                {currentTemplate.isValidated === true &&
                  currentTemplate.file && (
                    <iframe
                      src={getSecureFileUrl(currentTemplate.file)}
                      title={currentTemplate.name}
                      className="w-full"
                      style={{ height: '600px', border: 'none' }}
                    />
                  )}

                {/* Cas non validé */}
                {currentTemplate.isValidated !== true && (
                  <div className="flex flex-col items-center gap-4 w-full">
                    {/* Document à signer électroniquement */}
                    {currentTemplate?.requires_electronic_signature ? (
                      <>
                        {/* Affichage du document à signer */}
                        {(currentTemplate.master_file_url ||
                          currentTemplate.file) && (
                          <iframe
                            src={getSecureFileUrl(
                              currentTemplate.master_file_url ||
                                currentTemplate.file
                            )}
                            title={currentTemplate.name}
                            className="w-full border rounded"
                            style={{ height: '500px', border: 'none' }}
                          />
                        )}

                        {/* Afficher si déjà signé et non refusé */}
                        {currentTemplate.is_electronically_signed &&
                        currentTemplate.isValidated !== false ? (
                          <div className="flex items-center gap-2 p-4 bg-green-50 border border-green-200 rounded-lg w-full max-w-md">
                            <CheckCircle className="w-6 h-6 text-green-600" />
                            <div>
                              <p className="font-medium text-green-800">
                                Document signé électroniquement
                              </p>
                              {currentTemplate.electronic_signature_date && (
                                <p className="text-sm text-green-600">
                                  Signé le{' '}
                                  {new Date(
                                    currentTemplate.electronic_signature_date
                                  ).toLocaleDateString('fr-FR', {
                                    day: 'numeric',
                                    month: 'long',
                                    year: 'numeric',
                                    hour: '2-digit',
                                    minute: '2-digit',
                                  })}
                                </p>
                              )}
                            </div>
                          </div>
                        ) : (
                          /* Signature électronique si pas encore signé ou refusé */
                          enable && (
                            <div className="w-full max-w-md mt-4">
                              {/* Message si document refusé */}
                              {currentTemplate.isValidated === false && (
                                <div className="flex items-center gap-2 p-3 mb-4 bg-red-50 border border-red-200 rounded-lg">
                                  <XCircle className="w-5 h-5 text-red-500" />
                                  <p className="text-sm text-red-700">
                                    Ce document a été refusé. Veuillez le
                                    signer à nouveau.
                                  </p>
                                </div>
                              )}
                              <SignatureField
                                label="Signature électronique"
                                required={true}
                                value={
                                  formsData[currentTemplate.id]?.signature || ''
                                }
                                onChange={(signatureData) => {
                                  setFormsData((prev) => ({
                                    ...prev,
                                    [currentTemplate.id]: {
                                      ...(prev[currentTemplate.id] || {}),
                                      signature: signatureData,
                                    },
                                  }));
                                }}
                                disabled={false}
                              />
                              <Button
                                primary
                                text="Signer le document"
                                onClick={() =>
                                  handleSignature(
                                    currentTemplate.id,
                                    formsData[currentTemplate.id]?.signature
                                  )
                                }
                                disabled={
                                  !formsData[currentTemplate.id]?.signature
                                }
                                className="mt-4 w-full"
                                icon={<PenTool className="w-4 h-4" />}
                              />
                            </div>
                          )
                        )}
                      </>
                    ) : (
                      <>
                        {/* Document classique : télécharger + upload */}
                        {(currentTemplate.master_file_url ||
                          currentTemplate.file) && (
                          <a
                            href={getSecureFileUrl(
                              currentTemplate.master_file_url ||
                                currentTemplate.file
                            )}
                            className="flex items-center gap-2 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition"
                            download
                          >
                            <Download className="w-5 h-5" />
                            Télécharger le document
                          </a>
                        )}

                        {/* Composant d'upload */}
                        {enable && (
                          <FileUpload
                            key={currentTemplate.id}
                            selectionMessage={
                              'Sélectionnez le fichier du document'
                            }
                            onFileSelect={(file) =>
                              handleUpload(file, currentTemplate)
                            }
                            existingFile={
                              currentTemplate.file_url || currentTemplate.file
                            }
                            required
                            enable={true}
                          />
                        )}
                      </>
                    )}
                  </div>
                )}
              </div>
            )}
          </div>
        )}

        {/* Message de fin */}
        {currentTemplateIndex >= schoolFileTemplates.length && (
          <div className="text-center py-8">
            <CheckCircle className="w-16 h-16 text-green-600 mx-auto mb-4" />
            <h3 className="font-headline text-lg font-semibold text-green-600 mb-2">
              Tous les formulaires ont été complétés !
            </h3>
            <p className="text-gray-600">
              Vous pouvez maintenant passer à l&apos;étape suivante.
            </p>
          </div>
        )}
      </div>
    </div>
  );
}
