import React, { useState } from 'react';
import RecipeService from '../services/RecipeService';

const RecipeForm: React.FC = () => {
  const [file, setFile] = useState<File | null>(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [success, setSuccess] = useState(false);

  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 audio');
      return;
    }

    setLoading(true);
    setError(null);
    setSuccess(false);

    try {
      await RecipeService.createRecipe(file);
      setSuccess(true);
      setFile(null);
      // Réinitialiser le champ de fichier
      const fileInput = document.getElementById('audio-file') as HTMLInputElement;
      if (fileInput) fileInput.value = '';
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Une erreur est survenue');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="recipe-form">
      <h2>Créer une nouvelle recette</h2>

      {error && <div className="error-message">{error}</div>}
      {success && <div className="success-message">Recette créée avec succès!</div>}

      <form onSubmit={handleSubmit}>
        <div className="form-group">
          <label htmlFor="audio-file">Fichier audio des ingrédients:</label>
          <input
            type="file"
            id="audio-file"
            accept="audio/*"
            onChange={handleFileChange}
            disabled={loading}
          />
          <small>Enregistrez-vous en listant les ingrédients disponibles</small>
        </div>

        <button type="submit" disabled={loading || !file}>
          {loading ? 'Création en cours...' : 'Créer la recette'}
        </button>
      </form>
    </div>
  );
};

export default RecipeForm;