import type { PhotoGalleryBlock } from "@/types/sections";
import { useLocale } from "@/i18n/LocaleContext";
import { useEffect, useState, useCallback } from "react";
import { ChevronLeft, ChevronRight, X } from "lucide-react";

export function PhotoGallery({ block }: { block: PhotoGalleryBlock }) {
  const { t } = useLocale();
  const [openIdx, setOpenIdx] = useState<number | null>(null);

  const close = useCallback(() => setOpenIdx(null), []);
  const prev = useCallback(
    () => setOpenIdx((i) => (i === null ? i : (i - 1 + block.photos.length) % block.photos.length)),
    [block.photos.length],
  );
  const next = useCallback(
    () => setOpenIdx((i) => (i === null ? i : (i + 1) % block.photos.length)),
    [block.photos.length],
  );

  useEffect(() => {
    if (openIdx === null) return;
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") close();
      else if (e.key === "ArrowLeft") prev();
      else if (e.key === "ArrowRight") next();
    };
    window.addEventListener("keydown", onKey);
    const prevOverflow = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    return () => {
      window.removeEventListener("keydown", onKey);
      document.body.style.overflow = prevOverflow;
    };
  }, [openIdx, close, prev, next]);

  return (
    <section className="py-16 md:py-20">
      <div className="container">
        {block.title && (
          <h2 className="font-display italic text-3xl sm:text-4xl md:text-5xl text-primary text-balance text-center">
            {t(block.title)}
          </h2>
        )}
        {block.intro && (
          <div
            className="mt-4 max-w-2xl mx-auto text-center text-foreground/80 leading-relaxed"
            dangerouslySetInnerHTML={{ __html: t(block.intro) }}
          />
        )}
        <div className="mt-10 grid grid-cols-2 gap-3 md:grid-cols-4 md:gap-4">
          {block.photos.map((p, i) => (
            <button
              key={i}
              type="button"
              onClick={() => setOpenIdx(i)}
              className="overflow-hidden rounded-sm group focus:outline-none focus:ring-2 focus:ring-primary"
              aria-label={t(p.alt)}
            >
              <img
                src={p.src}
                alt={t(p.alt)}
                loading="lazy"
                className="aspect-square w-full object-cover transition-transform duration-700 group-hover:scale-105"
              />
            </button>
          ))}
        </div>
      </div>

      {openIdx !== null && (
        <div
          role="dialog"
          aria-modal="true"
          className="fixed inset-0 z-[100] bg-black/90 flex items-center justify-center p-4"
          onClick={close}
        >
          <button
            type="button"
            onClick={(e) => { e.stopPropagation(); close(); }}
            aria-label="Close"
            className="absolute top-4 right-4 inline-flex h-10 w-10 items-center justify-center rounded-full bg-white/10 text-white hover:bg-white/20 transition-colors"
          >
            <X className="h-6 w-6" />
          </button>
          {block.photos.length > 1 && (
            <>
              <button
                type="button"
                onClick={(e) => { e.stopPropagation(); prev(); }}
                aria-label="Previous"
                className="absolute left-2 sm:left-6 inline-flex h-12 w-12 items-center justify-center rounded-full bg-white/10 text-white hover:bg-white/20 transition-colors"
              >
                <ChevronLeft className="h-7 w-7" />
              </button>
              <button
                type="button"
                onClick={(e) => { e.stopPropagation(); next(); }}
                aria-label="Next"
                className="absolute right-2 sm:right-6 inline-flex h-12 w-12 items-center justify-center rounded-full bg-white/10 text-white hover:bg-white/20 transition-colors"
              >
                <ChevronRight className="h-7 w-7" />
              </button>
            </>
          )}
          <img
            src={block.photos[openIdx].src}
            alt={t(block.photos[openIdx].alt)}
            onClick={(e) => e.stopPropagation()}
            className="max-h-[90vh] max-w-[92vw] object-contain shadow-2xl"
          />
        </div>
      )}
    </section>
  );
}