"use client";

import { useState } from "react";
import dynamic from "next/dynamic";
import { motion, AnimatePresence } from "framer-motion";
import { Sparkles, ArrowRight, Heart } from "lucide-react";

// Dynamically import FoodCanvas to prevent SSR errors (Three.js relies on document/window)
const FoodCanvas = dynamic(() => import("./FoodCanvas"), {
  ssr: false,
  loading: () => (
    <div className="w-full h-full flex flex-col justify-center items-center gap-4 bg-darkbg-light/30 rounded-full border border-gold/10">
      <div className="w-16 h-16 rounded-full border-t-2 border-r-2 border-gold animate-spin" />
      <span className="font-sans text-[10px] tracking-[0.2em] uppercase text-gold/60">Loading 3D Culinary Assets...</span>
    </div>
  ),
});

export default function SignatureFoods() {
  const [activeIdx, setActiveIdx] = useState(0);
  const [isHovered, setIsHovered] = useState(false);
  const [liked, setLiked] = useState<Record<number, boolean>>({});

  const foods = [
    {
      name: "Rajamannar Ghee Dosa",
      tamilName: "நெய் மசாலா தோசை",
      price: "₹550",
      description:
        "A crispy golden crepe spun from stone-ground organic red rice batter, smeared with spiced garlic-chili podi, filled with an aromatic mash of heritage forest potatoes, and roasted with hand-churned A2 cow ghee.",
      highlight: "A2 Ghee Roast • Slow Fermented Batter",
      ingredients: ["Red Rice", "A2 Ghee", "Garlic Podi", "Spiced Potato Mash"],
    },
    {
      name: "Chola Samrat Thali",
      tamilName: "சோழ சாம்ராட் தட்டு",
      price: "₹1,450",
      description:
        "A grand imperial culinary tribute featuring twenty distinct heirloom delicacies. Served in heavy brass katoris on a fresh banana leaf, incorporating hand-turned aviyal, steaming ponni rice, robust pepper rasam, and elaneer payasam.",
      highlight: "Heritage Recipe • Imperial Dining Feast",
      ingredients: ["Chettinad Sambar", "Mappillai Samba Rice", "Pepper Rasam", "Elaneer Payasam"],
    },
  ];

  const toggleLike = (idx: number, e: React.MouseEvent) => {
    e.stopPropagation();
    setLiked(prev => ({ ...prev, [idx]: !prev[idx] }));
  };

  return (
    <section className="relative min-h-screen py-24 px-6 md:px-12 flex flex-col justify-center overflow-hidden bg-darkbg-light border-b border-gold/10">
      
      {/* Background Decorative Element */}
      <div className="absolute top-[10%] left-[5%] w-72 h-72 rounded-full bg-gold/5 blur-[120px] pointer-events-none" />
      <div className="absolute bottom-[10%] right-[5%] w-72 h-72 rounded-full bg-maroon/10 blur-[120px] pointer-events-none" />

      <div className="container max-w-6xl mx-auto relative z-10">
        
        {/* Section Title */}
        <div className="mb-16 flex flex-col items-center lg:items-start text-center lg:text-left">
          <span className="font-sans text-[10px] tracking-[0.4em] uppercase text-gold font-semibold flex items-center gap-2 mb-3">
            <Sparkles size={12} className="animate-pulse" /> S I G N A T U R E   M A S T E R P I E C E S
          </span>
          <h2 className="font-serif text-4xl md:text-6xl font-bold tracking-wide text-foreground uppercase leading-tight">
            THE ROYAL TASTES
          </h2>
          <div className="w-24 h-[1px] bg-gradient-to-r from-gold via-gold-dark to-transparent mt-4" />
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
          
          {/* Left Side: Interactive Foods Card List */}
          <div className="lg:col-span-6 flex flex-col gap-6 order-2 lg:order-1">
            {foods.map((food, idx) => {
              const isActive = activeIdx === idx;
              return (
                <div
                  key={idx}
                  onClick={() => setActiveIdx(idx)}
                  onMouseEnter={() => {
                    setActiveIdx(idx);
                    setIsHovered(true);
                  }}
                  onMouseLeave={() => setIsHovered(false)}
                  className={`clickable p-6 md:p-8 rounded-lg transition-all duration-500 border relative group overflow-hidden ${
                    isActive
                      ? "bg-white border-gold/60 shadow-[0_15px_30px_rgba(24,135,84,0.08)]"
                      : "bg-white/40 border-stone-200 hover:border-gold/40 hover:bg-white"
                  }`}
                >
                  {/* Decorative glowing gradient border for active */}
                  {isActive && (
                    <div className="absolute inset-x-0 bottom-0 h-[2px] bg-gradient-to-r from-transparent via-gold to-transparent" />
                  )}

                  {/* Top line with category, price and like */}
                  <div className="flex justify-between items-start gap-4 mb-4">
                    <div>
                      <span className="font-sans text-[9px] tracking-[0.3em] uppercase text-gold-dark font-bold block mb-1">
                        {food.highlight}
                      </span>
                      <h3 className="font-serif text-xl md:text-2xl font-bold text-stone-900 tracking-wide uppercase transition-colors group-hover:text-maroon">
                        {food.name}
                      </h3>
                      <p className="font-serif text-xs text-gold-dark/75 italic font-medium tracking-wide">
                        {food.tamilName}
                      </p>
                    </div>

                    <div className="flex items-center gap-3">
                      <span className="font-serif text-lg md:text-xl font-bold text-maroon">
                        {food.price}
                      </span>
                      <button
                        onClick={(e) => toggleLike(idx, e)}
                        className="w-8 h-8 rounded-full border border-gold/30 flex items-center justify-center text-maroon hover:bg-maroon/5 hover:border-maroon/40 transition-all duration-300 relative z-10"
                      >
                        <Heart size={14} fill={liked[idx] ? "#188754" : "none"} className={liked[idx] ? "scale-110" : ""} />
                      </button>
                    </div>
                  </div>

                  {/* Body description */}
                  <p className="font-sans text-xs md:text-sm text-stone-700 leading-relaxed tracking-wide mb-6">
                    {food.description}
                  </p>

                  {/* Ingredients Tags */}
                  <div className="flex flex-wrap gap-2">
                    {food.ingredients.map((ing, i) => (
                      <span
                        key={i}
                        className="font-sans text-[9px] tracking-wider text-maroon/80 bg-maroon/5 border border-maroon/10 px-2 py-0.5 rounded-full"
                      >
                        {ing}
                      </span>
                    ))}
                  </div>

                  {/* Hover visual arrow reveal */}
                  <div className="absolute right-4 bottom-4 opacity-0 group-hover:opacity-100 translate-x-4 group-hover:translate-x-0 transition-all duration-300">
                    <ArrowRight size={16} className="text-gold" />
                  </div>
                </div>
              );
            })}
          </div>

          {/* Right Side: Interactive 3D WebGL Canvas Plate */}
          <div
            className="lg:col-span-6 h-[400px] md:h-[500px] w-full flex items-center justify-center order-1 lg:order-2"
            onMouseEnter={() => setIsHovered(true)}
            onMouseLeave={() => setIsHovered(false)}
          >
            <div className="w-[300px] h-[300px] md:w-[450px] md:h-[450px] relative rounded-full shadow-[0_30px_70px_rgba(0,0,0,0.7)] flex items-center justify-center bg-[radial-gradient(circle,_var(--tw-gradient-stops))] from-maroon/20 via-transparent to-transparent">
              {/* Outer decorative circular rings */}
              <div className="absolute inset-0 rounded-full border border-gold/10 pointer-events-none scale-105 animate-[spin_40s_linear_infinite]" />
              <div className="absolute inset-6 rounded-full border border-gold/5 pointer-events-none scale-[1.03] animate-[spin_60s_linear_infinite_reverse]" />
              
              {/* R3F WebGL Canvas Container */}
              <FoodCanvas activeIdx={activeIdx} isHovered={isHovered} />
            </div>
          </div>

        </div>

      </div>
    </section>
  );
}
