"use client";

import { useEffect, useRef, useState } from "react";
import Image from "next/image";
import { ChevronLeft, ChevronRight, Maximize2, X } from "lucide-react";

export function ProductGallery({ images, name }: { images: string[]; name: string }) {
  // Each supplied image can be browsed in full and detail view. Demo assets
  // contain one source photo per colour; API galleries may contain any count.
  const views = [...new Set(images)].flatMap((src) => [{ src, detail: false }, { src, detail: true }]);
  const [index, setIndex] = useState(0);
  const zoom = useRef<HTMLDialogElement>(null);
  const [zoomOpen, setZoomOpen] = useState(false);
  useEffect(() => { if (!zoomOpen) return; const previous = document.body.style.overflow; document.body.style.overflow = "hidden"; return () => { document.body.style.overflow = previous; }; }, [zoomOpen]);
  const view = views[index] ?? views[0];
  const move = (delta: number) => setIndex((current) => (current + delta + views.length) % views.length);
  if (!view) return <div className="gallery-placeholder">Product images will be added soon.</div>;
  return <div className="product-gallery" role="group" aria-label={`${name} image gallery`} onKeyDown={(event) => { if (event.key === "ArrowRight" || event.key === "ArrowLeft") { event.preventDefault(); move(event.key === "ArrowRight" ? 1 : -1); } }}>
    <div className={`gallery-main ${view.detail ? "gallery-detail-view" : ""}`}><Image src={view.src} alt={`${name}, ${view.detail ? "close-up detail" : "full view"}`} fill sizes="(max-width: 700px) 90vw, 45vw" className="gallery-image" priority /><button type="button" className="gallery-zoom" onClick={() => { zoom.current?.showModal(); setZoomOpen(true); }} aria-label="Enlarge product image"><Maximize2 size={19} /></button><div className="gallery-arrows"><button type="button" onClick={() => move(-1)} aria-label="Previous image view"><ChevronLeft size={18} /></button><span aria-live="polite">{index + 1} / {views.length} views</span><button type="button" onClick={() => move(1)} aria-label="Next image view"><ChevronRight size={18} /></button></div></div>
    <div className="gallery-thumbnails" aria-label="Choose an image view">{views.map((item, itemIndex) => <button key={`${item.src}:${item.detail}`} type="button" className={item.detail ? "gallery-detail-view" : ""} aria-pressed={index === itemIndex} onClick={() => setIndex(itemIndex)} aria-label={`Image ${Math.floor(itemIndex / 2) + 1}, ${item.detail ? "detail" : "full view"}`}><Image src={item.src} alt="" fill sizes="70px" className="gallery-image" /><span>{item.detail ? "Detail" : "Full view"}</span></button>)}</div>
    <dialog ref={zoom} onClose={() => setZoomOpen(false)} className="image-zoom-dialog" aria-label={`${name} enlarged image`} onClick={(event) => { if (event.target === event.currentTarget) zoom.current?.close(); }}><button type="button" className="gallery-zoom-close" onClick={() => zoom.current?.close()} aria-label="Close enlarged image"><X size={23} /></button><div className={`zoom-image-wrap ${view.detail ? "gallery-detail-view" : ""}`}><Image src={view.src} alt={`${name}, enlarged view`} fill sizes="90vw" className="gallery-image" /></div><div className="zoom-controls"><button type="button" onClick={() => move(-1)} aria-label="Previous enlarged view"><ChevronLeft size={21} /></button><span>{index + 1} / {views.length}</span><button type="button" onClick={() => move(1)} aria-label="Next enlarged view"><ChevronRight size={21} /></button></div></dialog>
  </div>;
}