import { useMemo, useState } from 'react'
import { AnimatePresence, motion } from 'framer-motion'
import Seo from '../components/Seo'
import Reveal from '../components/Reveal'
import PageHero from '../components/PageHero'
import { GalleryGrid } from '../components/cards'
import { useContent, getGallery, getSettings } from '../lib/api'

export default function Gallery() {
  const gallery = useContent(getGallery)
  const settings = useContent(getSettings)
  const [category, setCategory] = useState('All')
  const [lightbox, setLightbox] = useState<number | null>(null)

  const categories = useMemo(
    () => ['All', ...new Set((gallery ?? []).map((g) => g.category))],
    [gallery],
  )
  const visible = (gallery ?? []).filter((g) => category === 'All' || g.category === category)

  return (
    <>
      <Seo
        title={`Gallery — ${settings?.company_name ?? 'Touch Therapies Antigua'}`}
        description="Moments of pure calm from our Antigua wellness sanctuary — treatments, the island, and the spaces in between."
      />
      <PageHero kicker="Gallery" title="Moments of Pure Calm" image={gallery?.[1]?.src} />

      <section className="py-20">
        <div className="wrap">
          <Reveal className="mb-10 flex flex-wrap justify-center gap-3">
            {categories.map((c) => (
              <button
                key={c}
                type="button"
                onClick={() => setCategory(c)}
                className={`cursor-pointer rounded-full px-6 py-2.5 text-[0.88rem] font-semibold transition-all ${
                  category === c
                    ? 'bg-turquoise-500 text-white shadow-[0_10px_22px_-8px_rgb(8_145_178/0.55)]'
                    : 'bg-mist text-ink hover:bg-turquoise-100'
                }`}
              >
                {c}
              </button>
            ))}
          </Reveal>
          <Reveal>
            <GalleryGrid images={visible} onOpen={setLightbox} />
          </Reveal>
        </div>
      </section>

      <AnimatePresence>
        {lightbox !== null && visible[lightbox] && (
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            className="fixed inset-0 z-[80] flex items-center justify-center bg-ocean-900/90 p-6 backdrop-blur-sm"
            onClick={() => setLightbox(null)}
          >
            <button
              type="button"
              aria-label="Close"
              className="absolute top-6 right-8 text-4xl text-white/80 transition-colors hover:text-white"
            >
              ×
            </button>
            <motion.img
              key={visible[lightbox].id}
              src={visible[lightbox].src.replace(/w=\d+/, 'w=1600')}
              alt={visible[lightbox].alt}
              initial={{ scale: 0.92 }}
              animate={{ scale: 1 }}
              className="max-h-[85vh] max-w-full rounded-2xl object-contain shadow-2xl"
              onClick={(e) => e.stopPropagation()}
            />
          </motion.div>
        )}
      </AnimatePresence>
    </>
  )
}
