nini-naderi/src/components/ProductGallery.tsx

"use client";

import { useEffect, useState } from "react";
import { Placeholder } from "@/components/Placeholder";
import { IconChevron, IconClose } from "./Icons";

export function ProductGallery({ images, title }: { images: string[]; title: string }) {
  const gallery = images.filter(Boolean);
  const [active, setActive] = useState(0);
  const [open, setOpen] = useState(false);
  const [origin, setOrigin] = useState("50% 50%");
  const current = gallery[active] || gallery[0];

  useEffect(() => {
    if (!open) return;
    const onKey = (event: KeyboardEvent) => {
      if (event.key === "Escape") setOpen(false);
      if (gallery.length < 2) return;
      if (event.key === "ArrowRight") setActive((index) => (index + 1) % gallery.length);
      if (event.key === "ArrowLeft") setActive((index) => (index - 1 + gallery.length) % gallery.length);
    };
    const previous = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    window.addEventListener("keydown", onKey);
    return () => {
      document.body.style.overflow = previous;
      window.removeEventListener("keydown", onKey);
    };
  }, [open, gallery.length]);

  if (!current) return null;

  const show = (index: number) => {
    setActive((index + gallery.length) % gallery.length);
  };

  return (
    <div>
      <button
        type="button"
        onClick={() => setOpen(true)}
        onMouseMove={(event) => {
          const box = event.currentTarget.getBoundingClientRect();
          const x = ((event.clientX - box.left) / box.width) * 100;
          const y = ((event.clientY - box.top) / box.height) * 100;
          setOrigin(`${x}% ${y}%`);
        }}
        onMouseLeave={() => setOrigin("50% 50%")}
        className="group relative block aspect-square w-full cursor-zoom-in overflow-hidden rounded-3xl bg-white"
        aria-label="بزرگ‌نمایی تصویر"
      >
        <span
          className="block h-full w-full transition-transform duration-200 ease-out [@media(hover:hover)_and_(pointer:fine)]:group-hover:scale-[1.8]"
          style={{ transformOrigin: origin }}
        >
          <Placeholder
            src={current}
            alt={title}
            width={720}
            height={720}
            rounded="rounded-3xl"
            fill
            fit="contain"
            className="pointer-events-none"
          />
        </span>
      </button>
      {gallery.length > 1 ? (
        <div className="mt-3 flex flex-wrap gap-2">
          {gallery.slice(0, 8).map((image, index) => (
            <button
              key={`${image}-${index}`}
              type="button"
              onClick={() => setActive(index)}
              className={`size-[72px] shrink-0 overflow-hidden rounded-2xl ${
                index === active ? "ring-2 ring-purple-600" : "ring-1 ring-line"
              }`}
            >
              <Placeholder src={image} alt="" width={72} height={72} rounded="rounded-none" fill />
            </button>
          ))}
        </div>
      ) : null}

      {open ? (
        <div
          className="fixed inset-0 z-50 flex items-center justify-center bg-[#2a1838]/80 p-4 backdrop-blur-sm"
          onClick={() => setOpen(false)}
          role="dialog"
          aria-modal="true"
          aria-label={title}
        >
          <button
            type="button"
            onClick={() => setOpen(false)}
            className="absolute top-4 left-4 grid size-10 place-items-center rounded-full bg-white text-ink hover:bg-purple-50"
            aria-label="بستن"
          >
            <IconClose className="size-5" />
          </button>
          {gallery.length > 1 ? (
            <>
              <button
                type="button"
                onClick={(event) => {
                  event.stopPropagation();
                  show(active - 1);
                }}
                className="absolute top-1/2 right-4 grid size-10 -translate-y-1/2 place-items-center rounded-full bg-white text-purple-700 hover:bg-purple-50"
                aria-label="قبلی"
              >
                <IconChevron className="size-5 rotate-180" />
              </button>
              <button
                type="button"
                onClick={(event) => {
                  event.stopPropagation();
                  show(active + 1);
                }}
                className="absolute top-1/2 left-4 grid size-10 -translate-y-1/2 place-items-center rounded-full bg-white text-purple-700 hover:bg-purple-50"
                aria-label="بعدی"
              >
                <IconChevron className="size-5" />
              </button>
            </>
          ) : null}
          <img
            src={current}
            alt={title}
            className="max-h-[88vh] max-w-[min(92vw,960px)] rounded-3xl bg-white object-contain"
            onClick={(event) => event.stopPropagation()}
          />
        </div>
      ) : null}
    </div>
  );
}