"use client";

import Image from "next/image";
import { useCallback, useEffect, useState } from "react";
import { Pause, Play } from "lucide-react";
import { cn } from "@/lib/utils";

export type HeroSlide = { src: string; label: string; alt: string };

const INTERVAL_MS = 6000;

/**
 * Full-bleed background slideshow for the hero: crossfading photos with a slow
 * zoom, plus labelled slide pickers. Pauses on hover/focus, when the tab is
 * hidden, and for reduced-motion users (who get the first photo only).
 */
export default function HeroCarousel({ slides }: { slides: HeroSlide[] }) {
  const [active, setActive] = useState(0);
  const [paused, setPaused] = useState(false);
  const [reduced, setReduced] = useState(false);

  useEffect(() => {
    const query = window.matchMedia("(prefers-reduced-motion: reduce)");
    const sync = () => setReduced(query.matches);
    sync();
    query.addEventListener("change", sync);
    return () => query.removeEventListener("change", sync);
  }, []);

  const next = useCallback(() => setActive((i) => (i + 1) % slides.length), [slides.length]);

  useEffect(() => {
    if (paused || reduced || slides.length < 2) return;
    const timer = window.setInterval(() => {
      if (document.visibilityState === "visible") next();
    }, INTERVAL_MS);
    return () => window.clearInterval(timer);
  }, [paused, reduced, next, slides.length, active]);

  return (
    <div className="absolute inset-0" aria-roledescription="carousel" aria-label="Biznie in action">
      {slides.map((slide, i) => (
        <div
          key={slide.src}
          aria-hidden={i !== active}
          className={cn(
            "absolute inset-0 transition-opacity duration-[1400ms] ease-in-out",
            i === active ? "opacity-100" : "opacity-0"
          )}
        >
          <Image
            src={slide.src}
            alt={slide.alt}
            fill
            priority={i === 0}
            sizes="100vw"
            className={cn(
              "object-cover",
              !reduced && "transition-transform duration-[7000ms] ease-out",
              !reduced && (i === active ? "scale-110" : "scale-100")
            )}
          />
        </div>
      ))}

      {/* Legibility: dark on the text side, lighter toward the photo. */}
      <div className="absolute inset-0 bg-gradient-to-r from-slate-950/95 via-slate-950/75 to-slate-950/30" />
      <div className="absolute inset-x-0 bottom-0 h-40 bg-gradient-to-t from-slate-950/80 to-transparent" />

      {slides.length > 1 ? (
        <div
          className="absolute bottom-24 left-0 right-0 z-30 sm:bottom-28 lg:bottom-32"
          onMouseEnter={() => setPaused(true)}
          onMouseLeave={() => setPaused(false)}
        >
          <div className="mx-auto flex max-w-7xl items-center gap-2 px-4 sm:px-6 lg:px-8">
            <button
              type="button"
              onClick={() => setPaused((p) => !p)}
              className="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full border border-white/25 bg-white/10 text-white backdrop-blur transition-colors hover:bg-white/20"
              aria-label={paused ? "Play slideshow" : "Pause slideshow"}
            >
              {paused ? <Play size={13} aria-hidden /> : <Pause size={13} aria-hidden />}
            </button>
            <div className="flex min-w-0 gap-2 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
              {slides.map((slide, i) => (
                <button
                  key={slide.src}
                  type="button"
                  onClick={() => setActive(i)}
                  aria-current={i === active}
                  aria-label={`Show slide ${i + 1}: ${slide.label}`}
                  className={cn(
                    "group relative shrink-0 overflow-hidden rounded-full border px-3 py-1.5 text-[11px] font-semibold backdrop-blur transition-colors sm:text-xs",
                    i === active
                      ? "border-white/60 bg-white/20 text-white"
                      : "border-white/15 bg-white/5 text-white/70 hover:bg-white/15 hover:text-white"
                  )}
                >
                  {slide.label}
                  {i === active && !paused && !reduced ? (
                    <span
                      key={`progress-${active}`}
                      aria-hidden
                      className="absolute bottom-0 left-0 h-0.5 w-full origin-left animate-[hero-progress_6s_linear_forwards] bg-[#ff4d4f]"
                    />
                  ) : null}
                </button>
              ))}
            </div>
          </div>
        </div>
      ) : null}
    </div>
  );
}