// components/Gallery.tsx
"use client";

import { useEffect, useState } from "react";

interface Photo { src: string; alt: string; }

export default function Gallery({ photos }: { photos: Photo[] }) {
  const [lightbox, setLightbox] = useState<number | null>(null);

  // Keyboard nav for the lightbox
  useEffect(() => {
    if (lightbox === null) return;
    function onKey(e: KeyboardEvent) {
      if (e.key === "Escape") setLightbox(null);
      if (e.key === "ArrowRight") setLightbox((i) => (i === null ? null : (i + 1) % photos.length));
      if (e.key === "ArrowLeft") setLightbox((i) => (i === null ? null : (i - 1 + photos.length) % photos.length));
    }
    window.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    return () => {
      window.removeEventListener("keydown", onKey);
      document.body.style.overflow = "";
    };
  }, [lightbox, photos.length]);

  const [hero, ...rest] = photos;

  return (
    <>
      {/* Mosaic: one large hero + four supporting tiles */}
      <div className="grid grid-cols-4 grid-rows-2 gap-2 h-[280px] md:h-[440px]">
        <button
          onClick={() => setLightbox(0)}
          className="focus-ring col-span-4 row-span-2 md:col-span-2 overflow-hidden rounded-l-xl rounded-r-xl md:rounded-r-none bg-sandDark"
          aria-label={`Open photo: ${hero.alt}`}
        >
          {/* eslint-disable-next-line @next/next/no-img-element */}
          <img src={hero.src} alt={hero.alt} className="h-full w-full object-cover transition duration-300 hover:scale-105" />
        </button>

        {rest.slice(0, 4).map((p, i) => (
          <button
            key={p.src}
            onClick={() => setLightbox(i + 1)}
            className={`focus-ring hidden md:block overflow-hidden bg-sandDark ${i === 1 ? "rounded-tr-xl" : ""} ${i === 3 ? "rounded-br-xl" : ""}`}
            aria-label={`Open photo: ${p.alt}`}
          >
            {/* eslint-disable-next-line @next/next/no-img-element */}
            <img src={p.src} alt={p.alt} className="h-full w-full object-cover transition duration-300 hover:scale-105" />
          </button>
        ))}
      </div>

      <button
        onClick={() => setLightbox(0)}
        className="focus-ring mt-3 rounded-md border border-ink/20 bg-white/70 px-4 py-2 text-sm font-medium hover:bg-white"
      >
        View all {photos.length} photos
      </button>

      {/* Lightbox */}
      {lightbox !== null && (
        <div
          className="fixed inset-0 z-50 flex flex-col bg-black/90 p-4"
          role="dialog"
          aria-modal="true"
          aria-label="Photo viewer"
        >
          <div className="flex justify-between items-center text-white/80 text-sm mb-3">
            <span>{lightbox + 1} / {photos.length}</span>
            <button onClick={() => setLightbox(null)} className="focus-ring rounded px-3 py-1 hover:bg-white/10" aria-label="Close photo viewer">
              Close ✕
            </button>
          </div>

          <div className="flex flex-1 items-center justify-center gap-3 min-h-0">
            <button
              onClick={() => setLightbox((lightbox - 1 + photos.length) % photos.length)}
              className="focus-ring shrink-0 rounded-full bg-white/10 p-3 text-white hover:bg-white/20"
              aria-label="Previous photo"
            >‹</button>

            {/* eslint-disable-next-line @next/next/no-img-element */}
            <img src={photos[lightbox].src} alt={photos[lightbox].alt} className="max-h-full max-w-full object-contain rounded-lg" />

            <button
              onClick={() => setLightbox((lightbox + 1) % photos.length)}
              className="focus-ring shrink-0 rounded-full bg-white/10 p-3 text-white hover:bg-white/20"
              aria-label="Next photo"
            >›</button>
          </div>

          <p className="mt-3 text-center text-sm text-white/70">{photos[lightbox].alt}</p>
        </div>
      )}
    </>
  );
}