'use client'

import { useState } from 'react';
import Footer from "@/components/Footer/Footer";
import Image from "next/image";
import Link from "next/link";
import styles from "./menu.module.css";
import { menuData } from "@/utils/constant";
import { motion } from "framer-motion";

export default function MenuPage() {
    const [activeCategory, setActiveCategory] = useState(-1); // -1 means "All"

    // Get all items when "All" is selected
    const getAllItems = () => {
        return menuData.flatMap(section => section.items);
    };

    const displayItems = activeCategory === -1
        ? getAllItems()
        : menuData[activeCategory].items;

    // Animation variants
    const heroVariants = {
        hidden: { opacity: 0, y: -20 },
        visible: {
            opacity: 1,
            y: 0,
            transition: { duration: 0.8 }
        }
    };

    const tabsVariants = {
        hidden: { opacity: 0, y: 20 },
        visible: {
            opacity: 1,
            y: 0,
            transition: {
                staggerChildren: 0.1,
                delayChildren: 0.2
            }
        }
    };

    const tabVariants = {
        hidden: { opacity: 0, y: 10 },
        visible: {
            opacity: 1,
            y: 0,
            transition: { duration: 0.4 }
        }
    };

    const gridVariants = {
        hidden: { opacity: 0 },
        visible: {
            opacity: 1,
            transition: {
                staggerChildren: 0.1,
                delayChildren: 0.2
            }
        }
    };

    const cardVariants = {
        hidden: { opacity: 0, y: 30 },
        visible: {
            opacity: 1,
            y: 0,
            transition: { duration: 0.5 }
        }
    };

    return (
        <main className={styles.main}>

            <motion.section
                className={styles.hero}
                initial="hidden"
                animate="visible"
                variants={heroVariants}
            >
                <div className={styles.heroContent}>
                    <h1 className={styles.heroTitle}>Our Menu</h1>
                    <p className={styles.breadcrumb}>
                        <Link href="/">Home</Link> / Menu
                    </p>
                </div>
            </motion.section>

            <section className={styles.sectionHeading}>
                <div className={styles.smallHeading} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '10px' }}>
                    <Image src="/images/dinner.png" alt="Menu Section Decorative Dinner Icon" width={24} height={24} />
                    <span>ANTALYA</span>
                    <Image src="/images/eat.png" alt="Menu Section Decorative Cutlery Icon" width={24} height={24} />
                </div>
                <h2 className={styles.mainHeading}>Delicious Turkish Flavours, Mezze, and More</h2>
                <p className={styles.descriptionMenu}>
                    Craving authentic Turkish cuisine? At Antalya, our menu features a wide selection of traditional dishes - from crispy mezze appetizers to charcoal-grilled kebabs and hearty mains. Whether you’re seeking small bites or a full feast, we have something to satisfy every palate.
                </p>
            </section>

            <section className={styles.menuSection}>
                {/* Category Tabs */}
                <motion.div
                    className={styles.tabs}
                    initial="hidden"
                    whileInView="visible"
                    viewport={{ once: true }}
                    variants={tabsVariants}
                >
                    {/* All Tab */}
                    <motion.button
                        className={`${styles.tab} ${activeCategory === -1 ? styles.activeTab : ''}`}
                        onClick={() => setActiveCategory(-1)}
                        variants={tabVariants}
                        whileHover={{ scale: 1.05 }}
                        whileTap={{ scale: 0.95 }}
                    >
                        <Image src="/images/home/Categories/All.jpg" alt="All" width={35} height={35} className={styles.tabImage} />
                        All Menu
                    </motion.button>

                    {/* Category Tabs */}
                    {menuData.map((section, index) => (
                        <motion.button
                            key={index}
                            className={`${styles.tab} ${activeCategory === index ? styles.activeTab : ''}`}
                            onClick={() => setActiveCategory(index)}
                            variants={tabVariants}
                            whileHover={{ scale: 1.05 }}
                            whileTap={{ scale: 0.95 }}
                        >
                            <Image
                                src={section.image}
                                alt={section.category}
                                width={35}
                                height={35}
                                className={styles.tabImage}
                            />
                            {section.category}
                        </motion.button>
                    ))}
                </motion.div>

                {/* Menu Items Grid */}
                <motion.div
                    className={styles.menuGrid}
                    key={activeCategory}
                    initial="hidden"
                    animate="visible"
                    variants={gridVariants}
                >
                    {displayItems.map((item, itemIndex) => (
                        <motion.div
                            key={itemIndex}
                            className={styles.menuCard}
                            variants={cardVariants}
                            whileHover={{
                                y: -8,
                                transition: { duration: 0.3 }
                            }}
                        >
                            <div className={styles.imageFrame}>
                                <div className={styles.imageWrapper}>
                                    <Image
                                        src={item.image}
                                        alt={item.name}
                                        fill
                                        className={styles.dishImage}
                                    />
                                </div>
                            </div>

                            <div className={styles.cardContent}>
                                <div className={styles.cardHeader}>
                                    <h3 className={styles.dishName}>{item.name}</h3>
                                </div>
                                <p className={styles.description}>{item.description}</p>
                            </div>
                            <div className={styles.priceBubble}>
                                <span className={styles.price}>{item.price}</span>
                            </div>
                        </motion.div>
                    ))}
                </motion.div>
            </section>

            <Footer />
        </main>
    );
}