'use client'

import { useEffect, useState } from 'react'
import { ChevronLeft, ChevronRight, Minus, Plus, RotateCcw, X } from 'lucide-react'

export function GalleryGrid({ photos }: { photos: string[] }) {
  const [active, setActive] = useState<number | null>(null)
  const [zoom, setZoom] = useState(1)
  const openImage = (index: number) => {
    setActive(index)
    setZoom(1)
  }

  const previous = () => {
    setZoom(1)
    setActive((current) => current === null ? null : (current - 1 + photos.length) % photos.length)
  }
  const next = () => {
    setZoom(1)
    setActive((current) => current === null ? null : (current + 1) % photos.length)
  }
  const zoomIn = () => setZoom((current) => Math.min(3, Number((current + 0.25).toFixed(2))))
  const zoomOut = () => setZoom((current) => Math.max(1, Number((current - 0.25).toFixed(2))))

  useEffect(() => {
    if (active === null) return
    const previousOverflow = document.body.style.overflow
    document.body.style.overflow = 'hidden'
    const onKeyDown = (event: KeyboardEvent) => {
      if (event.key === 'Escape') setActive(null)
      if (event.key === 'ArrowLeft') previous()
      if (event.key === 'ArrowRight') next()
      if (event.key === '+' || event.key === '=') zoomIn()
      if (event.key === '-') zoomOut()
      if (event.key === '0') setZoom(1)
    }
    window.addEventListener('keydown', onKeyDown)
    return () => {
      document.body.style.overflow = previousOverflow
      window.removeEventListener('keydown', onKeyDown)
    }
  }, [active, photos.length])

  return <>
    <section className="mx-auto grid max-w-7xl grid-cols-1 gap-4 px-5 py-24 sm:grid-cols-2 lg:grid-cols-4 lg:px-8 lg:py-32">
      {photos.map((src, index) => <figure key={src} className="group relative aspect-[4/3] overflow-hidden rounded-2xl bg-[var(--mist)] shadow-sm">
        <button type="button" onClick={() => openImage(index)} className="relative z-10 block size-full cursor-zoom-in text-left" aria-label={`Open RG Fish Farming gallery image ${index + 1}`}>
          <img src={src} alt={`RG Fish Farming gallery ${index + 1}`} loading={index < 8 ? 'eager' : 'lazy'} decoding="async" className="size-full object-cover transition duration-700 group-hover:scale-105" />
          <span className="absolute inset-0 bg-gradient-to-t from-[var(--navy)]/75 via-transparent to-transparent opacity-80 transition group-hover:opacity-100" aria-hidden="true" />
        </button>
        <figcaption className="pointer-events-none absolute inset-x-0 bottom-0 flex items-end justify-between p-4 text-white"><span className="text-sm font-bold">RG Farm</span><span className="rounded-full border border-white/40 bg-black/15 px-2.5 py-1 text-[.65rem] font-bold backdrop-blur-sm">{String(index + 1).padStart(2, '0')}</span></figcaption>
      </figure>)}
    </section>

    {active !== null && <div role="dialog" aria-modal="true" aria-label={`Gallery image ${active + 1} of ${photos.length}`} onClick={() => setActive(null)} className="fixed inset-0 z-[100] grid place-items-center bg-[var(--navy)]/95 p-4 backdrop-blur-md sm:p-8">
      <button type="button" onClick={() => setActive(null)} className="absolute right-4 top-4 z-10 grid size-11 place-items-center rounded-full border border-white/30 bg-white/10 text-white transition hover:bg-white hover:text-[var(--navy)] sm:right-8 sm:top-8" aria-label="Close gallery"><X size={21} /></button>
      <button type="button" onClick={(event) => { event.stopPropagation(); previous() }} className="absolute left-3 z-10 grid size-12 place-items-center rounded-full border border-white/30 bg-white/10 text-white transition hover:bg-white hover:text-[var(--navy)] sm:left-8 sm:size-14" aria-label="Previous image"><ChevronLeft size={26} /></button>
      <div onClick={(event) => event.stopPropagation()} onWheel={(event) => { event.preventDefault(); event.deltaY < 0 ? zoomIn() : zoomOut() }} className="flex max-h-[90vh] max-w-[min(92vw,90rem)] flex-col items-center gap-4">
        <div className="max-h-[80vh] max-w-full overflow-hidden rounded-2xl">
          <img src={photos[active]} alt={`RG Fish Farming gallery ${active + 1}`} style={{ transform: 'scale(' + zoom + ')' }} className="max-h-[80vh] max-w-full origin-center object-contain shadow-2xl transition-transform duration-200" />
        </div>
        <p className="rounded-full border border-white/20 bg-white/10 px-4 py-2 text-xs font-bold tracking-widest text-white">{String(active + 1).padStart(2, '0')} / {String(photos.length).padStart(2, '0')}</p>
      </div>
      <div onClick={(event) => event.stopPropagation()} className="absolute bottom-4 left-1/2 z-10 flex -translate-x-1/2 items-center gap-2 rounded-full border border-white/20 bg-black/35 p-2 text-white backdrop-blur-md sm:bottom-8">
        <button type="button" onClick={zoomOut} disabled={zoom === 1} className="grid size-10 place-items-center rounded-full transition hover:bg-white/15 disabled:cursor-not-allowed disabled:opacity-40" aria-label="Zoom out"><Minus size={18} /></button>
        <button type="button" onClick={() => setZoom(1)} className="flex min-w-16 items-center justify-center gap-1 rounded-full px-2 py-2 text-xs font-bold hover:bg-white/15" aria-label="Reset zoom"><RotateCcw size={14} /> {Math.round(zoom * 100)}%</button>
        <button type="button" onClick={zoomIn} disabled={zoom === 3} className="grid size-10 place-items-center rounded-full transition hover:bg-white/15 disabled:cursor-not-allowed disabled:opacity-40" aria-label="Zoom in"><Plus size={18} /></button>
      </div>
      <button type="button" onClick={(event) => { event.stopPropagation(); next() }} className="absolute right-3 z-10 grid size-12 place-items-center rounded-full border border-white/30 bg-white/10 text-white transition hover:bg-white hover:text-[var(--navy)] sm:right-8 sm:size-14" aria-label="Next image"><ChevronRight size={26} /></button>
    </div>}
  </>
}