"use client";

import Image from "next/image";
import { useEffect, useReducer, useRef } from "react";
import { m as motion } from "framer-motion";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";

// Register GSAP plugins
if (typeof window !== "undefined") {
  gsap.registerPlugin(ScrollTrigger);
}

type TuxedoVideoHeroProps = {
  eyebrow?: string;
  title: string;
  description: string;
  olatheSweetLogoUrl?: string | null;
  primaryButton?: string;
  secondaryButton?: string;
  onPrimaryClick?: () => void;
  onSecondaryClick?: () => void;
};

const VIDEO_URL = "/videos/tuxedo-hero.mp4";

const HERO_STATS = [
  { stat: "40+", label: "Years Growing" },
  { stat: "3", label: "Generations" },
  { stat: "100%", label: "Hand-Picked" },
] as const;

type State = {
  scrollProgress: number;
};

type Action = { type: "SET_SCROLL_PROGRESS"; value: number };

const initialState: State = {
  scrollProgress: 0,
};

function reducer(state: State, action: Action): State {
  switch (action.type) {
    case "SET_SCROLL_PROGRESS":
      return { ...state, scrollProgress: action.value };
  }
}

// ─────────────────────────────────────────────────────────────────────────────
// CINEMATIC HERO - SCROLL-DRIVEN ANIMATIONS
// ─────────────────────────────────────────────────────────────────────────────
export default function TuxedoVideoHero({
  eyebrow,
  title,
  description,
  olatheSweetLogoUrl,
  primaryButton,
  secondaryButton,
  onPrimaryClick,
  onSecondaryClick,
}: TuxedoVideoHeroProps) {
  const logoSrc = olatheSweetLogoUrl;
  const sectionRef = useRef<HTMLElement>(null);
  const contentRef = useRef<HTMLDivElement>(null);
  const videoRef = useRef<HTMLVideoElement>(null);
  const [state, dispatch] = useReducer(reducer, initialState);

  // ─── GSAP SCROLL ANIMATIONS ────────────────────────────────────────────────
  // Motion pass: the original used a 1.15 video scale, an 80px y-shift on the
  // hero content, a parallax -100/+80 movement on decorative orbs, and a 1s
  // 40px slide-up entrance with power3.out easing. All of those are strong
  // vestibular triggers. The motion here is now:
  //   - tiny entrance slide (8px) on first paint, no scale, 320ms, linear-ish ease
  //   - video stays static on scroll (no parallax)
  //   - decorative orbs float on a 10s CSS keyframe (gentle, opt-in to reduced motion)
  //   - scroll indicator just fades on scroll, no positional shift
  useEffect(() => {
    if (typeof window === "undefined" || !sectionRef.current) return;

    const ctx = gsap.context(() => {
      // Scroll progress tracking (the bar at the top of the page).
      ScrollTrigger.create({
        trigger: sectionRef.current,
        start: "top top",
        end: "bottom top",
        scrub: true,
        onUpdate: (self) => {
          dispatch({ type: "SET_SCROLL_PROGRESS", value: self.progress });
        },
      });

      // Hero content — gentle fade on scroll, NO positional shift.
      if (contentRef.current) {
        gsap.to(contentRef.current, {
          opacity: 0,
          ease: "power1.out",
          scrollTrigger: {
            trigger: sectionRef.current,
            start: "top top",
            end: "40% top",
            scrub: 1.2,
          },
        });
      }

      // Video — no scale, no parallax. Just a static background.

      // Staggered entrance for content elements — small Y, no scale, light ease.
      const contentElements = gsap.utils.toArray<Element>(".hero-reveal");
      contentElements.forEach((el) => {
        gsap.fromTo(
          el,
          { opacity: 0, y: 8 },
          {
            opacity: 1,
            y: 0,
            duration: 0.32,
            ease: "power1.out",
            scrollTrigger: {
              trigger: el,
              start: "top 95%",
              toggleActions: "play none none none",
            },
          }
        );
      });

      // Scroll indicator — just fades, no bounce, no positional shift.
      gsap.to(".scroll-indicator", {
        opacity: 0,
        scrollTrigger: {
          trigger: sectionRef.current,
          start: "10% top",
          end: "30% top",
          scrub: 1,
        },
      });
    }, sectionRef);

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

  // Smooth scroll to stops section
  const handlePrimaryClick = () => {
    const stopsSection = document.getElementById("stops");
    if (stopsSection) {
      stopsSection.scrollIntoView({ behavior: "smooth", block: "start" });
    } else if (onPrimaryClick) {
      onPrimaryClick();
    }
  };

  return (
    <>
      <ScrollProgressBar scrollProgress={state.scrollProgress} />

      <section
        ref={sectionRef}
        className="relative min-h-screen flex items-center overflow-hidden"
      >
        <HeroBackground videoRef={videoRef} />

        <div
          ref={contentRef}
          className="relative z-10 mx-auto w-full max-w-6xl px-6 pb-32 pt-32 flex flex-col justify-end"
        >
          <div className="max-w-3xl">
            <HeroContent
              logoSrc={logoSrc ?? null}
              eyebrow={eyebrow}
              title={title}
              description={description}
              primaryButton={primaryButton}
              secondaryButton={secondaryButton}
              onPrimaryClick={handlePrimaryClick}
              onSecondaryClick={onSecondaryClick}
            />
          </div>
        </div>

        <ScrollIndicator onClick={handlePrimaryClick} />
        <CornerDecorations />
      </section>

      <HeroAnimations />
    </>
  );
}

// ── Scroll Progress Bar ───────────────────────────────────────────────────────
function ScrollProgressBar({ scrollProgress }: { scrollProgress: number }) {
  return (
    <div className="fixed top-0 left-0 right-0 h-1 z-[1000] bg-black/20 scroll-progress-bar">
      <div
        className="h-full bg-gradient-to-r from-emerald-600 via-emerald-400 to-amber-400"
        style={{
          transform: `scaleX(${scrollProgress})`,
          transformOrigin: "left",
        }}
      />
    </div>
  );
}

// ── Hero Background (video + overlays + orbs) ────────────────────────────────
function HeroBackground({ videoRef }: { videoRef: React.RefObject<HTMLVideoElement | null> }) {
  return (
    <>
      <video
        ref={videoRef}
        autoPlay
        muted
        loop
        playsInline
        tabIndex={-1}
        aria-hidden="true"
        className="absolute inset-0 w-full h-[120%] object-cover"
        style={{ zIndex: 0 }}
        src={VIDEO_URL}
      />

      {/* Gradient overlays */}
      <div
        className="absolute inset-0 pointer-events-none"
        style={{
          zIndex: 1,
          background: "linear-gradient(135deg, rgba(255,215,0,0.12) 0%, rgba(255,193,7,0.06) 50%, rgba(255,235,0,0.04) 100%)",
        }}
      />
      <div
        className="absolute inset-0 pointer-events-none"
        style={{
          zIndex: 2,
          background: "radial-gradient(ellipse at center, rgba(255,200,0,0.08) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.9) 100%)",
        }}
      />
      <div
        className="absolute inset-0 pointer-events-none"
        style={{
          zIndex: 3,
          background: "linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0.05) 100%)",
        }}
      />

      <FloatingOrbs />
    </>
  );
}

// ── Floating Orbs ─────────────────────────────────────────────────────────────
function FloatingOrbs() {
  return (
    <div className="absolute inset-0 pointer-events-none z-[4]">
      {/* Golden orb top-left */}
      <div
        className="parallax-float absolute top-1/4 left-1/4 w-64 h-64 rounded-full opacity-20"
        style={{
          background: "radial-gradient(circle, rgba(255,215,0,0.4) 0%, transparent 70%)",
          filter: "blur(8px)",
          animation: "tvh-float-slow 950ms ease-in-out infinite",
        }}
      />
      {/* Emerald orb bottom-right */}
      <div
        className="parallax-float absolute bottom-1/3 right-1/4 w-48 h-48 rounded-full opacity-15"
        style={{
          background: "radial-gradient(circle, rgba(16,185,129,0.4) 0%, transparent 70%)",
          filter: "blur(8px)",
          animation: "tvh-float-delayed 950ms ease-in-out infinite",
        }}
      />
      {/* Subtle grain overlay */}
      <div
        className="absolute inset-0 opacity-[0.03]"
        style={{
          backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E")`,
        }}
      />
    </div>
  );
}

// ── Hero Content (logo, eyebrow, title, description, CTAs, stats) ────────────
type HeroContentProps = {
  logoSrc: string | null;
  eyebrow?: string;
  title: string;
  description: string;
  primaryButton?: string;
  secondaryButton?: string;
  onPrimaryClick: () => void;
  onSecondaryClick?: () => void;
};

function HeroContent({
  logoSrc,
  eyebrow,
  title,
  description,
  primaryButton,
  secondaryButton,
  onPrimaryClick,
  onSecondaryClick,
}: HeroContentProps) {
  return (
    <>
      <HeroLogo logoSrc={logoSrc} />

      <div className="hero-reveal mb-6">
        {eyebrow && (
          <p className="text-[11px] font-bold uppercase tracking-[0.3em] text-amber-400/80">
            {eyebrow}
          </p>
        )}
        <div className="mt-3 h-px w-16 bg-gradient-to-r from-emerald-500 to-transparent" />
      </div>

      <HeroTitle title={title} />
      <HeroDescription description={description} />

      <HeroCTAs
        primaryButton={primaryButton}
        secondaryButton={secondaryButton}
        onPrimaryClick={onPrimaryClick}
        onSecondaryClick={onSecondaryClick}
      />

      <HeroStats />
    </>
  );
}

function HeroLogo({ logoSrc }: { logoSrc: string | null }) {
  return (
    <motion.div
      className="hero-reveal mb-10 relative h-20 md:h-24 w-[320px] md:w-[400px]"
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      transition={{ duration: 0.32, delay: 0.05, ease: "easeOut" }}
    >
      <div className="absolute -inset-8 rounded-full bg-emerald-500/10 blur-2xl" />
      {logoSrc ? (
        <Image
          src={logoSrc}
          alt="Olathe Sweet"
          fill
          sizes="(max-width: 1024px) 80vw, 50vw"
          style={{ objectFit: "contain" }}
          className="drop-shadow-2xl"
          priority
        />
      ) : null}
    </motion.div>
  );
}

function HeroTitle({ title }: { title: string }) {
  return (
    <h1
      className="hero-reveal text-6xl md:text-7xl lg:text-8xl font-black tracking-tight text-white leading-[0.95] mb-6"
      style={{
        textShadow: "0 4px 30px rgba(0,0,0,0.3), 0 0 60px rgba(255,215,0,0.1)",
      }}
    >
      {title.split(" ").map((word, idx) => (
        <span
          key={`${idx}-${word}`}
          className="inline-block mr-4"
          style={{
            animationDelay: `${0.2 + idx * 0.1}s`,
          }}
        >
          {word}
        </span>
      ))}
    </h1>
  );
}

function HeroDescription({ description }: { description: string }) {
  return (
    <p
      className="hero-reveal text-xl md:text-2xl text-white/70 leading-relaxed max-w-xl mb-10"
      style={{ fontWeight: 300 }}
    >
      {description}
    </p>
  );
}

function HeroCTAs({
  primaryButton,
  secondaryButton,
  onPrimaryClick,
  onSecondaryClick,
}: {
  primaryButton?: string;
  secondaryButton?: string;
  onPrimaryClick: () => void;
  onSecondaryClick?: () => void;
}) {
  return (
    <div className="hero-reveal flex flex-wrap items-center gap-5">
      {primaryButton && (
        <PrimaryButton label={primaryButton} onClick={onPrimaryClick} />
      )}
      {secondaryButton && (
        <SecondaryButton label={secondaryButton} onClick={onSecondaryClick} />
      )}
    </div>
  );
}

function PrimaryButton({ label, onClick }: { label: string; onClick: () => void }) {
  return (
    <motion.button
      onClick={onClick}
      className="group relative rounded-full px-10 py-4 text-sm font-bold tracking-widest uppercase overflow-hidden"
      style={{
        background: "linear-gradient(135deg, #059669 0%, #10b981 100%)",
        boxShadow: "0 8px 32px rgba(16, 185, 129, 0.4), inset 0 1px 0 rgba(255,255,255,0.2)",
      }}
    >
      <span className="relative z-10 flex items-center gap-3">
        <span>{label}</span>
        <svg
          className="w-4 h-4 transition-transform group-hover:translate-x-1"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
          strokeWidth={2}
        >
          <path strokeLinecap="round" strokeLinejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3" />
        </svg>
      </span>
      <div
        className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity"
        style={{
          background: "linear-gradient(135deg, #10b981 0%, #059669 100%)",
        }}
      />
    </motion.button>
  );
}

function SecondaryButton({
  label,
  onClick,
}: {
  label: string;
  onClick?: () => void;
}) {
  return (
    <button type="button"
      onClick={onClick}
      className="group flex items-center gap-3 text-sm font-semibold"
      style={{ color: "rgba(255,255,255,0.8)" }}
     aria-label="Next">
      <span className="uppercase tracking-widest text-[11px]">{label}</span>
      <span
        className="w-10 h-10 rounded-full border flex items-center justify-center transition-all duration-300 group-hover:bg-white/10 group-hover:border-white/30"
        style={{ borderColor: "rgba(255,255,255,0.3)" }}
      >
        <svg
          className="w-4 h-4 transition-transform group-hover:translate-x-0.5"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
          strokeWidth={2}
        >
          <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
        </svg>
      </span>
    </button>
  );
}

function HeroStats() {
  return (
    <div className="hero-reveal mt-16 flex flex-wrap gap-12">
      {HERO_STATS.map((item) => (
        <div key={item.label} className="text-center">
          <div
            className="text-3xl md:text-4xl font-black text-white"
            style={{ textShadow: "0 2px 20px rgba(0,0,0,0.3)" }}
          >
            {item.stat}
          </div>
          <div
            className="text-[10px] uppercase tracking-[0.2em] mt-1"
            style={{ color: "rgba(255,255,255,0.5)" }}
          >
            {item.label}
          </div>
        </div>
      ))}
    </div>
  );
}

// ── Scroll Indicator ──────────────────────────────────────────────────────────
function ScrollIndicator({ onClick }: { onClick: () => void }) {
  return (
    <div
      className="scroll-indicator absolute bottom-10 left-1/2 -translate-x-1/2 z-20 flex flex-col items-center gap-3"
      style={{ pointerEvents: "auto" }}
    >
      <button type="button"
        onClick={onClick}
        className="flex flex-col items-center gap-2 text-white/50 hover:text-white/80 transition-colors duration-200"
        aria-label="Scroll to stops"
      >
        <span className="text-[10px] uppercase tracking-[0.25em] font-medium">Explore</span>
        <div
          className="w-6 h-10 rounded-full border border-white/30 flex items-start justify-center p-1.5"
        >
          <div
            className="w-1.5 h-3 rounded-full bg-white tvh-scroll-indicator"
            style={{ animationDuration: "950ms" }}
          />
        </div>
      </button>
    </div>
  );
}

// ── Corner Decorations ────────────────────────────────────────────────────────
function CornerDecorations() {
  return (
    <>
      <div
        className="parallax-float absolute top-8 right-8 opacity-30"
        style={{ animationDelay: "1s" }}
      >
        <svg className="w-16 h-16" viewBox="0 0 64 64" fill="none">
          <path
            d="M32 4C48 16, 56 32, 48 56C40 64, 24 64, 8 56C0 32, 16 16, 32 4"
            stroke="rgba(255,215,0,0.5)"
            strokeWidth="1"
            fill="none"
          />
          <path
            d="M32 12C44 22, 48 36, 42 52C36 58, 26 58, 18 52C12 36, 20 22, 32 12"
            stroke="rgba(255,215,0,0.3)"
            strokeWidth="1"
            fill="none"
          />
        </svg>
      </div>
      <div
        className="parallax-float absolute bottom-20 left-8 opacity-20"
        style={{ animationDelay: "1.5s" }}
      >
        <svg className="w-12 h-12" viewBox="0 0 48 48" fill="none">
          <circle cx="24" cy="24" r="20" stroke="rgba(16,185,129,0.4)" strokeWidth="1" />
          <circle cx="24" cy="24" r="14" stroke="rgba(16,185,129,0.3)" strokeWidth="1" />
          <circle cx="24" cy="24" r="8" stroke="rgba(16,185,129,0.2)" strokeWidth="1" />
        </svg>
      </div>
    </>
  );
}

// ── Hero Animations (global keyframes + reduced-motion overrides) ─────────────
function HeroAnimations() {
  return (
    <style dangerouslySetInnerHTML={{ __html: `
      @keyframes tvh-float-slow {
        0%, 100% { transform: translate(0, 0); }
        50% { transform: translate(6px, -8px); }
      }

      @keyframes tvh-float-delayed {
        0%, 100% { transform: translate(0, 0); }
        50% { transform: translate(-8px, 6px); }
      }

      @keyframes tvh-scroll-indicator {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(3px); }
      }

      .tvh-scroll-indicator {
        animation: tvh-scroll-indicator 2.4s cubic-bezier(0.16, 1, 0.3, 1) infinite;
      }

      .parallax-float {
        will-change: transform;
      }

      .hero-reveal {
        will-change: opacity, transform;
      }

      button, a {
        -webkit-tap-highlight-color: transparent;
      }

      @media (prefers-reduced-motion: reduce) {
        .parallax-float, .animate-bounce, .hero-reveal {
          animation: none !important;
          transition: none !important;
        }
        .hero-reveal {
          opacity: 1 !important;
          transform: none !important;
        }
      }
    `}} />
  );
}