function PageInventory({pushToast}){
  const I = window.Icons;
  const D = window.FLUXData;
  const [tab, setTab] = React.useState('all');
  const [selected, setSelected] = React.useState(null);

  const filtered = D.skus.filter(s=>{
    if(tab==='low') return s.stock < s.threshold;
    if(tab==='out') return s.stock===0;
    if(tab==='risk') return s.risk>0.6;
    return true;
  });

  return (
    <>
      <div className="page-head">
        <h1 className="page-title">Inventario</h1>
        <p className="page-sub">6,842 SKUs activos en 8 tiendas. Reabastecimiento sugerido por IA, transferencias inter-tienda y alertas de quiebre.</p>
      </div>

      <div className="kpi-grid" style={{marginBottom:18}}>
        {[
          {l:'Total SKUs', v:'6,842', d:'+124 este mes', icon:'Box'},
          {l:'Valor inventario', v:'$48.2M', d:'+5.4% vs. anterior', icon:'Database'},
          {l:'Stock crítico', v:'42', d:'requieren acción', icon:'Alert', color:'red'},
          {l:'Rotación promedio', v:'21 días', d:'-2 días vs. anterior', icon:'Refresh'},
        ].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==='red'?{background:'var(--red-soft)',color:'var(--red)'}:{}}><Ic/></span></div>
              <div className="kpi-value">{k.v}</div>
              <div className="kpi-foot"><span>{k.d}</span></div>
            </div>
          );
        })}
      </div>

      <div className="ai-strip">
        <div className="ai-spark"><I.Brain/></div>
        <div className="ai-text">
          <span className="ai-tag">Recomendación IA</span>
          Mover <b>25 unidades</b> de SKU-8872 desde GDL → MTY equilibraría inventario y evitaría quiebre con 88% de probabilidad.
        </div>
        <button className="btn primary sm" onClick={()=>pushToast('Transferencia programada')}>Ejecutar</button>
        <button className="btn sm">Ignorar</button>
      </div>

      <div className="tabs">
        <div className={`tab ${tab==='all'?'active':''}`} onClick={()=>setTab('all')}>Todos <span className="count">{D.skus.length}</span></div>
        <div className={`tab ${tab==='low'?'active':''}`} onClick={()=>setTab('low')}>Stock bajo <span className="count">{D.skus.filter(s=>s.stock<s.threshold).length}</span></div>
        <div className={`tab ${tab==='out'?'active':''}`} onClick={()=>setTab('out')}>Sin stock <span className="count">{D.skus.filter(s=>s.stock===0).length}</span></div>
        <div className={`tab ${tab==='risk'?'active':''}`} onClick={()=>setTab('risk')}>Riesgo de quiebre <span className="count">{D.skus.filter(s=>s.risk>0.6).length}</span></div>
        <div style={{marginLeft:'auto',display:'flex',gap:8,alignItems:'center',marginBottom:6}}>
          <button className="btn sm"><I.Filter size={12}/> Filtrar</button>
          <button className="btn sm"><I.Upload size={12}/> Importar CSV</button>
          <button className="btn primary sm"><I.Plus size={12}/> Nuevo SKU</button>
        </div>
      </div>

      <div className="card flush">
        <table className="t">
          <thead>
            <tr>
              <th>SKU</th><th>Producto</th><th>Categoría</th><th>Tienda</th><th>Stock</th><th>Mín.</th><th>Vendido (30d)</th><th>Tendencia</th><th>Riesgo IA</th><th>Acciones</th>
            </tr>
          </thead>
          <tbody>
            {filtered.map(s=>{
              const sparkData = Array.from({length:8},(_,i)=>Math.max(0,s.sold30/8 + Math.sin(i)*15 + (Math.random()*10-5)));
              return (
                <tr key={s.sku} onClick={()=>setSelected(s)} style={{cursor:'pointer'}}>
                  <td className="mono" style={{color:'var(--ink)',fontWeight:600}}>{s.sku}</td>
                  <td style={{color:'var(--ink)',fontWeight:500}}>{s.name}</td>
                  <td><span className="chip">{s.category}</span></td>
                  <td>{s.store}</td>
                  <td className="num mono" style={{fontWeight:700,color: s.stock===0?'var(--red)':s.stock<s.threshold?'var(--amber-2)':'var(--ink)'}}>{s.stock}</td>
                  <td className="num mono" style={{color:'var(--ink-3)'}}>{s.threshold}</td>
                  <td className="num mono">{s.sold30}</td>
                  <td><Sparkline data={sparkData} w={70} h={22} color="#F5A524"/></td>
                  <td>
                    <div style={{display:'flex',alignItems:'center',gap:6}}>
                      <div className="bar" style={{width:48}}><span style={{width:(s.risk*100)+'%',background:s.risk>0.7?'var(--red)':s.risk>0.4?'var(--amber)':'var(--green)'}}/></div>
                      <span className="mono" style={{fontSize:11.5,color:'var(--ink-2)',fontWeight:600}}>{Math.round(s.risk*100)}%</span>
                    </div>
                  </td>
                  <td>
                    <button className="btn sm" onClick={(e)=>{e.stopPropagation();pushToast(`Reabasto solicitado para ${s.sku}`)}}>Reabastecer</button>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>

      {selected && (
        <div className="overlay" onClick={()=>setSelected(null)}>
          <div className="modal" onClick={e=>e.stopPropagation()}>
            <div style={{padding:'18px 22px',borderBottom:'1px solid var(--line)',display:'flex',alignItems:'center',gap:12}}>
              <div>
                <div className="mono" style={{fontSize:11,color:'var(--ink-3)',fontWeight:600,letterSpacing:'0.04em'}}>{selected.sku}</div>
                <div style={{fontSize:18,fontWeight:700,color:'var(--ink)',marginTop:2}}>{selected.name}</div>
              </div>
              <div style={{marginLeft:'auto',display:'flex',gap:8}}>
                <button className="btn sm"><I.Edit size={12}/> Editar</button>
                <button className="icon-btn" onClick={()=>setSelected(null)}><I.X size={14}/></button>
              </div>
            </div>
            <div style={{padding:22,overflow:'auto'}}>
              <div style={{display:'grid',gridTemplateColumns:'1fr 1fr 1fr',gap:14,marginBottom:18}}>
                <div className="card" style={{padding:14}}><div style={{fontSize:11,color:'var(--ink-3)',fontWeight:600,textTransform:'uppercase',letterSpacing:'0.04em'}}>Stock</div><div style={{fontSize:24,fontWeight:800,color:selected.stock===0?'var(--red)':'var(--ink)'}}>{selected.stock}</div></div>
                <div className="card" style={{padding:14}}><div style={{fontSize:11,color:'var(--ink-3)',fontWeight:600,textTransform:'uppercase',letterSpacing:'0.04em'}}>Precio</div><div style={{fontSize:24,fontWeight:800}}>${selected.price.toLocaleString()}</div></div>
                <div className="card" style={{padding:14}}><div style={{fontSize:11,color:'var(--ink-3)',fontWeight:600,textTransform:'uppercase',letterSpacing:'0.04em'}}>Riesgo</div><div style={{fontSize:24,fontWeight:800,color:'var(--amber-2)'}}>{Math.round(selected.risk*100)}%</div></div>
              </div>
              <div className="ai-strip" style={{margin:0}}>
                <div className="ai-spark"><I.Sparkles/></div>
                <div className="ai-text"><span className="ai-tag">Sugerencia</span>Solicitar <b>{Math.max(50, Math.round(selected.forecast30 - selected.stock))} u.</b> a {selected.supplier} para cubrir demanda proyectada de 30 días.</div>
                <button className="btn primary sm" onClick={()=>{pushToast('Orden de compra creada');setSelected(null)}}>Crear OC</button>
              </div>
            </div>
          </div>
        </div>
      )}
    </>
  );
}
window.PageInventory = PageInventory;