"use client";

import { ChevronLeft, ChevronRight, X } from "lucide-react";
import { useEffect } from "react";
import type { PublicGalleryImage } from "@/lib/db-data";

type GalleryLightboxProps = {
  images: PublicGalleryImage[];
  activeIndex: number | null;
  onClose: () => void;
  onNext: () => void;
  onPrevious: () => void;
};

export function GalleryLightbox({
  images,
  activeIndex,
  onClose,
  onNext,
  onPrevious,
}: GalleryLightboxProps) {
  useEffect(() => {
    if (activeIndex === null) {
      return;
    }

    function handleKeyDown(event: KeyboardEvent) {
      if (event.key === "Escape") {
        onClose();
      }

      if (event.key === "ArrowRight") {
        onNext();
      }

      if (event.key === "ArrowLeft") {
        onPrevious();
      }
    }

    window.addEventListener("keydown", handleKeyDown);
    return () => window.removeEventListener("keydown", handleKeyDown);
  }, [activeIndex, onClose, onNext, onPrevious]);

  if (activeIndex === null) {
    return null;
  }

  const image = images[activeIndex];

  if (!image) {
    return null;
  }

  return (
    <div
      className="fixed inset-0 z-[80] bg-navy-deep/90 p-4 backdrop-blur"
      role="dialog"
      aria-modal="true"
      aria-label={image.title}
    >
      <button
        type="button"
        aria-label="Close gallery preview"
        className="absolute right-4 top-4 inline-flex h-11 w-11 items-center justify-center rounded-full bg-white text-navy-deep shadow-card transition hover:text-primary"
        onClick={onClose}
      >
        <X className="h-5 w-5" />
      </button>

      <div className="flex h-full items-center justify-center">
        <button
          type="button"
          aria-label="Previous image"
          className="absolute left-4 top-1/2 hidden h-11 w-11 -translate-y-1/2 items-center justify-center rounded-full bg-white text-navy-deep shadow-card transition hover:text-primary sm:inline-flex"
          onClick={onPrevious}
        >
          <ChevronLeft className="h-5 w-5" />
        </button>

        <figure className="max-h-full w-full max-w-5xl">
          <img
            src={image.image}
            alt={image.alt}
            className="mx-auto max-h-[78vh] w-full rounded-[1.5rem] object-contain shadow-soft"
          />
          <figcaption className="mx-auto mt-4 max-w-3xl rounded-card bg-white p-4 text-center shadow-card">
            <p className="text-sm font-bold uppercase tracking-[0.14em] text-ev-deep">
              {image.category}
            </p>
            <h2 className="mt-1 text-xl font-bold text-navy-deep">{image.title}</h2>
          </figcaption>
        </figure>

        <button
          type="button"
          aria-label="Next image"
          className="absolute right-4 top-1/2 hidden h-11 w-11 -translate-y-1/2 items-center justify-center rounded-full bg-white text-navy-deep shadow-card transition hover:text-primary sm:inline-flex"
          onClick={onNext}
        >
          <ChevronRight className="h-5 w-5" />
        </button>
      </div>
    </div>
  );
}