import { useCallback, useEffect, useRef, useState } from "react";
import { Link } from "@tanstack/react-router";
import { ChevronLeft, ChevronRight } from "lucide-react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { slidesService, AUTOPLAY_INTERVAL_MS } from "@/services/api/slides";
import type { Slide } from "@/types";
import { cn } from "@/lib/utils";

export function HomeSlider() {
  const [slides, setSlides] = useState<Slide[]>([]);
  const [idx, setIdx] = useState(0);
  const [paused, setPaused] = useState(false);
  const rootRef = useRef<HTMLDivElement>(null);

  useEffect(() => { slidesService.listEnabled().then(setSlides); }, []);

  const next = useCallback(() => setIdx((i) => (i + 1) % Math.max(1, slides.length)), [slides.length]);
  const prev = useCallback(() => setIdx((i) => (i - 1 + slides.length) % Math.max(1, slides.length)), [slides.length]);

  useEffect(() => {
    if (paused || slides.length <= 1) return;
    const t = setInterval(next, AUTOPLAY_INTERVAL_MS);
    return () => clearInterval(t);
  }, [paused, next, slides.length]);

  useEffect(() => {
    function onKey(e: KeyboardEvent) {
      if (!rootRef.current?.contains(document.activeElement)) return;
      if (e.key === "ArrowRight") next();
      if (e.key === "ArrowLeft") prev();
    }
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [next, prev]);

  if (slides.length === 0) return null;
  const current = slides[idx];

  return (
    <section
      ref={rootRef}
      tabIndex={0}
      onMouseEnter={() => setPaused(true)}
      onMouseLeave={() => setPaused(false)}
      onFocus={() => setPaused(true)}
      onBlur={() => setPaused(false)}
      aria-roledescription="carousel"
      aria-label="Featured highlights"
      className="group relative isolate overflow-hidden rounded-2xl border border-border gradient-hero outline-none focus-visible:ring-2 focus-visible:ring-primary/60"
    >
      {slides.map((s, i) => (
        <div
          key={s.id}
          aria-hidden={i !== idx}
          className={cn("absolute inset-0 transition-opacity duration-500", i === idx ? "opacity-100" : "pointer-events-none opacity-0")}
        >
          {s.mediaUrl && s.mediaType === "image" && (
            <img src={s.mediaUrl} alt="" className="absolute inset-0 h-full w-full object-cover opacity-30" />
          )}
          {s.mediaUrl && s.mediaType === "video" && (
            <video src={s.mediaUrl} muted loop autoPlay playsInline className="absolute inset-0 h-full w-full object-cover opacity-30" />
          )}
          <div className={cn("absolute inset-0 bg-gradient-to-br", s.accent)} />
        </div>
      ))}

      <div className="relative grid min-h-[380px] gap-6 p-6 sm:min-h-[440px] sm:p-10 lg:grid-cols-[1.5fr_1fr] lg:items-center">
        <div>
          {current.label && <Badge className="gradient-primary text-primary-foreground">{current.label}</Badge>}
          <h2 className="mt-4 font-display text-3xl font-bold leading-tight sm:text-5xl">{current.title}</h2>
          <p className="mt-3 max-w-xl text-sm text-muted-foreground sm:text-base">{current.description}</p>
          <div className="mt-6 flex flex-wrap gap-3">
            {current.primary?.visible && (
              <Button asChild size="lg" className="gradient-primary text-primary-foreground shadow-glow hover:opacity-95">
                <Link to={current.primary.to}>{current.primary.label}</Link>
              </Button>
            )}
            {current.secondary?.visible && (
              <Button asChild size="lg" variant="outline">
                <Link to={current.secondary.to}>{current.secondary.label}</Link>
              </Button>
            )}
          </div>
        </div>
      </div>

      <button
        type="button" aria-label="Previous slide" onClick={prev}
        className="absolute left-3 top-1/2 -translate-y-1/2 rounded-full border border-border bg-background/70 p-2 opacity-0 backdrop-blur transition hover:bg-background group-hover:opacity-100 focus-visible:opacity-100"
      ><ChevronLeft className="h-4 w-4" /></button>
      <button
        type="button" aria-label="Next slide" onClick={next}
        className="absolute right-3 top-1/2 -translate-y-1/2 rounded-full border border-border bg-background/70 p-2 opacity-0 backdrop-blur transition hover:bg-background group-hover:opacity-100 focus-visible:opacity-100"
      ><ChevronRight className="h-4 w-4" /></button>

      <div className="absolute bottom-4 left-1/2 flex -translate-x-1/2 gap-1.5">
        {slides.map((s, i) => (
          <button
            key={s.id}
            type="button"
            aria-label={`Go to slide ${i + 1}`}
            aria-current={i === idx}
            onClick={() => setIdx(i)}
            className={cn("h-1.5 rounded-full transition-all", i === idx ? "w-6 bg-primary" : "w-2 bg-border hover:bg-muted-foreground")}
          />
        ))}
      </div>
    </section>
  );
}