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

interface AddCustomFieldModalProps {
  isOpen: boolean;
  onClose: () => void;
  onSave: (key: string, value: string, section: string) => Promise<void>;
  section: string;
}

export default function AddCustomFieldModal({ isOpen, onClose, onSave, section }: AddCustomFieldModalProps) {
  const [key, setKey] = useState('');
  const [value, setValue] = useState('');
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!key.trim()) {
      setError('La clé est requise');
      return;
    }
    setLoading(true);
    setError('');
    try {
      await onSave(key, value, section);
      setKey('');
      setValue('');
      onClose();
    } catch (err: any) {
      setError(err.message || 'Erreur lors de l\'ajout du champ');
    } finally {
      setLoading(false);
    }
  };

  return (
    <Modal isOpen={isOpen} onClose={onClose} className="max-w-md w-full p-6">
      <h2 className="text-xl font-semibold mb-4">Ajouter un champ personnalisé</h2>
      <form onSubmit={handleSubmit} className="space-y-4">
        <div>
          <label className="block font-medium mb-1">Clé</label>
          <input
            type="text"
            className="w-full border rounded p-2"
            value={key}
            onChange={e => setKey(e.target.value)}
            placeholder="Nom du champ"
            required
          />
        </div>
        <div>
          <label className="block font-medium mb-1">Valeur</label>
          <input
            type="text"
            className="w-full border rounded p-2"
            value={value}
            onChange={e => setValue(e.target.value)}
            placeholder="Valeur du champ"
          />
        </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 ? 'Ajout...' : 'Ajouter'}</Button>
        </div>
      </form>
    </Modal>
  );
}