import React, { useEffect, useState } from 'react';
import { getRecipes, deleteRecipe, Recipe } from '@/api/recipe';
import { Link } from 'react-router-dom';
import axios from 'axios';

const RecipeList: React.FC = () => {
  const [recipes, setRecipes] = useState<Recipe[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const fetchRecipes = async () => {
      try {
        const data = await getRecipes();
        setRecipes(data);
      } catch (err) {
        if (axios.isAxiosError(err) && err.response) {
          setError(err.response.data.error || 'Erreur lors de la récupération des recettes');
        } else {
          setError('Erreur réseau lors de la récupération des recettes');
        }
      } finally {
        setLoading(false);
      }
    };

    fetchRecipes();
  }, []);

  const handleDelete = async (id: string) => {
    if (window.confirm('Êtes-vous sûr de vouloir supprimer cette recette?')) {
      try {
        await deleteRecipe(id);
        setRecipes(recipes.filter(recipe => recipe.id !== id));
      } catch (err) {
        if (axios.isAxiosError(err) && err.response) {
          setError(err.response.data.error || 'Erreur lors de la suppression');
        } else {
          setError('Erreur réseau lors de la suppression');
        }
      }
    }
  };

  if (loading) return <div>Chargement des recettes...</div>;
  if (error) return <div className="error-message">{error}</div>;

  return (
    <div className="recipe-list">
      <h2>Mes recettes</h2>

      {recipes.length === 0 ? (
        <p>Vous n'avez pas encore de recettes. Créez-en une!</p>
      ) : (
        <ul>
          {recipes.map(recipe => (
            <li key={recipe.id} className="recipe-item">
              <h3>{recipe.title}</h3>
              <p><strong>Ingrédients:</strong> {recipe.ingredients}</p>
              <div className="recipe-actions">
                <Link to={`/recipes/${recipe.id}`} className="btn">
                  Voir les détails
                </Link>
                <button onClick={() => handleDelete(recipe.id)} className="btn delete-btn">
                  Supprimer
                </button>
              </div>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
};

export default RecipeList; 