"use client";

import Link from "next/link";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { ChevronLeft, ChevronRight, Pause, Play } from "lucide-react";
import type { Product } from "@/data/types";
import { formatPrice } from "@/lib/format";
import { SafeImage } from "@/components/ui/SafeImage";
import { cn } from "@/lib/cn";

type GenderSlide = {
  id: "women" | "men";
  label: "Women" | "Men";
  kicker: string;
  href: string;
  video: string;
  product: Product;
};

/** Mixkit commercial-free fashion clips (not brand campaign files). */
const WOMEN_VIDEO = "https://assets.mixkit.co/videos/805/805-720.mp4";
const WOMEN_VIDEO_FALLBACK = "https://assets.mixkit.co/videos/43190/43190-720.mp4";
const MEN_VIDEO = "https://assets.mixkit.co/videos/358/358-720.mp4";

const HOLD_MS = 8000;

function pickProduct(products: Product[], names: string[]) {
  for (const name of names) {
    const found = products.find((item) => item.name.includes(name));
    if (found) return found;
  }
  return products[0];
}

/** Two-look video slider: women, then men. */
export function HeroMarketplace({ products = [] }: { products?: Product[] }) {
  const womenProduct = pickProduct(products, [
    "Poplin Shirt Dress",
    "Mini Cotton",
    "Cropped Cardigan",
    "Culottes",
  ]);
  const menProduct = pickProduct(products, [
    "Oxford Boxy Shirt",
    "Unlined Easy Blazer",
    "Barrel Jeans",
    "Pima Cotton Polo",
  ]);

  const slides: GenderSlide[] = useMemo(
    () =>
      [
        womenProduct && {
          id: "women" as const,
          label: "Women" as const,
          kicker: "Women · Look 01",
          href: "/shop?category=women",
          video: WOMEN_VIDEO,
          product: womenProduct,
        },
        menProduct && {
          id: "men" as const,
          label: "Men" as const,
          kicker: "Men · Look 02",
          href: "/shop?category=men",
          video: MEN_VIDEO,
          product: menProduct,
        },
      ].filter(Boolean) as GenderSlide[],
    [womenProduct, menProduct],
  );

  const [index, setIndex] = useState(0);
  const [paused, setPaused] = useState(false);
  const [failed, setFailed] = useState<Record<string, boolean>>({});
  const videoRefs = useRef<Record<string, HTMLVideoElement | null>>({});

  const active = slides[index] ?? slides[0];

  const go = useCallback(
    (next: number) => {
      if (!slides.length) return;
      setIndex((next + slides.length) % slides.length);
    },
    [slides.length],
  );

  useEffect(() => {
    if (slides.length < 2 || paused) return;
    const id = window.setInterval(() => {
      setIndex((current) => (current + 1) % slides.length);
    }, HOLD_MS);
    return () => window.clearInterval(id);
  }, [slides.length, paused]);

  useEffect(() => {
    slides.forEach((slide) => {
      const node = videoRefs.current[slide.id];
      if (!node) return;
      if (slide.id === active?.id && !paused) {
        void node.play().catch(() => {
          setFailed((current) => ({ ...current, [slide.id]: true }));
        });
      } else {
        node.pause();
      }
    });
  }, [active?.id, paused, slides]);

  if (!active) return null;

  return (
    <section className="relative overflow-hidden bg-[#121614]">
      <p
        aria-hidden
        className="pointer-events-none absolute left-5 top-1/2 z-[2] hidden -translate-y-1/2 -rotate-90 text-[10px] font-medium uppercase tracking-[0.55em] text-white/35 md:block"
      >
        BhoFit
      </p>

      <div className="relative h-[min(78vh,820px)] min-h-[360px] w-full">
        {slides.map((slide) => {
          const shown = slide.id === active.id;
          const broken = failed[slide.id];
          return (
            <div
              key={slide.id}
              className={cn(
                "absolute inset-0 transition-opacity duration-700",
                shown ? "opacity-100" : "pointer-events-none opacity-0",
              )}
              aria-hidden={!shown}
            >
              {broken ? (
                <SafeImage
                  src={slide.product.images[0]}
                  alt={slide.product.name}
                  fill
                  priority={slide.id === "women"}
                  sizes="100vw"
                  className="object-cover object-center"
                />
              ) : (
                <video
                  ref={(node) => {
                    videoRefs.current[slide.id] = node;
                  }}
                  className="absolute inset-0 h-full w-full object-cover"
                  autoPlay={slide.id === "women"}
                  muted
                  loop
                  playsInline
                  preload={slide.id === "women" ? "auto" : "metadata"}
                  poster={slide.product.images[0]}
                  onError={() =>
                    setFailed((current) => ({ ...current, [slide.id]: true }))
                  }
                >
                  <source src={slide.video} type="video/mp4" />
                  {slide.id === "women" ? (
                    <source src={WOMEN_VIDEO_FALLBACK} type="video/mp4" />
                  ) : null}
                </video>
              )}
            </div>
          );
        })}

        <div className="pointer-events-none absolute inset-0 bg-gradient-to-t from-[#121614]/80 via-[#121614]/20 to-transparent" />

        <Link
          href={active.href}
          className="atelier absolute inset-x-0 bottom-0 z-[1] pb-8 pt-24 sm:pb-11"
        >
          <p className="text-[10px] font-medium uppercase tracking-[0.22em] text-[#9cbaa4]">
            {active.kicker}
          </p>
          <h1 className="font-display mt-2 text-4xl leading-[0.92] text-white sm:text-5xl lg:text-[4.25rem]">
            {active.label}
          </h1>
          <p className="mt-3 max-w-sm text-sm leading-relaxed text-white/80">
            {active.product.name} — {active.product.shortDescription}
          </p>
          <p className="mt-4 flex flex-wrap items-baseline gap-3 text-sm font-medium tabular-nums text-white">
            {formatPrice(active.product.price)}
            <span className="text-[10px] font-medium uppercase tracking-[0.16em] text-white/70">
              Shop {active.label.toLowerCase()} →
            </span>
          </p>
        </Link>
      </div>

      <div className="absolute bottom-6 right-4 z-[2] flex items-center gap-2 sm:bottom-8 sm:right-8">
        {slides.map((slide, i) => (
          <button
            key={slide.id}
            type="button"
            onClick={() => setIndex(i)}
            aria-label={`${slide.label} look`}
            className={cn(
              "h-[3px] transition-all",
              i === index
                ? "w-8 bg-[#9cbaa4]"
                : "w-3 bg-white/35 hover:bg-white/60",
            )}
          />
        ))}
        <button
          type="button"
          onClick={() => go(index - 1)}
          className="ml-1 hidden h-9 w-9 items-center justify-center border border-white/50 text-white hover:bg-white/10 sm:inline-flex"
          aria-label="Previous look"
        >
          <ChevronLeft className="h-4 w-4" />
        </button>
        <button
          type="button"
          onClick={() => go(index + 1)}
          className="hidden h-9 w-9 items-center justify-center border border-white/50 text-white hover:bg-white/10 sm:inline-flex"
          aria-label="Next look"
        >
          <ChevronRight className="h-4 w-4" />
        </button>
        <button
          type="button"
          onClick={() => setPaused((value) => !value)}
          className="inline-flex h-11 w-11 items-center justify-center rounded-full border border-white/70 text-white transition hover:bg-white/10"
          aria-label={paused ? "Play video" : "Pause video"}
        >
          {paused ? (
            <Play className="h-4 w-4 fill-current" />
          ) : (
            <Pause className="h-4 w-4 fill-current" />
          )}
        </button>
      </div>
    </section>
  );
}