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

const RecipeDetail: React.FC = () => {
  const { id } = useParams<{ id: string }>();
  const navigate = useNavigate();
  const [recipe, setRecipe] = useState<Recipe | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const fetchRecipe = async () => {
      if (!id) return;

      try {
        const data = await getRecipeById(id);
        setRecipe(data);
      } catch (err) {
        if (axios.isAxiosError(err) && err.response) {
          setError(err.response.data.error || 'Erreur lors de la récupération de la recette');
        } else {
          setError('Erreur réseau lors de la récupération de la recette');
        }
      } finally {
        setLoading(false);
      }
    };

    fetchRecipe();
  }, [id]);

  const handleDelete = async () => {
    if (!id) return;

    if (window.confirm('Êtes-vous sûr de vouloir supprimer cette recette?')) {
      try {
        await deleteRecipe(id);
        navigate('/recipes');
      } 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 de la recette...</div>;
  if (error) return <div className="error-message">{error}</div>;
  if (!recipe) return <div>Recette non trouvée</div>;

  return (
    <div className="recipe-detail">
      <h2>{recipe.title}</h2>

      <div className="recipe-section">
        <h3>Ingrédients</h3>
        <p>{recipe.ingredients}</p>
      </div>

      <div className="recipe-section">
        <h3>Recette</h3>
        <div className="recipe-content">
          {recipe.generatedRecipe.split('\n').map((line, index) => (
            <p key={index}>{line}</p>
          ))}
        </div>
      </div>

      <div className="recipe-actions">
        <button onClick={() => navigate('/recipes')} className="btn">
          Retour à la liste
        </button>
        <button onClick={handleDelete} className="btn delete-btn">
          Supprimer cette recette
        </button>
      </div>
    </div>
  );
};

export default RecipeDetail; 