recipe_app/frontend/src/components/RecipeBookTabs.tsx

import { useState, useEffect } from "react";
import { Link, useLocation } from 'react-router-dom';
import { getRecipes } from "../services/frontendApi.js";

const RecipeBookTabs = () => {
  const location = useLocation();
  const [lastViewedRecipeId, setLastViewedRecipeId] = useState<number | null>(null);

  const loadRandomRecipeId = async () => {
    try {
      const recipes = await getRecipes();
      if (recipes.length > 0) {
        const randomIndex = Math.floor(Math.random() * recipes.length);
        setLastViewedRecipeId(recipes[randomIndex].id);
      }
    } catch (error) {
      console.error('Error loading recipes:', error);
    }
  };

  // update lastViewedRecipe id if we navigate to /recipe/${id}
  useEffect(() => {
    const match = /^\/recipe\/(\d+)$/.exec(location.pathname);
    if (match) {
      setLastViewedRecipeId(parseInt(match[1]));
    }
  }, [location.pathname, lastViewedRecipeId]);

  // choose random recipe on first load
  useEffect(() => {
    if (!lastViewedRecipeId) {
      loadRandomRecipeId();
    }
  }, []);


  const tabs = [
    { id: '/', label: 'Cookbook', icon: '📚' },
    { id: `/recipe/${lastViewedRecipeId}`, label: 'Recipe', icon: '🥗' },
    { id: '/add-recipe', label: 'Add', icon: '➕' },
    { id: '/about', label: 'About', icon: '🍽️' },
  ];

  return (
    <div className="bg-amber-50 h-16 flex-shrink-0 rounded-tl-lg rounded-tr-lg">
      <div className="relative h-full">
        <div className="absolute bottom-0 left-0 right-0 h-0.5 bg-amber-200"></div>

        <div className="flex space-x-1 px-6 pt-4 h-full items-end justify-center">
          {tabs.map((tab) => {
            const isActive = location.pathname === tab.id || (location.pathname.startsWith(tab.id) && tab.id === "/recipe/");

            return (
              <Link
                key={tab.id}
                to={tab.id}
                className={`
                  relative px-3 py-2 md:px-6 md:py-3 rounded-t-lg font-bold text-sm transform text-amber-800
                  ${isActive
                    ? 'bg-amber-100 scale-105 z-10 border-t-2 border-amber-200'
                    : 'bg-amber-200 hover:bg-amber-100 hover:text-amber-700 hover:scale-102 shadow-sm'
                  }
                  before:absolute before:bottom-0 before:left-0 before:right-0 before:h-0.5 
                  ${isActive ? '' : ''}
                `}
              >
                <div className="flex items-center">
                  <span className={`text-lg pr-2 ${window.innerWidth <= 640 ? 'hidden' : ''}`}>{tab.icon}</span>
                  <span>{tab.label}</span>
                </div>

                {
                  isActive && (
                    <>
                      <div className={`absolute -left-2 bottom-0 w-2 h-2 bg-white ${location.pathname === '/' ? 'hidden' : ''}`}>
                        <div className="absolute top-0 left-0 w-2 h-2 bg-amber-200 rounded-br-lg"></div>
                      </div>
                      <div className={`absolute -right-2 bottom-0 w-2 h-2 bg-white ${location.pathname === '/about' ? 'hidden' : ''}`}>
                        <div className="absolute top-0 right-0 w-2 h-2 bg-amber-200 rounded-bl-lg"></div>
                      </div>
                    </>
                  )
                }
              </Link>
            );
          })}
        </div>
      </div>
    </div>
  );
};

export default RecipeBookTabs;