// Agents — first-class agent principals, their scopes & reach
function Agents({ agents }) {
  return (
    <div className="content-wrap fadein">
      <div className="page-head" style={{display:'flex',alignItems:'flex-end',gap:16}}>
        <div>
          <div className="eb">Agents</div>
          <h2>Agent principals</h2>
          <p>Every agent is a first-class principal with its own scoped, revocable credentials — not a shared key.</p>
        </div>
        <button className="btn btn-primary" style={{marginLeft:'auto'}}><i data-lucide="plus"></i>New agent</button>
      </div>

      <div style={{display:'flex',flexDirection:'column',gap:12}}>
        {agents.map((a,i) => {
          const restricted = a.status === "restricted";
          return (
            <div key={i} className="card" style={{padding:'18px 20px'}}>
              <div style={{display:'flex',alignItems:'center',gap:12}}>
                <div style={{width:38,height:38,borderRadius:11,background:'rgba(6,201,140,.10)',border:'1px solid rgba(6,201,140,.28)',display:'grid',placeItems:'center',color:'#3DEBB6'}}>
                  <i data-lucide="bot" style={{width:20,height:20}}></i>
                </div>
                <div>
                  <div className="mono" style={{fontSize:14,color:'var(--fg)'}}>{a.name}</div>
                  <div style={{fontSize:12,color:'var(--fg-muted)',marginTop:2}}>{a.decisions.toLocaleString()} decisions · last seen {a.lastSeen}</div>
                </div>
                <span className={"pill " + (restricted?"pill-appr":"pill-allow")} style={{marginLeft:'auto'}}>
                  <i data-lucide={restricted?"shield-alert":"circle-check"}></i>{a.status}
                </span>
                <button className="btn btn-ghost" style={{padding:'7px 11px'}}><i data-lucide="ban"></i>Revoke</button>
              </div>
              <div style={{borderTop:'1px solid var(--ink-800)',marginTop:14,paddingTop:13,display:'flex',alignItems:'center',gap:8,flexWrap:'wrap'}}>
                <span className="mono" style={{fontSize:10.5,letterSpacing:'.1em',textTransform:'uppercase',color:'var(--ink-500)',marginRight:4}}>scopes</span>
                {a.scopes.map((s,j) =>
                  <span key={j} className="pill pill-indigo" style={{fontSize:11}}><i data-lucide="key-round"></i>{s}</span>)}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}
window.Agents = Agents;