/* Rotunda — Product Detail View */

function ProductDetail({ product, onBack, onAddToCart }) {
  const [mainImg, setMainImg] = React.useState(0);
  const [qty, setQty] = React.useState(1);

  if (!product) return null;
  const tile = window.tonalFromColor(product.color);
  const light = isLightTile(tile);
  const thumbs = [
    { label: `${product.name} · Vista principal`, id: `pd-${product.id}` },
    { label: "Ángulo 2", id: `pd-${product.id}-2` },
    { label: "Detalle textura", id: `pd-${product.id}-3` },
    { label: "Escala en contexto", id: `pd-${product.id}-4` },
    { label: "Sello Rotunda", id: `pd-${product.id}-5` },
  ];
  /* Renders del catálogo AI: [0] estudio, [1] entorno. Un drop manual en el slot los reemplaza. */
  const imgs = (window.PRODUCT_IMAGES || {})[product.cat + ":" + product.id] || [];
  const slotSrc = [imgs[0], imgs[1]];
  const breadCat = product.cat === "macetas" ? "Macetas" : "Floreros";
  const whatsMsg = encodeURIComponent(`Hola, me interesa la pieza ${product.name} en acabado ${product.color}. ¿Está disponible?`);
  const dims = product.dims || "";

  const handleAdd = () => { onAddToCart(product.id, qty); setQty(1); };

  return (
    <div className="pd-view">
      <div className="pd-breadcrumb">
        <a href="#" onClick={(e) => { e.preventDefault(); onBack("catalog"); }}>Catálogo</a>
        <span>/</span>
        <a href="#" onClick={(e) => { e.preventDefault(); onBack("catalog", product.cat); }}>{breadCat}</a>
        <span>/</span>
        <span className="current">{product.name}</span>
      </div>

      <div className="pd-layout">
        {/* Gallery */}
        <div className="pd-gallery">
          <div className="pd-main-img">
            <ImagePlate id={thumbs[mainImg].id} src={slotSrc[mainImg]} tile={tile} light={light} name={mainImg === 0 ? product.name : undefined} subName={mainImg === 0 ? product.color : undefined} placeholder={thumbs[mainImg].label} corner={product.cat === "macetas" ? "Maceta" : "Florero"}></ImagePlate>
          </div>
          <div className="pd-thumbs">
            {thumbs.map((t, i) => (
              <button key={i} className={`pd-thumb ${i === mainImg ? "active" : ""}`} onClick={() => setMainImg(i)}>
                <ImagePlate id={t.id + "-th"} src={slotSrc[i]} tile={tile} light={light} placeholder={t.label}></ImagePlate>
              </button>
            ))}
          </div>
        </div>

        {/* Info */}
        <div className="pd-info">
          <span className="pd-cat-tag">{product.cat === "macetas" ? "Maceta" : "Florero"} · Catálogo 2026</span>
          <h2 className="pd-name">{product.name}</h2>
          <p className="pd-finish">{product.color}</p>
          <p className="pd-price">{formatPrice(product.price)} MXN</p>

          <hr className="pd-sep"></hr>

          <div className="pd-specs">
            <div className="pd-spec"><span className="pd-spec-label">Altura</span><span className="pd-spec-value">{product.h} cm</span></div>
            {(() => {
              if (!dims) return null;
              const parts = dims.split("·").map(s => s.trim().replace(/^Ø\s*/, ""));
              const labels = ["Diámetro boca", "Diámetro máximo", "Diámetro fondo"];
              return parts.map((val, i) => {
                if (!val || val === "—" || !labels[i]) return null;
                return <div className="pd-spec" key={i}><span className="pd-spec-label">{labels[i]}</span><span className="pd-spec-value">{val} cm</span></div>;
              });
            })()}
            <div className="pd-spec"><span className="pd-spec-label">Acabado</span><span className="pd-spec-value">{product.color}</span></div>
            <div className="pd-spec"><span className="pd-spec-label">Peso aprox.</span><span className="pd-spec-value">{Math.max(1, Math.round(product.h * 0.09))} kg</span></div>
          </div>

          <hr className="pd-sep"></hr>

          <p className="pd-desc">
            {product.cat === "macetas"
              ? `Maceta de formato ${product.h > 100 ? "grande" : product.h > 60 ? "medio" : "compacto"} con perfil artesanal. El acabado ${product.color} se logra con óxidos minerales aplicados antes de la segunda cocción. Cada pieza presenta variaciones únicas de tono.`
              : `Florero artesanal de ${product.h} cm de altura con acabado ${product.color}. Diseñado para sostener una flor, una rama o simplemente existir como objeto. Variaciones naturales en cada pieza.`
            }
          </p>

          <div className="pd-qty-row">
            <button className="pd-qty-btn" onClick={() => setQty(Math.max(1, qty - 1))}>−</button>
            <span className="pd-qty-num">{qty}</span>
            <button className="pd-qty-btn" onClick={() => setQty(qty + 1)}>+</button>
          </div>

          <button className="btn btn--solid pd-add" onClick={handleAdd}>
            Agregar al carrito <span className="btn-arrow">→</span>
          </button>
          <a className="btn btn--outline pd-wa" href={`https://wa.me/528123456789?text=${whatsMsg}`} target="_blank" rel="noopener">
            Consultar por WhatsApp <span className="btn-arrow">→</span>
          </a>

          <hr className="pd-sep"></hr>

          <div className="pd-shipping">
            <p><strong>Envío:</strong> Envío a todo México. 5-10 días hábiles. Empaque reforzado con protección artesanal.</p>
            <p><strong>Devoluciones:</strong> Si tu pieza llega dañada, la reemplazamos sin costo.</p>
          </div>
        </div>
      </div>
    </div>
  );
}

window.ProductDetail = ProductDetail;