function PageUsers({pushToast}){
  const I = window.Icons;
  const D = window.FLUXData;
  return (
    <>
      <div className="page-head">
        <h1 className="page-title">Usuarios</h1>
        <p className="page-sub">Gestión de usuarios, roles y permisos. Auditoría de actividad por usuario.</p>
      </div>

      <div className="kpi-grid" style={{marginBottom:18}}>
        {[
          {l:'Usuarios activos', v:D.users.filter(u=>u.status==='active').length, icon:'Users'},
          {l:'Admins', v:D.users.filter(u=>u.role==='Admin').length, icon:'Lock'},
          {l:'Pendientes', v:D.users.filter(u=>u.status==='invited').length, icon:'Mail'},
          {l:'Sesiones (24h)', v:'47', icon:'Activity'},
        ].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"><Ic/></span></div>
              <div className="kpi-value">{k.v}</div>
            </div>
          );
        })}
      </div>

      <div className="card flush">
        <div className="card-head">
          <div className="card-title">Equipo</div>
          <div style={{display:'flex',gap:8}}>
            <button className="btn sm"><I.Download size={12}/> Exportar</button>
            <button className="btn sm primary" onClick={()=>pushToast('Invitación enviada')}><I.Plus size={12}/> Invitar usuario</button>
          </div>
        </div>
        <table className="t">
          <thead><tr><th>Usuario</th><th>Rol</th><th>Equipo</th><th>Email</th><th>Última actividad</th><th>Estado</th><th></th></tr></thead>
          <tbody>
            {D.users.map((u,i)=>(
              <tr key={i}>
                <td>
                  <div style={{display:'flex',alignItems:'center',gap:10}}>
                    <div className="avatar" style={{width:32,height:32,fontSize:12}}>{u.avatar}</div>
                    <div style={{fontWeight:600,color:'var(--ink)'}}>{u.name}</div>
                  </div>
                </td>
                <td><span className={`chip ${u.role==='Admin'?'purple':u.role==='Manager'?'blue':''}`}>{u.role}</span></td>
                <td>{u.team}</td>
                <td className="mono" style={{fontSize:12}}>{u.email}</td>
                <td style={{fontSize:12.5,color:'var(--ink-3)'}}>{u.last}</td>
                <td>{u.status==='active'?<span className="chip green"><span className="dot"/>Activo</span>:<span className="chip amber"><span className="dot"/>Invitado</span>}</td>
                <td><button className="btn sm ghost"><I.More size={14}/></button></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </>
  );
}
window.PageUsers = PageUsers;