apps-registry/workloads/ecommerce/components/product/product-gallery.tsx

"use client";

import Image from "next/image";
import { Maximize2, Minus, Plus, RotateCcw, ZoomIn } from "lucide-react";
import { MouseEvent, PointerEvent, WheelEvent, useRef, useState } from "react";
import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";

interface Offset { x: number; y: number }
interface DragState { pointerId: number; startX: number; startY: number; originX: number; originY: number }
interface HoverZoomState { lensLeft: number; lensTop: number; lensSize: number; bgX: number; bgY: number }

// Zoom estilo "lupa" de Amazon: un recuadro semitransparente sobre la
// imagen (la lupa) marca la region que se esta mirando, y un panel
// aparte a la derecha muestra esa misma region ampliada -- sin recortar
// nada de la pantalla ni pedirle al usuario que haga scroll para verlo
// completo (a diferencia de un primer intento que escalaba la imagen
// in-place con transform, donde para ver el borde superior había que
// mover el cursor fuera del viewport visible). Solo mouse (mousemove no
// dispara de forma continua en touch); en mobile no aparece el efecto,
// sin romper nada. Independiente del zoom interactivo del modal (click
// -> Dialog con scale/drag), que sigue igual.
//
// El panel usa background-image con la foto completa (no la version ya
// recortada por object-cover) a proposito -- escalar la imagen recortada
// nunca iba a revelar las partes recortadas (ej. la cabeza de una figura
// de accion en una foto vertical). background-size en un solo valor
// (ancho%, alto en "auto") preserva el aspect ratio real de la foto
// completa.
const HOVER_ZOOM_SCALE = 2.2;
const LENS_RATIO = 1 / HOVER_ZOOM_SCALE;

export function ProductGallery({ images, name }: { images: string[]; name: string }) {
  const [selected, setSelected] = useState(images[0] ?? "");
  const [open, setOpen] = useState(false);
  const [scale, setScale] = useState(1);
  const [offset, setOffset] = useState<Offset>({ x: 0, y: 0 });
  const [hoverZoom, setHoverZoom] = useState<HoverZoomState | null>(null);
  const drag = useRef<DragState | null>(null);

  const trackHoverZoom = (event: MouseEvent<HTMLButtonElement>) => {
    const rect = event.currentTarget.getBoundingClientRect();
    const lensSize = rect.width * LENS_RATIO;
    const cursorX = event.clientX - rect.left;
    const cursorY = event.clientY - rect.top;
    const lensLeft = Math.min(Math.max(cursorX - lensSize / 2, 0), rect.width - lensSize);
    const lensTop = Math.min(Math.max(cursorY - lensSize / 2, 0), rect.height - lensSize);
    setHoverZoom({
      lensLeft,
      lensTop,
      lensSize,
      bgX: (lensLeft / (rect.width - lensSize)) * 100,
      bgY: (lensTop / (rect.height - lensSize)) * 100,
    });
  };

  const applyScale = (next: number) => {
    const value = Math.min(3, Math.max(1, Number(next.toFixed(2))));
    setScale(value);
    if (value === 1) setOffset({ x: 0, y: 0 });
  };

  const reset = () => { setScale(1); setOffset({ x: 0, y: 0 }); };
  const changeOpen = (value: boolean) => { setOpen(value); if (!value) reset(); };
  const wheel = (event: WheelEvent<HTMLDivElement>) => { event.preventDefault(); applyScale(scale + (event.deltaY < 0 ? .2 : -.2)); };
  const pointerDown = (event: PointerEvent<HTMLDivElement>) => {
    if (scale <= 1) return;
    event.currentTarget.setPointerCapture(event.pointerId);
    drag.current = { pointerId: event.pointerId, startX: event.clientX, startY: event.clientY, originX: offset.x, originY: offset.y };
  };
  const pointerMove = (event: PointerEvent<HTMLDivElement>) => {
    if (!drag.current || drag.current.pointerId !== event.pointerId) return;
    setOffset({ x: drag.current.originX + event.clientX - drag.current.startX, y: drag.current.originY + event.clientY - drag.current.startY });
  };
  const pointerEnd = (event: PointerEvent<HTMLDivElement>) => {
    if (drag.current?.pointerId === event.pointerId) drag.current = null;
  };

  return (
    <div className="grid gap-4 lg:grid-cols-[86px_1fr]">
      <div className="order-2 flex gap-3 overflow-x-auto lg:order-1 lg:flex-col">
        {images.map((image) => <button type="button" key={image} onClick={() => { setSelected(image); reset(); }} onMouseEnter={() => { setSelected(image); reset(); }} className={`relative aspect-square w-20 shrink-0 overflow-hidden rounded-2xl border-2 ${selected === image ? "border-fuchsia-500" : "border-transparent"}`}><Image src={image} alt="" fill sizes="80px" className="object-cover" /></button>)}
      </div>
      <div className="relative order-1 lg:order-2">
        <Dialog open={open} onOpenChange={changeOpen}>
          <DialogTrigger asChild>
            <button
              type="button"
              className="group relative aspect-square w-full cursor-zoom-in overflow-hidden rounded-[2rem] bg-slate-50"
              onMouseMove={trackHoverZoom}
              onMouseLeave={() => setHoverZoom(null)}
            >
              <Image
                src={selected}
                alt={name}
                fill
                priority
                sizes="(max-width: 1024px) 100vw, 50vw"
                className="object-cover"
              />
              {/* Lupa: recuadro que marca la region ampliada, visible desde
                  lg (donde también hay lugar para el panel de al lado). Por
                  debajo de lg se usa el overlay in-place (misma imagen
                  completa como fondo, sin lupa ni panel aparte) porque no
                  hay espacio horizontal para un panel flotante. */}
              {hoverZoom && (
                <div
                  aria-hidden
                  className="pointer-events-none absolute hidden border-2 border-white bg-white/25 shadow-lg lg:block"
                  style={{ left: hoverZoom.lensLeft, top: hoverZoom.lensTop, width: hoverZoom.lensSize, height: hoverZoom.lensSize }}
                />
              )}
              <div
                aria-hidden
                className="pointer-events-none absolute inset-0 bg-slate-50 transition-opacity duration-150 ease-out lg:hidden"
                style={{
                  opacity: hoverZoom ? 1 : 0,
                  backgroundImage: `url(${selected})`,
                  backgroundRepeat: "no-repeat",
                  backgroundSize: `${HOVER_ZOOM_SCALE * 100}%`,
                  backgroundPosition: hoverZoom ? `${hoverZoom.bgX}% ${hoverZoom.bgY}%` : "center",
                }}
              />
              <span className="absolute bottom-5 right-5 inline-flex items-center gap-2 rounded-full bg-white px-4 py-2 text-xs font-black shadow-xl"><ZoomIn className="size-4" />Zoom interactivo</span>
            </button>
          </DialogTrigger>
          <DialogContent className="max-w-6xl overflow-hidden bg-slate-950 p-0">
          <div className="grid min-h-[70vh] grid-rows-[1fr_auto]">
            <div className="relative overflow-hidden bg-slate-950" onWheel={wheel} onPointerDown={pointerDown} onPointerMove={pointerMove} onPointerUp={pointerEnd} onPointerCancel={pointerEnd} onDoubleClick={() => applyScale(scale > 1 ? 1 : 2)} style={{ touchAction: "none", cursor: scale > 1 ? "grab" : "zoom-in" }}>
              <div className="absolute inset-6 transition-transform duration-100 will-change-transform" style={{ transform: `translate3d(${offset.x}px, ${offset.y}px, 0) scale(${scale})` }}>
                <Image src={selected} alt={name} fill sizes="95vw" className="select-none object-contain" draggable={false} />
              </div>
              <div className="pointer-events-none absolute left-5 top-5 rounded-full bg-black/65 px-3 py-1.5 text-xs font-black text-white backdrop-blur">Rueda o botones para acercar · Arrastra para mover</div>
            </div>
            <div className="flex flex-wrap items-center justify-center gap-3 border-t border-white/10 bg-slate-900 p-4 text-white">
              <button type="button" aria-label="Alejar" onClick={() => applyScale(scale - .25)} disabled={scale <= 1} className="grid size-11 place-items-center rounded-full bg-white/10 hover:bg-white/20 disabled:opacity-35"><Minus /></button>
              <input aria-label="Nivel de zoom" type="range" min="1" max="3" step="0.1" value={scale} onChange={(event) => applyScale(Number(event.target.value))} className="w-44 accent-fuchsia-500 sm:w-64" />
              <button type="button" aria-label="Acercar" onClick={() => applyScale(scale + .25)} disabled={scale >= 3} className="grid size-11 place-items-center rounded-full bg-white/10 hover:bg-white/20 disabled:opacity-35"><Plus /></button>
              <button type="button" onClick={reset} className="inline-flex h-11 items-center gap-2 rounded-full bg-white/10 px-4 text-sm font-black hover:bg-white/20"><RotateCcw className="size-4" />Restablecer</button>
              <span className="inline-flex h-11 items-center gap-2 rounded-full bg-fuchsia-500 px-4 text-sm font-black"><Maximize2 className="size-4" />{Math.round(scale * 100)}%</span>
            </div>
          </div>
          </DialogContent>
        </Dialog>

        {hoverZoom && (
          <div
            aria-hidden
            className="pointer-events-none absolute left-full top-0 z-30 ml-4 hidden aspect-square w-[26rem] max-w-[40vw] overflow-hidden rounded-[2rem] border border-slate-200 bg-white shadow-2xl lg:block"
            style={{
              backgroundImage: `url(${selected})`,
              backgroundRepeat: "no-repeat",
              backgroundSize: `${HOVER_ZOOM_SCALE * 100}%`,
              backgroundPosition: `${hoverZoom.bgX}% ${hoverZoom.bgY}%`,
            }}
          />
        )}
      </div>
    </div>
  );
}