// -----------------------------------------------------------------------------
// Lou-Ka — Agrégateur de logements à louer (province de Québec)
// Auteur : Simon-Pierre Boucher — contact@spboucher.ai
// fiche/PropertyGallery.tsx : galerie premium — grande image, balayage natif
//   (scroll-snap), compteur « 1 / 12 », bouton plein écran, flèches au survol
//   (desktop), vignettes ≥ 768 px, préchargement de la photo suivante, lazy
//   loading des autres. Lightbox : balayage + pincement pour zoomer + double
//   tape (logique conservée de la fiche v2). URLs d'images inchangées
//   (miniatures WebP via SmartImg → repli original → visuel de secours).
// -----------------------------------------------------------------------------
import { useEffect, useRef, useState } from "react";
import SmartImg from "../components/SmartImg";
import { IcoChevronLeft, IcoChevronRight, IcoClose, IcoExpand } from "../components/Icons";
import { thumb } from "../api";

function Lightbox({ images, start, titre, onClose }:
                  { images: string[]; start: number; titre: string; onClose: () => void }) {
  const [idx, setIdx] = useState(start);
  const [scale, setScale] = useState(1);
  const [tx, setTx] = useState(0);
  const [ty, setTy] = useState(0);
  const track = useRef<HTMLDivElement>(null);
  const pointers = useRef(new Map<number, { x: number; y: number }>());
  const pinch = useRef<{ d: number; scale: number } | null>(null);
  const lastTap = useRef(0);

  useEffect(() => {
    track.current?.scrollTo({ left: start * track.current.clientWidth });
    document.documentElement.classList.add("ka-scroll-lock");
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") onClose();
      if (e.key === "ArrowRight") go(1);
      if (e.key === "ArrowLeft") go(-1);
    };
    window.addEventListener("keydown", onKey);
    return () => {
      document.documentElement.classList.remove("ka-scroll-lock");
      window.removeEventListener("keydown", onKey);
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const resetZoom = () => { setScale(1); setTx(0); setTy(0); };
  const go = (d: number) => {
    const el = track.current; if (!el) return;
    const i = Math.max(0, Math.min(images.length - 1, Math.round(el.scrollLeft / el.clientWidth) + d));
    el.scrollTo({ left: i * el.clientWidth, behavior: "smooth" });
  };
  const onScroll = () => {
    const el = track.current;
    if (el && scale === 1) {
      const i = Math.round(el.scrollLeft / el.clientWidth);
      if (i !== idx) { setIdx(i); resetZoom(); }
    }
  };
  const dist = () => {
    const [a, b] = [...pointers.current.values()];
    return Math.hypot(a.x - b.x, a.y - b.y);
  };
  const onPointerDown = (e: React.PointerEvent) => {
    pointers.current.set(e.pointerId, { x: e.clientX, y: e.clientY });
    if (pointers.current.size === 2) pinch.current = { d: dist(), scale };
    if (pointers.current.size === 1) {
      const now = Date.now();
      if (now - lastTap.current < 300) { if (scale > 1) resetZoom(); else setScale(2.5); }
      lastTap.current = now;
    }
  };
  const onPointerMove = (e: React.PointerEvent) => {
    const prev = pointers.current.get(e.pointerId);
    if (!prev) return;
    pointers.current.set(e.pointerId, { x: e.clientX, y: e.clientY });
    if (pointers.current.size === 2 && pinch.current) {
      const s = Math.min(4, Math.max(1, pinch.current.scale * (dist() / pinch.current.d)));
      setScale(s);
      if (s === 1) { setTx(0); setTy(0); }
    } else if (pointers.current.size === 1 && scale > 1) {
      setTx((v) => v + (e.clientX - prev.x));
      setTy((v) => v + (e.clientY - prev.y));
    }
  };
  const onPointerUp = (e: React.PointerEvent) => {
    pointers.current.delete(e.pointerId);
    if (pointers.current.size < 2) pinch.current = null;
  };

  return (
    <div className="lk-lightbox" role="dialog" aria-modal="true" aria-label={`Photos — ${titre}`}>
      <button type="button" className="lk-lightbox-close" aria-label="Fermer" onClick={onClose}><IcoClose size={20} /></button>
      <span className="lk-lightbox-count" aria-live="polite">{idx + 1} / {images.length}</span>
      <div className="lk-lightbox-track" ref={track} onScroll={onScroll}
           style={scale > 1 ? { overflow: "hidden", touchAction: "none" } : undefined}
           onPointerDown={onPointerDown} onPointerMove={onPointerMove}
           onPointerUp={onPointerUp} onPointerCancel={onPointerUp}>
        {images.map((u, i) => (
          <div className="lk-lightbox-cell" key={u}>
            <SmartImg src={u} original alt={`${titre} — photo ${i + 1} de ${images.length}`}
                      draggable={false} loading={Math.abs(i - idx) <= 1 ? "eager" : "lazy"}
                      style={i === idx && scale > 1 ? { transform: `translate(${tx}px, ${ty}px) scale(${scale})` } : undefined} />
          </div>
        ))}
      </div>
      {scale === 1 && idx > 0 && (
        <button type="button" className="lk-gallery-nav prev" aria-label="Photo précédente" onClick={() => go(-1)}><IcoChevronLeft size={20} /></button>
      )}
      {scale === 1 && idx < images.length - 1 && (
        <button type="button" className="lk-gallery-nav next" aria-label="Photo suivante" onClick={() => go(1)}><IcoChevronRight size={20} /></button>
      )}
    </div>
  );
}

export default function PropertyGallery({ images, titre, unitType }:
    { images: string[]; titre: string; unitType?: string }) {
  const [idx, setIdx] = useState(0);
  const [zoom, setZoom] = useState(false);
  const track = useRef<HTMLDivElement>(null);

  // préchargement discret de la photo suivante (miniature 800)
  useEffect(() => {
    const next = images[idx + 1];
    if (!next) return;
    const img = new Image();
    img.src = thumb(next, 800);
  }, [idx, images]);

  const onScroll = () => {
    const el = track.current;
    if (el) setIdx(Math.round(el.scrollLeft / el.clientWidth));
  };
  const goto = (i: number) =>
    track.current?.scrollTo({ left: i * track.current.clientWidth, behavior: "smooth" });

  if (images.length === 0)
    return (
      <div className="lk-gallery" aria-label="Photos">
        <SmartImg src={null} fallbackLabel={unitType} alt="Aucune photo fournie par la source" />
      </div>
    );

  return (
    <>
      <div className="lk-gallery" aria-roledescription="carrousel" aria-label="Photos du logement">
        <div className="lk-gallery-track" ref={track} onScroll={onScroll}>
          {images.map((u, i) => (
            <SmartImg key={u} src={u} width_={i === 0 ? 1280 : 800} fallbackLabel={unitType}
                      loading={i === 0 ? "eager" : "lazy"} decoding="async"
                      alt={`${titre} — photo ${i + 1} de ${images.length}`}
                      onClick={() => setZoom(true)} />
          ))}
        </div>
        <span className="lk-gallery-count" aria-live="polite">{idx + 1} / {images.length}</span>
        <button type="button" className="lk-gallery-full" aria-label="Voir en plein écran" onClick={() => setZoom(true)}>
          <IcoExpand size={17} />
        </button>
        {idx > 0 && (
          <button type="button" className="lk-gallery-nav prev" aria-label="Photo précédente" onClick={() => goto(idx - 1)}><IcoChevronLeft size={20} /></button>
        )}
        {idx < images.length - 1 && (
          <button type="button" className="lk-gallery-nav next" aria-label="Photo suivante" onClick={() => goto(idx + 1)}><IcoChevronRight size={20} /></button>
        )}
      </div>
      {images.length > 1 && (
        <div className="lk-thumbs" role="list">
          {images.slice(0, 12).map((u, i) => (
            <button type="button" key={u} className={i === idx ? "on" : ""} onClick={() => goto(i)}
                    aria-label={`Photo ${i + 1}`} aria-current={i === idx} role="listitem">
              <SmartImg src={u} width_={160} alt="" loading="lazy" decoding="async" />
            </button>
          ))}
        </div>
      )}
      {zoom && <Lightbox images={images} start={idx} titre={titre} onClose={() => setZoom(false)} />}
    </>
  );
}