import React, { useState } from 'react';
import { createRecipe } from '@/api/recipe';
import { useNavigate } from 'react-router-dom';
import axios from 'axios';

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

  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);

    try {
      const recipe = await createRecipe(file);
      navigate(`/recipes/${recipe.id}`); // Rediriger vers la page de détails de la recette
    } catch (err) {
      if (axios.isAxiosError(err) && err.response) {
        setError(err.response.data.error || 'Erreur lors de la création de la recette');
      } else {
        setError('Erreur réseau lors de la création de la recette');
      }
    } finally {
      setLoading(false);
    }
  };

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

      {error && <div className="error-message">{error}</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; 