import { useState, useEffect, useRef } from 'react';
import { User, Mail } from 'lucide-react';
import InputTextIcon from '@/components/InputTextIcon';
import ToggleSwitch from '@/components/ToggleSwitch';
import Button from '@/components/Button';
import Table from '@/components/Table';
import FeesSection from '@/components/Structure/Tarification/FeesSection';
import DiscountsSection from '@/components/Structure/Tarification/DiscountsSection';
import SectionTitle from '@/components/SectionTitle';
import ProgressStep from '@/components/ProgressStep';
import logger from '@/utils/logger';
import Popup from '@/components/Popup';
import InputPhone from '../InputPhone';
import { PhoneLabel } from '../PhoneLabel';
import CheckBox from '@/components/CheckBox';
import RadioList from '@/components/RadioList';

const InscriptionForm = ({
  students,
  registrationDiscounts,
  tuitionDiscounts,
  registrationFees,
  tuitionFees,
  profiles,
  onSubmit,
  groups,
  showOnlyStep2 = false,
}) => {
  const [formData, setFormData] = useState(() => {
    if (showOnlyStep2) {
      return {
        guardianLastName: '',
        guardianFirstName: '',
        guardianEmail: '',
        guardianPhone: '',
        selectedGuardians: [],
        responsableType: 'new',
      };
    }
    return {
      studentLastName: '',
      studentFirstName: '',
      guardianLastName: '',
      guardianFirstName: '',
      guardianEmail: '',
      guardianPhone: '',
      selectedGuardians: [],
      responsableType: 'new',
      autoMail: false,
      selectedRegistrationDiscounts: [],
      selectedRegistrationFees: registrationFees.map((fee) => fee.id),
      selectedTuitionDiscounts: [],
      selectedTuitionFees: [],
      selectedFileGroup: null, // Ajout du groupe de fichiers sélectionné
    };
  });

  const [step, setStep] = useState(1);
  const [selectedStudent, setSelectedEleve] = useState('');
  const [existingGuardians, setExistingGuardians] = useState([]);
  const [totalRegistrationAmount, setTotalRegistrationAmount] = useState(0);
  const [totalTuitionAmount, setTotalTuitionAmount] = useState(0);
  const [filteredStudents, setFilteredStudents] = useState(students);

  const [popupVisible, setPopupVisible] = useState(false);
  const [popupMessage, setPopupMessage] = useState('');

  const formDataRef = useRef(formData);

  const stepTitles = {
    1: 'Nouvel élève',
    2: 'Nouveau Responsable',
    3: "Frais d'inscription",
    4: 'Frais de scolarité',
    5: 'Documents requis',
    6: 'Récapitulatif',
  };

  const steps = [
    'Élève',
    'Responsable',
    'Inscription',
    'Scolarité',
    'Documents',
    'Récap',
  ];

  const isStep1Valid = formData.studentLastName && formData.studentFirstName;
  const isStep2Valid =
    formData.selectedGuardians.length > 0 ||
    (!formData.emailError &&
      formData.guardianEmail.length > 0 &&
      filteredStudents.length === 0);
  const isStep3Valid = formData.selectedRegistrationFees?.length > 0;
  const isStep4Valid = formData.selectedTuitionFees?.length > 0;
  const isStep5Valid = formData.selectedFileGroup !== null;
  const isStep6Valid =
    isStep1Valid &&
    isStep2Valid &&
    isStep3Valid &&
    isStep4Valid &&
    isStep5Valid;

  const isStepValid = (stepNumber) => {
    switch (stepNumber) {
      case 1:
        return isStep1Valid;
      case 2:
        return isStep2Valid;
      case 3:
        return isStep3Valid;
      case 4:
        return isStep4Valid;
      case 5:
        return isStep5Valid;
      case 6:
        return isStep6Valid;
      default:
        return false;
    }
  };

  useEffect(() => {
    if (!showOnlyStep2) {
      // Calcul du montant total des frais d'inscription lors de l'initialisation
      const initialTotalRegistrationAmount = calculateFinalRegistrationAmount(
        registrationFees.map((fee) => fee.id),
        []
      );
      setTotalRegistrationAmount(initialTotalRegistrationAmount);
    }
  }, [registrationDiscounts, registrationFees]);

  useEffect(() => {
    formDataRef.current = formData; // Mettre à jour la référence à chaque changement de formData
  }, [formData]);

  const handleToggleChange = () => {
    setFormData({ ...formData, autoMail: !formData.autoMail });
  };

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData((prevState) => ({
      ...prevState,
      [name]: value,
    }));
  };

  const validateAndSubmit = async () => {
    const existingProfile = profiles.find(
      (profile) => profile.email === formData.guardianEmail
    );

    if (existingProfile) {
      console.log('existingProfile : ', existingProfile);
      await setFormData((prevData) => ({
        ...prevData,
        guardianEmail: existingProfile.email, // Mettre à jour le champ guardianEmail avec l'email du profil
        isExistingParentProfile: true, // Indiquer que le profil est un parent existant
        existingProfileId: existingProfile.id,
      }));
    }

    // Utiliser la dernière version de formData via formDataRef
    logger.debug('Submitting form data:', formDataRef.current);
    onSubmit(formDataRef.current);
  };

  const nextStep = async () => {
    if (step === 2) {
      const existingProfile = profiles.find(
        (profile) => profile.email === formData.guardianEmail
      );

      if (existingProfile) {
        console.log('existingProfile : ', existingProfile);
        await setFormData((prevData) => ({
          ...prevData,
          guardianEmail: existingProfile.email, // Mettre à jour le champ guardianEmail avec l'email du profil
          isExistingParentProfile: true, // Indiquer que le profil est un parent existant
          existingProfileId: existingProfile.id,
        }));
      }
    }

    if (!showOnlyStep2 && step < steps.length) {
      setStep(step + 1);
    }
  };

  const prevStep = () => {
    if (!showOnlyStep2 && step > 1) {
      setStep(step - 1);
    }
  };

  const handleEleveSelection = (student) => {
    setSelectedEleve(student);
    setFormData((prevData) => ({
      ...prevData,
      selectedGuardians: [],
    }));
    setExistingGuardians(student.guardians);
  };

  const handleResponsableSelection = (guardianId, guardianEmail) => {
    setFormData((prevData) => {
      const isSelected = prevData.selectedGuardians.includes(guardianId);
      const selectedGuardians = isSelected
        ? prevData.selectedGuardians.filter((id) => id !== guardianId) // Retirer le guardian si déjà sélectionné
        : [...prevData.selectedGuardians, guardianId]; // Ajouter le guardian s'il n'est pas sélectionné

      // Mettre à jour l'email uniquement si un guardian est sélectionné
      const updatedGuardianEmail = isSelected ? '' : guardianEmail;

      // Si aucun guardian n'est sélectionné, réinitialiser le tableau des élèves
      if (selectedGuardians.length === 0) {
        setFilteredStudents(students); // Réafficher tous les élèves
        setSelectedEleve(null);
      }

      return {
        ...prevData,
        selectedGuardians,
        guardianEmail: updatedGuardianEmail,
      };
    });
  };

  const submit = () => {
    setTimeout(() => {
      logger.debug('Submitting form data:', formData);
      onSubmit(formData);
    }, 0);
  };

  const handleRegistrationFeeSelection = (feeId) => {
    setFormData((prevData) => {
      const selectedRegistrationFees =
        prevData.selectedRegistrationFees.includes(feeId)
          ? prevData.selectedRegistrationFees.filter((id) => id !== feeId)
          : [...prevData.selectedRegistrationFees, feeId];
      const finalAmount = calculateFinalRegistrationAmount(
        selectedRegistrationFees,
        prevData.selectedRegistrationDiscounts
      );
      setTotalRegistrationAmount(finalAmount);
      return { ...prevData, selectedRegistrationFees };
    });
  };

  const handleTuitionFeeSelection = (feeId) => {
    setFormData((prevData) => {
      const selectedTuitionFees = prevData.selectedTuitionFees.includes(feeId)
        ? prevData.selectedTuitionFees.filter((id) => id !== feeId)
        : [...prevData.selectedTuitionFees, feeId];
      const finalAmount = calculateFinalTuitionAmount(
        selectedTuitionFees,
        prevData.selectedTuitionDiscounts
      );
      setTotalTuitionAmount(finalAmount);
      return { ...prevData, selectedTuitionFees };
    });
  };

  const handleRegistrationDiscountSelection = (discountId) => {
    setFormData((prevData) => {
      const selectedRegistrationDiscounts =
        prevData.selectedRegistrationDiscounts.includes(discountId)
          ? prevData.selectedRegistrationDiscounts.filter(
              (id) => id !== discountId
            )
          : [...prevData.selectedRegistrationDiscounts, discountId];
      const finalAmount = calculateFinalRegistrationAmount(
        prevData.selectedRegistrationFees,
        selectedRegistrationDiscounts
      );
      setTotalRegistrationAmount(finalAmount);
      return { ...prevData, selectedRegistrationDiscounts };
    });
  };

  const handleTuitionDiscountSelection = (discountId) => {
    setFormData((prevData) => {
      const selectedTuitionDiscounts =
        prevData.selectedTuitionDiscounts.includes(discountId)
          ? prevData.selectedTuitionDiscounts.filter((id) => id !== discountId)
          : [...prevData.selectedTuitionDiscounts, discountId];
      const finalAmount = calculateFinalTuitionAmount(
        prevData.selectedTuitionFees,
        selectedTuitionDiscounts
      );
      setTotalTuitionAmount(finalAmount);
      return { ...prevData, selectedTuitionDiscounts };
    });
  };

  const calculateFinalRegistrationAmount = (
    selectedRegistrationFees,
    selectedRegistrationDiscounts
  ) => {
    const totalFees = selectedRegistrationFees.reduce((sum, feeId) => {
      const fee = registrationFees.find((f) => f.id === feeId);
      if (fee && !isNaN(parseFloat(fee.base_amount))) {
        return sum + parseFloat(fee.base_amount);
      }
      return sum;
    }, 0);

    const totalDiscounts = selectedRegistrationDiscounts.reduce(
      (sum, discountId) => {
        const discount = registrationDiscounts.find((d) => d.id === discountId);
        if (discount) {
          if (
            discount.discount_type === 0 &&
            !isNaN(parseFloat(discount.amount))
          ) {
            // Currency
            return sum + parseFloat(discount.amount);
          } else if (
            discount.discount_type === 1 &&
            !isNaN(parseFloat(discount.amount))
          ) {
            // Percent
            return sum + (totalFees * parseFloat(discount.amount)) / 100;
          }
        }
        return sum;
      },
      0
    );

    const finalAmount = totalFees - totalDiscounts;

    return finalAmount.toFixed(2);
  };

  const calculateFinalTuitionAmount = (
    selectedTuitionFees,
    selectedTuitionDiscounts
  ) => {
    const totalFees = selectedTuitionFees.reduce((sum, feeId) => {
      const fee = tuitionFees.find((f) => f.id === feeId);
      if (fee && !isNaN(parseFloat(fee.base_amount))) {
        return sum + parseFloat(fee.base_amount);
      }
      return sum;
    }, 0);

    const totalDiscounts = selectedTuitionDiscounts.reduce(
      (sum, discountId) => {
        const discount = tuitionDiscounts.find((d) => d.id === discountId);
        if (discount) {
          if (
            discount.discount_type === 0 &&
            !isNaN(parseFloat(discount.amount))
          ) {
            // Currency
            return sum + parseFloat(discount.amount);
          } else if (
            discount.discount_type === 1 &&
            !isNaN(parseFloat(discount.amount))
          ) {
            // Percent
            return sum + (totalFees * parseFloat(discount.amount)) / 100;
          }
        }
        return sum;
      },
      0
    );

    const finalAmount = totalFees - totalDiscounts;

    return finalAmount.toFixed(2);
  };

  return (
    <div className="space-y-4 mt-6">
      {!showOnlyStep2 && (
        <ProgressStep
          steps={steps}
          stepTitles={stepTitles}
          currentStep={step}
          setStep={setStep}
          isStepValid={isStepValid}
        />
      )}

      {step === 1 && (
        <div className="mt-6">
          <InputTextIcon
            name="studentLastName"
            type="text"
            IconItem={User}
            placeholder="Nom de l'élève"
            value={formData.studentLastName}
            onChange={handleChange}
            className="w-full"
          />
          <InputTextIcon
            name="studentFirstName"
            type="text"
            IconItem={User}
            placeholder="Prénom de l'élève"
            value={formData.studentFirstName}
            onChange={handleChange}
            className="w-full"
          />
        </div>
      )}

      {step === 2 && (
        <div className="mt-6">
          {/* Nom, Prénom et Téléphone */}
          <InputTextIcon
            name="guardianLastName"
            type="text"
            IconItem={User}
            placeholder="Nom du responsable"
            value={formData.guardianLastName}
            onChange={handleChange}
            className="w-full mt-4"
          />
          <InputTextIcon
            name="guardianFirstName"
            type="text"
            IconItem={User}
            placeholder="Prénom du responsable"
            value={formData.guardianFirstName}
            onChange={handleChange}
            className="w-full mt-4"
          />
          <InputPhone
            name="guardianPhone"
            label="Numéro de téléphone (optionnel)"
            value={formData.guardianPhone}
            onChange={handleChange}
            className="w-full mt-4"
          />

          {/* Email du responsable */}
          <InputTextIcon
            name="guardianEmail"
            type="email"
            IconItem={Mail}
            placeholder="Email du responsable"
            value={formData.guardianEmail}
            onChange={(e) => {
              const email = e.target.value;
              const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

              setFormData((prevData) => ({
                ...prevData,
                guardianEmail: email,
                emailError:
                  email.length > 0 && // Le champ de mail est non null
                  !emailRegex.test(email) &&
                  filteredStudents.length === 0 // Format invalide ou aucun résultat
                    ? "Format d'email invalide ou aucun élève trouvé"
                    : '',
              }));

              // Filtrer les responsables affichés dans le tableau
              const filteredGuardians = students
                .flatMap((student) => student.guardians) // Récupérer tous les guardians
                .filter((guardian) =>
                  guardian.associated_profile_email
                    .toLowerCase()
                    .includes(email.toLowerCase())
                );

              // Filtrer les élèves en fonction des responsables
              const filteredStudents = students.filter((student) =>
                student.guardians.some((guardian) =>
                  filteredGuardians.some(
                    (filteredGuardian) => filteredGuardian.id === guardian.id
                  )
                )
              );

              setFilteredStudents(filteredStudents); // Mettre à jour l'état des élèves filtrés

              // Réinitialiser existingGuardians et selectedStudent si l'élève sélectionné n'est plus dans le tableau
              if (
                !filteredStudents.some(
                  (student) => student.id === selectedStudent?.id
                )
              ) {
                setSelectedEleve(null); // Réinitialiser l'élève sélectionné
                setExistingGuardians([]); // Réinitialiser les responsables associés
                setFormData((prevData) => ({
                  ...prevData,
                  selectedGuardians: [], // Réinitialiser les responsables sélectionnés
                }));
              }
            }}
            errorMsg={formData.emailError}
            className="w-full mt-4"
          />

          {/* Tableau des élèves */}
          <div className="mt-4">
            <div
              className="mt-4"
              style={{ maxHeight: '300px', overflowY: 'auto' }}
            >
              <table className="min-w-full bg-white border">
                <thead>
                  <tr>
                    <th className="px-4 py-2 border">Nom</th>
                    <th className="px-4 py-2 border">Prénom</th>
                  </tr>
                </thead>
                <tbody>
                  {filteredStudents.map(
                    (
                      student,
                      index // Utiliser les élèves filtrés
                    ) => (
                      <tr
                        key={student.id}
                        className={`cursor-pointer ${
                          selectedStudent && selectedStudent.id === student.id
                            ? 'bg-emerald-600 text-white'
                            : index % 2 === 0
                              ? 'bg-emerald-100'
                              : ''
                        }`}
                        onClick={() => handleEleveSelection(student)}
                      >
                        <td className="px-4 py-2 border">
                          {student.last_name}
                        </td>
                        <td className="px-4 py-2 border">
                          {student.first_name}
                        </td>
                      </tr>
                    )
                  )}
                </tbody>
              </table>
            </div>
            {selectedStudent && (
              <div className="mt-4">
                <h3 className="font-bold">
                  Responsables associés à {selectedStudent.last_name}{' '}
                  {selectedStudent.first_name} :
                </h3>
                {existingGuardians.map((guardian) => (
                  <div key={guardian.id} className="mt-2">
                    <CheckBox
                      item={{ id: guardian.id }}
                      formData={{
                        selectedGuardians: formData.selectedGuardians,
                      }}
                      handleChange={() =>
                        setFormData((prevData) => {
                          const isSelected =
                            prevData.selectedGuardians.includes(guardian.id);
                          const updatedSelectedGuardians = isSelected
                            ? prevData.selectedGuardians.filter(
                                (id) => id !== guardian.id
                              ) // Retirer le guardian si décoché
                            : [...prevData.selectedGuardians, guardian.id]; // Ajouter le guardian si coché

                          return {
                            ...prevData,
                            selectedGuardians: updatedSelectedGuardians,
                          };
                        })
                      }
                      fieldName="selectedGuardians"
                      itemLabelFunc={() =>
                        guardian.last_name && guardian.first_name
                          ? `${guardian.last_name} ${guardian.first_name} - ${guardian.associated_profile_email}`
                          : `${guardian.associated_profile_email}`
                      }
                    />
                  </div>
                ))}
              </div>
            )}
          </div>
        </div>
      )}

      {step === 3 && (
        <div>
          {registrationFees.length > 0 ? (
            <>
              <div className="mb-4">
                <FeesSection
                  fees={registrationFees}
                  type={0}
                  subscriptionMode={true}
                  selectedFees={formData.selectedRegistrationFees}
                  handleFeeSelection={handleRegistrationFeeSelection}
                />
              </div>
              <SectionTitle title="Réductions" />
              <div className="mb-4">
                {registrationDiscounts.length > 0 ? (
                  <DiscountsSection
                    discounts={registrationDiscounts}
                    type={0}
                    subscriptionMode={true}
                    selectedDiscounts={formData.selectedRegistrationDiscounts}
                    handleDiscountSelection={
                      handleRegistrationDiscountSelection
                    }
                  />
                ) : (
                  <p
                    className="bg-orange-100 border border-orange-400 text-orange-700 px-4 py-3 rounded relative"
                    role="alert"
                  >
                    <strong className="font-bold">Information</strong>
                    <span className="block sm:inline">
                      {' '}
                      Aucune réduction n&apos;a été créée sur les frais
                      d&apos;inscription.
                    </span>
                  </p>
                )}
              </div>
              <SectionTitle title="Montant total" />
              <Table
                data={[{ id: 1 }]}
                columns={[
                  {
                    name: 'LIBELLE',
                    transform: () => <span>MONTANT TOTAL</span>,
                  },
                  {
                    name: 'TOTAL',
                    transform: () => <b>{totalRegistrationAmount} €</b>,
                  },
                ]}
                defaultTheme="bg-cyan-100"
              />
            </>
          ) : (
            <p
              className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative"
              role="alert"
            >
              <strong className="font-bold">Attention!</strong>
              <span className="block sm:inline">
                {' '}
                Aucun frais d&apos;inscription n&apos;a été créé.
              </span>
            </p>
          )}
        </div>
      )}

      {step === 4 && (
        <div>
          {tuitionFees.length > 0 ? (
            <>
              <div className="mb-4">
                <FeesSection
                  fees={tuitionFees}
                  type={1}
                  subscriptionMode={true}
                  selectedFees={formData.selectedTuitionFees}
                  handleFeeSelection={handleTuitionFeeSelection}
                />
              </div>
              <SectionTitle title="Réductions" />
              <div className="mb-4">
                {tuitionDiscounts.length > 0 ? (
                  <DiscountsSection
                    discounts={tuitionDiscounts}
                    type={1}
                    subscriptionMode={true}
                    selectedDiscounts={formData.selectedTuitionDiscounts}
                    handleDiscountSelection={handleTuitionDiscountSelection}
                  />
                ) : (
                  <p
                    className="bg-orange-100 border border-orange-400 text-orange-700 px-4 py-3 rounded relative"
                    role="alert"
                  >
                    <strong className="font-bold">Information</strong>
                    <span className="block sm:inline">
                      {' '}
                      Aucune réduction n&apos;a été créée sur les frais de
                      scolarité.
                    </span>
                  </p>
                )}
              </div>
              <SectionTitle title="Montant total" />
              <Table
                data={[{ id: 1 }]}
                columns={[
                  {
                    name: 'LIBELLE',
                    transform: () => <span>MONTANT TOTAL</span>,
                  },
                  {
                    name: 'TOTAL',
                    transform: () => <b>{totalTuitionAmount} €</b>,
                  },
                ]}
                defaultTheme="bg-cyan-100"
              />
            </>
          ) : (
            <p
              className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative"
              role="alert"
            >
              <strong className="font-bold">Attention!</strong>
              <span className="block sm:inline">
                {' '}
                Aucun frais de scolarité n&apos;a été créé.
              </span>
            </p>
          )}
        </div>
      )}

      {step === 5 && (
        <div>
          {groups.length > 0 ? (
            <div className="space-y-4">
              <h3 className="font-bold">Sélectionnez un groupe de documents</h3>
              <RadioList
                sectionLabel=""
                items={groups.map((group) => ({
                  id: group.id,
                  label: `${group.name}${
                    group.description ? ` (${group.description})` : ''
                  }`,
                }))}
                formData={{
                  ...formData,
                  selectedFileGroup: parseInt(formData.selectedFileGroup, 10),
                }}
                handleChange={(e) => {
                  const value = parseInt(e.target.value, 10);
                  setFormData((prevData) => ({
                    ...prevData,
                    selectedFileGroup: value,
                  }));
                }}
                fieldName="selectedFileGroup"
                className="mt-4"
              />
            </div>
          ) : (
            <p
              className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative"
              role="alert"
            >
              <strong className="font-bold">Attention!</strong>
              <span className="block sm:inline">
                Aucun groupe de documents n&apos;a été créé.
              </span>
            </p>
          )}
        </div>
      )}

      {step === steps.length && (
        <div>
          <div className="space-y-4">
            <section>
              <h3 className="font-bold">Élève</h3>
              <table className="min-w-full bg-white border">
                <thead>
                  <tr>
                    <th className="px-4 py-2 border">Nom</th>
                    <th className="px-4 py-2 border">Prénom</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td className="px-4 py-2 border">
                      {formData.studentLastName}
                    </td>
                    <td className="px-4 py-2 border">
                      {formData.studentFirstName}
                    </td>
                  </tr>
                </tbody>
              </table>
            </section>
            <section>
              <h3 className="font-bold">Responsable(s)</h3>
              {formData.responsableType === 'new' && (
                <table className="min-w-full bg-white border">
                  <thead>
                    <tr>
                      <th className="px-4 py-2 border">Email</th>
                      <th className="px-4 py-2 border">Téléphone</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td className="px-4 py-2 border">
                        {formData.guardianEmail}
                      </td>
                      <td className="px-4 py-2 border">
                        <PhoneLabel phoneNumber={formData.guardianPhone} />
                      </td>
                    </tr>
                  </tbody>
                </table>
              )}
              {formData.responsableType === 'existing' && selectedStudent && (
                <div>
                  <p>
                    Associé(s) à : {selectedStudent.nom}{' '}
                    {selectedStudent.prenom}
                  </p>
                  <table className="min-w-full bg-white border">
                    <thead>
                      <tr>
                        <th className="px-4 py-2 border">Nom</th>
                        <th className="px-4 py-2 border">Prénom</th>
                        <th className="px-4 py-2 border">Email</th>
                      </tr>
                    </thead>
                    <tbody>
                      {existingGuardians
                        .filter((guardian) =>
                          formData.selectedGuardians.includes(guardian.id)
                        )
                        .map((guardian) => (
                          <tr key={guardian.id}>
                            <td className="px-4 py-2 border">
                              {guardian.last_name}
                            </td>
                            <td className="px-4 py-2 border">
                              {guardian.first_name}
                            </td>
                            <td className="px-4 py-2 border">
                              {guardian.associated_profile_email}
                            </td>
                          </tr>
                        ))}
                    </tbody>
                  </table>
                </div>
              )}
            </section>
          </div>
          <div className="mt-4">
            <ToggleSwitch
              label="Envoi automatique"
              checked={formData.autoMail}
              onChange={handleToggleChange}
            />
          </div>
        </div>
      )}

      <div className="flex justify-end mt-4 space-x-4">
        {showOnlyStep2 ? (
          <>
            <Button
              text="Valider"
              onClick={validateAndSubmit}
              className={`px-4 py-2 rounded-md shadow-sm focus:outline-none ${
                (step === 1 && !isStep1Valid) ||
                (step === 2 && !isStep2Valid) ||
                (step === 3 && !isStep3Valid) ||
                (step === 4 && !isStep4Valid) ||
                (step === 5 && !isStep5Valid)
                  ? 'bg-gray-300 text-gray-700 cursor-not-allowed'
                  : 'bg-emerald-500 text-white hover:bg-emerald-600'
              }`}
              disabled={
                (step === 1 && !isStep1Valid) ||
                (step === 2 && !isStep2Valid) ||
                (step === 3 && !isStep3Valid) ||
                (step === 4 && !isStep4Valid) ||
                (step === 5 && !isStep5Valid)
              }
              primary
              name="Validate"
            />
          </>
        ) : (
          <>
            {step > 1 && (
              <Button
                text="Précédent"
                onClick={prevStep}
                className="px-4 py-2 bg-gray-300 text-gray-700 rounded-md shadow-sm hover:bg-gray-400 focus:outline-none"
                secondary
                name="Previous"
              />
            )}
            {step < steps.length ? (
              <Button
                text="Suivant"
                onClick={nextStep}
                className={`px-4 py-2 rounded-md shadow-sm focus:outline-none ${
                  (step === 1 && !isStep1Valid) ||
                  (step === 2 && !isStep2Valid) ||
                  (step === 3 && !isStep3Valid) ||
                  (step === 4 && !isStep4Valid) ||
                  (step === 5 && !isStep5Valid)
                    ? 'bg-gray-300 text-gray-700 cursor-not-allowed'
                    : 'bg-emerald-500 text-white hover:bg-emerald-600'
                }`}
                disabled={
                  (step === 1 && !isStep1Valid) ||
                  (step === 2 && !isStep2Valid) ||
                  (step === 3 && !isStep3Valid) ||
                  (step === 4 && !isStep4Valid) ||
                  (step === 5 && !isStep5Valid)
                }
                primary
                name="Next"
              />
            ) : (
              <Button
                text="Valider"
                onClick={submit}
                className="px-4 py-2 bg-emerald-500 text-white rounded-md shadow-sm hover:bg-emerald-600 focus:outline-none"
                primary
                name="Create"
              />
            )}
          </>
        )}
      </div>

      <Popup
        visible={popupVisible}
        message={popupMessage}
        onConfirm={() => setPopupVisible(false)}
        onCancel={() => setPopupVisible(false)}
      />
    </div>
  );
};

export default InscriptionForm;