// Tienda — shop catalog with sticker-pack cards
const { useState: uS_t, useMemo: uM_t, useRef: uR_t } = React;

function SugerenciaModal({ onClose }) {
  const [coleccion, setColeccion] = uS_t('');
  const [nombre, setNombre] = uS_t('');
  const [email, setEmail] = uS_t('');
  const [loading, setLoading] = uS_t(false);
  const [done, setDone] = uS_t(false);
  const [err, setErr] = uS_t('');

  const handle = async (e) => {
    e.preventDefault();
    setLoading(true); setErr('');
    try {
      const r = await fetch('/sugerencia', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ coleccion, nombre, email })
      });
      const d = await r.json();
      if (!r.ok) throw new Error(d.error || 'Error');
      setDone(true);
    } catch (ex) { setErr(ex.message); }
    finally { setLoading(false); }
  };

  const inp = { style: { width:'100%', padding:'10px 12px', border:'2px solid #1a1611', fontFamily:'Special Elite,monospace', fontSize:14, boxSizing:'border-box', background:'#fff', marginTop:4 } };
  const lbl = { style: { fontFamily:'Oswald,sans-serif', fontSize:13, textTransform:'uppercase', letterSpacing:1.5, fontWeight:700, display:'block', marginTop:14 } };

  return (
    <>
      <div onClick={onClose} style={{position:'fixed',inset:0,background:'rgba(0,0,0,.55)',zIndex:9000}}/>
      <div style={{position:'fixed',top:'50%',left:'50%',transform:'translate(-50%,-50%)',background:'#fdf8ef',border:'4px solid #1a1611',boxShadow:'8px 8px 0 #1a1611',padding:'36px 32px',zIndex:9001,width:'min(94vw,440px)'}}>
        <button onClick={onClose} style={{position:'absolute',top:12,right:16,background:'none',border:'none',fontSize:22,cursor:'pointer',fontWeight:'bold'}}>×</button>
        {done ? (
          <div style={{textAlign:'center',padding:'16px 0'}}>
            <div style={{fontSize:48,marginBottom:12}}>✅</div>
            <h2 style={{fontFamily:'Bungee,sans-serif',fontSize:22,color:'#2a7a3a',margin:'0 0 10px'}}>¡Recibido!</h2>
            <p style={{fontFamily:'Special Elite,monospace',fontSize:14,color:'#555',lineHeight:1.6}}>Spanki ya anotó tu pedido. Te contactamos en cuanto la tengamos.</p>
            <button onClick={onClose} style={{marginTop:20,padding:'10px 24px',background:'#1a1611',color:'#f7c90a',fontFamily:'Bungee,sans-serif',fontSize:15,border:'3px solid #1a1611',cursor:'pointer'}}>Cerrar</button>
          </div>
        ) : (
          <>
            <h2 style={{fontFamily:'Bungee,sans-serif',fontSize:22,color:'#c5281c',margin:'0 0 6px'}}>¿Qué colección buscas?</h2>
            <p style={{fontFamily:'Special Elite,monospace',fontSize:13,color:'#555',margin:'0 0 4px',lineHeight:1.5}}>Dinos qué andas buscando y te avisamos cuando lo tengamos.</p>
            <form onSubmit={handle}>
              <label {...lbl}>¿Qué colección buscas?</label>
              <input {...inp} type="text" value={coleccion} onChange={e=>setColeccion(e.target.value)} required placeholder="Ej: Tazos Pokémon Sabritas 1999"/>
              <label {...lbl}>Tu nombre</label>
              <input {...inp} type="text" value={nombre} onChange={e=>setNombre(e.target.value)} required placeholder="Tu nombre"/>
              <label {...lbl}>Tu correo</label>
              <input {...inp} type="email" value={email} onChange={e=>setEmail(e.target.value)} required placeholder="tu@correo.com"/>
              {err && <p style={{color:'#c5281c',fontFamily:'Special Elite,monospace',fontSize:13,marginTop:10}}>{err}</p>}
              <button type="submit" disabled={loading} style={{width:'100%',marginTop:20,padding:'12px',background:'#c5281c',color:'#fff',fontFamily:'Bungee,sans-serif',fontSize:16,border:'3px solid #1a1611',boxShadow:'4px 4px 0 #1a1611',cursor:loading?'wait':'pointer',opacity:loading?.7:1}}>
                {loading ? 'Enviando…' : 'Pedir →'}
              </button>
            </form>
          </>
        )}
      </div>
    </>
  );
}

function StickerPack({ product, onClick }) {
  const { add } = useCart();
  const preview = product.preview && product.preview.length ? product.preview : [product.img];
  const stickers = [0,1,2].map(i => preview[i % preview.length]);

  return (
    <div className="pack" onClick={onClick}>
      <div className="pack-stickers">
        {stickers.map((s,i) => (
          <div className="sticker" key={i}><img src={s} alt=""/></div>
        ))}
      </div>
      <div className="pack-inner">
        <div className="pack-front">
          <div className="pack-artwork">
            <img src={product.img} alt={product.nombre}/>
            <div className="pack-artwork-scrim"/>
          </div>
          <div className="pack-brand-strip">
            <span>BUFFET·GAMES</span>
            <span className="issue">№ {String(product.id).padStart(3,'0')}</span>
          </div>
          {product.sale && <div className="pack-ribbon">¡OFERTA!</div>}
          <div className="pack-price">
            <span className="dolar">$</span>{product.precio.toLocaleString('es-MX')}
            {product.antes && <span className="was">antes ${product.antes.toLocaleString('es-MX')}</span>}
          </div>
          <div className="pack-info">
            <h3>{product.nombre}</h3>
            <div className="sub">{product.sub} · {product.año}</div>
            {product.stock !== undefined && (
              <div style={{fontFamily:'Special Elite', fontSize:11, color: product.stock > 0 ? (product.stock === 1 ? '#c5281c' : '#2a7a3a') : '#c5281c', marginTop: 4, textTransform:'uppercase', fontWeight: product.stock === 1 ? 'bold' : 'normal'}}>
                {product.stock === 1 ? '¡ES EL ÚLTIMO!' : product.stock > 0 ? `Quedan ${product.stock} disponibles` : 'Agotado'}
              </div>
            )}
          </div>
        </div>
      </div>
      <button className="pack-add" onClick={(e)=>{e.stopPropagation(); add(product)}}>
        + Agregar al morral
      </button>
    </div>
  );
}

function Tienda() {
  const { setRoute } = useRoute();
  const [cat, setCat] = uS_t('todos');
  const [sort, setSort] = uS_t('destacados');
  const [q, setQ] = uS_t('');
  const [showSug, setShowSug] = uS_t(false);

  const counts = uM_t(() => {
    const available = window.PRODUCTS.filter(p => p.stock > 0);
    const m = { todos: available.length, otros: 0 };
    available.forEach(p => {
      m[p.marca] = (m[p.marca]||0)+1;
      if (!window.BRANDS.includes(p.marca)) m.otros = (m.otros||0)+1;
    });
    return m;
  }, []);

  const filtered = uM_t(() => {
    let list = window.PRODUCTS.filter(p => p.stock > 0);
    if (cat === 'otros') list = list.filter(p => !window.BRANDS.includes(p.marca));
    else if (cat !== 'todos') list = list.filter(p => p.marca === cat);
    if (q) {
      const qq = q.toLowerCase();
      list = list.filter(p => p.nombre.toLowerCase().includes(qq) || p.sub.toLowerCase().includes(qq));
    }
    const sorted = [...list];
    if (sort === 'precio-asc')  sorted.sort((a,b) => a.precio - b.precio);
    if (sort === 'precio-desc') sorted.sort((a,b) => b.precio - a.precio);
    if (sort === 'año-nuevo')   sorted.sort((a,b) => b.año - a.año);
    if (sort === 'año-viejo')   sorted.sort((a,b) => a.año - b.año);
    if (sort === 'oferta')      sorted.sort((a,b) => (b.sale?1:0) - (a.sale?1:0));
    return sorted;
  }, [cat, sort, q]);

  return (
    <>
      {showSug && <SugerenciaModal onClose={()=>setShowSug(false)}/>}
    <section data-screen-label="03 Tienda">
      <div className="section-head">
        <h2><span className="sub">Sección Tienda · Página 3</span>El Catálogo Completo</h2>
        <div className="meta">{filtered.length} coleccionables disponibles<br/>en la tiendita</div>
      </div>

      <div className="tienda-wrap">
        <aside className="tienda-sidebar">
          <h3>Categorías</h3>
          {window.CATEGORIES.map(c => (
            <button key={c.id} className={`cat-btn ${cat===c.id?'active':''}`} onClick={()=>setCat(c.id)}>
              <span>{c.nombre}</span><span className="n">{counts[c.id]||0}</span>
            </button>
          ))}

          <div className="sort">
            <div className="sort-label">Ordenar por</div>
            <select value={sort} onChange={e=>setSort(e.target.value)}>
              <option value="destacados">Destacados</option>
              <option value="precio-asc">Precio: menor a mayor</option>
              <option value="precio-desc">Precio: mayor a menor</option>
              <option value="año-nuevo">Año: más reciente</option>
              <option value="año-viejo">Año: más antiguo</option>
              <option value="oferta">En oferta primero</option>
            </select>
          </div>

          <div className="falta-promo">
            <h4>¿Buscas alguna colección?</h4>
            <p>Si no la encuentras aquí, dinos qué buscas. Te avisamos en cuanto la tengamos.</p>
            <button onClick={()=>setShowSug(true)} style={{display:'block',width:'100%',padding:'10px 0',background:'#c5281c',color:'#fff',fontFamily:'Bungee,sans-serif',fontSize:15,border:'3px solid #1a1611',boxShadow:'3px 3px 0 #1a1611',cursor:'pointer',letterSpacing:1}}>Pedir →</button>
          </div>
        </aside>

        <div className="tienda-main">
          <div className="tienda-toolbar">
            <div>Mostrando <b>{filtered.length}</b> de {window.PRODUCTS.length}</div>
            <div className="tienda-search">
              <span>🔍</span>
              <input placeholder="buscar coleccionable..." value={q} onChange={e=>setQ(e.target.value)}/>
            </div>
          </div>
          <div className="pack-grid">
            {filtered.map(p => (
              <StickerPack key={p.id} product={p}
                onClick={() => setRoute({page:'producto', slug:p.slug})}/>
            ))}
          </div>
        </div>
      </div>
    </section>
    </>
  );
}

Object.assign(window, { Tienda, StickerPack });