/* ============================================================
   lomi — pantalla DETALLE DE PRODUCTO
   ============================================================ */
function Product({ route, go, addToCart, favorites, onToggleFavorite }) {
  const { PRODUCTS, CATEGORIES } = window.LOMI_DATA;
  const product = PRODUCTS.find((p) => p.id === route.id) || PRODUCTS[0];
  const cat = CATEGORIES.find((c) => c.id === product.category) || CATEGORIES[0];
  const [qty, setQty] = useState(1);
  const [tab, setTab] = useState("desc");
  const [added, setAdded] = useState(false);
  const [activeThumb, setActiveThumb] = useState(0);
  const [reviews, setReviews] = useState([]);
  const [reviewsLoading, setReviewsLoading] = useState(true);

  useEffect(() => { window.scrollTo(0, 0); setActiveThumb(0); setTab("desc"); }, [route.id]);

  useEffect(() => {
    setReviewsLoading(true); setReviews([]);
    fetch(`/api/public/reviews/${product.id}`)
      .then(r => r.json()).then(d => setReviews(Array.isArray(d) ? d : []))
      .catch(() => setReviews([]))
      .finally(() => setReviewsLoading(false));
  }, [product.id]);

  const related = PRODUCTS.filter((p) => p.category === product.category && p.id !== product.id).slice(0, 4);
  useReveal(product.id);

  const unit = product.price;
  const petLabel = product.pet === "perro" ? "Perro" : product.pet === "gato" ? "Gato" : "Perro y Gato";
  const outOfStock = product.stock === 0;
  const lowStock   = product.stock > 0 && product.stock <= 10;

  const realImages = useMemo(() => {
    try { return JSON.parse(product.images || "[]"); } catch { return []; }
  }, [product.images]);

  // Thumbnails: solo imágenes reales; si hay menos de 4, rellena con placeholders
  const thumbs = realImages;
  const activeUrl = thumbs[activeThumb] || null;

  function doAdd() {
    addToCart(product, qty);
    setAdded(true); setTimeout(() => setAdded(false), 1400);
  }

  return (
    <main className="pdp">
      <div className="wrap">
        <div className="pdp-back-bar">
          <button className="btn-back" onClick={() => go({ name: "catalog", category: product.category })}>
            <Icon name="arrow" size={16} style={{ transform:'rotate(180deg)' }} /> Volver
          </button>
        </div>
        <div className="crumbs pdp-crumbs">
          <button onClick={() => go({ name: "home" })}>Inicio</button> /
          <button onClick={() => go({ name: "catalog", category: product.category })}> {cat.name}</button> /
          <span> {product.name}</span>
        </div>

        <div className="pdp-grid">
          {/* ===== visor ===== */}
          <div className="pdp-viewer">
            <div
              className="pdp-stage"
              style={{ background: `radial-gradient(130% 120% at 50% 18%, ${product.tint}55, var(--surface) 70%)` }}
            >
              {product.badge && <span className={"prod-badge " + (product.badge === "Oferta" ? "is-sale" : "")}>{product.badge}</span>}

              {activeThumb === 'video' && product.video_url ? (
                <div style={{ width:'100%', height:'100%', display:'flex', alignItems:'center', justifyContent:'center', background:'#000', borderRadius:'var(--r)' }}>
                  {product.video_url.includes('youtube') || product.video_url.includes('youtu.be') ? (
                    <iframe
                      src={product.video_url.replace('watch?v=','embed/').replace('youtu.be/','youtube.com/embed/') + '?autoplay=1&rel=0'}
                      style={{ width:'100%', height:'100%', border:'none', borderRadius:'var(--r)' }}
                      allow="autoplay; encrypted-media"
                      allowFullScreen
                    />
                  ) : (
                    <video src={product.video_url} controls autoPlay style={{ width:'100%', height:'100%', objectFit:'contain', borderRadius:'var(--r)' }} />
                  )}
                </div>
              ) : activeUrl ? (
                <img
                  src={activeUrl}
                  alt={product.name}
                  style={{ width: "100%", height: "100%", objectFit: "contain", padding: 28, display: "block" }}
                  loading="eager"
                />
              ) : (
                <div style={{ display: "flex", alignItems: "center", justifyContent: "center", width: "100%", height: "100%" }}>
                  <Icon name={cat.icon || "paw"} size={160} stroke={1.2} style={{ opacity: 0.15, color: product.tint }} />
                </div>
              )}
            </div>

            {/* Thumbnails */}
            <div className="pdp-thumbs">
              {thumbs.map((url, i) => (
                <button
                  key={i}
                  className={"pdp-thumb " + (i === activeThumb ? "on" : "")}
                  onClick={() => setActiveThumb(i)}
                  style={i === activeThumb ? { border: "2.5px solid var(--coral)" } : {}}
                >
                  <img src={url} alt={`Foto ${i + 1}`} style={{ width: "100%", height: "100%", objectFit: "cover", borderRadius: 8 }} loading="lazy" />
                </button>
              ))}
              {/* Thumbnail del video */}
              {product.video_url && (
                <button
                  className={"pdp-thumb " + (activeThumb === 'video' ? "on" : "")}
                  onClick={() => setActiveThumb('video')}
                  style={{ position:'relative', overflow:'hidden', ...(activeThumb === 'video' ? { border: "2.5px solid var(--coral)" } : {}) }}
                  title="Ver video"
                >
                  <div style={{ position:'absolute', inset:0, background:'rgba(0,0,0,0.45)', display:'flex', alignItems:'center', justifyContent:'center', zIndex:1 }}>
                    <span style={{ fontSize:20 }}>▶</span>
                  </div>
                  <div style={{ width:'100%', height:'100%', background:'var(--surface-2)', display:'flex', alignItems:'center', justifyContent:'center' }}>
                    <Icon name="bolt" size={22} style={{ opacity:0.4 }} />
                  </div>
                </button>
              )}
              {thumbs.length < 4 && !product.video_url && Array.from({ length: 4 - thumbs.length }).map((_, i) => (
                <button key={"ph" + i} className="pdp-thumb" style={{ opacity: 0.35, cursor: "default" }}>
                  <span className="pdp-thumb-ph"><Icon name={cat.icon} size={22} /></span>
                </button>
              ))}
            </div>
          </div>

          {/* ===== info ===== */}
          <div className="pdp-info">
            <div className="pdp-meta">
              <span className="pdp-brand">{product.brand}</span>
              <span className="dot">·</span>
              <span className="pdp-pet">{petLabel}</span>
            </div>
            <h1 className="pdp-title">{product.name}</h1>
            <div className="pdp-rate">
              <Stars value={product.rating} size={18} />
              <strong>{product.rating}</strong>
              <span>· {product.reviews} reseñas</span>
            </div>

            <div className="pdp-price">
              {!outOfStock && product.oldPrice && <span className="price-old">{window.formatCLP(product.oldPrice)}</span>}
              <span className="price-now-lg">{window.formatCLP(unit)}</span>
            </div>

            {lowStock && (
              <div className="stock-alert low">
                <Icon name="bolt" size={14}/> Solo quedan {product.stock} unidades
              </div>
            )}
            {outOfStock && (
              <div className="stock-alert oos">Sin stock disponible</div>
            )}


<div className="pdp-buy">
              <div className="qty">
                <button onClick={() => setQty((q) => Math.max(1, q - 1))}><Icon name="minus" size={18} /></button>
                <span>{qty}</span>
                <button onClick={() => setQty((q) => q + 1)}><Icon name="plus" size={18} /></button>
              </div>
              <button
                className={"btn btn-primary btn-lg pdp-add " + (added ? "is-added" : "")}
                onClick={doAdd}
                disabled={outOfStock || added}
              >
                <Icon name={added ? "check" : outOfStock ? "minus" : "cart"} size={20} />
                {outOfStock ? "Sin stock" : added ? "¡Agregado!" : `Agregar · ${window.formatCLP(unit * qty)}`}
              </button>
            </div>

            <div className="pdp-perks">
              <span><Icon name="truck" size={18} /> Despacho 24h gratis</span>
              <span><Icon name="shield" size={18} /> Devolución 30 días</span>
              <span><Icon name="chat" size={18} /> Asesoría vet gratis</span>
            </div>

            <div className="pdp-tabs">
              <div className="pdp-tabbar">
                {[["desc", "Descripción"], ["specs", "Detalles"], ["ship", "Despacho"]].map(([v, l]) => (
                  <button key={v} className={tab === v ? "on" : ""} onClick={() => setTab(v)}>{l}</button>
                ))}
              </div>
              <div className="pdp-tabbody">
                {tab === "desc" && (
                  <p>{product.description || `${product.name} de ${product.brand}, formulado para mantener a tu ${petLabel.toLowerCase()} feliz y saludable. Ingredientes seleccionados, sin colorantes artificiales y con el respaldo de nuestros veterinarios.`}</p>
                )}
                {tab === "specs" && (
                  <ul className="spec-list">
                    <li><span>Marca</span><strong>{product.brand}</strong></li>
                    <li><span>Categoría</span><strong>{cat.name}</strong></li>
                    <li><span>Indicado para</span><strong>{petLabel}</strong></li>
                    <li><span>Evaluación</span><strong>{product.rating} / 5</strong></li>
                    <li><span>SKU</span><strong>LOMI-{product.id.toUpperCase()}</strong></li>
                    {product.stock !== undefined && <li><span>Stock</span><strong>{product.stock} unidades</strong></li>}
                  </ul>
                )}
                {tab === "ship" && <p>Despacho exprés en 24 horas para la Región Metropolitana y 48–72h a regiones. Envío gratis en compras sobre $30.000. Seguimiento en tiempo real y retiro disponible en nuestras tiendas. ¿Algo no quedó perfecto? Tienes 30 días para cambiarlo.</p>}
              </div>
            </div>
          </div>
        </div>

        {/* Reseñas */}
        {(reviewsLoading || reviews.length > 0) && (
          <section className="section">
            <div className="section-head">
              <div>
                <span className="eyebrow">Opiniones de clientes</span>
                <h2 className="section-title">Reseñas del producto</h2>
              </div>
            </div>
            {reviewsLoading && <div style={{ color:'var(--muted)', padding:'12px 0', fontSize:14 }}>Cargando reseñas…</div>}
            {!reviewsLoading && reviews.length > 0 && (
              <div style={{ display:'flex', flexDirection:'column', gap:16, marginTop:8 }}>
                {reviews.map(r => (
                  <div key={r.id} style={{ background:'var(--surface)', border:'1.5px solid var(--line)', borderRadius:'var(--r-sm)', padding:'18px 20px' }}>
                    <div style={{ display:'flex', alignItems:'center', gap:10, marginBottom:8 }}>
                      <div style={{ width:38, height:38, borderRadius:'50%', background:'var(--coral-soft)', display:'flex', alignItems:'center', justifyContent:'center', fontWeight:700, fontSize:16, color:'var(--coral)', flexShrink:0 }}>
                        {r.author_name[0].toUpperCase()}
                      </div>
                      <div>
                        <div style={{ fontWeight:700, fontSize:14 }}>{r.author_name}</div>
                        <div style={{ display:'flex', gap:1, marginTop:1 }}>
                          {[1,2,3,4,5].map(n => (
                            <span key={n} style={{ fontSize:13, color: n <= r.rating ? '#f59e0b' : '#d1d5db' }}>★</span>
                          ))}
                        </div>
                      </div>
                      <div style={{ marginLeft:'auto', fontSize:12, color:'var(--muted)' }}>
                        {new Date(r.created_at).toLocaleDateString('es-CL', { day:'numeric', month:'long', year:'numeric' })}
                      </div>
                    </div>
                    {r.title && <div style={{ fontWeight:700, fontSize:14, marginBottom:4 }}>{r.title}</div>}
                    <p style={{ fontSize:14, color:'var(--text)', margin:0, lineHeight:1.6 }}>"{r.body}"</p>
                  </div>
                ))}
              </div>
            )}
          </section>
        )}

        {/* relacionados */}
        <section className="section">
          <div className="section-head"><div><span className="eyebrow">Combina con</span><h2 className="section-title">También les encanta</h2></div></div>
          <div className="prod-grid">
            {related.map((p, i) => <ProductCard key={p.id} product={p} idx={i} onOpen={(pr) => go({ name: "product", id: pr.id })} onAdd={addToCart} favorites={favorites} onToggleFavorite={onToggleFavorite} />)}
          </div>
        </section>
      </div>
    </main>
  );
}
window.Product = Product;