import { useState, useEffect } from 'react';
import { User, Mail, Phone, UserCheck, DollarSign, Percent } 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';

const InscriptionForm = ( { students, registrationDiscounts, tuitionDiscounts, registrationFees, tuitionFees, onSubmit, currentStep, groups }) => {
    const [formData, setFormData] = useState({
        studentLastName: '',
        studentFirstName: '',
        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(currentStep || 1);
    const [selectedStudent, setSelectedEleve] = useState('');
    const [existingGuardians, setExistingGuardians] = useState([]);
    const [totalRegistrationAmount, setTotalRegistrationAmount] = useState(0);
    const [totalTuitionAmount, setTotalTuitionAmount] = useState(0);

    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.responsableType === "new" && formData.guardianEmail.length > 0) ||
                          (formData.responsableType === "existing" && formData.selectedGuardians.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(() => {
        // 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(() => {
        setStep(currentStep || 1);
      }, [currentStep]);

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

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

    const nextStep = () => {
        if (step < steps.length) {
            setStep(step + 1);
        }
    };

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

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

    const handleResponsableSelection = (guardianId) => {
        setFormData((prevData) => {
            const selectedGuardians = prevData.selectedGuardians.includes(guardianId)
                ? prevData.selectedGuardians.filter(id => id !== guardianId)
                : [...prevData.selectedGuardians, guardianId];
            return { ...prevData, selectedGuardians };
        });
    };

    const submit = () => {
        console.log('Submitting form data:', formData);
        onSubmit(formData);
    }

    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">
        <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">
            <div className="flex flex-col space-y-4 mt-6">
              <label className="flex items-center space-x-3">
                <input
                    type="radio"
                    name="responsableType"
                    value="new"
                    checked={formData.responsableType === 'new'}
                    onChange={handleChange}
                    className="form-radio h-3 w-3 text-emerald-600 focus:ring-emerald-500 hover:ring-emerald-400 checked:bg-emerald-600 checked:h-3 checked:w-3"
                />
                <span className="text-gray-900">Nouveau Responsable</span>
              </label>
              <label className="flex items-center space-x-3">
                <input
                    type="radio"
                    name="responsableType"
                    value="existing"
                    checked={formData.responsableType === 'existing'}
                    onChange={handleChange}
                    className="form-radio h-3 w-3 text-emerald-600 focus:ring-emerald-500 hover:ring-emerald-400 checked:bg-emerald-600 checked:h-3 checked:w-3"
                />
                <span className="text-gray-900">Responsable Existant</span>
              </label>
            </div>
            {formData.responsableType === 'new' && (
              <>
              <InputTextIcon
                  name="guardianEmail"
                  type="email"
                  IconItem={Mail}
                  placeholder="Email du responsable"
                  value={formData.guardianEmail}
                  onChange={handleChange}
                  className="w-full mt-4"
              />
              <InputTextIcon
                name="guardianPhone"
                type="tel"
                IconItem={Phone}
                placeholder="Numéro de téléphone (optionnel)"
                value={formData.guardianPhone}
                onChange={handleChange}
                className="w-full mt-4"
            />
              </>
            )}

            {formData.responsableType === 'existing' && (
              <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>
                      {students.map((student, index) => (
                        <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}>
                        <label className="flex items-center space-x-3 mt-2">
                          <input
                              type="checkbox"
                              checked={formData.selectedGuardians.includes(guardian.id)}
                              className="form-checkbox h-5 w-5 text-emerald-600"
                              onChange={() => handleResponsableSelection(guardian.id)}
                          />
                          <span className="text-gray-900">
                              {guardian.last_name && guardian.first_name ? `${guardian.last_name} ${guardian.first_name}` : `${guardian.email}`}
                          </span>
                        </label>
                      </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'a été créée sur les frais d'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'inscription n'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'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'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>
                {groups.map((group) => (
                  <div key={group.id} className="flex items-center space-x-3">
                    <input
                      type="radio"
                      name="fileGroup"
                      value={group.id}
                      checked={formData.selectedFileGroup === group.id}
                      onChange={(e) => setFormData({
                        ...formData,
                        selectedFileGroup: parseInt(e.target.value)
                      })}
                      className="form-radio h-4 w-4 text-emerald-600"
                    />
                    <label className="text-gray-900">
                      {group.name}
                      {group.description && (
                        <span className="text-sm text-gray-500 ml-2">
                          ({group.description})
                        </span>
                      )}
                    </label>
                  </div>
                ))}
              </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'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">{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.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">
          {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>
      </div>
    );
}

export default InscriptionForm;