"use client";

import { useState } from "react";
import Image from "next/image";
import { X, ChevronLeft, ChevronRight } from "lucide-react";
import type { GalleryPhoto } from "@/generated/prisma/client";
import type { Locale } from "@/content/types";

export function GalleryGrid({ photos, locale }: { photos: GalleryPhoto[]; locale: Locale }) {
  const [activeIndex, setActiveIndex] = useState<number | null>(null);

  if (photos.length === 0) return null;

  function close() {
    setActiveIndex(null);
  }
  function prev() {
    setActiveIndex((i) => (i === null ? null : (i - 1 + photos.length) % photos.length));
  }
  function next() {
    setActiveIndex((i) => (i === null ? null : (i + 1) % photos.length));
  }

  return (
    <>
      <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4">
        {photos.map((photo, index) => {
          const caption = locale === "ar" ? photo.captionAr : photo.captionEn;
          return (
            <button
              key={photo.id}
              type="button"
              onClick={() => setActiveIndex(index)}
              className="group relative aspect-square overflow-hidden rounded-xl"
            >
              <Image
                src={photo.imageUrl}
                alt={caption ?? ""}
                fill
                sizes="(min-width: 1024px) 25vw, (min-width: 640px) 33vw, 50vw"
                className="object-cover transition-transform duration-500 group-hover:scale-105"
              />
            </button>
          );
        })}
      </div>

      {activeIndex !== null ? (
        <div
          className="fixed inset-0 z-[100] flex items-center justify-center bg-charcoal-950/95 p-4"
          onClick={close}
        >
          <button
            type="button"
            onClick={close}
            className="absolute end-4 top-4 text-white/80 hover:text-white"
            aria-label="Close"
          >
            <X size={28} />
          </button>
          <button
            type="button"
            onClick={(e) => {
              e.stopPropagation();
              prev();
            }}
            className="absolute start-4 text-white/80 hover:text-white"
            aria-label="Previous"
          >
            <ChevronLeft size={32} />
          </button>
          <div className="relative h-[80vh] w-full max-w-4xl" onClick={(e) => e.stopPropagation()}>
            <Image
              src={photos[activeIndex].imageUrl}
              alt=""
              fill
              sizes="100vw"
              className="object-contain"
            />
          </div>
          <button
            type="button"
            onClick={(e) => {
              e.stopPropagation();
              next();
            }}
            className="absolute end-4 text-white/80 hover:text-white"
            aria-label="Next"
          >
            <ChevronRight size={32} />
          </button>
        </div>
      ) : null}
    </>
  );
}