"use client";

import { useEffect, useState } from "react";

export function Gallery({
  photos,
  title,
}: {
  photos: string[];
  title: string;
}) {
  const [open, setOpen] = useState<number | null>(null);

  useEffect(() => {
    if (open === null) return;
    function onKey(e: KeyboardEvent) {
      if (e.key === "Escape") setOpen(null);
      if (e.key === "ArrowRight")
        setOpen((i) => (i === null ? null : (i + 1) % photos.length));
      if (e.key === "ArrowLeft")
        setOpen((i) =>
          i === null ? null : (i - 1 + photos.length) % photos.length,
        );
    }
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open, photos.length]);

  if (photos.length === 0) {
    return (
      <div className="flex aspect-[4/3] items-center justify-center rounded-xl bg-zinc-100 text-zinc-400">
        No photo
      </div>
    );
  }

  const hero = photos[0]!;
  const others = photos.slice(1, 5);

  return (
    <>
      <div className="grid grid-cols-1 gap-3 md:grid-cols-4 md:gap-4">
        <button
          type="button"
          onClick={() => setOpen(0)}
          className="md:col-span-3 cursor-zoom-in overflow-hidden rounded-xl bg-zinc-100"
        >
          <div className="aspect-[4/3] w-full">
            {/* eslint-disable-next-line @next/next/no-img-element */}
            <img
              src={hero}
              alt={title}
              className="h-full w-full object-cover transition hover:opacity-95"
            />
          </div>
        </button>
        <div className="hidden grid-rows-4 gap-3 md:grid">
          {others.map((src, i) => (
            <button
              key={src + i}
              type="button"
              onClick={() => setOpen(i + 1)}
              className="cursor-zoom-in overflow-hidden rounded-lg"
            >
              {/* eslint-disable-next-line @next/next/no-img-element */}
              <img
                src={src}
                alt={`${title} photo ${i + 2}`}
                className="h-full w-full object-cover transition hover:opacity-95"
              />
            </button>
          ))}
        </div>
      </div>
      {photos.length > 5 && (
        <div className="mt-2 text-right">
          <button
            type="button"
            onClick={() => setOpen(0)}
            className="rounded-md border border-zinc-300 bg-white px-3 py-1.5 text-xs font-medium hover:bg-zinc-50"
          >
            View all {photos.length} photos
          </button>
        </div>
      )}

      {open !== null && (
        <div
          className="fixed inset-0 z-50 flex items-center justify-center bg-black/90"
          onClick={() => setOpen(null)}
        >
          <button
            type="button"
            onClick={(e) => {
              e.stopPropagation();
              setOpen(null);
            }}
            className="absolute right-4 top-4 rounded-full bg-white/10 px-3 py-1 text-sm text-white hover:bg-white/20"
            aria-label="Close"
          >
            ✕
          </button>
          <button
            type="button"
            onClick={(e) => {
              e.stopPropagation();
              setOpen((i) =>
                i === null ? null : (i - 1 + photos.length) % photos.length,
              );
            }}
            className="absolute left-4 rounded-full bg-white/10 px-3 py-2 text-white hover:bg-white/20"
            aria-label="Previous"
          >
            ‹
          </button>
          <button
            type="button"
            onClick={(e) => {
              e.stopPropagation();
              setOpen((i) => (i === null ? null : (i + 1) % photos.length));
            }}
            className="absolute right-4 rounded-full bg-white/10 px-3 py-2 text-white hover:bg-white/20"
            aria-label="Next"
          >
            ›
          </button>
          {/* eslint-disable-next-line @next/next/no-img-element */}
          <img
            src={photos[open]}
            alt={`${title} photo ${open + 1}`}
            className="max-h-[90vh] max-w-[90vw] object-contain"
            onClick={(e) => e.stopPropagation()}
          />
          <span className="absolute bottom-4 text-xs text-white/70">
            {open + 1} / {photos.length}
          </span>
        </div>
      )}
    </>
  );
}