"use client";

/**
 * SHAHI KITCHEN HOMEPAGE
 * Version with advanced Signature Menu + elegant hero (pre full Sultan redesign)
 */

import React, { useEffect, useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import Lenis from "lenis";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import { Crown, Clock, ArrowRight, UtensilsCrossed } from "lucide-react";
import Navbar from "@/components/Navbar";
import Footer from "@/components/Footer";
import { useCart } from "@/components/CartContext";
import { useLanguage } from "@/lib/language-context";
import { getTranslation } from "@/lib/translations";

gsap.registerPlugin(ScrollTrigger);

export default function ShahiKitchenHomepage() {
  const { addToCart } = useCart();
  const { language } = useLanguage();
  const t = getTranslation(language);

  const [menuFilter, setMenuFilter] = useState<"All" | "Rice" | "Curry" | "Meat" | "Street" | "Roll" | "Sweet">("All");
  const [isMobile, setIsMobile] = useState(false);

  // Mobile video helpers for Signature Menu (duplicated logic, 3s pause)
  const playMobileVideoSignature = (id: string) => {
    document.querySelectorAll<HTMLElement>(".signature-card").forEach((card) => {
      if (card.dataset.id !== id) return;
      const media = card.querySelector<HTMLElement>(".relative.h-48");
      if (!media) return;
      const img = media.querySelector<HTMLImageElement>("img");
      const video = media.querySelector<HTMLVideoElement>("video");
      const gradient = media.querySelector<HTMLElement>(".absolute.inset-0.bg-gradient-to-b");
      if (img) img.style.opacity = "0";
      if (video) {
        video.style.opacity = "1";
        video.play().catch(() => {});
      }
      if (gradient) gradient.style.opacity = "0";
    });
  };

  const pauseAllMobileVideosSignature = () => {
    document.querySelectorAll<HTMLElement>(".signature-card").forEach((card) => {
      const media = card.querySelector<HTMLElement>(".relative.h-48");
      if (!media) return;
      const img = media.querySelector<HTMLImageElement>("img");
      const video = media.querySelector<HTMLVideoElement>("video");
      const gradient = media.querySelector<HTMLElement>(".absolute.inset-0.bg-gradient-to-b");
      if (img) img.style.opacity = "";
      if (video) {
        video.style.opacity = "0";
        video.pause();
        video.currentTime = 0;
      }
      if (gradient) gradient.style.opacity = "";
    });
  };

  const findFocusedVideoItemSignature = (): string | null => {
    const cards = document.querySelectorAll<HTMLElement>('.signature-card[data-has-video="true"]');
    let bestId: string | null = null;
    let bestScore = 0;
    const vh = window.innerHeight;
    const viewportCenter = vh / 2;
    cards.forEach((card) => {
      const rect = card.getBoundingClientRect();
      if (rect.bottom <= 0 || rect.top >= vh) return;
      const visibleTop = Math.max(rect.top, 0);
      const visibleBottom = Math.min(rect.bottom, vh);
      const visibleHeight = visibleBottom - visibleTop;
      const intersectionRatio = visibleHeight / rect.height;
      const cardCenter = rect.top + rect.height / 2;
      const distFromCenter = Math.abs(cardCenter - viewportCenter);
      const centerScore = Math.max(0, 1 - distFromCenter / (vh / 2));
      const score = intersectionRatio * 0.6 + centerScore * 0.4;
      if (score > bestScore && score > 0.15) {
        bestScore = score;
        bestId = card.dataset.id || null;
      }
    });
    return bestId;
  };

  // Lenis smooth scroll
  useEffect(() => {
    const lenis = new Lenis({
      duration: 1.1,
      easing: (t: number) => Math.min(1, 1.001 * (-Math.pow(2, -10 * t) + 1)),
      smoothWheel: true,
    });
    const raf = (time: number) => { lenis.raf(time); requestAnimationFrame(raf); };
    requestAnimationFrame(raf);
    return () => lenis.destroy();
  }, []);

  // Mobile detection for signature menu video logic
  useEffect(() => {
    const updateMobile = () => setIsMobile(window.innerWidth < 768);
    updateMobile();
    window.addEventListener("resize", updateMobile);
    return () => window.removeEventListener("resize", updateMobile);
  }, []);

  useEffect(() => {
    if (!isMobile) {
      pauseAllMobileVideosSignature();
      return;
    }
    let scrollTimeout: ReturnType<typeof setTimeout> | null = null;
    const onScrollOrTouch = () => {
      pauseAllMobileVideosSignature();
      if (scrollTimeout) clearTimeout(scrollTimeout);
      scrollTimeout = setTimeout(() => {
        const focusedId = findFocusedVideoItemSignature();
        if (focusedId) {
          playMobileVideoSignature(focusedId);
        }
      }, 3000);
    };
    window.addEventListener("scroll", onScrollOrTouch, { passive: true });
    window.addEventListener("touchmove", onScrollOrTouch, { passive: true });
    // Initial play after load on mobile (if not scrolling)
    const initialTimeout = setTimeout(() => {
      const firstFocused = findFocusedVideoItemSignature();
      if (firstFocused) {
        playMobileVideoSignature(firstFocused);
      }
    }, 1500);
    return () => {
      window.removeEventListener("scroll", onScrollOrTouch);
      window.removeEventListener("touchmove", onScrollOrTouch);
      if (scrollTimeout) clearTimeout(scrollTimeout);
      clearTimeout(initialTimeout);
    };
  }, [isMobile]);

  const signatureDishes = [
    { 
      id: "chicken-biryani", 
      name: "Chicken Biryani", 
      category: "Rice", 
      price: 149, 
      time: "32 min", 
      desc: "Fragrant aged basmati layered with spiced chicken, saffron & caramelized onions", 
      image: "chicken-biryani-poster.jpg",
      video: "chicken-biryani.mp4"
    },
    { 
      id: "bong-nihari", 
      name: "Bong Nihari", 
      category: "Curry", 
      price: 199, 
      time: "45 min", 
      desc: "Slow-cooked beef shank in rich aromatic gravy with ginger, lemon & fresh naan", 
      image: "bong-nihari-poster.jpg",
      video: "bong-nihari.mp4"
    },
    { 
      id: "panipuri", 
      name: "Golgappy / Panipuri", 
      category: "Street", 
      price: 69, 
      time: "15 min", 
      desc: "Crispy hollow puris filled with spiced chickpeas, potatoes & tangy tamarind water", 
      image: "panipuri-poster.jpg",
      video: "panipuri.mp4"
    },
    { 
      id: "lamm-palak", 
      name: "Lamm Palak", 
      category: "Meat", 
      price: 179, 
      time: "30 min", 
      desc: "Tender lamb cooked with fresh spinach in a flavorful mild gravy", 
      image: "lamm-palak-poster.jpg",
      video: "lamm-palak.mp4"
    },
    { 
      id: "chicken-karahi", 
      name: "Chicken Karahi", 
      category: "Curry", 
      price: 149, 
      time: "28 min", 
      desc: "Wok-tossed chicken in a robust tomato, chili & ginger gravy", 
      image: "chicken-karahi-poster.jpg",
      video: "chicken-karahi.mp4"
    },
    { 
      id: "chicken-haleem", 
      name: "Chicken Haleem", 
      category: "Curry", 
      price: 149, 
      time: "35 min", 
      desc: "Slow-cooked shredded chicken with lentils, wheat & aromatic spices", 
      image: "chicken-haleem-poster.jpg",
      video: "chicken-haleem.mp4"
    },
    { 
      id: "tikka-boti-roll", 
      name: "Tikka Boti Roll", 
      category: "Roll", 
      price: 99, 
      time: "20 min", 
      desc: "Juicy chicken tikka wrapped in soft naan with mint chutney & onions", 
      image: "tikka-boti-roll-poster.jpg",
      video: "tikka-boti-roll.mp4"
    },
    { 
      id: "jalebi", 
      name: "Jalebi", 
      category: "Sweet", 
      price: 119, 
      time: "12 min", 
      desc: "Crispy golden saffron spirals soaked in fragrant sugar syrup", 
      image: "jalebi-poster.jpg",
      video: "jalebi.mp4"
    },
    { 
      id: "kulfi", 
      name: "Kulfi", 
      category: "Sweet", 
      price: 39, 
      time: "10 min", 
      desc: "Traditional frozen milk dessert with cardamom, pistachio & saffron", 
      image: "kulfi-poster.jpg",
      video: "kulfi.mp4"
    },
  ];

  const filtered = menuFilter === "All" ? signatureDishes : signatureDishes.filter(d => d.category === menuFilter);

  const addDish = (d: any) => {
    addToCart({ id: d.id, name: d.name, price: d.price, image: d.image });
  };

  // Advanced GSAP effects for signature cards
  useEffect(() => {
    const cards = document.querySelectorAll<HTMLElement>(".signature-card");

    gsap.fromTo(cards, 
      { opacity: 0, y: 45 },
      {
        opacity: 1, y: 0, duration: 0.9, ease: "power3.out", stagger: 0.06,
        scrollTrigger: { trigger: ".signature-menu-grid", start: "top 82%", once: true }
      }
    );

    cards.forEach((card) => {
      const image = card.querySelector(".signature-image") as HTMLElement | null;
      let bounds: DOMRect;

      const onMouseMove = (e: MouseEvent) => {
        if (!bounds) bounds = card.getBoundingClientRect();
        const x = ((e.clientX - bounds.left) / bounds.width - 0.5) * 2;
        const y = ((e.clientY - bounds.top) / bounds.height - 0.5) * 2;

        gsap.to(card, {
          rotationY: x * 11, rotationX: -y * 8, transformPerspective: 1400, duration: 0.35, ease: "power2.out"
        });
        if (image) gsap.to(image, { x: x * 8, y: y * 6, duration: 0.45, ease: "power2.out" });
      };

      const onMouseLeave = () => {
        gsap.to(card, { rotationY: 0, rotationX: 0, duration: 1.1, ease: "elastic.out(1, 0.45)" });
        if (image) gsap.to(image, { x: 0, y: 0, scale: 1, duration: 0.9, ease: "power2.out" });
      };

      const onMouseEnter = () => {
        if (image) gsap.to(image, { scale: 1.12, duration: 1.1, ease: "power2.out" });
      };

      card.addEventListener("mousemove", onMouseMove);
      card.addEventListener("mouseleave", onMouseLeave);
      card.addEventListener("mouseenter", onMouseEnter);

      (card as any)._cleanup = () => {
        card.removeEventListener("mousemove", onMouseMove);
        card.removeEventListener("mouseleave", onMouseLeave);
        card.removeEventListener("mouseenter", onMouseEnter);
      };
    });

    return () => {
      cards.forEach(card => (card as any)._cleanup?.());
    };
  }, [filtered]);

  return (
    <div className="min-h-screen bg-[#F8F5F0] text-[#2C2A26]">
      <Navbar />

      {/* HERO - Full Banner Video with responsive framing */}
      <section className="relative min-h-[70dvh] sm:min-h-[78dvh] md:min-h-[85dvh] lg:min-h-[92dvh] xl:min-h-[100dvh] 
                          flex items-center justify-center pt-40 sm:pt-44 md:pt-52 lg:pt-[200px] xl:pt-[220px] overflow-hidden bg-[#fbf7ef]">
        
        {/* Banner Video - Responsive sources for proper mobile/iPad visualization (portrait asset) + desktop (landscape).
           Mobile/iPad (<=1024px) uses the compressed banner_mobile-optimized versions (WebM primary for size/speed, MP4 fallback).
           These were generated from the provided banner_mobile.mp4 (original kept as source asset). */}
        <video
          autoPlay
          muted
          playsInline
          preload="auto"
          className="absolute inset-0 z-0 w-full h-full object-cover 
                     object-[50%_10%] sm:object-[50%_12%] md:object-[50%_16%] 
                     lg:object-[50%_20%] xl:object-[50%_24%]"
          onError={(e) => console.error('Hero banner video failed to load', e)}
        >
          {/* Mobile + iPad (portrait-friendly framing for better visualization on small screens) */}
          <source 
            src="/images/logo/banner_mobile-optimized.webm" 
            type="video/webm" 
            media="(max-width: 1024px)" 
          />
          <source 
            src="/images/logo/banner_mobile-optimized.mp4" 
            type="video/mp4" 
            media="(max-width: 1024px)" 
          />
          {/* Desktop / large screens */}
          <source src="/images/logo/banner1.mp4" type="video/mp4" />
        </video>

        {/* Subtle gradient to improve visibility of baked-in text */}
        <div className="absolute inset-0 z-5 bg-gradient-to-b from-black/5 via-transparent to-black/30" />
      </section>

      {/* ADVANCED SIGNATURE MENU */}
      <section id="menu" className="bg-[#fffdf8] px-6 py-20 lg:px-8">
        <div className="mx-auto max-w-7xl">
          <div className="flex flex-col md:flex-row md:items-end justify-between gap-6 mb-10">
            <div>
              <div className="mb-3 inline-flex items-center gap-2 rounded-full bg-[#fff6dc] px-4 py-1.5 text-sm font-semibold text-[#60420d]">
                <UtensilsCrossed className="h-4 w-4" /> {t.signatureMenu.title}
              </div>
              <h2 className="font-serif text-5xl leading-none tracking-[-0.055em] sm:text-6xl md:text-7xl break-words">{t.signatureMenu.title}</h2>
            </div>
            <p className="max-w-md text-lg font-medium text-[#4b5563]">{t.signatureMenu.subtitle}</p>
          </div>

          {/* Filters - modern horizontal scroller on mobile for easy thumb use */}
          <div className="mb-8 -mx-1 px-1 flex gap-2 overflow-x-auto snap-x snap-mandatory pb-2 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
            {["All", "Rice", "Curry", "Meat", "Street", "Roll", "Sweet"].map((cat) => (
              <button
                key={cat}
                onClick={() => setMenuFilter(cat as any)}
                className={`flex-shrink-0 snap-start rounded-full px-5 py-2.5 text-sm font-bold transition-all active:scale-[0.97] touch-manipulation ${menuFilter === cat ? "bg-[#101724] text-white" : "border border-[#e5e1d7] bg-white text-[#182235] hover:border-[#c99a2e] hover:bg-[#fff6dc] active:bg-[#fff6dc]"}`}
              >
                {(t.signatureMenu as any)[`filter${cat}`] || cat}
              </button>
            ))}
          </div>

          {/* Menu Grid with Advanced Effects */}
          <div className="signature-menu-grid grid gap-5 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">
            <AnimatePresence>
              {filtered.map((dish, index) => (
                <motion.div
                  key={dish.id}
                  data-id={dish.id}
                  data-has-video={!!dish.video}
                  layout
                  onClick={() => addDish(dish)}
                  className="signature-card group flex cursor-pointer flex-col overflow-hidden rounded-[2rem] border border-[#EDE6D9] bg-white active:scale-[0.985] active:border-[#c99a2e]/60 transition-transform touch-manipulation"
                >
                  <div 
                    className="relative h-48 overflow-hidden bg-[#F2EDE4]"
                    onMouseEnter={dish.video ? (e) => {
                      const video = e.currentTarget.querySelector("video");
                      if (video) video.play().catch(() => {});
                    } : undefined}
                    onMouseLeave={dish.video ? (e) => {
                      const video = e.currentTarget.querySelector("video");
                      if (video) {
                        video.pause();
                        video.currentTime = 0;
                      }
                    } : undefined}
                  >
                    {dish.video ? (
                      <>
                        {/* Static Poster (first frame) */}
                        <img 
                          src={`/images/dishes/${dish.image}`} 
                          alt={dish.name}
                          className="signature-image absolute inset-0 w-full h-full object-cover transition-opacity duration-150"
                          loading="lazy"
                          onError={(e) => {
                            const base = (dish.video || dish.image || "").replace(".mp4", "").replace(/-optimized/g, "").replace(/-poster/g, "");
                            const fallbacks = [
                              `/images/dishes/${base}-poster.jpg`,
                              `/images/dishes/${base}.jpg`,
                            ].filter(Boolean);
                            let i = 0;
                            const tryNext = () => {
                              if (i < fallbacks.length) {
                                (e.target as HTMLImageElement).src = fallbacks[i++];
                              }
                            };
                            tryNext();
                          }}
                        />
                        {/* Video for mobile scroll-pause and desktop hover */}
                        <video
                          muted
                          loop
                          playsInline
                          preload="metadata"
                          className="absolute inset-0 w-full h-full object-cover opacity-0 group-hover:opacity-100 transition-opacity duration-150"
                        >
                          <source 
                            src={`/videos/${dish.video.replace(".mp4", "-optimized.webm")}`} 
                            type="video/webm" 
                          />
                          <source 
                            src={`/videos/${dish.video.replace(".mp4", "-optimized.mp4")}`} 
                            type="video/mp4" 
                          />
                          <source 
                            src={`/videos/${dish.video.replace(".mp4", ".webm")}`} 
                            type="video/webm" 
                          />
                          <source src={`/videos/${dish.video}`} type="video/mp4" />
                        </video>
                        <div className="absolute inset-0 bg-gradient-to-b from-black/5 via-transparent to-black/25 group-hover:opacity-0 transition-opacity" />
                        <div className="absolute top-4 right-4 px-4 py-1 rounded-full bg-white/95 text-[#B38B4D] text-sm font-medium tracking-tight shadow-sm border border-[#EDE6D9]">
                          {dish.price} kr
                        </div>
                      </>
                    ) : (
                      <>
                        <img 
                          src={`/images/dishes/${dish.image}`} 
                          alt={dish.name}
                          className="signature-image absolute inset-0 w-full h-full object-cover transition-transform duration-700"
                        />
                        <div className="absolute inset-0 bg-gradient-to-b from-black/5 via-transparent to-black/25" />
                        <div className="absolute top-4 right-4 px-4 py-1 rounded-full bg-white/95 text-[#B38B4D] text-sm font-medium tracking-tight shadow-sm border border-[#EDE6D9]">
                          {dish.price} kr
                        </div>
                      </>
                    )}
                  </div>

                  <div className="p-5 flex-1 flex flex-col">
                    <h4 className="text-[21px] leading-tight tracking-[-0.5px] mb-2 group-hover:text-[#B38B4D] transition-colors">
                      {dish.name}
                    </h4>
                    <p className="text-[#6B665F] text-[13.5px] leading-snug flex-1">{(t.signatureMenuItems as any)?.[dish.id] || dish.desc}</p>

                    <button 
                      onClick={(e) => { e.stopPropagation(); addDish(dish); }}
                      className="mt-5 w-full py-3.5 text-sm tracking-[0.6px] border border-[#B38B4D] text-[#B38B4D] rounded-full hover:bg-[#B38B4D] hover:text-white active:bg-[#8C6B3A] active:text-white active:scale-[0.985] font-medium transition-all touch-manipulation"
                    >
                      {t.signatureMenu.addToTable}
                    </button>
                  </div>
                </motion.div>
              ))}
            </AnimatePresence>
          </div>

          <div className="mt-10 text-center">
            <a href="/menu" className="inline-flex items-center gap-2 text-sm font-bold tracking-wider text-[#B38B4D] hover:text-[#8C6B3A]">
              {t.signatureMenu.viewFullMenu} <ArrowRight className="h-4 w-4" />
            </a>
          </div>
        </div>
      </section>

      {/* THE SHAHI EXPERIENCE */}
      <section id="experience" className="section bg-white border-y border-[#EDE6D9]">
        <div className="max-w-6xl mx-auto px-6">
          <div className="text-center mb-14">
            <div className="text-[#B38B4D] text-xs tracking-[3px] mb-3">{language === 'sv' ? 'SHAHI-SÄTTET' : 'THE SHAHI WAY'}</div>
            <h3 className="text-5xl md:text-6xl tracking-[-2px]">{language === 'sv' ? 'Mer än en måltid.\nEtt ögonblick av Shahi.' : 'More than a meal.\nA moment of Shahi.'}</h3>
          </div>

          <div className="grid md:grid-cols-3 gap-6">
            {(language === 'sv' ? [
              { title: "Den Legendariska Buffén", desc: "Vår berömda lunchbuffé har över 20 roterande rätter — curry, biryani, färsk naan och sötsaker." },
              { title: "Shahi Sötsaker", desc: "Hemgjord mithai dagligen. Från färsk jalebi till rasmalai — det perfekta söta avslutet." },
              { title: "Varm Gästfrihet", desc: "Oavsett om du är här för en snabb lunch eller familjefest, behandlas du alltid som shahi." },
            ] : [
              { title: "The Legendary Buffet", desc: "Our famous lunch buffet features over 20 rotating dishes — curries, biryanis, fresh naan, and sweets." },
              { title: "Shahi Sweets", desc: "Homemade mithai made daily. From fresh Jalebi to Rasmalai — the perfect sweet ending." },
              { title: "Warm Hospitality", desc: "Whether you're here for a quick lunch or a family celebration, you will always be treated like Shahi." },
            ]).map((item, index) => (
              <div key={index} className="experience-card group relative border border-[#EDE6D9] p-9 rounded-2xl bg-[#F8F5F0] overflow-hidden">
                <div className="text-[#B38B4D] text-6xl font-light mb-9 tracking-[-2px]">0{index + 1}</div>
                <h4 className="text-[29px] tracking-[-0.8px] mb-5 text-[#2C2A26] leading-tight">{item.title}</h4>
                <p className="text-[#6B665F] text-[15.5px] leading-relaxed">{item.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <Footer />
    </div>
  );
}