import React, { useState, useEffect } from 'react';
import { Modal } from '@/components/ui/modal';
import Button from '@/components/ui/button/Button';

interface EditClientSectionModalProps {
  isOpen: boolean;
  onClose: () => void;
  client: any;
  section: 'finance' | 'pro' | 'relation' | 'personal' | 'contact';
  onSave: (updatedFields: any) => Promise<void>;
}

const sectionFields: Record<string, { label: string; name: string; type?: string }[]> = {
  finance: [
    { label: 'Banque', name: 'bank' },
    { label: 'N° de compte', name: 'accountNumber' },
    { label: 'Titulaire', name: 'accountHolder' },
    { label: 'Objet du compte', name: 'accountPurpose' },
    { label: 'Statut', name: 'accountStatus' },
    { label: 'Autre', name: 'financialOther' },
  ],
  pro: [
    { label: 'Employeur', name: 'employer' },
    { label: 'Responsable', name: 'professionalResponsible' },
    { label: 'Téléphone', name: 'professionalPhone' },
    { label: 'Ville', name: 'professionalCity' },
    { label: 'Pays', name: 'professionalCountry' },
    { label: 'Début de contrat', name: 'contractStart', type: 'date' },
    { label: 'Statut', name: 'professionalStatus' },
    { label: 'Autre', name: 'professionalOther' },
  ],
  relation: [
    { label: 'Nom du père', name: 'fatherName' },
    { label: 'Contact du père', name: 'fatherContact' },
    { label: 'Nom de la mère', name: 'motherName' },
    { label: 'Contact de la mère', name: 'motherContact' },
    { label: "Nom de l'époux(se)", name: 'spouseName' },
    { label: "Contact de l'époux(se)", name: 'spouseContact' },
    { label: 'Autre', name: 'relationOther' },
  ],
  personal: [
    { label: 'Prénom', name: 'firstName' },
    { label: 'Nom', name: 'lastName' },
    { label: 'Date de naissance', name: 'dateOfBirth', type: 'date' },
    { label: 'Numéro AVS', name: 'socialSecurityNumber' },
    { label: 'Nationalité', name: 'nationality' },
    { label: 'Statut', name: 'status' },
  ],
  contact: [
    { label: 'Email', name: 'email', type: 'email' },
    { label: 'Téléphone mobile', name: 'mobilePhone' },
    { label: 'Autre téléphone', name: 'otherPhone' },
    { label: 'Rue', name: 'street' },
    { label: 'Numéro', name: 'streetNumber' },
    { label: 'Code postal', name: 'postalCode' },
    { label: 'Canton', name: 'stateCanton' },
  ],
};

export default function EditClientSectionModal({ isOpen, onClose, client, section, onSave }: EditClientSectionModalProps) {
  const fields = sectionFields[section];
  const [form, setForm] = useState<any>({});
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');

  useEffect(() => {
    if (isOpen && client) {
      const initial: any = {};
      fields.forEach(f => {
        initial[f.name] = client?.[f.name] || '';
      });
      setForm(initial);
    }
    // eslint-disable-next-line
  }, [isOpen, client, section]);

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target;
    setForm(prev => ({ ...prev, [name]: value }));
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);
    setError('');
    try {
      await onSave(form);
      onClose();
    } catch (err: any) {
      setError(err.message || 'Erreur lors de la modification');
    } finally {
      setLoading(false);
    }
  };

  if (!fields) return null;

  return (
    <Modal isOpen={isOpen} onClose={onClose} className="max-w-lg w-full p-6">
      <h2 className="text-xl font-semibold mb-4">Modifier la section</h2>
      <form onSubmit={handleSubmit} className="space-y-4">
        {fields.map(field => (
          <div key={field.name} className="space-y-1">
            <label className="block font-medium">{field.label}</label>
            <input
              type={field.type || 'text'}
              name={field.name}
              value={form[field.name]}
              onChange={handleChange}
              className="w-full border rounded p-2"
            />
          </div>
        ))}
        {error && <div className="text-red-600 text-sm">{error}</div>}
        <div className="flex justify-end space-x-2 mt-4">
          <Button type="button" variant="outline" onClick={onClose} disabled={loading}>Annuler</Button>
          <Button type="submit" disabled={loading}>{loading ? 'Enregistrement...' : 'Enregistrer'}</Button>
        </div>
      </form>
    </Modal>
  );
}