import { useEffect, useState, useCallback } from "react";
import { Link } from "@tanstack/react-router";
import { motion, AnimatePresence } from "framer-motion";
import { ChevronLeft, ChevronRight, UserSquare, MessageCircle } from "lucide-react";
import { heroSlides } from "@/lib/site-data";

export function HeroSlider() {
  const [index, setIndex] = useState(0);
  const count = heroSlides.length;

  const go = useCallback((n: number) => setIndex((i) => (i + n + count) % count), [count]);

  useEffect(() => {
    const t = setInterval(() => setIndex((i) => (i + 1) % count), 5000);
    return () => clearInterval(t);
  }, [count]);

  const slide = heroSlides[index];

  return (
    <section className="relative h-[90vh] min-h-[560px] w-full overflow-hidden">
      <AnimatePresence mode="sync">
        <motion.div
          key={index}
          initial={{ opacity: 0, scale: 1.06 }}
          animate={{ opacity: 1, scale: 1 }}
          exit={{ opacity: 0 }}
          transition={{ duration: 1.1, ease: "easeInOut" }}
          className="absolute inset-0"
        >
          <img src={slide.image} alt={slide.title} className="h-full w-full object-cover" />
          <div className="absolute inset-0" style={{ backgroundImage: "var(--gradient-hero)" }} />
        </motion.div>
      </AnimatePresence>

      <div className="absolute inset-0 grid place-items-center">
        <div className="container-x text-center text-white">
          <motion.div
            key={`txt-${index}`}
            initial={{ opacity: 0, y: 24 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8, delay: 0.2 }}
          >
            <span className="inline-block rounded-full bg-white/20 px-4 py-1.5 text-xs font-semibold uppercase tracking-wide backdrop-blur-sm">
              Selamat Datang
            </span>
            <h1 className="mx-auto mt-5 max-w-4xl font-display text-4xl font-bold leading-tight drop-shadow-md sm:text-5xl lg:text-6xl">
              {slide.title}
            </h1>
            <p className="mx-auto mt-5 max-w-2xl text-base text-white/90 sm:text-lg">{slide.subtitle}</p>
            <div className="mt-8 flex flex-wrap items-center justify-center gap-4">
              <Link to="/tentang" className="btn-neu btn-neu-primary">
                <UserSquare className="h-5 w-5" /> Profil Madrasah
              </Link>
              <Link to="/kontak" className="btn-neu bg-white/90 text-foreground">
                <MessageCircle className="h-5 w-5" /> Hubungi Kami
              </Link>
            </div>
          </motion.div>
        </div>
      </div>

      <button
        onClick={() => go(-1)}
        aria-label="Sebelumnya"
        className="absolute left-4 top-1/2 grid h-12 w-12 -translate-y-1/2 place-items-center rounded-full bg-white/25 text-white backdrop-blur-md transition hover:bg-white/40 sm:left-8"
      >
        <ChevronLeft className="h-6 w-6" />
      </button>
      <button
        onClick={() => go(1)}
        aria-label="Berikutnya"
        className="absolute right-4 top-1/2 grid h-12 w-12 -translate-y-1/2 place-items-center rounded-full bg-white/25 text-white backdrop-blur-md transition hover:bg-white/40 sm:right-8"
      >
        <ChevronRight className="h-6 w-6" />
      </button>

      <div className="absolute bottom-8 left-1/2 flex -translate-x-1/2 gap-2.5">
        {heroSlides.map((_, i) => (
          <button
            key={i}
            onClick={() => setIndex(i)}
            aria-label={`Slide ${i + 1}`}
            className={`h-2.5 rounded-full transition-all ${i === index ? "w-8 bg-white" : "w-2.5 bg-white/50"}`}
          />
        ))}
      </div>
    </section>
  );
}