"use client";

import { useEffect, useRef } from "react";
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import Image from "next/image";
import { Compass, Sparkles } from "lucide-react";

gsap.registerPlugin(ScrollTrigger);

export default function InteriorGallery() {
  const containerRef = useRef<HTMLDivElement>(null);
  const trackRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const container = containerRef.current;
    const track = trackRef.current;
    if (!container || !track) return;

    const ctx = gsap.context(() => {
      // Calculate translation distance
      const trackWidth = track.scrollWidth;
      const scrollDistance = trackWidth - window.innerWidth;

      // Horizontal Scroll Trigger
      const scrollTween = gsap.to(track, {
        x: -scrollDistance,
        ease: "none",
        scrollTrigger: {
          trigger: container,
          pin: true,
          start: "top top",
          end: `+=${scrollDistance}`, // scroll height equals translation distance
          scrub: 1,
          invalidateOnRefresh: true,
        },
      });

      // Image Zoom Parallax during slide
      const images = track.querySelectorAll(".gallery-img");
      images.forEach((img) => {
        gsap.fromTo(
          img,
          { scale: 1.0 },
          {
            scale: 1.15,
            ease: "none",
            scrollTrigger: {
              trigger: img,
              containerAnimation: scrollTween, // sync with parent horizontal tween
              start: "left right",
              end: "right left",
              scrub: true,
            },
          }
        );
      });
    }, container);

    return () => ctx.revert();
  }, []);

  const slides = [
    {
      title: "The Heritage Tour",
      subtitle: "C I N E M A T I C   S P A C E S",
      desc: "Swipe or scroll to explore the visual spatial transitions of My Dosa Place, bringing heritage pillars, brass lanterns, and set feast tables to life.",
      isTitle: true,
    },
    {
      title: "The Teakwood Columns",
      subtitle: "T H E   T E A K   C O U R T",
      desc: "Supported by eighty grand hand-carved pillars sourced from Chettinad, framing a courtyard that captures cooling cross-breezes.",
      img: "/images/chettinad_interior.png",
      isTitle: false,
    },
    {
      title: "The Royal Banquet Court",
      subtitle: "I M P E R I A L   D I N I N G",
      desc: "Our ceremonial feast hall features heavy teak tables, soft yellow lanterns, and floral motifs (Kolams) hand-drawn with rice flour daily.",
      img: "/images/royal_dining_experience.png",
      isTitle: false,
    },
    {
      title: "The Sanctuary Lobby",
      subtitle: "T H E   W E L C O M E   A N T E R O O M",
      desc: "Paved with rough-cut temple stone tiles, featuring bubbling brass vessels (urli) filled with fresh jasmine buds and marigolds.",
      img: "/images/south_indian_welcome.png",
      isTitle: false,
    },
  ];

  return (
    <div
      ref={containerRef}
      className="relative w-full h-screen overflow-hidden bg-darkbg border-b border-gold/10"
    >
      {/* Scroll Track */}
      <div
        ref={trackRef}
        className="absolute top-0 left-0 h-full flex flex-row items-center z-10"
        style={{ width: `${slides.length * 100}vw` }}
      >
        {slides.map((slide, idx) => (
          <div
            key={idx}
            className="w-screen h-screen flex-shrink-0 flex items-center justify-center relative p-8 md:p-16"
          >
            {slide.isTitle ? (
              // Slide 1: Welcome / Title Slide
              <div className="max-w-xl text-center flex flex-col items-center z-10">
                <span className="font-sans text-[10px] tracking-[0.4em] uppercase text-gold font-semibold flex items-center gap-2 mb-4">
                  <Compass size={14} className="animate-spin-slow" /> H E R I T A G E   W A L K W A Y
                </span>
                <h2 className="font-serif text-4xl md:text-6xl font-bold tracking-wider text-white uppercase leading-tight">
                  THE SPATIAL <br />
                  <span className="bg-gradient-to-r from-gold-light via-gold to-gold-dark bg-clip-text text-transparent">
                    SANCTUARY
                  </span>
                </h2>
                <div className="w-20 h-[1px] bg-gold/30 my-6" />
                <p className="font-sans text-sm text-stone-300 leading-relaxed tracking-wider mb-8">
                  {slide.desc}
                </p>
                <div className="flex items-center gap-3 animate-pulse">
                  <span className="font-sans text-[10px] tracking-[0.2em] uppercase text-gold">Scroll Down to Slide Right</span>
                  <div className="w-10 h-[1px] bg-gold" />
                </div>
              </div>
            ) : (
              // Other Slides: Immersive Image with Glassmorphism overlay
              <div className="relative w-full h-[85%] md:h-[80%] rounded-xl overflow-hidden border border-gold/10 group shadow-[0_30px_70px_rgba(0,0,0,0.8)]">
                {/* Image layer */}
                <div className="absolute inset-0 w-full h-full">
                  <Image
                    src={slide.img || ""}
                    alt={slide.title}
                    fill
                    sizes="90vw"
                    className="gallery-img object-cover brightness-[0.7] contrast-[1.05] transition-all duration-[1s]"
                  />
                  <div className="absolute inset-0 bg-gradient-to-t from-darkbg via-transparent to-transparent opacity-80" />
                </div>

                {/* Corner ornaments */}
                <div className="absolute inset-4 border border-gold/10 rounded-lg pointer-events-none z-20" />
                <div className="absolute inset-[22px] border border-dashed border-gold/5 rounded-lg pointer-events-none z-20" />

                {/* Glassmorphic card overlay */}
                <div className="absolute bottom-10 left-6 md:left-12 max-w-md p-6 md:p-8 rounded-lg glass border border-gold/25 shadow-2xl z-30 transition-transform duration-500 hover:-translate-y-2">
                  <span className="font-sans text-[9px] tracking-[0.3em] text-gold font-bold block mb-2">
                    {slide.subtitle}
                  </span>
                  <h3 className="font-serif text-2xl font-bold text-white tracking-wide uppercase mb-3 text-glow">
                    {slide.title}
                  </h3>
                  <p className="font-sans text-xs md:text-sm text-stone-200 leading-relaxed tracking-wide">
                    {slide.desc}
                  </p>
                </div>
              </div>
            )}
          </div>
        ))}
      </div>

      <style jsx global>{`
        @keyframes spin-slow {
          0% { transform: rotate(0deg); }
          100% { transform: rotate(360deg); }
        }
        .animate-spin-slow {
          animation: spin-slow 15s linear infinite;
        }
      `}</style>
    </div>
  );
}
