// Producto detail — image gallery
const { useState: uS_p, useMemo: uM_p } = React;

function Producto({ slug }) {
  const { add } = useCart();
  const { setRoute } = useRoute();
  const [active, setActive] = uS_p(0);
  const [zoom, setZoom] = uS_p(false);
  const [qty, setQty] = uS_p(1);

  const product = uM_p(() => window.PRODUCTS.find(p => p.slug === slug), [slug]);
  if (!product) return (
    <div className="producto-wrap">
      <h2 style={{fontFamily:'Alfa Slab One', fontSize: 48}}>Coleccionable no encontrado</h2>
      <p style={{marginTop:12}}>Parece que se nos acabó.</p>
      <button className="btn-primary" style={{marginTop:20}} onClick={()=>setRoute({page:'tienda'})}>Volver a la tienda</button>
    </div>
  );

  const saving = product.antes ? product.antes - product.precio : 0;
  const imgs = product.preview && product.preview.length ? product.preview : [product.img];

  return (
    <section data-screen-label="04 Producto">
      {/* Zoom overlay */}
      {zoom && (
        <div
          onClick={() => setZoom(false)}
          style={{position:'fixed',inset:0,background:'rgba(0,0,0,.88)',zIndex:8000,display:'flex',alignItems:'center',justifyContent:'center',cursor:'zoom-out'}}
        >
          <img src={imgs[active]} alt={product.nombre} style={{maxWidth:'92vw',maxHeight:'92vh',objectFit:'contain',border:'4px solid #f7c90a',boxShadow:'0 0 60px rgba(0,0,0,.8)'}}/>
          <button onClick={()=>setZoom(false)} style={{position:'absolute',top:20,right:24,background:'none',border:'none',color:'#fff',fontSize:36,cursor:'pointer',lineHeight:1}}>×</button>
          {imgs.length > 1 && <>
            <button onClick={e=>{e.stopPropagation();setActive(a=>(a-1+imgs.length)%imgs.length);}} style={{position:'absolute',left:16,top:'50%',transform:'translateY(-50%)',background:'rgba(255,255,255,.15)',border:'2px solid #fff',color:'#fff',fontSize:28,cursor:'pointer',padding:'8px 14px',borderRadius:4}}>‹</button>
            <button onClick={e=>{e.stopPropagation();setActive(a=>(a+1)%imgs.length);}} style={{position:'absolute',right:16,top:'50%',transform:'translateY(-50%)',background:'rgba(255,255,255,.15)',border:'2px solid #fff',color:'#fff',fontSize:28,cursor:'pointer',padding:'8px 14px',borderRadius:4}}>›</button>
          </>}
        </div>
      )}

      <div className="producto-wrap">
        <div className="producto-breadcrumb">
          <a onClick={()=>setRoute({page:'home'})}>Inicio</a>  /  <a onClick={()=>setRoute({page:'tienda'})}>Tienda</a>  /  {product.categoria}
        </div>

        <div className="producto-grid">
          {/* ===== GALLERY ===== */}
          <div style={{display:'flex',flexDirection:'column',gap:12}}>
            {/* Main image */}
            <div
              onClick={() => setZoom(true)}
              style={{position:'relative',cursor:'zoom-in',border:'3px solid var(--ink)',overflow:'hidden',background:'#111',aspectRatio:'1/1'}}
            >
              <img
                src={imgs[active]}
                alt={product.nombre}
                style={{width:'100%',height:'100%',objectFit:'cover',display:'block',transition:'transform .3s'}}
              />
              <div style={{position:'absolute',bottom:10,right:12,background:'rgba(0,0,0,.6)',color:'#fff',fontFamily:'Special Elite,monospace',fontSize:11,padding:'3px 8px',letterSpacing:1}}>
                🔍 clic para ampliar
              </div>
              {imgs.length > 1 && (
                <div style={{position:'absolute',bottom:10,left:12,background:'rgba(26,22,17,.75)',color:'#f7c90a',fontFamily:'Special Elite,monospace',fontSize:11,padding:'3px 8px',letterSpacing:1}}>
                  {active+1} / {imgs.length}
                </div>
              )}
            </div>

            {/* Thumbnails */}
            {imgs.length > 1 && (
              <div style={{display:'flex',gap:8,flexWrap:'wrap'}}>
                {imgs.map((src, i) => (
                  <div
                    key={i}
                    onClick={() => setActive(i)}
                    style={{width:80,height:80,flexShrink:0,border: i===active ? '3px solid var(--red)' : '3px solid var(--ink)',overflow:'hidden',cursor:'pointer',opacity: i===active ? 1 : 0.65,transition:'opacity .2s, border-color .2s',background:'#111'}}
                  >
                    <img src={src} alt={`Vista ${i+1}`} style={{width:'100%',height:'100%',objectFit:'cover',display:'block'}}/>
                  </div>
                ))}
              </div>
            )}
          </div>

          {/* ===== INFO ===== */}
          <div className="producto-info">
            <div className="editor">{product.marca} · {product.año}</div>
            <h1>{product.nombre}</h1>
            <div style={{fontFamily:'Oswald', fontSize: 18, textTransform:'uppercase', letterSpacing: 2, color: 'var(--ink-soft)', marginBottom: 10}}>{product.sub}</div>

            <div className="producto-price-row">
              <div className="producto-price">${product.precio.toLocaleString('es-MX')}</div>
              {product.antes && <>
                <div className="producto-price-was">antes ${product.antes.toLocaleString('es-MX')}</div>
                <div className="producto-saving">¡AHORRAS ${saving}!</div>
              </>}
            </div>

            <p className="producto-desc">{product.desc}</p>

            <div className="producto-facts">
              <div className="fact"><b>Marca</b><span>{product.marca}</span></div>
              <div className="fact"><b>Año</b><span>{product.año}</span></div>
              <div className="fact"><b>Piezas</b><span>{product.piezas}</span></div>
              <div className="fact"><b>Categoría</b><span>{product.categoria}</span></div>
              <div className="fact"><b>Código</b><span>#{String(product.id).padStart(4,'0')}</span></div>
            </div>

            {product.stock !== undefined && (
              <div style={{fontFamily:'Special Elite', fontSize:13, color: product.stock > 0 ? (product.stock === 1 ? '#c5281c' : '#2a7a3a') : '#c5281c', marginTop: 24, marginBottom: 16, textTransform:'uppercase', fontWeight: product.stock === 1 ? 'bold' : 'normal', borderLeft: '3px solid ' + (product.stock > 0 ? (product.stock === 1 ? '#c5281c' : '#2a7a3a') : '#c5281c'), paddingLeft: 10}}>
                {product.stock === 1 ? '⚠️ ¡ATENCIÓN: ES EL ÚLTIMO DISPONIBLE!' : product.stock > 0 ? `📦 Inventario: ${product.stock} disponibles` : '❌ AGOTADO'}
              </div>
            )}

            <div className="producto-actions">
              <div className="qty-picker">
                <button onClick={()=>setQty(q=>Math.max(1,q-1))} disabled={!product.stock}>−</button>
                <input readOnly value={!product.stock ? 0 : qty}/>
                <button onClick={()=>setQty(q=>Math.min(product.stock !== undefined ? product.stock : 99, q+1))} disabled={!product.stock}>+</button>
              </div>
              <button className="btn-primary" onClick={()=>add(product, qty)} disabled={!product.stock}>
                {product.stock ? 'Agregar al morralito' : 'Agotado'}
              </button>
            </div>

            <div className="producto-note">
              <b>Envío por Correos de México.</b> $100 a toda la República Mexicana.
              Compra 100% segura. Pagos por transferencia, OXXO o tarjeta.
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Producto });