recipe_app/frontend/src/pages/RecipePage.tsx

import { useParams } from "react-router-dom";
import { useState, useEffect } from "react";
import { getRecipeById } from "../services/frontendApi.js";
import { type Recipe, type Ingredient } from "../types/Recipe"
import StarRating from "../components/StarRating.tsx"
import { setDBStars } from "../services/frontendApi.js";

function RecipePage() {
  const [recipe, setRecipe] = useState<Recipe>({
    details: {},
    ingredients: [],
    steps: []
  });
  const [error, setError] = useState<string | null>(null);
  const [loading, setLoading] = useState(true);
  const { id } = useParams();
  const isWebSource = recipe && recipe.details && recipe.details.author
    ? /http|com/.test(recipe.details.author) //etc
    : false;
  const [stars, setStars] = useState<number>(0);
  const [initialStars, setInitialStars] = useState<number | null>(null);

  useEffect(() => {
    const loadRecipe = async () => {
      try {
        const recipe = await getRecipeById(id);
        setRecipe(recipe);
        setStars(recipe.details?.stars ?? 0)
        setInitialStars(recipe.details?.stars ?? 0);
        console.log(recipe)
      } catch (error) {
        console.log(error);
        setError("Failed to load recipes...");
      } finally {
        setLoading(false);
      }
    };
    loadRecipe();
  }, [id]);

  useEffect(() => {
    if (initialStars === null || initialStars === stars) {
      return;
    }

    const updateStarsInDB = async () => {
      await setDBStars(id, stars);
    };

    updateStarsInDB();
  }, [stars]);
  return (
    <div className="recipe page-outer">

      {error && <div className="error-message">{error}</div>}

      {loading ? (
        <div className="loading">Loading...</div>
      ) : (

        <div className="recipe-card">
          <div className="border-b-2 border-amber-300 pb-4 mb-6">
            <h3 className="text-2xl lg:text-3xl font-bold text-amber-900 mb-2">{recipe.details.name}</h3>
            <p className="text-amber-700 italic text-lg">{recipe.details.cuisine}</p>
            <p>prep: {recipe.details.prep_minutes} min | cook: {recipe.details.cook_minutes} min</p>
          </div>

          <div className="grid lg:grid-cols-2 gap-6 mb-6">
            <div className="bg-white rounded-lg p-4 shadow-sm border border-amber-100">
              <h4 className="text-xl font-semibold text-amber-800 mb-3 flex items-center">
                <span className="w-2 h-2 bg-amber-500 rounded-full mr-2"></span>
                Ingredients:
              </h4>
              <ul className="space-y-2">
                {recipe.ingredients.map((ingredient: Ingredient, index) => (
                  <li key={index} className="text-gray-700 flex items-start">
                    <span className="w-1.5 h-1.5 bg-amber-400 rounded-full mt-2 mr-3 flex-shrink-0"></span>
                    <span className="font-medium">{ingredient.raw}</span>
                  </li>
                ))}
              </ul>
            </div>

            <div className="bg-white rounded-lg p-4 shadow-sm border border-amber-100">
              <h4 className="text-xl font-semibold text-amber-800 mb-3 flex items-center">
                <span className="w-2 h-2 bg-amber-500 rounded-full mr-2"></span>
                Instructions:
              </h4>
              <ol className="space-y-3">
                {recipe.steps && Object.keys(recipe.steps || {}).map((stepNumber) => (
                  <li key={stepNumber} className="text-gray-700 flex items-start">
                    <span className="bg-amber-500 text-white rounded-full w-6 h-6 flex items-center justify-center text-sm font-bold mr-3 mt-0.5 flex-shrink-0">
                      {recipe.steps[parseInt(stepNumber)].step_number}
                    </span>
                    <span className="leading-relaxed">{recipe.steps[parseInt(stepNumber)].instruction}</span>
                  </li>
                ))}
              </ol>
            </div>
          </div>

          <div className="border-t-2 border-amber-300 pt-4">
            <div className="flex justify-between items-center text-sm text-amber-600">
              {isWebSource ? (
                <span>Source: {recipe.details.author}</span>
              ) : (
                <span>From the kitchen of {recipe.details.author}</span>
              )}
              <span>
                <StarRating rating={stars} onRatingChange={(newRating: number) => setStars(newRating)} />
              </span>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

export default RecipePage;