import { useState } from 'react';
import Button from '../../components/common/Button';
import ErrorMessage from '../../components/common/ErrorMessage';
import { LIBELLES_REFERENTIEL } from './referentielsConfig';
import styles from './Admin.module.css';

/* Formulaire générique piloté par la description des champs du référentiel
   (voir referentielsConfig.js) : les 4 onglets partagent ce composant. */
export default function ReferentielForm({ referentiel, valeurInitiale, donnees, onEnregistrer, onAnnuler }) {
  const [valeurs, setValeurs] = useState(() =>
    Object.fromEntries(
      referentiel.champs.map(champ => [champ.name, valeurInitiale?.[champ.name] ?? ''])
    )
  );
  const [enCours, setEnCours] = useState(false);
  const [erreur, setErreur] = useState('');

  function handleChange(name, valeur) {
    setValeurs(precedentes => ({ ...precedentes, [name]: valeur }));
  }

  async function handleSubmit(event) {
    event.preventDefault();
    setErreur('');
    setEnCours(true);
    try {
      /* Les identifiants de référentiel arrivent en chaîne depuis <select> :
         l'API attend des entiers. */
      const corps = Object.fromEntries(
        referentiel.champs.map(champ => [
          champ.name,
          champ.type === 'select' ? Number(valeurs[champ.name]) : valeurs[champ.name],
        ])
      );
      await onEnregistrer(corps);
    } catch (e) {
      setErreur(e.message || "L'enregistrement a échoué.");
    } finally {
      setEnCours(false);
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      {referentiel.champs.map(champ => (
        <div key={champ.name} className={styles.field}>
          <label className={styles.label} htmlFor={champ.name}>{champ.label}</label>
          {champ.type === 'select' ? (
            <select
              id={champ.name}
              className={styles.input}
              value={valeurs[champ.name]}
              onChange={e => handleChange(champ.name, e.target.value)}
              required={champ.required}
            >
              <option value="">— Choisir —</option>
              {(donnees[champ.options] || []).map(option => {
                const { idField, labelField } = LIBELLES_REFERENTIEL[champ.options];
                return (
                  <option key={option[idField]} value={option[idField]}>
                    {option[labelField]}
                  </option>
                );
              })}
            </select>
          ) : (
            <input
              id={champ.name}
              type={champ.type}
              className={styles.input}
              value={valeurs[champ.name]}
              onChange={e => handleChange(champ.name, e.target.value)}
              required={champ.required}
            />
          )}
        </div>
      ))}

      {erreur && <ErrorMessage message={erreur} />}

      <div className={styles.modalActions}>
        <Button variant="secondary" type="button" onClick={onAnnuler} disabled={enCours}>
          Annuler
        </Button>
        <Button variant="primary" type="submit" disabled={enCours}>
          {enCours ? 'Enregistrement…' : 'Enregistrer'}
        </Button>
      </div>
    </form>
  );
}