"use client";

import { useState } from "react";

// Read-only Variante von PhotoGalleryClient für geteilte Links — kein Login,
// keine Bewertung, kein Download-Link, nur Ansehen (Raster + Lightbox).
export function SharedPhotoGallery({ imageBaseUrl, fileNames }: { imageBaseUrl: string; fileNames: string[] }) {
  const [lightboxIndex, setLightboxIndex] = useState<number | null>(null);
  const active = lightboxIndex !== null ? fileNames[lightboxIndex] : null;

  return (
    <>
      <div className="grid grid-cols-2 sm:grid-cols-3 gap-4">
        {fileNames.map((fileName, i) => (
          <button
            key={fileName}
            type="button"
            onClick={() => setLightboxIndex(i)}
            className="relative aspect-[3/4] overflow-hidden rounded-lg group"
          >
            {/* eslint-disable-next-line @next/next/no-img-element */}
            <img
              src={`${imageBaseUrl}/${encodeURIComponent(fileName)}?variant=thumb`}
              alt=""
              draggable={false}
              onContextMenu={(e) => e.preventDefault()}
              className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
            />
          </button>
        ))}
      </div>

      {active && (
        <div
          className="fixed inset-0 z-50 flex items-center justify-center bg-black/90 backdrop-blur-sm p-6"
          onClick={() => setLightboxIndex(null)}
        >
          {/* eslint-disable-next-line @next/next/no-img-element */}
          <img
            src={`${imageBaseUrl}/${encodeURIComponent(active)}?variant=full`}
            alt=""
            draggable={false}
            onContextMenu={(e) => e.preventDefault()}
            className="max-w-full max-h-full object-contain"
            onClick={(e) => e.stopPropagation()}
          />
          <button
            onClick={() => setLightboxIndex(null)}
            className="absolute top-5 right-5 h-10 w-10 flex items-center justify-center border border-white/20 text-white hover:border-white/60"
          >
            ✕
          </button>
        </div>
      )}
    </>
  );
}