// ============================================================
// hifi-web-admin.jsx — Web App: Admin sub-pages (uses WebShell)
// HFWebAdmin({screen}) — organization|users|teams|registry|sso|audit|export|gestures
// ============================================================
const ADMIN_ITEMS = ['Organization','Users','Divisions & Teams','Devices','SSO','Audit Log','Export Controls','Gesture Templates'];

function AdminWrap({active, title, eyebrow, cta, children}){
  return (
    <WebShell active="Admin">
      <Row gap={16} align="flex-start">
        <SubNav items={ADMIN_ITEMS} active={active} label="Admin" width={196}/>
        <div style={{flex:1,minWidth:0}}>
          <ScreenHead eyebrow={eyebrow} title={title} size={30} right={cta}/>
          {children}
        </div>
      </Row>
    </WebShell>
  );
}

function AOrg(){
  return (
    <AdminWrap active="Organization" eyebrow="Organization settings" title="Organization" cta={<Btn variant="primary">Save</Btn>}>
      <Row gap={14} align="stretch">
        <Card pad={16} style={{flex:1}}>
          <Lbl>Organization Profile</Lbl>
          <Row gap={12} align="center" style={{marginTop:12}}><div style={{width:48,height:48,borderRadius:10,background:'var(--panel-2)',border:'1px solid var(--line)',display:'flex',alignItems:'center',justifyContent:'center'}}><AegisMark size={26} color="var(--taupe)"/></div><Btn variant="ghost">Upload logo</Btn></Row>
          <Col gap={11} style={{marginTop:14}}><Field label="Name" value="JSOC Task Force Alpha"/><Field label="Contract ID" value="W911-26-AC-0042"/><Field label="Primary contact" value="K. Vance"/></Col>
        </Card>
        <Col gap={14} style={{flex:1}}>
          <Card pad={16}><Lbl>Classification Banner</Lbl><Col gap={10} style={{marginTop:10}}><Row justify="space-between" align="center"><span style={{fontSize:12.5,color:'var(--text)'}}>Level</span><Chip>CUI ▾</Chip></Row><div className="hf-cui" style={{borderRadius:7,border:'1px solid #2A2008'}}><span className="pin"/>CONTROLLED UNCLASSIFIED INFORMATION // ITAR</div><div className="hf-label" style={{fontSize:9.5}}>Applies across all platforms</div></Col></Card>
          <Card pad={16}><Lbl>Data Retention</Lbl><Col gap={10} style={{marginTop:10}}>{[['Events','365 days'],['Audit logs','7 years'],['Reports','180 days']].map((r,i)=>(<Row key={i} justify="space-between" align="center"><span style={{fontSize:12.5,color:'var(--text)'}}>{r[0]}</span><Chip>{r[1]} ▾</Chip></Row>))}<Row justify="space-between" align="center"><span style={{fontSize:12.5,color:'var(--text)'}}>Legal hold</span><Toggle on={false}/></Row></Col></Card>
        </Col>
      </Row>
    </AdminWrap>
  );
}

function AUsers(){
  const rows=[['M. Operator','m.op@…','HW Technician','Signals','Bravo','ok','Active'],
    ['J. Reyes','j.reyes@…','Ops Analyst','Recon','—','ok','Active'],
    ['K. Vance','k.vance@…','Org Admin','—','—','ok','Active'],
    ['T. Cole','t.cole@…','Field Operator','Signals','Bravo','off','Invited'],
    ['D. Park','d.park@…','Viewer','Recon','Alpha','off','Disabled'],
    ['S. Iyer','s.iyer@…','Ops Analyst','Signals','Echo','ok','Active']];
  return (
    <AdminWrap active="Users" eyebrow="42 users · 6 roles" title="User Management" cta={<Btn variant="primary">＋ Invite user</Btn>}>
      <Row gap={8} style={{marginBottom:12}}><Field value="" ph="⌕ Search users…" w={240}/><Chip>Role ▾</Chip><Chip>Division ▾</Chip><Chip>Status ▾</Chip></Row>
      <Card pad={0} style={{overflow:'hidden'}}>
        <table className="hf-tbl"><thead><tr><th>Name</th><th>Email</th><th>Role</th><th>Division</th><th>Team</th><th style={{width:110}}>Status</th><th style={{width:40}}></th></tr></thead>
        <tbody>{rows.map((r,i)=>(<tr key={i}><td style={{color:'var(--paper)'}}>{r[0]}</td><td><Mono style={{fontSize:11,color:'var(--text-mute)'}}>{r[1]}</Mono></td><td>{r[2]}</td><td>{r[3]}</td><td>{r[4]}</td><td><Badge s={r[5]} label={r[6]}/></td><td><span className="hf-label" style={{fontSize:13}}>⋯</span></td></tr>))}</tbody></table>
      </Card>
    </AdminWrap>
  );
}

function ATeams(){
  return (
    <AdminWrap active="Divisions & Teams" eyebrow="Hierarchy management" title="Divisions &amp; Teams" cta={<Btn variant="primary">＋ Division</Btn>}>
      <Row gap={14} align="stretch">
        <Card pad={14} style={{flex:'1.2'}}>
          {[['Signals Division',['Team Bravo · 6 · 24 dev','Team Echo · 4 · 12 dev']],['Recon Division',['Team Alpha · 5 · 18 dev','Watch Floor · 8 · 0 dev']]].map((d,i)=>(
            <div key={i} style={{marginTop:i?14:0}}>
              <Row gap={8} align="center"><span style={{color:'var(--text-mute)'}}>⠿</span><div style={{fontSize:13,fontWeight:600,color:'var(--paper)'}}>{d[0]}</div><span className="hf-label" style={{marginLeft:'auto',fontSize:10,color:'var(--maint)'}}>＋ Team</span></Row>
              <Col gap={7} style={{marginTop:8,marginLeft:16}}>{d[1].map((t,j)=>(<div key={j} className="hf-card-2" style={{padding:'9px 11px',display:'flex',alignItems:'center',gap:9}}><span style={{color:'var(--text-mute)'}}>⠿</span><span style={{fontSize:12,color:'var(--text)',flex:1}}>{t}</span><span className="hf-label" style={{fontSize:12}}>⋯</span></div>))}</Col>
            </div>
          ))}
        </Card>
        <Card pad={16} style={{flex:1}}><Lbl>Team Bravo</Lbl>
          <div className="hf-label" style={{marginTop:12}}>Members · 6</div>
          <Col gap={7} style={{marginTop:8}}>{['M. Operator','T. Cole','J. Reyes'].map((m,i)=>(<Row key={i} gap={9} align="center"><div className="hf-avatar" style={{width:24,height:24,fontSize:9}}>{m.split(' ')[1][0]}</div><span style={{fontSize:12,color:'var(--text)'}}>{m}</span></Row>))}<span className="hf-label" style={{fontSize:10}}>+3 more</span></Col>
          <Row gap={8} style={{marginTop:14}}><Btn variant="ghost" style={{flex:1}}>Rename</Btn><Btn variant="danger" style={{flex:1}}>Archive</Btn></Row>
        </Card>
      </Row>
    </AdminWrap>
  );
}

function ARegistry(){
  const rows=[['7740-AC-22','Sensor','Bravo','ok','2025-08','Active'],
    ['7741-AC-09','Sensor','Bravo','warn','2025-08','Active'],
    ['3320-AC-77','Relay','Alpha','ok','2025-06','Active'],
    ['5512-AC-41','Relay','—','off','2024-11','Spare'],
    ['1180-AC-02','Relay','—','off','2023-02','Decommissioned']];
  return (
    <AdminWrap active="Devices" eyebrow="Authoritative device registry" title="Device Registry" cta={<Row gap={8}><Btn variant="ghost">Transfer</Btn><Btn variant="primary">＋ Register</Btn></Row>}>
      <Row gap={8} style={{marginBottom:12}}><Field value="" ph="⌕ Serial / type" w={220}/><Chip>Team ▾</Chip><Chip>Type ▾</Chip><Chip>Lifecycle ▾</Chip></Row>
      <Card pad={0} style={{overflow:'hidden'}}>
        <table className="hf-tbl"><thead><tr><th style={{width:34}}>☑</th><th>Serial</th><th>Type</th><th>Team</th><th style={{width:110}}>Status</th><th>Registered</th><th>Lifecycle</th><th style={{width:40}}></th></tr></thead>
        <tbody>{rows.map((r,i)=>(<tr key={i}><td><span style={{width:14,height:14,borderRadius:4,border:'1px solid var(--line)',display:'inline-block',background:i===1?'var(--royal)':'transparent'}}/></td><td><Mono style={{color:'var(--paper)'}}>{r[0]}</Mono></td><td>{r[1]}</td><td>{r[2]}</td><td><Badge s={r[3]}/></td><td><Mono style={{fontSize:11,color:'var(--text-mute)'}}>{r[4]}</Mono></td><td><span style={{fontSize:11.5,color:r[5]==='Decommissioned'?'var(--text-mute)':'var(--text)'}}>{r[5]}</span></td><td><span className="hf-label" style={{fontSize:13}}>⋯</span></td></tr>))}</tbody></table>
      </Card>
    </AdminWrap>
  );
}

function ASSO(){
  return (
    <AdminWrap active="SSO" eyebrow="Identity provider" title="SSO / IdP Configuration" cta={<Btn variant="primary">Save</Btn>}>
      <Row gap={14} align="stretch">
        <Card pad={16} style={{flex:1}}>
          <Row justify="space-between" align="center"><Lbl>Provider</Lbl><Seg items={['SAML 2.0','OIDC']} active="SAML 2.0"/></Row>
          <Col gap={11} style={{marginTop:14}}>
            <Field label="SSO URL" value="https://idp.jsoc-tfa.mil/sso"/>
            <Field label="Entity ID / Issuer" value="urn:aegis-cognis:tfa"/>
            <Field label="ACS URL" value="https://aegis-cognis.app/acs"/>
            <Field label="Metadata URL" value="https://idp.jsoc-tfa.mil/meta.xml"/>
          </Col>
        </Card>
        <Col gap={14} style={{flex:1}}>
          <Card pad={16}><Lbl>Signing Certificate</Lbl><div className="hf-inset" style={{marginTop:10,padding:18,display:'flex',flexDirection:'column',alignItems:'center',gap:7,borderStyle:'dashed',borderColor:'var(--maint)'}}><Icon k="report" size={20} style={{color:'var(--maint)'}}/><span className="hf-label" style={{fontSize:10}}>Upload .pem / .cer</span></div><Row justify="space-between" style={{marginTop:10}}><span className="hf-label" style={{fontSize:10}}>Current</span><Mono style={{fontSize:11,color:'var(--text-dim)'}}>valid → 2027-01</Mono></Row></Card>
          <Card pad={16}><Row justify="space-between" align="center"><div><Lbl>Test Connection</Lbl><div className="hf-label" style={{fontSize:9.5,marginTop:4}}>Last test: passed · 2m ago</div></div><Btn variant="accent">Run Test</Btn></Row><Row gap={7} align="center" style={{marginTop:12}}><Dot s="ok"/><span style={{fontSize:11.5,color:'var(--text-dim)'}}>Round-trip OK · assertion verified</span></Row></Card>
        </Col>
      </Row>
    </AdminWrap>
  );
}

function AAudit(){
  const rows=[['14:20:11','M. Operator','HW Tech','Calibration completed','AC-3320','ok','OK'],
    ['14:02:55','K. Vance','Org Admin','User role changed','t.cole','ok','OK'],
    ['13:40:02','J. Reyes','HW Tech','Firmware OTA','AC-7740','ok','OK'],
    ['12:18:30','K. Vance','Org Admin','Device transfer','AC-5512','ok','OK'],
    ['11:55:09','System','—','Login (SSO)','d.park','crit','Denied'],
    ['11:02:44','S. Iyer','Ops Analyst','Report exported','—','ok','OK']];
  return (
    <AdminWrap active="Audit Log" eyebrow="ITAR compliance · immutable" title="Audit Log" cta={<Btn variant="accent"><Icon k="report" size={13}/> Export CSV</Btn>}>
      <Row gap={8} style={{marginBottom:12}}><Chip>User ▾</Chip><Chip>Action ▾</Chip><Chip>Device ▾</Chip><Chip><Icon k="cal" size={12}/> Last 24h</Chip></Row>
      <Card pad={0} style={{overflow:'hidden'}}>
        <table className="hf-tbl"><thead><tr><th style={{width:100}}>Timestamp</th><th>Actor</th><th>Role</th><th>Action</th><th>Target</th><th style={{width:100}}>Result</th></tr></thead>
        <tbody>{rows.map((r,i)=>(<tr key={i}><td><Mono style={{color:'var(--text-mute)'}}>{r[0]}</Mono></td><td style={{color:'var(--paper)'}}>{r[1]}</td><td>{r[2]}</td><td style={{color:'var(--text)'}}>{r[3]}</td><td><Mono style={{fontSize:11,color:'var(--text-dim)'}}>{r[4]}</Mono></td><td><Badge s={r[5]} label={r[6]}/></td></tr>))}</tbody></table>
      </Card>
    </AdminWrap>
  );
}

function AExport(){
  return (
    <AdminWrap active="Export Controls" eyebrow="Per-classification restrictions" title="Export Controls" cta={<Btn variant="primary">Save</Btn>}>
      <Card pad={0} style={{overflow:'hidden'}}>
        <table className="hf-tbl"><thead><tr><th>Role</th><th>Unclassified</th><th>CUI</th><th>ITAR</th></tr></thead>
        <tbody>{[['Super Admin',1,1,1],['Org Admin',1,1,1],['Ops Analyst',1,1,0],['HW Technician',1,0,0],['Viewer',0,0,0]].map((r,i)=>(
          <tr key={i}><td style={{color:'var(--paper)'}}>{r[0]}</td>{[1,2,3].map(j=><td key={j}>{r[j]?<span style={{color:'var(--ok)',fontWeight:700}}>✓</span>:<span style={{color:'var(--off)'}}>—</span>}</td>)}</tr>
        ))}</tbody></table>
      </Card>
      <Row gap={14} style={{marginTop:14}}>
        <Card pad={16} style={{flex:1}}><Lbl>Format Limits</Lbl><Col gap={10} style={{marginTop:10}}>{[['CSV','all levels'],['PDF','CUI and below'],['Raw payload','Super Admin']].map((r,i)=>(<Row key={i} justify="space-between" align="center"><span style={{fontSize:12.5,color:'var(--text)'}}>{r[0]}</span><Chip>{r[1]} ▾</Chip></Row>))}</Col></Card>
        <Card pad={16} style={{flex:1}}><Lbl>Restricted Preview</Lbl><Btn block style={{marginTop:14,opacity:.4}}>⬇ Export (disabled)</Btn><div className="hf-label" style={{fontSize:9.5,marginTop:10,textTransform:'none',letterSpacing:0,color:'var(--text-mute)'}}>“Export restricted. Contact your admin.”</div></Card>
      </Row>
    </AdminWrap>
  );
}

function AGestures(){
  return (
    <AdminWrap active="Gesture Templates" eyebrow="Curate · publish · audit" title="Gesture Templates" cta={<Row gap={8}><Btn variant="ghost">⬆ Import .agf</Btn><Btn variant="primary">＋ Create</Btn></Row>}>
      <Card pad={0} style={{overflow:'hidden',marginBottom:14}}>
        <table className="hf-tbl"><thead><tr><th>Template</th><th>Gesture</th><th>Shortcut</th><th style={{width:120}}>Status</th><th>Adoption</th><th style={{width:40}}></th></tr></thead>
        <tbody>
          {[['Backup call','up-down sweep','Request Backup','ok','Published','42'],
            ['Waypoint drop','figure-8','Mark Waypoint','ok','Published','31'],
            ['Drone recall','double-flick','Recall Drone ⚠','warn','Draft','—']].map((r,i)=>(
            <tr key={i}><td style={{color:'var(--paper)'}}>{r[0]}</td><td><Mono style={{fontSize:11,color:'var(--text-dim)'}}>{r[1]}</Mono></td><td style={{color:r[2].includes('⚠')?'var(--crit)':'var(--text)'}}>{r[2]}</td><td><Badge s={r[3]} label={r[4]}/></td><td><Mono style={{color:'var(--text-mute)'}}>{r[5]}</Mono></td><td><span className="hf-label" style={{fontSize:13}}>›</span></td></tr>
          ))}
        </tbody></table>
      </Card>
      <Row gap={14} align="stretch">
        <Card pad={16} style={{flex:1}}><Lbl>Selected · “Drone recall”</Lbl><div className="hf-inset" style={{padding:10,marginTop:10}}><Wave w={420} h={70} lines={[['taupe',1.2],['maint',1.9]]}/></div><Row gap={8} wrap style={{marginTop:10}}><Chip>Shortcut: Recall Drone</Chip><span className="hf-chip" style={{color:'var(--crit)',borderColor:'color-mix(in srgb,var(--crit) 50%,transparent)'}}>RESTRICTED</span><Chip>Confirm: required</Chip></Row><div className="hf-label" style={{marginTop:12}}>Publication scope</div><Row gap={8} style={{marginTop:6}}><Chip>Recon Division ✓</Chip><Chip>Team Bravo ✓</Chip></Row></Card>
      </Row>
      <Card pad={0} style={{overflow:'hidden',marginTop:14}}>
        <Row justify="space-between" align="center" style={{padding:'12px 14px'}}><Lbl>Gesture Binding Audit</Lbl><Row gap={6}><Chip>Operator ▾</Chip><Chip>Action ▾</Chip></Row></Row>
        <table className="hf-tbl"><thead><tr><th style={{width:70}}>Time</th><th>Operator</th><th>Device</th><th>Gesture</th><th>Shortcut</th><th>Action</th></tr></thead>
        <tbody>{[['14:20','M. Operator','AC-7740','up-down sweep','Request Backup','Created'],['12:05','J. Reyes','AC-7741','figure-8','Mark Waypoint','Adopted'],['09:44','K. Vance','AC-9008','double-flick','Recall Drone','Modified']].map((r,i)=>(<tr key={i}><td><Mono style={{color:'var(--text-mute)'}}>{r[0]}</Mono></td><td style={{color:'var(--paper)'}}>{r[1]}</td><td><Mono style={{fontSize:11}}>{r[2]}</Mono></td><td><Mono style={{fontSize:11,color:'var(--text-dim)'}}>{r[3]}</Mono></td><td>{r[4]}</td><td>{r[5]}</td></tr>))}</tbody></table>
      </Card>
    </AdminWrap>
  );
}

const ADMIN_SCREENS = {organization:AOrg, users:AUsers, teams:ATeams, registry:ARegistry, sso:ASSO, audit:AAudit, export:AExport, gestures:AGestures};
function HFWebAdmin({screen='users'}){ const C=ADMIN_SCREENS[screen]||AUsers; return <C/>; }
window.HFWebAdmin = HFWebAdmin;