function PageProducts({pushToast}){
  const I = window.Icons;
  const D = window.FLUXData;
  return (
    <>
      <div className="page-head">
        <h1 className="page-title">Productos</h1>
        <p className="page-sub">Catálogo maestro de productos. Edición por lote, importación CSV y enriquecimiento por IA.</p>
      </div>

      <div className="kpi-grid" style={{marginBottom:18}}>
        {[
          {l:'Total productos', v:'4,128', icon:'Tag'},
          {l:'Categorías', v:'24', icon:'Layers'},
          {l:'Marcas', v:'186', icon:'Star'},
          {l:'Sin imagen', v:'42', icon:'Alert', color:'amber'},
        ].map((k,i)=>{
          const Ic = I[k.icon];
          return (
            <div className="kpi" key={i}>
              <div className="kpi-label"><span>{k.l}</span><span className="kpi-icon" style={k.color==='amber'?{background:'var(--amber-soft)',color:'var(--amber-2)'}:{}}><Ic/></span></div>
              <div className="kpi-value">{k.v}</div>
            </div>
          );
        })}
      </div>

      <div style={{display:'flex',gap:10,marginBottom:14,alignItems:'center'}}>
        <div className="search-box" style={{width:340}}><I.Search size={14}/><span>Buscar producto, SKU, código de barras...</span></div>
        <button className="btn sm"><I.Filter size={12}/> Filtros</button>
        <div style={{marginLeft:'auto',display:'flex',gap:8}}>
          <button className="btn sm"><I.Sparkles size={12}/> Enriquecer con IA</button>
          <button className="btn sm primary"><I.Plus size={12}/> Nuevo producto</button>
        </div>
      </div>

      <div className="card flush">
        <table className="t">
          <thead><tr><th></th><th>SKU</th><th>Producto</th><th>Categoría</th><th>Precio</th><th>Stock total</th><th>Vendido (30d)</th><th>Proveedor</th><th></th></tr></thead>
          <tbody>
            {D.skus.map(s=>(
              <tr key={s.sku}>
                <td><div style={{width:38,height:38,borderRadius:8,background:'var(--surface-2)',border:'1px solid var(--line)',display:'grid',placeItems:'center',color:'var(--ink-4)'}}><I.Package size={16}/></div></td>
                <td className="mono" style={{fontWeight:600,color:'var(--ink)'}}>{s.sku}</td>
                <td style={{color:'var(--ink)',fontWeight:500}}>{s.name}</td>
                <td><span className="chip">{s.category}</span></td>
                <td className="num mono">${s.price.toLocaleString()}</td>
                <td className="num mono">{s.stock}</td>
                <td className="num mono">{s.sold30}</td>
                <td>{s.supplier}</td>
                <td><button className="btn sm ghost"><I.More size={14}/></button></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </>
  );
}
window.PageProducts = PageProducts;