"use client";

import { useRef, type ReactNode, type TouchEvent } from "react";
import { ChevronLeftIcon, ChevronRightIcon } from "@/components/ui/Icons";
import { Logo } from "@/components/layout/Logo";
import { NavLinks } from "@/components/layout/NavLinks";
import { useAutoSlider } from "@/hooks/useAutoSlider";
import { cn } from "@/lib/cn";
import { HERO_SLIDE_INTERVAL_MS, heroSlides } from "@/data/home";
import { HeroSlide } from "./HeroSlide";
import { MembershipPanel } from "./MembershipPanel";

const SWIPE_THRESHOLD_PX = 40;

const arrowIcon = "[&_svg]:size-[38px] [&_path]:[stroke-width:3.5] max-[501px]:[&_svg]:size-4!";

interface HeroSectionProps {
  /** Partner logo strip (server-rendered, passed through as a slot). */
  marquee: ReactNode;
}

/**
 * The 60/40 split hero: header + photo slider on the left, membership panel on
 * the right. Client component because slider state is shared by both panes
 * (the "next" chevron lives in the sidebar on desktop).
 */
export function HeroSection({ marquee }: HeroSectionProps) {
  const { index, goTo, next, prev, pause, resume } = useAutoSlider({
    count: heroSlides.length,
    intervalMs: HERO_SLIDE_INTERVAL_MS,
  });
  const touchStartX = useRef(0);

  const onTouchStart = (event: TouchEvent) => {
    touchStartX.current = event.touches[0].clientX;
    pause();
  };

  const onTouchEnd = (event: TouchEvent) => {
    const diff = event.changedTouches[0].clientX - touchStartX.current;
    if (Math.abs(diff) > SWIPE_THRESHOLD_PX) {
      if (diff < 0) next();
      else prev();
    }
    resume();
  };

  return (
    <div
      className={cn(
        "grid h-[90vh] max-h-[1000px] w-full grid-cols-[minmax(0,60fr)_minmax(0,40fr)] overflow-hidden",
        "max-[1201px]:grid-cols-[minmax(0,55fr)_minmax(0,45fr)] compact:min-h-[500px]",
        "max-[769px]:h-auto max-[769px]:max-h-none max-[769px]:grid-cols-1 max-[769px]:grid-rows-[auto_auto] max-[769px]:rounded-2xl max-[769px]:shadow-[0_10px_30px_rgba(0,0,0,0.25)]",
      )}
    >
      {/* ---------------- Left pane ---------------- */}
      <main
        className={cn(
          "relative z-10 flex h-full max-h-[1000px] min-w-0 flex-col justify-between bg-white",
          "pt-[3.2vh] pr-[1.6vw] pb-[72px] pl-[3vw]",
          "min-[800px]:max-[1301px]:pl-[3.8vw]",
          "min-[3300px]:max-[4901px]:pt-[1.2vh]! min-[5000px]:pt-[1.2vh]!",
          "compact:min-h-[500px]",
          "max-[769px]:h-auto max-[769px]:max-h-none max-[769px]:min-h-0 max-[769px]:px-[5vw] max-[769px]:pt-[3vh] max-[769px]:pb-20",
        )}
      >
        <header className="flex h-[clamp(50px,6vh,65px)] items-center justify-start pr-[16.67%] pb-[5px] max-[769px]:h-auto max-[769px]:flex-wrap max-[769px]:justify-between max-[769px]:pr-0 max-[769px]:pb-3">
          <Logo className="max-[769px]:order-1 max-[769px]:flex-none" />
          <NavLinks />
        </header>

        <section
          aria-label="Travel Destinations Slider"
          onMouseEnter={pause}
          onMouseLeave={resume}
          onTouchStart={onTouchStart}
          onTouchEnd={onTouchEnd}
          className={cn(
            "relative z-[15] my-[clamp(10px,2vh,20px)] flex h-0 max-h-[min(63vh,1000px)] min-h-0 w-[calc(100%+3vw+100px)] grow items-center",
            "min-[1200px]:max-h-[min(67vh,1000px)]!",
            "max-[1381px]:w-[calc(100%+3vw+80px)] max-[1201px]:w-[calc(100%+3vw+60px)]",
            "max-[769px]:my-5 max-[769px]:h-[clamp(350px,50vh,500px)] max-[769px]:w-full max-[501px]:h-[55vh]!",
          )}
        >
          <div className="relative h-full w-full overflow-hidden shadow-[0_20px_45px_rgba(0,0,0,0.12)] min-[3300px]:max-[4901px]:w-[98%] min-[5000px]:w-[95%]">
            {heroSlides.map((slide, i) => (
              <HeroSlide key={slide.image} slide={slide} active={i === index} priority={i === 0} />
            ))}

            <div
              role="tablist"
              aria-label="Select Slide"
              className="absolute right-[clamp(20px,4vw,35px)] bottom-[clamp(25px,5vh,30px)] z-10 flex flex-col gap-5"
            >
              {heroSlides.map((slide, i) => (
                <button
                  key={slide.image}
                  type="button"
                  role="tab"
                  aria-selected={i === index}
                  aria-label={`Slide ${i + 1}`}
                  onClick={() => goTo(i)}
                  className={cn(
                    "size-[14px] cursor-pointer rounded-full border transition-all duration-[400ms] ease-sterling",
                    i === index
                      ? "scale-[1.3] border-snow bg-snow shadow-[0_0_8px_rgba(255,255,255,0.5)]"
                      : "border-white/60 bg-transparent",
                  )}
                />
              ))}
            </div>
          </div>

          <button
            type="button"
            aria-label="Previous Slide"
            onClick={prev}
            className={cn(
              "absolute top-1/2 z-[15] -ml-[46px] flex h-[150px] w-[46px] -translate-y-1/2 items-center justify-center bg-[#e2e8f0] text-[#7f8c8d] transition-all duration-300",
              "hover:bg-[#cbd5e1] hover:text-[#2c3e50]",
              "max-[769px]:left-[10px] max-[769px]:-ml-[27px] max-[769px]:size-10 max-[769px]:rounded-full max-[769px]:bg-black/40 max-[769px]:text-snow max-[769px]:backdrop-blur-[4px]",
              "max-[769px]:hover:scale-105 max-[769px]:hover:bg-black/60 max-[769px]:hover:text-accent",
              arrowIcon,
            )}
          >
            <ChevronLeftIcon />
          </button>

          {/* Mobile "next": sits on the slider instead of in the sidebar. */}
          <button
            type="button"
            aria-label="Next Slide"
            onClick={next}
            className={cn(
              "absolute top-1/2 -right-[15px] z-[15] hidden size-10 -translate-y-1/2 items-center justify-center rounded-full bg-black/40 text-snow backdrop-blur-[4px] transition-all duration-300 max-[769px]:flex",
              "hover:scale-105 hover:bg-black/60 hover:text-accent",
              arrowIcon,
            )}
          >
            <ChevronRightIcon />
          </button>
        </section>

        {marquee}
      </main>

      {/* ---------------- Right pane ---------------- */}
      <aside
        aria-label="Membership Tiers and Features"
        className={cn(
          "relative z-[1] box-border h-full max-h-[1000px] overflow-hidden",
          "compact:min-h-[500px]",
          "max-[769px]:h-auto max-[769px]:max-h-none max-[769px]:min-h-0 max-[769px]:bg-[url('/images/brand/hero-bg.jpg')] max-[769px]:bg-cover max-[769px]:bg-center",
        )}
      >
        <div
          className={cn(
            "relative z-[5] flex h-full w-full flex-col items-center justify-center pt-[61px] pr-[60px] pb-[37px] pl-0",
            "max-[1381px]:pt-[35px] max-[1381px]:pb-[30px]",
            "max-[1201px]:pt-12 max-[1201px]:pr-10 max-[1201px]:pb-[57px]",
            "compact:pt-[41px] compact:pr-[60px] compact:pb-[27px]",
            "max-[769px]:h-auto max-[769px]:max-h-none max-[769px]:px-[5vw] max-[769px]:py-10",
          )}
        >
          <MembershipPanel />

          <button
            type="button"
            aria-label="Next Slide"
            onClick={next}
            className={cn(
              "absolute top-1/2 right-[10px] z-[15] flex size-11 -translate-y-1/2 items-center justify-center text-white/60 transition-all duration-300 max-[769px]:hidden",
              "hover:scale-[1.15] hover:text-accent max-[1381px]:-right-1",
              arrowIcon,
            )}
          >
            <ChevronRightIcon />
          </button>
        </div>
      </aside>
    </div>
  );
}