function PageSuppliers({pushToast}){
  const I = window.Icons;
  const D = window.FLUXData;
  return (
    <>
      <div className="page-head">
        <h1 className="page-title">Proveedores</h1>
        <p className="page-sub">{D.suppliers.length} proveedores activos. On-time delivery, lead time y rating con seguimiento automático.</p>
      </div>

      <div className="kpi-grid" style={{marginBottom:18}}>
        {[
          {l:'Proveedores activos', v:D.suppliers.filter(s=>s.status==='active').length, icon:'Truck'},
          {l:'OTD promedio', v:Math.round(D.suppliers.reduce((a,s)=>a+s.otd,0)/D.suppliers.length)+'%', icon:'CheckCircle'},
          {l:'Lead time promedio', v:Math.round(D.suppliers.reduce((a,s)=>a+s.leadTime,0)/D.suppliers.length)+'d', icon:'Clock'},
          {l:'En revisión', v:D.suppliers.filter(s=>s.status==='review').length, 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 className="card flush">
        <div className="card-head"><div className="card-title">Directorio de proveedores</div><button className="btn sm primary"><I.Plus size={12}/> Nuevo proveedor</button></div>
        <table className="t">
          <thead><tr><th>Proveedor</th><th>Contacto</th><th>SKUs</th><th>OTD</th><th>Lead time</th><th>Rating</th><th>Estado</th><th></th></tr></thead>
          <tbody>
            {D.suppliers.map(s=>(
              <tr key={s.id}>
                <td>
                  <div style={{display:'flex',alignItems:'center',gap:10}}>
                    <div style={{width:34,height:34,borderRadius:8,background:'var(--amber-bg)',color:'var(--amber-2)',display:'grid',placeItems:'center',fontWeight:700,fontSize:12,fontFamily:'JetBrains Mono'}}>{s.id}</div>
                    <div><div style={{fontWeight:600,color:'var(--ink)'}}>{s.name}</div></div>
                  </div>
                </td>
                <td><div style={{fontSize:13}}>{s.contact}</div><div style={{fontSize:11.5,color:'var(--ink-3)'}}>{s.email}</div></td>
                <td className="num mono">{s.skus}</td>
                <td>
                  <div style={{display:'flex',alignItems:'center',gap:6}}>
                    <div className="bar" style={{width:60}}><span style={{width:s.otd+'%',background:s.otd>=90?'var(--green)':s.otd>=80?'var(--amber)':'var(--red)'}}/></div>
                    <span className="mono" style={{fontSize:11.5,fontWeight:600}}>{s.otd}%</span>
                  </div>
                </td>
                <td className="num mono">{s.leadTime}d</td>
                <td><span style={{display:'inline-flex',alignItems:'center',gap:4}}><I.Star size={12} fill="#F5A524" stroke="#F5A524"/> <span className="mono" style={{fontWeight:600}}>{s.rating}</span></span></td>
                <td>{s.status==='active'?<span className="chip green"><span className="dot"/>Activo</span>:<span className="chip amber"><span className="dot"/>Revisión</span>}</td>
                <td><button className="btn sm ghost"><I.More size={14}/></button></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </>
  );
}
window.PageSuppliers = PageSuppliers;