import { useState } from "react";
import { createFileRoute } from "@tanstack/react-router";
import { motion, AnimatePresence } from "framer-motion";
import { X } from "lucide-react";
import { PageHero } from "@/components/PageHero";
import { Reveal } from "@/components/Reveal";
import { galeri, galeriKategori } from "@/lib/site-data";

export const Route = createFileRoute("/galeri")({
  head: () => ({
    meta: [
      { title: "Galeri — MTs Miftahul Ulum Anggana" },
      { name: "description", content: "Galeri kegiatan akademik, keagamaan, kesiswaan, dan fasilitas MTs Miftahul Ulum Anggana." },
    ],
  }),
  component: Galeri,
});

function Galeri() {
  const [filter, setFilter] = useState<string>("Semua");
  const [active, setActive] = useState<number | null>(null);

  const items = filter === "Semua" ? galeri : galeri.filter((g) => g.kategori === filter);
  const activeItem = galeri.find((g) => g.id === active);

  return (
    <>
      <PageHero title="Galeri" subtitle="Dokumentasi momen dan kegiatan di lingkungan madrasah." />
      <section className="section-pad">
        <div className="container-x">
          <div className="flex flex-wrap justify-center gap-3">
            {galeriKategori.map((k) => (
              <button
                key={k}
                onClick={() => setFilter(k)}
                className={`rounded-full px-5 py-2.5 text-sm font-medium transition-all ${
                  filter === k ? "btn-neu-primary text-primary-foreground" : "neu-sm text-foreground hover:-translate-y-0.5"
                }`}
                style={filter === k ? { backgroundImage: "var(--gradient-primary)", boxShadow: "var(--shadow-neu)" } : undefined}
              >
                {k}
              </button>
            ))}
          </div>

          <div className="mt-10 columns-1 gap-5 sm:columns-2 lg:columns-3 [&>*]:mb-5">
            {items.map((g, i) => (
              <Reveal key={g.id} delay={i * 0.05}>
                <figure className="group relative cursor-pointer overflow-hidden rounded-[20px] neu-sm p-2" onClick={() => setActive(g.id)}>
                  <div className="overflow-hidden rounded-[16px]">
                    <img src={g.image} alt={g.judul} loading="lazy" className="w-full object-cover transition-transform duration-500 group-hover:scale-110" />
                  </div>
                  <figcaption className="pointer-events-none absolute inset-2 flex items-end rounded-[16px] bg-gradient-to-t from-black/65 to-transparent p-4 opacity-0 transition-opacity group-hover:opacity-100">
                    <div>
                      <span className="block text-xs text-primary-foreground/80">{g.kategori}</span>
                      <span className="text-sm font-semibold text-white">{g.judul}</span>
                    </div>
                  </figcaption>
                </figure>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      <AnimatePresence>
        {activeItem && (
          <motion.div
            className="fixed inset-0 z-[60] grid place-items-center bg-black/80 p-4 backdrop-blur-sm"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            onClick={() => setActive(null)}
          >
            <button className="absolute right-5 top-5 grid h-11 w-11 place-items-center rounded-full bg-white/20 text-white" onClick={() => setActive(null)}>
              <X className="h-6 w-6" />
            </button>
            <motion.div
              initial={{ scale: 0.9, opacity: 0 }}
              animate={{ scale: 1, opacity: 1 }}
              exit={{ scale: 0.9, opacity: 0 }}
              className="max-h-[85vh] max-w-3xl overflow-hidden rounded-2xl"
              onClick={(e) => e.stopPropagation()}
            >
              <img src={activeItem.image} alt={activeItem.judul} className="max-h-[80vh] w-full object-contain" />
              <p className="bg-surface p-4 text-center font-medium text-foreground">{activeItem.judul}</p>
            </motion.div>
          </motion.div>
        )}
      </AnimatePresence>
    </>
  );
}