/* ============================================================
   3DAX — Product detail overlay (galería + zoom + compra)
   ============================================================ */
function ProductDetail({ product, onClose, onAdd }){
  const [imgIdx, setImgIdx] = useState(0);
  const [way, setWay] = useState(0);
  const [qty, setQty] = useState(1);
  const [zoom, setZoom] = useState({ on:false, x:50, y:50 });
  const [added, setAdded] = useState(false);
  const p = product;
  const hasImg = p.images && p.images.length > 0;

  useEffect(() => {
    setImgIdx(0); setWay(0); setQty(1); setAdded(false);
    const onKey = (e) => { if(e.key === "Escape") onClose(); };
    window.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    return () => { window.removeEventListener("keydown", onKey); document.body.style.overflow = ""; };
  }, [p]);

  const onMove = (e) => {
    const r = e.currentTarget.getBoundingClientRect();
    setZoom({ on:true, x:((e.clientX-r.left)/r.width)*100, y:((e.clientY-r.top)/r.height)*100 });
  };

  const add = () => {
    onAdd(p, { way: p.colorways[way], qty });
    setAdded(true);
    setTimeout(() => setAdded(false), 1600);
  };

  return (
    <div className="pd" role="dialog" aria-modal="true">
      <div className="pd__scrim" onClick={onClose} />
      <div className="pd__panel">
        <button className="pd__close" onClick={onClose} aria-label="Cerrar">
          <svg width="22" height="22" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="1.6"><path d="M6 6l12 12M18 6L6 18"/></svg>
        </button>

        <div className="pd__grid">
          {/* gallery */}
          <div className="pd__gallery">
            <div className="pd__viewer"
                 onMouseMove={hasImg ? onMove : undefined}
                 onMouseLeave={() => setZoom(z => ({ ...z, on:false }))}>
              <div className="pd__halo" />
              {hasImg ? (
                <img className="pd__img prod-shadow" src={p.images[imgIdx]} alt={p.name}
                     style={{
                       transform: zoom.on ? "scale(1.9)" : "scale(1)",
                       transformOrigin: `${zoom.x}% ${zoom.y}%`,
                     }} />
              ) : (
                <div style={{ width:"78%" }}>
                  <ProductPlaceholder label="render en camino" from={p.colorways[0].from} to={p.colorways[0].to} ratio={0.82} />
                </div>
              )}
              {hasImg && <span className="pd__zoomhint">Pasa el ratón para ampliar</span>}
            </div>
            {hasImg && (
              <div className="pd__thumbs">
                {p.images.map((src, i) => (
                  <button key={i} className={"pd__thumb" + (i===imgIdx ? " on" : "")}
                          onClick={() => setImgIdx(i)}>
                    <img src={src} alt="" />
                  </button>
                ))}
              </div>
            )}
          </div>

          {/* info */}
          <div className="pd__info">
            <div className="pd__char">{p.char}</div>
            <h2 className="display pd__name">{p.name}</h2>
            <div className="pd__meta">
              <Stars value={p.rating} size={15} />
              <span>{p.rating} · {p.reviews} reseñas</span>
              <span className="pd__dot">•</span>
              <span className="pd__stock">{p.placeholder ? "Aviso de lanzamiento" : "En stock · envío 48–72h"}</span>
            </div>
            <div className="pd__price">{eur(p.price)}</div>
            <p className="pd__blurb">{p.blurb}</p>

            {/* colorways */}
            <div className="pd__block">
              <div className="pd__label">Acabado — <span>{p.colorways[way].name}</span></div>
              <div className="pd__ways">
                {p.colorways.map((c, i) => (
                  <button key={i} className={"pd__way" + (i===way ? " on" : "")} onClick={() => setWay(i)}
                          title={c.name}>
                    <span style={{ background:`linear-gradient(135deg, ${c.from}, ${c.to})` }} />
                  </button>
                ))}
              </div>
            </div>

            {/* qty + add */}
            <div className="pd__buy">
              <div className="qty">
                <button onClick={() => setQty(q => Math.max(1, q-1))} aria-label="Menos">−</button>
                <span>{qty}</span>
                <button onClick={() => setQty(q => Math.min(9, q+1))} aria-label="Más">+</button>
              </div>
              <button className={"btn btn-primary btn-lg pd__add" + (added ? " is-added" : "")} onClick={add}>
                {added ? "✓ Añadido" : p.placeholder ? "Avísame + añadir" : "Añadir al carrito"}
                {!added && <span className="pd__add-price">{eur(p.price * qty)}</span>}
              </button>
            </div>

            {/* specs */}
            <div className="pd__specs">
              {p.specs.map(([k,v], i) => (
                <div className="pd__spec" key={i}>
                  <span className="pd__spec-k">{k}</span>
                  <span className="pd__spec-v">{v}</span>
                </div>
              ))}
            </div>

            <div className="pd__assur">
              <span>✦ Hecho a mano en 3D</span>
              <span>✦ Embalaje protector</span>
              <span>✦ Devolución 14 días</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
window.ProductDetail = ProductDetail;