// Vyuu admin console — Admins, MCP Catalog, MCP Events, IDE Plugins, SaaS Agents, Local Agents
const { Filter, Download, ArrowUpRight, Eye, MoreHorizontal, UserPlus, Plug,
  Shield, Terminal, Github, Database, FileText, Mail, Box, Cloud, Bot,
  ChevronRight: ChevronRightIcon, AlertTriangle, CheckCircle2, Clock } = window.LucideReact;

// ─────────────────────────────────────────────────────────────────
// Admins (Settings → Admins)
// ─────────────────────────────────────────────────────────────────
const MOCK_ADMINS = [
  { name:'Krishna Iyer', email:'krishna@llp.in', role:'Super Admin', mfa:true, last:'now', scope:'Global', init:'K' },
  { name:'Meera Nair', email:'meera.nair@llp.in', role:'Security Admin', mfa:true, last:'2 hr ago', scope:'Global', init:'M' },
  { name:'Arjun Desai', email:'arjun.d@llp.in', role:'Policy Editor', mfa:true, last:'yesterday', scope:'Prompt Protection', init:'A' },
  { name:'Rhea Banerjee', email:'rhea.b@llp.in', role:'Auditor (read)', mfa:false, last:'3 days ago', scope:'Events · read-only', init:'R' },
  { name:'Sundar V.', email:'sundar.v@llp.in', role:'Policy Editor', mfa:true, last:'1 hr ago', scope:'MCP Security', init:'S' },
];

const ROLES = [
  { name:'Super Admin', desc:'Full access including billing, tenant config, and admin management.', count:1, ink:theme.terracottaInk, soft:theme.terracottaSoft },
  { name:'Security Admin', desc:'All policy + events + devices. Cannot manage admins or billing.', count:1, ink:theme.oceanInk, soft:theme.oceanSoft },
  { name:'Policy Editor', desc:'Create and edit policies within an assigned product scope.', count:2, ink:theme.orangeDeep, soft:theme.orangeSoft },
  { name:'Auditor (read)', desc:'Read-only access to events, reports, and audit logs.', count:1, ink:theme.amberInk, soft:theme.amberSoft },
];

const Admins = () => (
  <div>
    <SectionTitle eyebrow="Settings · Admins" title="Who can manage this tenant"
      actions={<><Button small icon={Shield} onClick={()=>window.__nav && window.__nav('settings.audit')}>Audit log</Button><Button primary icon={UserPlus} onClick={()=>alert('Stub: would open Invite admin drawer.')}>Invite admin</Button></>}/>

    <div style={{display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:14, marginBottom:24}}>
      {ROLES.map(r => (
        <Card key={r.name} style={{borderLeft:`3px solid ${r.ink}`}}>
          <div style={{display:'flex', justifyContent:'space-between', alignItems:'baseline', marginBottom:8}}>
            <div style={{fontFamily:theme.serif, fontSize:15, color:theme.ink, fontWeight:500}}>{r.name}</div>
            <span style={{fontFamily:theme.mono, fontSize:14, color:r.ink, fontWeight:600}}>{r.count}</span>
          </div>
          <p style={{fontSize:12, color:theme.muted, margin:0, lineHeight:1.5}}>{r.desc}</p>
        </Card>
      ))}
    </div>

    <Card padded={false}>
      <div style={{padding:'14px 20px', borderBottom:`1px solid ${theme.line}`, display:'flex', justifyContent:'space-between', alignItems:'center'}}>
        <div style={{fontFamily:theme.serif, fontSize:16, color:theme.ink, fontWeight:500}}>Admin users · {MOCK_ADMINS.length}</div>
        <Button small icon={Filter}>Filter</Button>
      </div>
      <table style={{width:'100%', borderCollapse:'collapse', fontSize:13}}>
        <thead><tr style={{borderBottom:`1px solid ${theme.line}`}}>
          {['User','Role','Scope','MFA','Last active',''].map((h,i)=>(
            <th key={i} style={{padding:'12px 20px', textAlign:'left', fontSize:10.5, letterSpacing:1.5, color:theme.muted, fontWeight:600, textTransform:'uppercase', fontFamily:theme.sans}}>{h}</th>
          ))}
        </tr></thead>
        <tbody>
          {MOCK_ADMINS.map(a => (
            <tr key={a.email} style={{borderBottom:`1px solid ${theme.lineSoft}`}}>
              <td style={{padding:'14px 20px'}}>
                <div style={{display:'flex', alignItems:'center', gap:12}}>
                  <div style={{width:30, height:30, borderRadius:999, background:theme.sand, display:'flex', alignItems:'center', justifyContent:'center', fontFamily:theme.serif, color:theme.ink, fontWeight:500, fontSize:13}}>{a.init}</div>
                  <div>
                    <div style={{color:theme.ink, fontWeight:500}}>{a.name}</div>
                    <div style={{color:theme.muted, fontSize:11.5, fontFamily:theme.mono}}>{a.email}</div>
                  </div>
                </div>
              </td>
              <td style={{padding:'14px 20px'}}>
                <Pill tone={a.role.includes('Super')?'terracotta':a.role.includes('Security')?'ocean':a.role.includes('Editor')?'orange':'amber'}>{a.role}</Pill>
              </td>
              <td style={{padding:'14px 20px', color:theme.muted, fontSize:12.5}}>{a.scope}</td>
              <td style={{padding:'14px 20px'}}>
                {a.mfa
                  ? <Pill tone="orange">✓ Enforced</Pill>
                  : <Pill tone="terracotta">⚠ Missing</Pill>}
              </td>
              <td style={{padding:'14px 20px', color:theme.muted, fontSize:12.5}}>{a.last}</td>
              <td style={{padding:'14px 20px', color:theme.muted, cursor:'pointer'}}><MoreHorizontal size={15}/></td>
            </tr>
          ))}
        </tbody>
      </table>
    </Card>

    <Card style={{marginTop:16, background:theme.orangeMist, borderColor:theme.orangeSoft}}>
      <div style={{display:'flex', gap:14, alignItems:'flex-start'}}>
        <Shield size={20} color={theme.orangeDeep} strokeWidth={1.8}/>
        <div>
          <div style={{fontFamily:theme.serif, fontSize:15, color:theme.ink, fontWeight:500, marginBottom:4}}>SSO &amp; SCIM</div>
          <div style={{fontSize:12.5, color:theme.muted, lineHeight:1.55, marginBottom:10}}>Admin provisioning is currently manual. Connect Okta, Azure AD, or Google Workspace to auto-sync admin membership and enforce MFA at the IdP.</div>
          <div style={{display:'flex', gap:8}}>
            <Button small onClick={()=>window.__nav && window.__nav('settings.health')}>Configure SSO</Button>
            <Button small onClick={()=>window.__nav && window.__nav('settings.health')}>Configure SCIM</Button>
          </div>
        </div>
      </div>
    </Card>
  </div>
);

// ─────────────────────────────────────────────────────────────────
// MCP Catalog (Vyuu → MCP Security → MCP Catalog)
// ─────────────────────────────────────────────────────────────────
const MCP_CATALOG = [
  { n:'filesystem', icon:FileText, v:'0.6.2', pub:'Anthropic (official)', tools:6, status:'approved', scope:'Workspace roots only', users:34 },
  { n:'github', icon:Github, v:'1.1.0', pub:'GitHub', tools:18, status:'approved', scope:'Read-only + issues', users:41 },
  { n:'postgres', icon:Database, v:'0.4.1', pub:'Community', tools:9, status:'review', scope:'Read replica only', users:12 },
  { n:'gmail', icon:Mail, v:'0.2.8', pub:'Google Workspace', tools:11, status:'approved', scope:'Personal inbox', users:28 },
  { n:'shell-exec', icon:Terminal, v:'0.3.0', pub:'Community', tools:2, status:'blocked', scope:'—', users:0 },
  { n:'jira', icon:Box, v:'1.0.4', pub:'Atlassian', tools:14, status:'approved', scope:'All projects', users:19 },
];

const MCPCatalog = () => (
  <div>
    <SectionTitle eyebrow="MCP Security · Catalog" title="Approved, under review, and blocked MCP servers"
      actions={<><Button small icon={Filter}>Filter</Button><Button primary icon={Plug} small>Submit for review</Button></>}/>
    <div style={{display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:14, marginBottom:20}}>
      <KPI label="Approved" value="24" delta="Available to all users" tone="orange"/>
      <KPI label="Under review" value="5" delta="↑ 2 new this week" tone="amber"/>
      <KPI label="Blocked" value="7" delta="Known high-risk servers" tone="terracotta"/>
    </div>
    <div style={{display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:14}}>
      {MCP_CATALOG.map(s => {
        const Icon = s.icon;
        const tone = s.status==='approved' ? 'orange' : s.status==='review' ? 'amber' : 'terracotta';
        return (
          <Card key={s.n}>
            <div style={{display:'flex', justifyContent:'space-between', alignItems:'flex-start', marginBottom:12}}>
              <div style={{display:'flex', gap:12, alignItems:'center'}}>
                <div style={{width:38, height:38, borderRadius:9, background:theme.oceanSoft, display:'flex', alignItems:'center', justifyContent:'center'}}>
                  <Icon size={18} color={theme.oceanInk} strokeWidth={1.8}/>
                </div>
                <div>
                  <div style={{fontFamily:theme.mono, fontSize:14, color:theme.ink, fontWeight:600}}>{s.n}</div>
                  <div style={{fontSize:11, color:theme.muted}}>v{s.v} · {s.pub}</div>
                </div>
              </div>
              <Pill tone={tone}>{s.status === 'review' ? 'UNDER REVIEW' : s.status.toUpperCase()}</Pill>
            </div>
            <div style={{display:'flex', gap:16, fontSize:11.5, color:theme.muted, marginBottom:12}}>
              <span><strong style={{color:theme.ink, fontFamily:theme.mono}}>{s.tools}</strong> tools</span>
              <span><strong style={{color:theme.ink, fontFamily:theme.mono}}>{s.users}</strong> users</span>
            </div>
            <div style={{fontSize:12, color:theme.muted, paddingTop:12, borderTop:`1px solid ${theme.lineSoft}`, display:'flex', justifyContent:'space-between', alignItems:'center'}}>
              <span style={{fontStyle:'italic'}}>{s.scope}</span>
              <ChevronRightIcon size={14} color={theme.muted}/>
            </div>
          </Card>
        );
      })}
    </div>
  </div>
);

// ─────────────────────────────────────────────────────────────────
// MCP Security Events (Vyuu → Events → MCP)
// ─────────────────────────────────────────────────────────────────
const MCP_EVENTS = [
  { id:'M-4821', time:'10:39:55', user:'anita.r@llp.in', server:'github', tool:'push_to_main', args:'repo=llp-payments, branch=main', v:'block', risk:'high', reason:'Production branch protection policy' },
  { id:'M-4820', time:'10:38:12', user:'vikram.j@llp.in', server:'filesystem', tool:'read_file', args:'path=/Users/vikram/notes/q3.md', v:'allow', risk:'low', reason:'Within workspace root' },
  { id:'M-4819', time:'10:36:44', user:'rahul.menon@llp.in', server:'postgres', tool:'execute_query', args:'SELECT * FROM customers LIMIT 1000', v:'redact', risk:'medium', reason:'Column-level PII masking applied' },
  { id:'M-4818', time:'10:34:17', user:'deepak.s@llp.in', server:'shell-exec', tool:'run', args:'rm -rf ~/backups', v:'block', risk:'high', reason:'Server not approved · destructive verb' },
  { id:'M-4817', time:'10:31:02', user:'priya.sharma@llp.in', server:'jira', tool:'create_issue', args:'project=PAY, summary="bug"', v:'allow', risk:'low', reason:'Within allowed project scope' },
  { id:'M-4816', time:'10:28:50', user:'sneha.k@llp.in', server:'gmail', tool:'send_message', args:'to=external@gmail.com', v:'redact', risk:'medium', reason:'External recipient · PAN redacted from body' },
];

const MCPEventsView = () => {
  const [filter, setFilter] = React.useState('All servers');
  const filters = ['All servers','Blocked only','High risk','Destructive tools','External I/O'];
  const filtered = MCP_EVENTS.filter(e => {
    if (filter==='Blocked only') return e.v==='block';
    if (filter==='High risk') return e.risk==='high';
    if (filter==='Destructive tools') return /push|delete|rm|drop|truncate/i.test(e.tool+e.args);
    if (filter==='External I/O') return /gmail|external/i.test(e.server+e.args);
    return true;
  });
  return (
    <div>
      <SectionTitle eyebrow="Events · MCP" title="Every tool call, on every endpoint"
        actions={<><Button icon={Filter} small>Filter</Button><Button icon={Download} small>Export</Button></>}/>

      <div style={{display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:14, marginBottom:20}}>
        <KPI label="Tool calls · 24h" value="4,516" delta="across 24 servers" tone="orange"/>
        <KPI label="Blocked" value="312" delta="6.9% of volume" tone="terracotta"/>
        <KPI label="Redacted args" value="788" delta="PII masking on writes" tone="amber"/>
        <KPI label="Destructive attempts" value="47" delta="↑ 9 vs yesterday" tone="terracotta"/>
      </div>

      <div style={{display:'flex', gap:10, marginBottom:16}}>
        {filters.map(f=>(
          <button key={f} onClick={()=>setFilter(f)} style={{
            padding:'7px 14px', borderRadius:999,
            border:`1px solid ${filter===f?theme.oceanInk:theme.line}`,
            background: filter===f?theme.oceanInk:theme.panel,
            color: filter===f?theme.onPrimary:theme.ink,
            fontSize:12, fontWeight:500, cursor:'pointer', fontFamily:theme.sans,
          }}>{f}</button>
        ))}
      </div>

      <Card padded={false}>
        <table style={{width:'100%', borderCollapse:'collapse', fontSize:13}}>
          <thead><tr style={{borderBottom:`1px solid ${theme.line}`}}>
            {['Time','User','Server.tool','Args','Verdict','Risk','Reason',''].map((h,i)=>(
              <th key={i} style={{padding:'12px 16px', textAlign:'left', fontSize:10.5, letterSpacing:1.5, color:theme.muted, fontWeight:600, textTransform:'uppercase', fontFamily:theme.sans}}>{h}</th>
            ))}
          </tr></thead>
          <tbody>
            {filtered.map(e => (
              <tr key={e.id} style={{borderBottom:`1px solid ${theme.lineSoft}`}}>
                <td style={{padding:'14px 16px', color:theme.muted, fontFamily:theme.mono, fontSize:12}}>{e.time}</td>
                <td style={{padding:'14px 16px', color:theme.ink, fontWeight:500}}>{e.user}</td>
                <td style={{padding:'14px 16px', fontFamily:theme.mono, color:theme.ink}}>
                  <span style={{color:theme.oceanInk, fontWeight:600}}>{e.server}</span>
                  <span style={{color:theme.muted}}>.</span>
                  <span>{e.tool}</span>
                </td>
                <td style={{padding:'14px 16px', fontFamily:theme.mono, fontSize:11.5, color:theme.muted, maxWidth:280, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap'}}>{e.args}</td>
                <td style={{padding:'14px 16px'}}><VerdictPill v={e.v}/></td>
                <td style={{padding:'14px 16px'}}><RiskPill level={e.risk}/></td>
                <td style={{padding:'14px 16px', color:theme.muted, fontSize:12, maxWidth:260}}>{e.reason}</td>
                <td style={{padding:'14px 16px', color:theme.muted, cursor:'pointer'}}><MoreHorizontal size={15}/></td>
              </tr>
            ))}
          </tbody>
        </table>
      </Card>
    </div>
  );
};

// ─────────────────────────────────────────────────────────────────
// IDE Plugins (Plugins → IDE)
// ─────────────────────────────────────────────────────────────────
const IDE_PLUGINS = [
  { n:'GitHub Copilot', pub:'GitHub', host:'VS Code, JetBrains', users:58, risk:'medium', cat:'Code AI', v:'1.230' },
  { n:'Cursor', pub:'Anysphere', host:'Cursor IDE (native)', users:22, risk:'medium', cat:'Code AI', v:'0.42.3' },
  { n:'Claude Code', pub:'Anthropic', host:'VS Code, CLI', users:17, risk:'low', cat:'Agent', v:'1.8.0' },
  { n:'Continue', pub:'Continue Dev', host:'VS Code, JetBrains', users:9, risk:'medium', cat:'Code AI', v:'0.9.214' },
  { n:'Codeium', pub:'Exafunction', host:'All IDEs', users:14, risk:'medium', cat:'Code AI', v:'1.34.7' },
  { n:'Tabnine', pub:'Tabnine Ltd.', host:'All IDEs', users:6, risk:'low', cat:'Code AI', v:'5.42' },
];

const IDEPlugins = () => (
  <div>
    <SectionTitle eyebrow="Plugins · IDE" title="Code assistants &amp; agents observed in developer IDEs"
      actions={<Button small icon={Filter}>Filter</Button>}/>
    <Card padded={false}>
      <table style={{width:'100%', borderCollapse:'collapse', fontSize:13}}>
        <thead><tr style={{borderBottom:`1px solid ${theme.line}`}}>
          {['Plugin','Publisher','Host IDE','Version','Category','Users','Risk',''].map((h,i)=>(
            <th key={i} style={{padding:'12px 16px', textAlign:'left', fontSize:10.5, letterSpacing:1.5, color:theme.muted, fontWeight:600, textTransform:'uppercase', fontFamily:theme.sans}}>{h}</th>
          ))}
        </tr></thead>
        <tbody>
          {IDE_PLUGINS.map(p => (
            <tr key={p.n} style={{borderBottom:`1px solid ${theme.lineSoft}`}}>
              <td style={{padding:'14px 16px', color:theme.ink, fontWeight:500}}>{p.n}</td>
              <td style={{padding:'14px 16px', color:theme.muted}}>{p.pub}</td>
              <td style={{padding:'14px 16px', color:theme.muted, fontSize:12.5}}>{p.host}</td>
              <td style={{padding:'14px 16px', fontFamily:theme.mono, fontSize:12, color:theme.muted}}>{p.v}</td>
              <td style={{padding:'14px 16px'}}><Pill tone={p.cat==='Agent'?'amber':'ocean'}>{p.cat}</Pill></td>
              <td style={{padding:'14px 16px', fontFamily:theme.mono, color:theme.ink}}>{p.users}</td>
              <td style={{padding:'14px 16px'}}><RiskPill level={p.risk}/></td>
              <td style={{padding:'14px 16px', color:theme.muted}}><MoreHorizontal size={15}/></td>
            </tr>
          ))}
        </tbody>
      </table>
    </Card>
  </div>
);

// ─────────────────────────────────────────────────────────────────
// Local Agents (Agent Observability → Local)
// ─────────────────────────────────────────────────────────────────
const LOCAL_AGENTS = [
  { id:'LA-2201', name:'Cursor · background-agent', user:'anita.r@llp.in', host:'LLP-ANITA-08', status:'active', steps:42, mcps:3, started:'8 min ago', lastStep:'github.create_pr' },
  { id:'LA-2200', name:'Claude Code · refactor-task', user:'vikram.j@llp.in', host:'LLP-VIKRAM-21', status:'active', steps:18, mcps:2, started:'14 min ago', lastStep:'filesystem.write_file' },
  { id:'LA-2197', name:'Cline · debug-run', user:'rahul.menon@llp.in', host:'LLP-RAHUL-02', status:'paused', steps:7, mcps:1, started:'32 min ago', lastStep:'shell-exec.run (BLOCKED)' },
  { id:'LA-2194', name:'Claude Desktop · research', user:'priya.sharma@llp.in', host:'LLP-PRIYA-14', status:'completed', steps:24, mcps:4, started:'1 hr ago', lastStep:'done' },
];

const LocalAgents = () => (
  <div>
    <SectionTitle eyebrow="Agent Observability · Local" title="Agents running inside user IDEs &amp; desktop apps"
      actions={<><Button small icon={Filter}>Filter</Button><Button small icon={Eye} onClick={()=>window.__nav && window.__nav('events.mcp')}>Live tail</Button></>}/>
    <div style={{display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:14, marginBottom:20}}>
      <KPI label="Active agents" value="18" delta="across 14 endpoints" tone="orange"/>
      <KPI label="Steps · 24h" value="3,402" delta="avg 27 / agent" tone="orange"/>
      <KPI label="Paused on policy" value="9" delta="awaiting admin review" tone="amber"/>
      <KPI label="Killed" value="3" delta="destructive loop detected" tone="terracotta"/>
    </div>
    <Card padded={false}>
      <table style={{width:'100%', borderCollapse:'collapse', fontSize:13}}>
        <thead><tr style={{borderBottom:`1px solid ${theme.line}`}}>
          {['','Agent','User · host','Steps','MCPs','Last step','Started',''].map((h,i)=>(
            <th key={i} style={{padding:'12px 16px', textAlign:'left', fontSize:10.5, letterSpacing:1.5, color:theme.muted, fontWeight:600, textTransform:'uppercase', fontFamily:theme.sans}}>{h}</th>
          ))}
        </tr></thead>
        <tbody>
          {LOCAL_AGENTS.map(a => {
            const statusMap = { active:{tone:'orange', Icon:CheckCircle2}, paused:{tone:'amber', Icon:Clock}, completed:{tone:'neutral', Icon:CheckCircle2}, killed:{tone:'terracotta', Icon:AlertTriangle} };
            const s = statusMap[a.status];
            const SIcon = s.Icon;
            return (
              <tr key={a.id} style={{borderBottom:`1px solid ${theme.lineSoft}`, cursor:'pointer'}}>
                <td style={{padding:'14px 16px'}}><SIcon size={14} color={theme[s.tone==='orange'?'sageDeep':s.tone==='amber'?'amberInk':s.tone==='terracotta'?'terracottaInk':'muted']}/></td>
                <td style={{padding:'14px 16px'}}>
                  <div style={{color:theme.ink, fontWeight:500}}>{a.name}</div>
                  <div style={{color:theme.muted, fontFamily:theme.mono, fontSize:11}}>{a.id}</div>
                </td>
                <td style={{padding:'14px 16px', color:theme.muted, fontSize:12.5}}>
                  <div>{a.user}</div>
                  <div style={{fontFamily:theme.mono, fontSize:11}}>{a.host}</div>
                </td>
                <td style={{padding:'14px 16px', fontFamily:theme.mono, color:theme.ink}}>{a.steps}</td>
                <td style={{padding:'14px 16px', fontFamily:theme.mono, color:theme.ink}}>{a.mcps}</td>
                <td style={{padding:'14px 16px', fontFamily:theme.mono, fontSize:12, color:a.lastStep.includes('BLOCK')?theme.terracottaInk:theme.muted}}>{a.lastStep}</td>
                <td style={{padding:'14px 16px', color:theme.muted, fontSize:12.5}}>{a.started}</td>
                <td style={{padding:'14px 16px', color:theme.amberInk}}><ArrowUpRight size={14}/></td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </Card>
  </div>
);

// ─────────────────────────────────────────────────────────────────
// SaaS Agents (Agent Observability → SaaS)
// ─────────────────────────────────────────────────────────────────
const SAAS_AGENTS = [
  { name:'Glean Assistant', vendor:'Glean', owner:'IT · Meera Nair', users:128, runs:'2,847 / 7d', dataScopes:['Drive','Slack','Jira'], connected:true, risk:'low', governance:'SSO + SCIM' },
  { name:'Salesforce Einstein Copilot', vendor:'Salesforce', owner:'RevOps · Sundar V.', users:64, runs:'1,204 / 7d', dataScopes:['SFDC all objects'], connected:true, risk:'medium', governance:'SSO · permission-set gated' },
  { name:'ServiceNow Now Assist', vendor:'ServiceNow', owner:'IT · Meera Nair', users:42, runs:'612 / 7d', dataScopes:['ITSM','HR'], connected:true, risk:'medium', governance:'SSO' },
  { name:'Notion AI', vendor:'Notion', owner:'Unmanaged', users:31, runs:'— (opaque)', dataScopes:['All workspace docs'], connected:false, risk:'high', governance:'No SSO · personal logins' },
  { name:'Zoom AI Companion', vendor:'Zoom', owner:'IT · Meera Nair', users:210, runs:'meeting summaries', dataScopes:['Meeting recordings'], connected:true, risk:'medium', governance:'SSO · retention 30d' },
  { name:'GitHub Copilot Workspace', vendor:'GitHub', owner:'Eng · Arjun Desai', users:48, runs:'344 / 7d', dataScopes:['Org repos'], connected:true, risk:'low', governance:'SSO + SAML' },
];

const SaaSAgents = () => (
  <div>
    <SectionTitle eyebrow="Agent Observability · SaaS" title="Vendor agents operating on your corporate data"
      actions={<><Button small icon={Filter}>Filter</Button><Button primary small icon={Plug}>Connect vendor</Button></>}/>

    <div style={{display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:14, marginBottom:20}}>
      <KPI label="Vendor agents" value="14" delta="across 9 SaaS apps" tone="orange"/>
      <KPI label="Users reached" value="523" delta="some via multiple agents" tone="orange"/>
      <KPI label="Unmanaged" value="3" delta="no SSO · personal logins" tone="terracotta"/>
      <KPI label="New this week" value="2" delta="Notion AI, Figma AI" tone="amber"/>
    </div>

    <div style={{display:'grid', gridTemplateColumns:'repeat(2,1fr)', gap:14}}>
      {SAAS_AGENTS.map(a => (
        <Card key={a.name}>
          <div style={{display:'flex', justifyContent:'space-between', alignItems:'flex-start', marginBottom:14}}>
            <div style={{display:'flex', gap:12, alignItems:'flex-start'}}>
              <div style={{width:40, height:40, borderRadius:10, background:theme.amberSoft, display:'flex', alignItems:'center', justifyContent:'center'}}>
                <Cloud size={19} color={theme.amberInk} strokeWidth={1.8}/>
              </div>
              <div>
                <div style={{fontFamily:theme.serif, fontSize:16, color:theme.ink, fontWeight:500}}>{a.name}</div>
                <div style={{fontSize:11.5, color:theme.muted, marginTop:2}}>{a.vendor} · Owner: <span style={{color:a.owner==='Unmanaged'?theme.terracottaInk:theme.ink}}>{a.owner}</span></div>
              </div>
            </div>
            <RiskPill level={a.risk}/>
          </div>

          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:10, padding:'12px 0', borderTop:`1px solid ${theme.lineSoft}`, borderBottom:`1px solid ${theme.lineSoft}`, fontSize:11.5}}>
            <div>
              <div style={{color:theme.muted, textTransform:'uppercase', letterSpacing:1.2, fontSize:9.5, marginBottom:3, fontWeight:600}}>Users</div>
              <div style={{fontFamily:theme.mono, color:theme.ink, fontWeight:600}}>{a.users}</div>
            </div>
            <div>
              <div style={{color:theme.muted, textTransform:'uppercase', letterSpacing:1.2, fontSize:9.5, marginBottom:3, fontWeight:600}}>Activity</div>
              <div style={{fontFamily:theme.mono, color:theme.ink}}>{a.runs}</div>
            </div>
          </div>

          <div style={{marginTop:12, marginBottom:10}}>
            <div style={{color:theme.muted, textTransform:'uppercase', letterSpacing:1.2, fontSize:9.5, marginBottom:6, fontWeight:600}}>Data scopes</div>
            <div style={{display:'flex', gap:5, flexWrap:'wrap'}}>
              {a.dataScopes.map(s => <Pill key={s} tone="ocean">{s}</Pill>)}
            </div>
          </div>

          <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', paddingTop:12, borderTop:`1px solid ${theme.lineSoft}`}}>
            <div style={{fontSize:11.5, color:theme.muted, display:'flex', alignItems:'center', gap:6}}>
              <StatDot status={a.connected?'online':'stale'}/>
              <span>{a.governance}</span>
            </div>
            <Button small>{a.connected?'Configure':'Connect audit feed'}</Button>
          </div>
        </Card>
      ))}
    </div>
  </div>
);

Object.assign(window, {Admins, MCPCatalog, MCPEventsView, IDEPlugins, LocalAgents, SaaSAgents});