// Import des dépendances nécessaires
import React, { useState, useEffect } from 'react';
import Button from '@/components/Form/Button';
import DjangoCSRFToken from '@/components/DjangoCSRFToken';
import {
  fetchSchoolFileTemplatesFromRegistrationFiles,
  fetchParentFileTemplatesFromRegistrationFiles,
  saveFormResponses,
  fetchFormResponses,
  autoSaveRegisterForm,
} from '@/app/actions/subscriptionAction';
import {
  editRegistrationSchoolFileTemplates,
  editRegistrationParentFileTemplates,
} from '@/app/actions/registerFileGroupAction';
import {
  fetchRegistrationPaymentModes,
  fetchTuitionPaymentModes,
  fetchRegistrationPaymentPlans,
  fetchTuitionPaymentPlans,
} from '@/app/actions/schoolAction';
import { fetchProfiles } from '@/app/actions/authAction';
import { FE_PARENTS_HOME_URL } from '@/utils/Url';
import logger from '@/utils/logger';
import FilesToUpload from '@/components/Inscription/FilesToUpload';
import DynamicFormsList from '@/components/Inscription/DynamicFormsList';
import AutoSaveIndicator from '@/components/AutoSaveIndicator';
import StudentInfoForm from '@/components/Inscription/StudentInfoForm';
import ResponsableInputFields from '@/components/Inscription/ResponsableInputFields';
import SiblingInputFields from '@/components/Inscription/SiblingInputFields';
import PaymentMethodSelector from '@/components/Inscription/PaymentMethodSelector';
import ProgressStep from '@/components/ProgressStep';
import { useRouter } from 'next/navigation';
import { ChevronLeft, ChevronRight, Check, X } from 'lucide-react';

/**
 * Composant de formulaire d'inscription partagé
 * @param {string} studentId - ID de l'étudiant
 * @param {string} csrfToken - Token CSRF pour la sécurité
 * @param {function} onSubmit - Fonction de soumission du formulaire
 * @param {string} cancelUrl - URL de redirection en cas d'annulation
 * @param {object} errors - Erreurs de validation du formulaire
 */
export default function InscriptionFormShared({
  studentId,
  csrfToken,
  selectedEstablishmentId,
  onSubmit,
  errors = {}, // Nouvelle prop pour les erreurs
  enable = true,
}) {
  // États pour gérer les données du formulaire
  const [formData, setFormData] = useState({
    id: '',
    photo: null,
    last_name: '',
    first_name: '',
    gender: '',
    address: '',
    birth_date: '',
    birth_place: '',
    birth_postal_code: '',
    nationality: '',
    attending_physician: '',
    level: '',
    photo: '',
  });
  const [guardians, setGuardians] = useState([]);
  const [siblings, setSiblings] = useState([]);

  const [registrationPaymentModes, setRegistrationPaymentModes] = useState([]);
  const [tuitionPaymentModes, setTuitionPaymentModes] = useState([]);
  const [registrationPaymentPlans, setRegistrationPaymentPlans] = useState([]);
  const [tuitionPaymentPlans, setTuitionPaymentPlans] = useState([]);

  // États pour la gestion des fichiers
  const [uploadedFiles, setUploadedFiles] = useState([]);
  const [schoolFileTemplates, setSchoolFileTemplates] = useState([]);
  const [parentFileTemplates, setParentFileTemplates] = useState([]);
  const [schoolFileMasters, setSchoolFileMasters] = useState([]);
  const [formResponses, setFormResponses] = useState({});
  const [currentPage, setCurrentPage] = useState(1);

  const [isPage1Valid, setIsPage1Valid] = useState(false);
  const [isPage2Valid, setIsPage2Valid] = useState(false);
  const [isPage3Valid, setIsPage3Valid] = useState(false);
  const [isPage4Valid, setIsPage4Valid] = useState(false);
  const [isPage5Valid, setIsPage5Valid] = useState(false);
  const [isPage6Valid, setIsPage6Valid] = useState(false);

  const [hasInteracted, setHasInteracted] = useState(false);

  // État pour suivre l'index du fichier en cours
  const [currentTemplateIndex, setCurrentTemplateIndex] = useState(0);

  const [profiles, setProfiles] = useState([]);
  const [isSaving, setIsSaving] = useState(false);
  const [lastSaved, setLastSaved] = useState(null);
  const [autoSaveEnabled, setAutoSaveEnabled] = useState(true);

  const router = useRouter();

  // Mettre à jour les états en fonction de la valeur de `enable`
  useEffect(() => {
    if (!enable) {
      setIsPage1Valid(true);
      setIsPage2Valid(true);
      setIsPage3Valid(true);
      setIsPage4Valid(true);
      setIsPage5Valid(true);
      setIsPage6Valid(true);
    }
  }, [enable]);

  useEffect(() => {
    // Trouver le premier template non signé
    const firstUnsignedIndex = schoolFileTemplates.findIndex(
      (template) => template.file === null
    );

    // Mettre à jour l'index du template actuel
    if (firstUnsignedIndex !== -1) {
      setCurrentTemplateIndex(firstUnsignedIndex);
    } else {
      // Si tous les templates sont signés, définir un index hors limites
      setCurrentTemplateIndex(0);
    }
  }, [schoolFileTemplates]);

  useEffect(() => {
    // Vérifier si tous les formulaires maîtres sont complétés
    const allCompleted =
      schoolFileMasters.length === 0 ||
      schoolFileMasters.every((master) => master.completed === true);

    // Mettre à jour isPage5Valid en fonction de cette condition
    setIsPage5Valid(allCompleted);

    if (allCompleted) {
      setCurrentTemplateIndex(0);
    }
  }, [schoolFileMasters]);

  useEffect(() => {
    // Vérifier si tous les documents avec is_required = true ont leur champ "file" différent de null
    const allRequiredUploaded = parentFileTemplates
      .filter((template) => template.is_required) // Ne garder que les documents requis
      .every((template) => template.file !== null); // Vérifier que chaque fichier requis est uploadé

    // Mettre à jour isPage6Valid en fonction de cette condition
    setIsPage6Valid(allRequiredUploaded);
    logger.debug(allRequiredUploaded);
  }, [parentFileTemplates]);

  // Auto-sauvegarde périodique (toutes les 30 secondes)
  useEffect(() => {
    if (!enable || !autoSaveEnabled) return;

    const interval = setInterval(() => {
      autoSave();
    }, 30000); // 30 secondes

    return () => clearInterval(interval);
  }, [enable, autoSaveEnabled, formData, guardians, siblings]);

  // Auto-sauvegarde quand les données changent (avec debounce)
  useEffect(() => {
    if (!enable || !autoSaveEnabled) return;

    const timeout = setTimeout(() => {
      autoSave();
    }, 2000); // Attendre 2 secondes après le dernier changement

    return () => clearTimeout(timeout);
  }, [formData, guardians, siblings]);

  /**
   * Fonction d'auto-sauvegarde qui sauvegarde les données en cours
   */
  const autoSave = async () => {
    if (!autoSaveEnabled || !studentId || isSaving) {
      return;
    }

    try {
      setIsSaving(true);
      logger.debug('Auto-sauvegarde en cours...', {
        studentId,
        formDataKeys: Object.keys(formData),
        paymentFields: {
          registration_payment: formData.registration_payment,
          registration_payment_plan: formData.registration_payment_plan,
          tuition_payment: formData.tuition_payment,
          tuition_payment_plan: formData.tuition_payment_plan,
        },
        guardians: guardians.length,
        siblings: siblings.length,
        currentPage,
      });

      // Fonction helper pour nettoyer les données avant sauvegarde
      const cleanDataForAutoSave = (data) => {
        const cleaned = {};
        Object.keys(data).forEach((key) => {
          const value = data[key];
          // Garder seulement les valeurs non-vides et valides
          if (value !== null && value !== undefined && value !== '') {
            // Pour les dates, vérifier le format
            if (key === 'birth_date' && value) {
              // Vérifier que la date est dans un format valide
              const dateRegex = /^\d{4}-\d{2}-\d{2}$/;
              if (dateRegex.test(value)) {
                cleaned[key] = value;
              }
            }
            // Pour les codes postaux, vérifier que c'est un nombre
            else if (key === 'birth_postal_code' && value) {
              if (!isNaN(value) && value.toString().trim() !== '') {
                cleaned[key] = parseInt(value);
              }
            }
            // Pour les champs de paiement, toujours les inclure s'ils ont une valeur
            else if (key.includes('payment') && value) {
              cleaned[key] = value;
            }
            // Pour les autres champs, garder la valeur si elle n'est pas vide
            else if (value.toString().trim() !== '') {
              cleaned[key] = value;
            }
          }
        });
        return cleaned;
      };

      // Préparer les données à sauvegarder avec nettoyage
      const cleanedFormData = cleanDataForAutoSave(formData);

      const dataToSave = {
        student: cleanedFormData,
        guardians: guardians.filter(
          (guardian) =>
            guardian &&
            (guardian.first_name || guardian.last_name || guardian.email)
        ),
        siblings: siblings.filter(
          (sibling) => sibling && (sibling.first_name || sibling.last_name)
        ),
        currentPage: currentPage,
      };

      // Utiliser la fonction d'auto-save dédiée
      await autoSaveRegisterForm(studentId, dataToSave, csrfToken);

      setLastSaved(new Date());
      logger.debug('Auto-sauvegarde réussie');
    } catch (error) {
      logger.error("Erreur lors de l'auto-sauvegarde:", error);
      // Ne pas afficher d'erreur à l'utilisateur pour l'auto-save
    } finally {
      setIsSaving(false);
    }
  };

  /**
   * Gère la sauvegarde à chaque changement d'étape
   */
  const saveStepData = async () => {
    await autoSave();
  };

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

      // Trouver le template correspondant pour récupérer sa configuration
      const currentTemplate = schoolFileTemplates.find(
        (template) => template.id === templateId
      );
      if (!currentTemplate) {
        throw new Error(`Template avec l'ID ${templateId} non trouvé`);
      }

      // Aplatit les structures de type { responses: { responses: {...} } }
      // pour ne conserver que les reponses de champs (ex: sign).
      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 normalizedResponses = extractResponses(formData);

      // Construire la structure complète avec la configuration et les réponses
      const formTemplateData = {
        id: currentTemplate.id,
        title:
          currentTemplate.formTemplateData?.title ||
          currentTemplate.title ||
          currentTemplate.name ||
          'Formulaire',
        fields: (
          currentTemplate.formTemplateData?.fields ||
          currentTemplate.fields ||
          []
        ).map((field) => ({
          ...field,
          ...(field.type === 'checkbox'
            ? { checked: normalizedResponses[field.id] || false }
            : {}),
          ...(field.type === 'radio'
            ? { selected: normalizedResponses[field.id] }
            : {}),
          ...(field.id
            ? { value: normalizedResponses[field.id] ?? field.value ?? '' }
            : {}),
        })),
        submitLabel: currentTemplate.formTemplateData?.submitLabel || 'Valider',
        responses: normalizedResponses,
      };

      // Sauvegarder les réponses du formulaire via l'API RegistrationSchoolFileTemplate
      logger.debug('Appel API saveFormResponses avec:', {
        templateId,
        formTemplateData,
      });
      const result = await saveFormResponses(
        templateId,
        formTemplateData,
        csrfToken
      );
      logger.debug("Réponse de l'API:", result);

      // Prendre en compte la réponse du back pour mettre à jour les réponses locales
      let newResponses = normalizedResponses;
      if (
        result &&
        result.data &&
        result.data.formTemplateData &&
        result.data.formTemplateData.responses &&
        result.data.formTemplateData.responses.responses
      ) {
        // Si la structure responses.responses existe, on la prend
        newResponses = result.data.formTemplateData.responses.responses;
      } else if (
        result &&
        result.data &&
        result.data.formTemplateData &&
        result.data.formTemplateData.responses
      ) {
        // Sinon, on prend responses directement
        newResponses = result.data.formTemplateData.responses;
      }

      setFormResponses((prev) => ({
        ...prev,
        [templateId]: newResponses,
      }));

      setSchoolFileTemplates((prevTemplates) => {
        return prevTemplates.map((template) =>
          template.id === templateId
            ? { ...template, completed: true, responses: newResponses }
            : template
        );
      });

      logger.debug('Formulaire dynamique sauvegardé avec succès');
      return Promise.resolve();
    } catch (error) {
      logger.error('Erreur lors de la soumission du formulaire dynamique:', {
        templateId,
        error: error.message,
        stack: error.stack,
      });
      alert(`Erreur lors de la sauvegarde du formulaire: ${error.message}`);
      return Promise.reject(error);
    }
  };

  /**
   * Gère les changements de validation des formulaires dynamiques
   */
  const handleDynamicFormsValidationChange = (isValid) => {
    setIsPage5Valid(isValid);
  };

  useEffect(() => {
    fetchSchoolFileTemplatesFromRegistrationFiles(studentId).then((data) => {
      setSchoolFileTemplates(data);

      // Récupérer les réponses existantes pour chaque template
      const fetchAllResponses = async () => {
        const responsesMap = {};
        for (const template of data) {
          if (template.id) {
            try {
              const templateData = await fetchFormResponses(template.id);
              if (templateData && templateData.formTemplateData) {
                if (templateData.formTemplateData.responses) {
                  responsesMap[template.id] =
                    templateData.formTemplateData.responses;
                } else {
                  // Extraire les réponses depuis les champs
                  const responses = {};
                  if (templateData.formTemplateData.fields) {
                    templateData.formTemplateData.fields.forEach((field) => {
                      if (
                        field.type === 'checkbox' &&
                        field.checked !== undefined
                      ) {
                        responses[field.id] = field.checked;
                      } else if (
                        field.type === 'radio' &&
                        field.selected !== undefined
                      ) {
                        responses[field.id] = field.selected;
                      } else if (
                        (field.type === 'text' ||
                          field.type === 'textarea' ||
                          field.type === 'email') &&
                        field.value !== undefined
                      ) {
                        responses[field.id] = field.value;
                      }
                    });
                  }
                  responsesMap[template.id] = responses;
                }
              }
            } catch (error) {
              logger.debug(
                `Pas de données existantes pour le template ${template.id}:`,
                error
              );
            }
          }
        }
        setFormResponses(responsesMap);
      };
      fetchAllResponses();
    });

    fetchParentFileTemplatesFromRegistrationFiles(studentId).then((data) => {
      setParentFileTemplates(data);

      // Initialiser uploadedFiles avec uniquement les fichiers dont `file` n'est pas null
      const filteredFiles = data
        .filter((item) => item.file !== null)
        .map((item) => ({
          id: item.id,
          fileName: item.file,
        }));
      setUploadedFiles(filteredFiles);
    });

    fetchProfiles()
      .then((data) => {
        setProfiles(data);
      })
      .catch((error) => logger.error('Error fetching profiles : ', error));

    if (selectedEstablishmentId) {
      // Fetch data for registration payment modes
      handleRegistrationPaymentModes();

      // Fetch data for tuition payment modes
      handleTuitionPaymentModes();

      // Fetch data for registration payment plans
      handleRegistrationPaymentPlans();

      // Fetch data for tuition payment plans
      handleTuitionnPaymentPlans();
    }
  }, [studentId, selectedEstablishmentId]);

  const handleRegistrationPaymentModes = () => {
    fetchRegistrationPaymentModes(selectedEstablishmentId)
      .then((data) => {
        setRegistrationPaymentModes(data);
      })
      .catch((error) =>
        logger.error('Error fetching registration payment modes:', error)
      );
  };

  const handleTuitionPaymentModes = () => {
    fetchTuitionPaymentModes(selectedEstablishmentId)
      .then((data) => {
        setTuitionPaymentModes(data);
      })
      .catch((error) =>
        logger.error('Error fetching tuition payment modes:', error)
      );
  };

  const handleRegistrationPaymentPlans = () => {
    fetchRegistrationPaymentPlans(selectedEstablishmentId)
      .then((data) => {
        setRegistrationPaymentPlans(data);
      })
      .catch((error) =>
        logger.error('Error fetching registration payment plans:', error)
      );
  };

  const handleTuitionnPaymentPlans = () => {
    fetchTuitionPaymentPlans(selectedEstablishmentId)
      .then((data) => {
        setTuitionPaymentPlans(data);
      })
      .catch((error) =>
        logger.error('Error fetching registration tuition plans:', error)
      );
  };

  const handleFileUpload = (file, selectedFile) => {
    if (!file || !selectedFile) {
      logger.error('Données manquantes pour le téléversement.');
      return Promise.reject(
        new Error('Données manquantes pour le téléversement.')
      );
    }

    // Générer le nom du fichier : <nom_template>.<extension d'origine>
    let extension = '';
    if (file.name && file.name.lastIndexOf('.') !== -1) {
      extension = file.name.substring(file.name.lastIndexOf('.'));
    }
    // Nettoyer le nom du template pour éviter les caractères spéciaux
    const cleanName = (selectedFile.name || 'document')
      .replace(/[^a-zA-Z0-9_\-]/g, '_')
      .replace(/_+/g, '_')
      .replace(/^_+|_+$/g, '');
    const finalFileName = `${cleanName}${extension}`;

    const updateData = new FormData();
    updateData.append('file', file, finalFileName);

    return editRegistrationParentFileTemplates(
      selectedFile.id,
      updateData,
      csrfToken
    )
      .then((response) => {
        logger.debug('Template mis à jour avec succès :', response);

        setUploadedFiles((prev) => {
          const updatedFiles = prev.map((uploadedFile) =>
            uploadedFile.id === selectedFile.id
              ? { ...uploadedFile, fileName: response.data.file }
              : uploadedFile
          );

          if (!updatedFiles.find((file) => file.id === selectedFile.id)) {
            updatedFiles.push({
              id: selectedFile.id,
              fileName: response.data.file,
            });
          }

          return updatedFiles;
        });

        // Mettre à jour parentFileTemplates
        setParentFileTemplates((prevTemplates) =>
          prevTemplates.map((template) =>
            template.id === selectedFile.id
              ? { ...template, file: response.data.file }
              : template
          )
        );

        return response;
      })
      .catch((error) => {
        logger.error('Erreur lors de la mise à jour du fichier :', error);
        throw error;
      });
  };

  const handleSchoolFileUpload = (file, selectedFile) => {
    if (!file || !selectedFile) {
      logger.error('Données manquantes pour le téléversement.');
      return Promise.reject(
        new Error('Données manquantes pour le téléversement.')
      );
    }

    const updateData = new FormData();
    updateData.append('file', file);

    return editRegistrationSchoolFileTemplates(
      selectedFile.id,
      updateData,
      csrfToken
    )
      .then((response) => {
        logger.debug('School file template mis à jour avec succès :', response);

        // Mettre à jour uniquement schoolFileTemplates
        setSchoolFileTemplates((prevTemplates) =>
          prevTemplates.map((template) =>
            template.id === selectedFile.id
              ? {
                  ...template,
                  file: response.data.file,
                  file_url: response.data.file_url,
                }
              : template
          )
        );

        return response;
      })
      .catch((error) => {
        logger.error('Erreur lors de la mise à jour du school file :', error);
        throw error;
      });
  };

  const handleSignatureSubmit = (templateId, signatureData) => {
    if (!templateId || !signatureData) {
      logger.error('Données manquantes pour la signature.');
      return Promise.reject(
        new Error('Données manquantes pour la signature.')
      );
    }

    const updateData = new FormData();
    updateData.append('electronic_signature', signatureData);

    return editRegistrationSchoolFileTemplates(templateId, updateData, csrfToken)
      .then((response) => {
        logger.debug('Signature électronique enregistrée avec succès :', response);

        // Mettre à jour schoolFileTemplates avec la signature
        setSchoolFileTemplates((prevTemplates) =>
          prevTemplates.map((template) =>
            template.id === templateId
              ? {
                  ...template,
                  electronic_signature: response.data.electronic_signature,
                  electronic_signature_date: response.data.electronic_signature_date,
                  is_electronically_signed: true,
                  // Repasser en attente si le document était refusé
                  isValidated:
                    response.data.isValidated !== undefined
                      ? response.data.isValidated
                      : template.isValidated === false
                        ? null
                        : template.isValidated,
                }
              : template
          )
        );

        return response;
      })
      .catch((error) => {
        logger.error('Erreur lors de l\'enregistrement de la signature :', error);
        throw error;
      });
  };

  const handleDeleteFile = (templateId) => {
    const fileToDelete = uploadedFiles.find(
      (file) => parseInt(file.id) === templateId && file.fileName
    );
    if (!fileToDelete) {
      logger.error('Aucun fichier trouvé pour suppression.');
      return;
    }

    // Créer un FormData avec un champ vide pour "file"
    const updateData = new FormData();
    updateData.append('file', ''); // Envoyer chaine vide pour indiquer qu'aucun fichier n'est uploadé

    return editRegistrationParentFileTemplates(
      templateId,
      updateData,
      csrfToken
    )
      .then((response) => {
        logger.debug('Fichier supprimé avec succès dans la base :', response);

        setIsPage6Valid(false);

        // Mettre à jour l'état local pour refléter la suppression
        setUploadedFiles((prev) =>
          prev.map((uploadedFile) =>
            uploadedFile.id === templateId
              ? { ...uploadedFile, fileName: null, fileUrl: null }
              : uploadedFile
          )
        );

        // Mettre à jour l'état local pour refléter la suppression dans parentFileTemplates
        setParentFileTemplates((prevTemplates) =>
          prevTemplates.map((template) =>
            template.id === templateId ? { ...template, file: null } : template
          )
        );
        return response;
      })
      .catch((error) => {
        logger.error(
          'Erreur lors de la suppression du fichier dans la base :',
          error
        );
        throw error;
      });
  };

  // Soumission du formulaire
  const handleSubmit = (e) => {
    e.preventDefault();

    // Vérifier si le mode de paiement sélectionné est un prélèvement SEPA
    const isSepaPayment = formData.isSepa === 1;

    // Préparer les données JSON
    const jsonData = {
      student: {
        ...formData,
        guardians: guardians,
        siblings: siblings.map(({ id, ...rest }) =>
          id && typeof id === 'string' && id.startsWith('temp-')
            ? rest
            : { id, ...rest }
        ), // Supprimer les IDs temporaires
      },
      establishment: selectedEstablishmentId,
      status: isSepaPayment ? 8 : 3,
      tuition_payment: formData.tuition_payment,
      registration_payment: formData.registration_payment,
      tuition_payment_plan: formData.tuition_payment_plan,
      registration_payment_plan: formData.registration_payment_plan,
    };

    // Créer un objet FormData
    const formDataToSend = new FormData();

    // Ajouter les données JSON sous forme de chaîne
    formDataToSend.append('data', JSON.stringify(jsonData));

    // Ajouter la photo si elle est présente
    if (formData.photo) {
      formDataToSend.append('photo', formData.photo);
    }

    logger.debug('submit : ', jsonData);

    // Appeler la fonction onSubmit avec les données FormData
    onSubmit(formDataToSend);
  };

  const handleNextPage = async () => {
    // Sauvegarder avant de passer à l'étape suivante
    await saveStepData();
    setHasInteracted(false);
    setCurrentPage(currentPage + 1);
  };

  const handlePreviousPage = async () => {
    // Sauvegarder avant de revenir à l'étape précédente
    await saveStepData();
    setCurrentPage(currentPage - 1);
  };

  const stepTitles = {
    1: 'Elève',
    2: 'Responsables légaux',
    3: 'Frères et soeurs',
    4: 'Modalités de paiement',
    5: 'Formulaires à signer',
    6: 'Pièces à fournir',
  };

  const steps = [
    'Élève',
    'Responsable',
    'Fratrie',
    'Paiement',
    'Formulaires',
    'Documents parent',
  ];

  const hasParentFilesStep = parentFileTemplates.length > 0;

  const activeSteps = hasParentFilesStep ? steps : steps.slice(0, 5);
  const activeStepTitles = hasParentFilesStep
    ? stepTitles
    : {
        1: stepTitles[1],
        2: stepTitles[2],
        3: stepTitles[3],
        4: stepTitles[4],
        5: stepTitles[5],
      };

  const isStepValid = (stepNumber) => {
    switch (stepNumber) {
      case 1:
        return isPage1Valid;
      case 2:
        return isPage2Valid;
      case 3:
        return isPage3Valid;
      case 4:
        return isPage4Valid;
      case 5:
        return isPage5Valid;
      case 6:
        return isPage6Valid;
      default:
        return false;
    }
  };

  useEffect(() => {
    if (!hasParentFilesStep && currentPage > 5) {
      setCurrentPage(5);
    }
  }, [hasParentFilesStep, currentPage]);

  const nextDisabled =
    (currentPage === 1 && !isPage1Valid) ||
    (currentPage === 2 && !isPage2Valid) ||
    (currentPage === 3 && !isPage3Valid) ||
    (currentPage === 4 && !isPage4Valid) ||
    (currentPage === 5 && !isPage5Valid);

  const submitDisabled = !isStepValid(currentPage);

  const navButtonBaseClass =
    'min-w-[124px] min-h-[44px] px-5 rounded font-label text-sm font-semibold transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-primary/30';

  const navPrimaryClass = nextDisabled
    ? `${navButtonBaseClass} bg-gray-200 text-gray-500 cursor-not-allowed`
    : `${navButtonBaseClass} bg-primary hover:bg-secondary text-white`;

  const navSubmitClass = submitDisabled
    ? `${navButtonBaseClass} bg-gray-200 text-gray-500 cursor-not-allowed`
    : `${navButtonBaseClass} bg-primary hover:bg-secondary text-white`;

  const navSecondaryClass = `${navButtonBaseClass} bg-neutral text-secondary border border-gray-300 hover:bg-white`;

  // Rendu du composant
  return (
    <div className="mx-auto p-6">
      <DjangoCSRFToken csrfToken={csrfToken} />
      <ProgressStep
        steps={activeSteps}
        stepTitles={activeStepTitles}
        currentStep={currentPage}
        setStep={setCurrentPage}
        isStepValid={isStepValid}
      />

      {/* Indicateur de sauvegarde automatique */}
      {enable && (
        <AutoSaveIndicator
          isSaving={isSaving}
          lastSaved={lastSaved}
          autoSaveEnabled={autoSaveEnabled}
          onToggleAutoSave={() => setAutoSaveEnabled(!autoSaveEnabled)}
        />
      )}

      {/* Navigation toujours au meme endroit (en haut a gauche) */}
      <div className="mt-6 mb-4 flex items-center justify-start gap-3">
        {enable ? (
          <>
            {currentPage > 1 && (
              <Button
                text="Précédent"
                icon={<ChevronLeft size={16} strokeWidth={1.8} />}
                onClick={(e) => {
                  e.preventDefault();
                  handlePreviousPage();
                }}
                primary
                className={navSecondaryClass}
              />
            )}
            {currentPage < activeSteps.length ? (
              <Button
                text={
                  <span className="inline-flex items-center gap-2">
                    <span>Suivant</span>
                    <ChevronRight size={16} strokeWidth={1.8} />
                  </span>
                }
                onClick={(e) => {
                  e.preventDefault();
                  handleNextPage();
                }}
                className={navPrimaryClass}
                disabled={nextDisabled}
                primary
                name="Next"
              />
            ) : (
              <Button
                text="Valider"
                icon={<Check size={16} strokeWidth={1.8} />}
                onClick={(e) => {
                  e.preventDefault();
                  handleSubmit(e);
                }}
                className={navSubmitClass}
                disabled={submitDisabled}
                primary
              />
            )}
          </>
        ) : (
          <Button
            onClick={() => router.push(FE_PARENTS_HOME_URL)}
            text="Quitter"
            icon={<X size={16} strokeWidth={1.8} />}
            primary
            className={`${navButtonBaseClass} bg-primary text-white hover:bg-secondary shadow-sm`}
          />
        )}
      </div>

      <div className="flex-1 h-full mt-6">
        {/* Page 1 : Informations sur l'élève */}
        {currentPage === 1 && (
          <StudentInfoForm
            studentId={studentId}
            formData={formData}
            setFormData={setFormData}
            guardians={guardians}
            setGuardians={setGuardians}
            setSiblings={setSiblings}
            errors={errors}
            setIsPageValid={setIsPage1Valid}
            hasInteracted={hasInteracted}
            setHasInteracted={setHasInteracted}
            enable={enable}
          />
        )}

        {/* Page 2 : Informations sur les responsables légaux */}
        {currentPage === 2 && (
          <ResponsableInputFields
            guardians={guardians}
            setGuardians={setGuardians}
            profiles={profiles}
            errors={errors}
            setIsPageValid={setIsPage2Valid}
            enable={enable}
          />
        )}

        {/* Étape 3 : Frères et Sœurs */}
        {currentPage === 3 && (
          <SiblingInputFields
            siblings={siblings}
            setSiblings={setSiblings}
            setFormData={setFormData}
            errors={errors.siblings || []}
            setIsPageValid={setIsPage3Valid}
            enable={enable}
          />
        )}

        {/* Page 4 : Informations sur les modalités de paiement */}
        {currentPage === 4 && (
          <>
            <PaymentMethodSelector
              formData={formData}
              setFormData={setFormData}
              registrationPaymentModes={registrationPaymentModes}
              tuitionPaymentModes={tuitionPaymentModes}
              registrationPaymentPlans={registrationPaymentPlans}
              tuitionPaymentPlans={tuitionPaymentPlans}
              errors={errors}
              setIsPageValid={setIsPage4Valid}
              enable={enable}
            />
          </>
        )}

        {/* Page 5 : Formulaires dynamiques d'inscription */}
        {currentPage === 5 && (
          <DynamicFormsList
            schoolFileTemplates={schoolFileTemplates}
            existingResponses={formResponses}
            onFormSubmit={handleDynamicFormSubmit}
            onValidationChange={handleDynamicFormsValidationChange}
            enable={enable}
            onFileUpload={handleSchoolFileUpload}
            onSignatureSubmit={handleSignatureSubmit}
          />
        )}

        {/* Dernière page : Section Fichiers parents */}
        {currentPage === 6 && hasParentFilesStep && (
          <FilesToUpload
            parentFileTemplates={parentFileTemplates}
            uploadedFiles={uploadedFiles}
            onFileUpload={handleFileUpload}
            onFileDelete={handleDeleteFile}
            enable={enable}
          />
        )}
      </div>
    </div>
  );
}
