// Vyuu admin console — views (EventsTable, Overview, Events, Policy, Devices, Downloads, Plugins, LLM)
const { Filter, Download, ArrowUpRight, Eye, HardDrive, Globe, MoreHorizontal,
  UserPlus, Plug, Trash2, Check, Cpu, Server, Package } = window.LucideReact;

const MOCK_EVENTS = [
  { id:'E-9412', time:'10:42:18', user:'priya.sharma@llp.in', app:'Claude Desktop', surface:'desktop', cat:'Prompt', v:'allow', risk:'low', summary:'Asked about Q3 product roadmap phrasing', pii:[] },
  { id:'E-9411', time:'10:41:02', user:'rahul.menon@llp.in', app:'ChatGPT (browser)', surface:'browser', cat:'Prompt', v:'redact', risk:'medium', summary:'Pasted customer list with PAN + email addresses', pii:['PAN','EMAIL'] },
  { id:'E-9410', time:'10:39:55', user:'anita.r@llp.in', app:'Cursor', surface:'desktop', cat:'Prompt', v:'block', risk:'high', summary:'Attempted to share prod DB connection string', pii:['CREDENTIAL'] },
  { id:'E-9409', time:'10:38:12', user:'vikram.j@llp.in', app:'Claude Desktop', surface:'desktop', cat:'MCP', v:'allow', risk:'low', summary:'filesystem.read_file on /Users/vikram/notes', pii:[] },
  { id:'E-9408', time:'10:35:40', user:'sneha.k@llp.in', app:'ChatGPT (browser)', surface:'browser', cat:'Prompt', v:'redact', risk:'medium', summary:'Shared Aadhaar fragment in debug context', pii:['AADHAAR'] },
  { id:'E-9407', time:'10:33:08', user:'rahul.menon@llp.in', app:'Claude Desktop', surface:'desktop', cat:'MCP', v:'block', risk:'high', summary:'github.push_to_main on llp-payments repo', pii:[] },
];

const EventsTable = ({events}) => (
  <div style={{overflowX:'auto'}}>
    <table style={{width:'100%', borderCollapse:'collapse', fontSize:13}}>
      <thead><tr style={{borderBottom:`1px solid ${theme.line}`}}>
        {['Time','User','App','Summary','Verdict','Risk',''].map((h,i)=>(
          <th key={i} style={{padding:'10px 12px', textAlign:'left', fontSize:10.5, letterSpacing:1.5, color:theme.muted, fontWeight:600, textTransform:'uppercase', fontFamily:theme.sans}}>{h}</th>
        ))}
      </tr></thead>
      <tbody>
        {events.map(e=>(
          <tr key={e.id} style={{borderBottom:`1px solid ${theme.lineSoft}`}}>
            <td style={{padding:'14px 12px', color:theme.muted, fontFamily:theme.mono, fontSize:12}}>{e.time}</td>
            <td style={{padding:'14px 12px', color:theme.ink, fontWeight:500}}>{e.user}</td>
            <td style={{padding:'14px 12px', color:theme.ink}}>
              <span style={{display:'inline-flex', alignItems:'center', gap:6}}>
                {e.surface==='desktop' ? <HardDrive size={12} color={theme.muted}/> : <Globe size={12} color={theme.muted}/>}{e.app}
              </span>
            </td>
            <td style={{padding:'14px 12px', color:theme.ink, maxWidth:340}}>
              {e.summary}
              {e.pii.length>0 && <div style={{marginTop:4, display:'flex', gap:4}}>{e.pii.map(p=><Pill key={p} tone="terracotta">{p}</Pill>)}</div>}
            </td>
            <td style={{padding:'14px 12px'}}><VerdictPill v={e.v}/></td>
            <td style={{padding:'14px 12px'}}><RiskPill level={e.risk}/></td>
            <td style={{padding:'14px 12px', color:theme.muted, cursor:'pointer'}}><MoreHorizontal size={15}/></td>
          </tr>
        ))}
      </tbody>
    </table>
  </div>
);

const Overview = () => (
  <div>
    <SectionTitle eyebrow="At a glance · last 24 hrs" title="How your workforce is using AI today"
      actions={<><Button icon={Filter} small>Filters</Button><Button primary icon={ArrowUpRight} small>Export report</Button></>}/>
    <div style={{display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:16, marginBottom:24}}>
      <KPI label="Prompts observed" value="12,847" delta="↑ 18% vs yesterday" tone="orange"/>
      <KPI label="Redacted / blocked" value="1,302" delta="10.1% of volume" tone="amber"/>
      <KPI label="MCP invocations" value="4,516" delta="↑ 6% vs yesterday" tone="orange"/>
      <KPI label="PII leak attempts" value="73" delta="↑ 12 high-risk" tone="terracotta"/>
    </div>
    <div style={{display:'grid', gridTemplateColumns:'2fr 1fr', gap:16}}>
      <Card>
        <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:20}}>
          <h3 style={{fontFamily:theme.serif, fontSize:18, margin:0, color:theme.ink, fontWeight:500}}>Prompt volume</h3>
          <Pill tone="neutral">Hourly · 24h</Pill>
        </div>
        <svg viewBox="0 0 600 200" style={{width:'100%', height:200}}>
          <defs><linearGradient id="vol" x1="0" x2="0" y1="0" y2="1">
            <stop offset="0%" stopColor={theme.orange} stopOpacity="0.35"/><stop offset="100%" stopColor={theme.orange} stopOpacity="0.02"/>
          </linearGradient></defs>
          {[40,80,120,160].map(y=><line key={y} x1="0" y1={y} x2="600" y2={y} stroke={theme.lineSoft} strokeDasharray="2 4"/>)}
          <path d="M 0 140 L 40 130 L 80 100 L 120 115 L 160 85 L 200 95 L 240 70 L 280 55 L 320 65 L 360 45 L 400 50 L 440 40 L 480 60 L 520 75 L 560 65 L 600 55 L 600 200 L 0 200 Z" fill="url(#vol)"/>
          <path d="M 0 140 L 40 130 L 80 100 L 120 115 L 160 85 L 200 95 L 240 70 L 280 55 L 320 65 L 360 45 L 400 50 L 440 40 L 480 60 L 520 75 L 560 65 L 600 55" fill="none" stroke={theme.orangeDeep} strokeWidth="2"/>
          <path d="M 0 180 L 40 175 L 80 170 L 120 172 L 160 168 L 200 170 L 240 165 L 280 160 L 320 163 L 360 158 L 400 160 L 440 155 L 480 162 L 520 168 L 560 164 L 600 160" fill="none" stroke={theme.terracotta} strokeWidth="1.5" strokeDasharray="3 3"/>
        </svg>
      </Card>
      <Card>
        <h3 style={{fontFamily:theme.serif, fontSize:18, margin:'0 0 18px', color:theme.ink, fontWeight:500}}>Top apps</h3>
        {[{app:'Claude Desktop',pct:42,n:'5,396'},{app:'ChatGPT (web)',pct:31,n:'3,982'},{app:'Cursor',pct:14,n:'1,798'},{app:'Perplexity',pct:8,n:'1,028'},{app:'Gemini',pct:5,n:'643'}].map(a=>(
          <div key={a.app} style={{marginBottom:14}}>
            <div style={{display:'flex', justifyContent:'space-between', fontSize:12.5, marginBottom:5}}>
              <span style={{color:theme.ink, fontWeight:500}}>{a.app}</span>
              <span style={{color:theme.muted}}>{a.n}</span>
            </div>
            <div style={{height:6, background:theme.lineSoft, borderRadius:999, overflow:'hidden'}}>
              <div style={{height:'100%', width:`${a.pct}%`, background:theme.orange}}/>
            </div>
          </div>
        ))}
      </Card>
    </div>
    <div style={{marginTop:16}}>
      <Card>
        <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:16}}>
          <h3 style={{fontFamily:theme.serif, fontSize:18, margin:0, color:theme.ink, fontWeight:500}}>Recent high-risk events</h3>
          <Button small icon={Eye} onClick={()=>window.__nav && window.__nav('events.chat')}>View all</Button>
        </div>
        <EventsTable events={MOCK_EVENTS.filter(e=>e.risk==='high'||e.risk==='medium').slice(0,4)}/>
      </Card>
    </div>
  </div>
);

const EventsView = () => {
  const [filter, setFilter] = React.useState('All surfaces');
  const filters = ['All surfaces','Desktop apps','Browser','Redacted only','Blocked only','PII flagged'];
  const filtered = MOCK_EVENTS.filter(e => e.cat==='Prompt').filter(e=>{
    if (filter==='Desktop apps') return e.surface==='desktop';
    if (filter==='Browser') return e.surface==='browser';
    if (filter==='Redacted only') return e.v==='redact';
    if (filter==='Blocked only') return e.v==='block';
    if (filter==='PII flagged') return e.pii.length>0;
    return true;
  });
  return (
    <div>
      <SectionTitle eyebrow="Events · Chat Interactions" title="Prompts from browser & desktop AI apps"
        actions={<><Button icon={Filter} small>Filter</Button><Button icon={Download} small>Export</Button></>}/>
      <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.orangeDeep:theme.line}`,
            background: filter===f?theme.orangeDeep:theme.panel,
            color: filter===f?theme.onPrimary:theme.ink,
            fontSize:12, fontWeight:500, cursor:'pointer', fontFamily:theme.sans,
          }}>{f}</button>
        ))}
      </div>
      <Card padded={false}><EventsTable events={filtered}/></Card>
    </div>
  );
};

const PromptPolicy = () => {
  const [rules, setRules] = React.useState([
    { id:1, name:'Block Aadhaar in prompts', pattern:'AADHAAR (12-digit)', action:'block', scope:'All apps', active:true, hits:127 },
    { id:2, name:'Redact PAN in prompts', pattern:'PAN (ABCDE1234F format)', action:'redact', scope:'All apps', active:true, hits:312 },
    { id:3, name:'Block prod credentials', pattern:'password=, api_key=, DATABASE_URL', action:'block', scope:'All apps', active:true, hits:48 },
    { id:4, name:'Warn on customer list (>10 rows)', pattern:'email + name + phone pattern', action:'warn', scope:'Browser only', active:true, hits:74 },
    { id:5, name:'Block GSTIN bulk export', pattern:'GSTIN x5+ in single prompt', action:'block', scope:'All apps', active:false, hits:0 },
  ]);
  return (
    <div>
      <SectionTitle eyebrow="Policy" title="Prompt control"
        actions={<Button primary icon={UserPlus}>Create rule</Button>}/>
      <Card padded={false}>
        <table style={{width:'100%', borderCollapse:'collapse', fontSize:13}}>
          <thead><tr style={{borderBottom:`1px solid ${theme.line}`}}>
            {['Active','Name','Pattern','Action','Scope','Hits (7d)',''].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>
            {rules.map(r=>(
              <tr key={r.id} style={{borderBottom:`1px solid ${theme.lineSoft}`}}>
                <td style={{padding:'14px 16px'}}><Toggle on={r.active} onChange={()=>setRules(rs=>rs.map(x=>x.id===r.id?{...x,active:!x.active}:x))}/></td>
                <td style={{padding:'14px 16px', color:theme.ink, fontWeight:500}}>{r.name}</td>
                <td style={{padding:'14px 16px', fontFamily:theme.mono, fontSize:12, color:theme.muted}}>{r.pattern}</td>
                <td style={{padding:'14px 16px'}}>
                  <Pill tone={r.action==='block'?'terracotta':r.action==='redact'?'amber':'ocean'}>{r.action.toUpperCase()}</Pill>
                </td>
                <td style={{padding:'14px 16px', color:theme.muted, fontSize:12.5}}>{r.scope}</td>
                <td style={{padding:'14px 16px', color:theme.ink, fontFamily:theme.mono}}>{r.hits}</td>
                <td style={{padding:'14px 16px', color:theme.muted, cursor:'pointer'}}><MoreHorizontal size={15}/></td>
              </tr>
            ))}
          </tbody>
        </table>
      </Card>
    </div>
  );
};

const MOCK_DEVICES = [
  { host:'LLP-PRIYA-14', user:'priya.sharma@llp.in', os:'macOS 14.5', agent:'1.3.2', last:'2 min ago', status:'online', events:184 },
  { host:'LLP-RAHUL-02', user:'rahul.menon@llp.in', os:'Windows 11', agent:'1.3.2', last:'4 min ago', status:'online', events:267 },
  { host:'LLP-ANITA-08', user:'anita.r@llp.in', os:'Windows 11', agent:'1.3.1', last:'12 min ago', status:'online', events:91 },
  { host:'LLP-VIKRAM-21', user:'vikram.j@llp.in', os:'macOS 15.0', agent:'1.3.2', last:'18 min ago', status:'online', events:142 },
  { host:'LLP-SNEHA-05', user:'sneha.k@llp.in', os:'Windows 11', agent:'1.3.2', last:'1 hr ago', status:'idle', events:78 },
  { host:'LLP-DEEPAK-33', user:'deepak.s@llp.in', os:'Ubuntu 22.04', agent:'1.3.0', last:'3 hr ago', status:'stale', events:54 },
  { host:'LLP-KAVYA-19', user:'kavya.p@llp.in', os:'macOS 14.4', agent:'1.2.9', last:'2 days ago', status:'offline', events:12 },
];

const Devices = () => (
  <div>
    <SectionTitle eyebrow="Inventory" title="Devices with Vyuu agent"
      actions={<><Button small icon={Filter}>Filter</Button><Button small icon={Download}>CSV</Button></>}/>
    <Card padded={false}>
      <table style={{width:'100%', borderCollapse:'collapse', fontSize:13}}>
        <thead><tr style={{borderBottom:`1px solid ${theme.line}`}}>
          {['','Hostname','User','OS','Agent','Last active','Events (30d)',''].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>
          {MOCK_DEVICES.map(d=>(
            <tr key={d.host} style={{borderBottom:`1px solid ${theme.lineSoft}`, cursor:'pointer'}}>
              <td style={{padding:'14px 16px'}}><StatDot status={d.status}/></td>
              <td style={{padding:'14px 16px', fontFamily:theme.mono, fontWeight:600, color:theme.ink}}>{d.host}</td>
              <td style={{padding:'14px 16px', color:theme.ink}}>{d.user}</td>
              <td style={{padding:'14px 16px', color:theme.muted}}>{d.os}</td>
              <td style={{padding:'14px 16px', fontFamily:theme.mono, color:theme.muted}}>{d.agent}</td>
              <td style={{padding:'14px 16px', color:theme.muted}}>{d.last}</td>
              <td style={{padding:'14px 16px', fontFamily:theme.mono, color:theme.ink}}>{d.events}</td>
              <td style={{padding:'14px 16px', color:theme.orangeDeep}}><ArrowUpRight size={14}/></td>
            </tr>
          ))}
        </tbody>
      </table>
    </Card>
  </div>
);

const INITIAL_TOKENS = [
  { id:'tok_8K2pX', label:'Default · macOS+Linux', issuer:'krishna@llp.in', issued:'today, 09:14', expires:'in 14 hr', uses:23, max:'unlimited', revoked:false },
  { id:'tok_4nQrY', label:'Windows MSI · Q2 rollout', issuer:'meera.nair@llp.in', issued:'2 days ago', expires:'in 1 day', uses:84, max:'200', revoked:false },
  { id:'tok_WmZ1c', label:'BFSI air-gapped pilot', issuer:'arjun.d@llp.in', issued:'5 days ago', expires:'in 19 days', uses:6, max:'12', revoked:false },
  { id:'tok_R7vL0', label:'Old laptop refresh batch', issuer:'krishna@llp.in', issued:'3 weeks ago', expires:'expired', uses:142, max:'150', revoked:true },
];

const Downloads = () => {
  const [tokens, setTokens] = React.useState(INITIAL_TOKENS);
  const [copied, setCopied] = React.useState(false);
  const [showIssue, setShowIssue] = React.useState(false);

  const revokeToken = (id) => {
    if (!confirm('Revoke this enrollment token? Devices that have already enrolled stay active; new enrollments using this token will fail.')) return;
    setTokens(ts => ts.map(t => t.id===id ? {...t, revoked:true, expires:'revoked just now'} : t));
  };
  const issueToken = () => {
    const id = 'tok_' + Math.random().toString(36).slice(2,7);
    setTokens(ts => [{ id, label:'New token · '+new Date().toLocaleDateString(), issuer:'krishna@llp.in', issued:'just now', expires:'in 24 hr', uses:0, max:'unlimited', revoked:false }, ...ts]);
    setShowIssue(false);
  };

  return (
  <div>
    <SectionTitle eyebrow="Deployment" title="Download agent & provisioning scripts"
      actions={<Button small primary icon={Plug} onClick={()=>setShowIssue(true)}>Issue new token</Button>}/>
    <div style={{display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:16, marginBottom:24}}>
      {[
        {os:'Windows', icon:HardDrive, v:'1.3.2', size:'24.1 MB', note:'MSI · signed · x64, ARM64'},
        {os:'macOS', icon:Cpu, v:'1.3.2', size:'22.8 MB', note:'PKG · notarized · Intel + Apple Silicon'},
        {os:'Linux', icon:Server, v:'1.3.2', size:'19.4 MB', note:'deb, rpm, tar.gz'},
      ].map(p=>{
        const Icon = p.icon;
        return (
          <Card key={p.os}>
            <div style={{display:'flex', alignItems:'center', gap:12, marginBottom:16}}>
              <div style={{width:44, height:44, borderRadius:10, background:theme.orangeSoft, display:'flex', alignItems:'center', justifyContent:'center'}}>
                <Icon size={22} color={theme.orangeDeep} strokeWidth={1.8}/>
              </div>
              <div>
                <div style={{fontFamily:theme.serif, fontSize:18, color:theme.ink, fontWeight:500}}>{p.os}</div>
                <div style={{fontSize:11.5, color:theme.muted}}>v{p.v} · {p.size}</div>
              </div>
            </div>
            <p style={{fontSize:12.5, color:theme.muted, margin:'0 0 16px', lineHeight:1.5}}>{p.note}</p>
            <Button primary icon={Download} small onClick={()=>alert(`Stub: would download Vyuu agent for ${p.os} (v${p.v}).`)}>Download installer</Button>
          </Card>
        );
      })}
    </div>

    <Card>
      <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:12}}>
        <div>
          <h3 style={{fontFamily:theme.serif, fontSize:18, margin:0, color:theme.ink, fontWeight:500}}>One-time execution script</h3>
          <p style={{fontSize:12.5, color:theme.muted, margin:'4px 0 0'}}>Tenant-scoped enrollment token baked in. Rotate every 24 hr.</p>
        </div>
        <Pill tone="amber">Expires in 14 hr</Pill>
      </div>
      <div style={{background:'#2A3638', borderRadius:10, padding:16, fontFamily:theme.mono, fontSize:12.5, color:'#DCE7EC', lineHeight:1.7, marginTop:14, position:'relative'}}>
        <button onClick={()=>{
          navigator.clipboard?.writeText('curl -sSf https://get.vyuu.ai/enroll | sh -s -- --tenant llp --token vyuu_eyJ... --region ap-south-1');
          setCopied(true); setTimeout(()=>setCopied(false), 1400);
        }} style={{position:'absolute', top:10, right:10, background:'rgba(255,255,255,.06)', color:'#DCE7EC', border:'1px solid rgba(255,255,255,.14)', borderRadius:6, padding:'4px 10px', fontSize:11, cursor:'pointer', fontFamily:theme.sans}}>{copied?'Copied ✓':'Copy'}</button>
        <span style={{color:'#6B8E7F'}}># macOS / Linux</span><br/>
        curl -sSf https://get.vyuu.ai/enroll | sh -s -- \<br/>
        &nbsp;&nbsp;--tenant llp --token vyuu_eyJ... --region ap-south-1
      </div>
    </Card>

    {/* NEW: Active enrollment tokens with revoke */}
    <Card style={{marginTop:16}} padded={false}>
      <div style={{padding:'14px 20px', borderBottom:`1px solid ${theme.line}`, display:'flex', justifyContent:'space-between', alignItems:'center'}}>
        <div>
          <div style={{fontFamily:theme.serif, fontSize:16, color:theme.ink, fontWeight:500}}>Active enrollment tokens · {tokens.filter(t=>!t.revoked).length}</div>
          <div style={{fontSize:11.5, color:theme.muted, marginTop:2}}>Revoke immediately if a token leaks. Already-enrolled devices keep working.</div>
        </div>
        <div style={{display:'flex', gap:8}}>
          <Button small icon={Filter}>Filter</Button>
          <Button small primary icon={Plug} onClick={()=>setShowIssue(true)}>Issue new token</Button>
        </div>
      </div>
      <table style={{width:'100%', borderCollapse:'collapse', fontSize:13}}>
        <thead><tr style={{borderBottom:`1px solid ${theme.line}`}}>
          {['Token','Label','Issuer','Issued','Expires','Uses','Status',''].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>
          {tokens.map(t => (
            <tr key={t.id} style={{borderBottom:`1px solid ${theme.lineSoft}`}}>
              <td style={{padding:'14px 20px', fontFamily:theme.mono, color:t.revoked?theme.subtle:theme.ink, fontWeight:600, textDecoration:t.revoked?'line-through':'none'}}>{t.id}</td>
              <td style={{padding:'14px 20px', color:t.revoked?theme.muted:theme.ink}}>{t.label}</td>
              <td style={{padding:'14px 20px', fontFamily:theme.mono, fontSize:11.5, color:theme.muted}}>{t.issuer}</td>
              <td style={{padding:'14px 20px', color:theme.muted, fontSize:12.5}}>{t.issued}</td>
              <td style={{padding:'14px 20px', color:theme.muted, fontSize:12.5}}>{t.expires}</td>
              <td style={{padding:'14px 20px', fontFamily:theme.mono, fontSize:12, color:theme.muted}}>{t.uses} / {t.max}</td>
              <td style={{padding:'14px 20px'}}>
                {t.revoked ? <Pill tone="terracotta">Revoked</Pill>
                  : t.expires.includes('expired') ? <Pill tone="neutral">Expired</Pill>
                  : <Pill tone="orange">Active</Pill>}
              </td>
              <td style={{padding:'14px 20px'}}>
                {t.revoked
                  ? <span style={{fontSize:11, color:theme.subtle, fontStyle:'italic'}}>—</span>
                  : <button onClick={()=>revokeToken(t.id)} style={{display:'inline-flex', alignItems:'center', gap:6, padding:'5px 11px', borderRadius:6, border:`1px solid ${theme.terracottaInk}`, background:theme.terracottaSoft, color:theme.terracottaInk, fontSize:11.5, fontWeight:600, cursor:'pointer', fontFamily:theme.sans}}>
                      <Trash2 size={12} strokeWidth={1.8}/>Revoke
                    </button>}
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </Card>

    {/* Issue new token modal */}
    {showIssue && (
      <div onClick={()=>setShowIssue(false)} style={{position:'fixed', inset:0, background:'rgba(31,42,46,0.32)', display:'flex', alignItems:'center', justifyContent:'center', zIndex:200}}>
        <div onClick={e=>e.stopPropagation()} style={{background:theme.panel, borderRadius:12, border:`1px solid ${theme.line}`, padding:24, width:480, boxShadow:'0 24px 60px rgba(31,42,46,0.18)'}}>
          <Eyebrow>Deployment · Issue token</Eyebrow>
          <h2 style={{fontFamily:theme.serif, fontSize:22, color:theme.ink, fontWeight:500, margin:'4px 0 14px'}}>Issue a new enrollment token</h2>
          <div style={{display:'grid', gap:14, fontSize:13, color:theme.muted}}>
            <div>
              <div style={{fontSize:11, fontWeight:600, marginBottom:4, color:theme.muted, textTransform:'uppercase', letterSpacing:1.2}}>Label</div>
              <input defaultValue="New token" style={{width:'100%', padding:'9px 12px', border:`1px solid ${theme.line}`, borderRadius:8, fontSize:13, color:theme.ink, background:theme.panel, outline:'none'}}/>
            </div>
            <div>
              <div style={{fontSize:11, fontWeight:600, marginBottom:4, color:theme.muted, textTransform:'uppercase', letterSpacing:1.2}}>Validity</div>
              <select defaultValue="24h" style={{width:'100%', padding:'9px 12px', border:`1px solid ${theme.line}`, borderRadius:8, fontSize:13, color:theme.ink, background:theme.panel, outline:'none'}}>
                <option value="24h">24 hours</option>
                <option value="7d">7 days</option>
                <option value="30d">30 days</option>
              </select>
            </div>
            <div>
              <div style={{fontSize:11, fontWeight:600, marginBottom:4, color:theme.muted, textTransform:'uppercase', letterSpacing:1.2}}>Use cap</div>
              <select defaultValue="unlimited" style={{width:'100%', padding:'9px 12px', border:`1px solid ${theme.line}`, borderRadius:8, fontSize:13, color:theme.ink, background:theme.panel, outline:'none'}}>
                <option value="unlimited">Unlimited</option>
                <option value="50">50 enrollments</option>
                <option value="200">200 enrollments</option>
              </select>
            </div>
          </div>
          <div style={{marginTop:18, display:'flex', justifyContent:'flex-end', gap:8}}>
            <Button small onClick={()=>setShowIssue(false)}>Cancel</Button>
            <Button small primary onClick={issueToken}>Issue token</Button>
          </div>
        </div>
      </div>
    )}
  </div>
);
};

const BrowserPlugins = () => (
  <div>
    <SectionTitle eyebrow="Plugins · Browser" title="Browser extensions observed on endpoints"/>
    <Card padded={false}>
      <table style={{width:'100%', borderCollapse:'collapse', fontSize:13}}>
        <thead><tr style={{borderBottom:`1px solid ${theme.line}`}}>
          {['Extension','Publisher','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>
          {[
            {n:'ChatGPT for Google', p:'OpenAI (unofficial)', users:28, risk:'medium', cat:'AI Assist'},
            {n:'Claude for Chrome', p:'Anthropic', users:41, risk:'low', cat:'AI Assist'},
            {n:'Grammarly', p:'Grammarly Inc.', users:37, risk:'medium', cat:'Writing'},
            {n:'Merlin AI', p:'Foyer', users:6, risk:'high', cat:'AI Assist'},
            {n:'Perplexity Companion', p:'Perplexity', users:19, risk:'low', cat:'Search'},
          ].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.p}</td>
              <td style={{padding:'14px 16px'}}><Pill tone="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>
);

const LLMConnectors = () => (
  <div>
    <SectionTitle eyebrow="Settings · LLM" title="Classifier engine LLM connectors"
      actions={<Button primary icon={Plug} small>Add connector</Button>}/>
    <p style={{color:theme.muted, maxWidth:680, marginTop:-10, marginBottom:24, fontSize:13.5, lineHeight:1.6}}>
      Vyuu's primary classifier is on-device MiniLM (ONNX). For high-ambiguity cases and enrichment, Vyuu can escalate to a cloud or local LLM. BFSI customers should prefer local Ollama.
    </p>
    <div style={{display:'grid', gridTemplateColumns:'repeat(2,1fr)', gap:16}}>
      {[
        {n:'Anthropic Claude', model:'claude-sonnet-4-5', status:'connected', role:'Escalation (ambiguous)', badge:'Primary'},
        {n:'OpenAI', model:'gpt-4o-mini', status:'connected', role:'Backup', badge:null},
        {n:'Ollama (on-prem)', model:'llama3.1:8b-instruct', status:'connected', role:'BFSI / air-gapped', badge:'Recommended · BFSI'},
        {n:'Azure OpenAI', model:'not configured', status:'not connected', role:'—', badge:null},
      ].map(c=>(
        <Card key={c.n}>
          <div style={{display:'flex', justifyContent:'space-between', alignItems:'flex-start', marginBottom:14}}>
            <div>
              <div style={{fontFamily:theme.serif, fontSize:17, color:theme.ink, fontWeight:500}}>{c.n}</div>
              <div style={{fontFamily:theme.mono, fontSize:12, color:theme.muted, marginTop:4}}>{c.model}</div>
            </div>
            <Pill tone={c.status==='connected'?'orange':'neutral'}>{c.status}</Pill>
          </div>
          <div style={{fontSize:12, color:theme.muted, marginBottom:14}}>{c.role}</div>
          <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', paddingTop:12, borderTop:`1px solid ${theme.lineSoft}`}}>
            {c.badge ? <Pill tone={c.badge.includes('BFSI')?'amber':'ocean'}>{c.badge}</Pill> : <span/>}
            <Button small>{c.status==='connected'?'Configure':'Connect'}</Button>
          </div>
        </Card>
      ))}
    </div>
  </div>
);

Object.assign(window, {Overview, EventsView, PromptPolicy, Devices, Downloads, BrowserPlugins, LLMConnectors, EventsTable, MOCK_DEVICES});