import { useParams } from "react-router-dom"
import type { Recipe } from "../../types/recipe"
import { useEffect, useState } from "react"
import { fetchRecipe } from "../../api/points/RecipePoint"
import { getRecipeEditUrl, getRecipeListUrl } from "../../routes"
import ButtonLink from "../basics/ButtonLink"


/**
 * Displays the full detail of a single recipe,
 * including its ingredients, instructions, and image.
 */
export default function RecipeDetailPage() {
  // Extract recipe ID from route params
  const { id } = useParams<{ id: string }>()
  // the recipe loaded from the backend, don't change this! it's required for scaling
  const [recipe, setRecipe] = useState<Recipe | null>(null)
  // Working copy for re-calculating ingredients
  const [recipeWorkingCopy, setRecipeWorkingCopy] = useState<Recipe|null>(null)
  // load recipe data whenever id changes
    useEffect(() => {
      const loadRecipe = async () => {
        if (id) {
          try {
            // Fetch recipe data when editing an existing one
            console.log("loading recipe with id", id)
            const data = await fetchRecipe(id)
            setRecipe(data)
          } catch (err) {
            console.error(err)
          }
        }
      }
  
      loadRecipe()
    }, [id])

    // set original recipe data and working copy when recipe changes
    useEffect( ()=> {
        setRecipeWorkingCopy(recipe);
    }, [recipe])


  if (!recipe || !recipeWorkingCopy) {
    return <p className="p-6">Recipe not found.</p>
  }
  

   /** recalculate ingredients based on the amount of servings */
  const recalculateIngredients = (newAmount: number) => {
    // Always calculate factor from the *original recipe*, not the working copy
    const factor = newAmount / recipe.servings.amount

    // Create a new ingredient list with updated amounts
    const updatedIngredientGroupList = recipe.ingredientGroupList.map((ingGrp) => ({
      ...ingGrp, 
      ingredientList: ingGrp.ingredientList.map((ing) => ({
        ...ing,
        amount: ing.amount * factor,
      }))
    }))

    // Update working copy with new servings + recalculated ingredients
    setRecipeWorkingCopy({
      ...recipeWorkingCopy,
      servings: {
        ...recipeWorkingCopy.servings,
        amount: newAmount,
      },
      ingredientGroupList: updatedIngredientGroupList,
    })
  }

  return (    
    <div className="p-6 max-w-2xl mx-auto">
      <h1 className="content-title">{recipeWorkingCopy.title}</h1>

      {/* Recipe image */}
      {recipe.imageUrl && (
        <img
          src={recipe.imageUrl}
          alt={recipe.title}
          className="w-full rounded-xl mb-4 border"
        />
      )}

    {/* Servings */}
    <div className="flex flex-row items-center gap-2 bg-blue-100 columns-2 rounded p-2 mb-4">
      <p className="mb-2">For {recipeWorkingCopy.servings.amount} {recipeWorkingCopy.servings.unit}</p>
        <input 
          type="number"
          className="input-field w-20 ml-auto"
          value={recipeWorkingCopy.servings.amount}
          onChange={
            e => {
              recalculateIngredients(Number(e.target.value))
            }
          }
        />
      </div>
      {/* Ingredients */}
      <h2 className="section-heading">Zutaten</h2>
      <ul>
        {recipeWorkingCopy.ingredientGroupList.map((group,i) => (
          <div key={i}>
          {/* the title is optional, only print if present */}
          {group.title && group.title.trim() !== "" && (
            <h3 className="subsection-heading">{group.title}</h3>
          )}
          <ul className="default-list">
            {group.ingredientList.map((ing, j) => (
            <li key={j}>
              {ing.amount} {ing.unit ?? ""} {ing.name}
            </li>
            ))}
          </ul>
        </div>
        ))}
      </ul>

      {/* Instructions */}
      <h2 className="section-heading">Zubereitung</h2>
      <p className="mb-6">{recipe.instructions}</p>

      {/* Action buttons */}
      <div className="button-group">
        <ButtonLink
          to={getRecipeEditUrl(recipe.id)}
          className="basic-button primary-button-bg primary-button-text" 
          text="Bearbeiten"
        />
        <ButtonLink
          to={getRecipeListUrl()}
          className="basic-button default-button-bg default-button-text" 
          text="Zurueck"        
        />
      </div>
    </div>

  )
}