import React, { useEffect } from 'react';
import SelectChoice from '@/components/SelectChoice';

export default function PaymentMethodSelector({
  formData,
  setFormData,
  registrationPaymentModes,
  tuitionPaymentModes,
  errors,
  setIsPageValid,
}) {
  useEffect(() => {
    const isValid = !Object.keys(formData).some(
      (field) => getLocalError(field) !== ''
    );
    setIsPageValid(isValid);
  }, [formData, setIsPageValid]);

  const paymentModesOptions = [
    { id: 1, name: 'Prélèvement SEPA' },
    { id: 2, name: 'Virement' },
    { id: 3, name: 'Chèque' },
    { id: 4, name: 'Espèce' },
  ];

  const getError = (field) => {
    return errors?.student?.[field]?.[0];
  };

  const getLocalError = (field) => {
    if (
      // Student Form
      (field === 'registration_payment' &&
        (!formData.registration_payment ||
          String(formData.registration_payment).trim() === '')) ||
      (field === 'tuition_payment' &&
        (!formData.tuition_payment ||
          String(formData.tuition_payment).trim() === ''))
    ) {
      return 'Champs requis';
    }
    return '';
  };

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

  return (
    <>
      <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
        {/* Titre */}
        <h2 className="text-2xl font-semibold mb-6 text-gray-800 border-b pb-2">
          Frais d'inscription
        </h2>

        {/* Section d'information */}
        <div className="mb-6 bg-gray-50 p-4 rounded-lg border border-gray-100">
          <p className="text-gray-700 text-sm mb-2">
            <strong className="text-gray-900">Montant :</strong>{' '}
            {formData.totalRegistrationFees} €
          </p>
        </div>

        <SelectChoice
          name="registration_payment"
          label="Mode de Paiement"
          placeHolder="Sélectionner un mode de paiement"
          selected={formData.registration_payment}
          callback={(e) => onChange('registration_payment', e.target.value)}
          choices={registrationPaymentModes.map((mode) => ({
            value: mode.mode,
            label:
              paymentModesOptions.find((option) => option.id === mode.mode)
                ?.name || 'Mode inconnu',
          }))}
          required
          errorMsg={
            getError('registration_payment') ||
            getLocalError('registration_payment')
          }
        />
      </div>

      <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200 mt-12">
        {/* Titre */}
        <h2 className="text-2xl font-semibold mb-6 text-gray-800 border-b pb-2">
          Frais de scolarité
        </h2>

        {/* Section d'information */}
        <div className="mb-6 bg-gray-50 p-4 rounded-lg border border-gray-100">
          <p className="text-gray-700 text-sm mb-2">
            <strong className="text-gray-900">Montant :</strong>{' '}
            {formData.totalTuitionFees} €
          </p>
        </div>

        <SelectChoice
          name="tuition_payment"
          label="Mode de Paiement"
          placeHolder="Sélectionner un mode de paiement"
          selected={formData.tuition_payment}
          callback={(e) => onChange('tuition_payment', e.target.value)}
          choices={tuitionPaymentModes.map((mode) => ({
            value: mode.mode,
            label:
              paymentModesOptions.find((option) => option.id === mode.mode)
                ?.name || 'Mode inconnu',
          }))}
          required
          errorMsg={
            getError('tuition_payment') || getLocalError('tuition_payment')
          }
        />
      </div>
    </>
  );
}