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

interface UploadClientFileModalProps {
  isOpen: boolean;
  onClose: () => void;
  onUpload: (file: File, section: string) => Promise<void>;
  section: string;
}

export default function UploadClientFileModal({ isOpen, onClose, onUpload, section }: UploadClientFileModalProps) {
  const [file, setFile] = useState<File | null>(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');

  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.files && e.target.files.length > 0) {
      setFile(e.target.files[0]);
    }
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!file) {
      setError('Veuillez sélectionner un fichier');
      return;
    }
    setLoading(true);
    setError('');
    try {
      await onUpload(file, section);
      setFile(null);
      onClose();
    } catch (err: any) {
      setError(err.message || 'Erreur lors de l\'upload');
    } 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">Charger un fichier</h2>
      <form onSubmit={handleSubmit} className="space-y-4">
        <div>
          <input type="file" onChange={handleFileChange} className="w-full" />
        </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 || !file}>{loading ? 'Chargement...' : 'Charger'}</Button>
        </div>
      </form>
    </Modal>
  );
}