"use client";

import { useState, useMemo, useEffect } from "react";
import { LazyMotion, domAnimation } from "framer-motion";
import DishCard from "./DishCard";
import { categories, menuItems } from "./menuData";

interface MenuPageProps {
  mark?: boolean;
}

export default function MenuPage({ mark = false }: MenuPageProps) {
  const [active, setActive] = useState(categories[0].key);
  const [isMobile, setIsMobile] = useState(false);
  const [visibleCount, setVisibleCount] = useState(9);

  useEffect(() => {
    if (mark && active === "all") {
      setVisibleCount(9);
    }
  }, [active, mark]);

  // Detect mobile
  useEffect(() => {
    const check = () => setIsMobile(window.innerWidth < 768);
    check();
    window.addEventListener("resize", check);
    return () => window.removeEventListener("resize", check);
  }, []);

  // Show only 5 tabs on mobile when mark = false
  const visibleCategories = useMemo(() => {
    if (!mark && isMobile) {
      return categories.slice(0, 5);
    }
    return categories;
  }, [mark, isMobile]);

  const activeItems = useMemo(() => {
    const items = menuItems[active] || [];

    // 🔥 mark = true, ALL tab → show limited items with load more
    if (mark && active === "all") {
      return items.slice(0, visibleCount);
    }

    // mark = false logic (your original)
    if (!mark && isMobile) return items.slice(0, 4);
    return mark ? items : items.slice(0, 6);
  }, [active, mark, isMobile, visibleCount]);
  // Control items shown
  // const activeItems = useMemo(() => {
  //   const items = menuItems[active] || [];

  //   // Show ONLY 4 items on mobile when mark = false
  //   if (!mark && isMobile) {
  //     return items.slice(0, 4);
  //   }

  //   // Desktop – show 6 items
  //   return mark ? items : items.slice(0, 6);
  // }, [active, mark, isMobile]);

  return (
    <LazyMotion features={domAnimation}>
      <section
        className={`relative container justify-center bg-[#FFF7EE] mx-auto px-4 md:px-10 py-8 font-sans`}
      >
        {/* Title */}
        {mark && (
          <div className="text-center mb-5 tracking-tight">
            <h1 className="text-4xl sm:text-5xl md:text-6xl font-bold text-[#E9500E] ">
              Our Delicious Menu
            </h1>
          </div>
        )}
        <div className="mt-2 text-center flex justify-center w-full  mb-10 ">
          <p className=" text-[#F76B1C] max-w-5xl font-medium">
            At Kulcha King, every dish is a tribute to the flavours of North
            India – crispy, buttery kulchas, slow-cooked curries, fragrant
            biryanis and street-style snacks that feel like home. Whether you’re
            grabbing a quick kathi roll or planning a family feast, there’s
            something comforting (and a little bit indulgent) in every bite.
          </p>
        </div>
        {/* Category Tabs */}
        <div className="grid grid-cols-2 xs:grid-cols-3 sm:grid-cols-4 gap-3 mb-10 sm:mb-14 md:flex md:flex-wrap md:justify-center md:gap-4">
          {visibleCategories.map((cat) => (
            <button
              key={cat.key}
              onClick={() => setActive(cat.key)}
              className={`w-full md:w-auto text-center px-4 py-2 text-xs sm:text-sm md:text-base font-semibold uppercase rounded-full border transition-all duration-300
                ${
                  active === cat.key
                    ? "bg-[#E9500E] text-white shadow-md scale-[1.03]"
                    : "bg-white text-[#E9500E] border-[#E9500E] hover:bg-[#E9500E]/10"
                }`}
            >
              {cat.label}
            </button>
          ))}
        </div>

        {/* Menu Grid */}
        <div className="grid grid-cols-2 xs:grid-cols-2 sm:grid-cols-2 lg:grid-cols-3 gap-5 sm:gap-8 lg:gap-10">
          {activeItems.map((dish, i) => (
            <DishCard
              key={dish.name}
              dish={dish}
              delay={i * 0.05}
              priority={i < 3}
            />
          ))}
        </div>

        {/* More button only when ALL + mark = false */}
        {!mark && active === "all" && (
          <div className="mt-10 w-full flex justify-center">
            <a
              href="/menu"
              className="bg-[#E9500E] text-[#F2AE48] px-10 py-3 rounded-full font-semibold shadow-lg "
            >
              More
            </a>
          </div>
        )}
        {mark &&
          active === "all" &&
          activeItems.length < (menuItems["all"]?.length || 0) && (
            <div className="mt-10 w-full flex justify-center">
              <button
                onClick={() => setVisibleCount((prev) => prev + 6)}
                className="bg-[#E9500E] cursor-pointer text-[#F2AE48] px-10 py-3 rounded-full font-semibold shadow-lg"
              >
                Load More
              </button>
            </div>
          )}
      </section>
    </LazyMotion>
  );
}