// Admin Console
function ModuleAdmin() {
  const A = KS_DATA.admin;
  const [tab, setTab] = React.useState('overview');
  const tabs = [
    {id:'overview', l:'Overview'},
    {id:'users',    l:'Users & Roles'},
    {id:'audit',    l:'Audit Log'},
    {id:'compliance',l:'Compliance'},
    {id:'licenses', l:'Licenses'},
    {id:'settings', l:'Policies'},
  ];

  return (
    <div className="ks-module"
         style={{'--mod-current':'var(--mod-admin)', '--mod-current-tint':'var(--mod-admin-tint)'}}
         data-screen-label="admin">
      <div style={{padding:'8px 16px', background:'var(--white)', borderBottom:'1px solid var(--ink-150)', display:'flex', alignItems:'center', gap:12}}>
        <div style={{width:28, height:28, borderRadius:6, background: 'var(--mod-admin)', color:'white', display:'grid', placeItems:'center'}}>
          {IC.shieldCheck}
        </div>
        <div className="col" style={{lineHeight:1.2}}>
          <div style={{fontWeight:600, fontSize:13.5}}>Admin Console — Government of India</div>
          <div className="muted text-xs">MeitY tenant · 4,820 active users · <span style={{color:'var(--ok)'}}>All systems operational</span></div>
        </div>
        <div className="grow"/>
        <button className="btn">{IC.download} Export report</button>
        <button className="btn primary">{IC.plus} Invite users</button>
      </div>

      {/* Tabs */}
      <div style={{
        background:'var(--white)', borderBottom:'1px solid var(--ink-150)',
        padding:'0 20px', display:'flex', alignItems:'center', gap:2,
      }}>
        {tabs.map(t => (
          <button key={t.id} onClick={() => setTab(t.id)}
                  style={{
                    padding:'12px 14px', border:'none', background:'transparent',
                    fontSize:13,
                    fontWeight: tab === t.id ? 600 : 500,
                    color: tab === t.id ? 'var(--ink-900)' : 'var(--ink-600)',
                    borderBottom: tab === t.id ? '2px solid var(--ks-primary)' : '2px solid transparent',
                  }}>{t.l}</button>
        ))}
      </div>

      <div style={{flex:1, overflow:'auto', padding:'22px 28px', background:'var(--canvas)'}}>
        {tab === 'overview' && (
          <div style={{maxWidth: 1280, margin:'0 auto', display:'grid', gridTemplateColumns:'1fr 1fr 1fr 1fr', gap:16}}>
            {/* KPI cards */}
            {[
              {l:'Active users', v:'4,820', d:'+ 128 this month', c:'var(--ok)'},
              {l:'Licenses in use', v:'4,820 / 5,000', d:'96.4% · 180 unassigned', c:'var(--warn)'},
              {l:'Storage used', v:'342.7 / 500 TB', d:'68.5% · 32 TB this month', c:'var(--ok)'},
              {l:'Compliance score', v:'98.2%', d:'ISO · SOC 2 · DPDP', c:'var(--ok)'},
            ].map(k => (
              <div key={k.l} className="card">
                <div className="muted text-xs" style={{letterSpacing:'0.05em', textTransform:'uppercase', fontWeight:600}}>{k.l}</div>
                <div style={{fontSize:24, fontWeight:700, margin:'6px 0 2px', letterSpacing:'-0.01em'}}>{k.v}</div>
                <div style={{fontSize:12, color: k.c, fontWeight:550}}>{k.d}</div>
              </div>
            ))}

            {/* Org tree */}
            <div className="card" style={{gridColumn:'1 / 3'}}>
              <div className="row" style={{marginBottom:12}}>
                <div style={{fontSize:14, fontWeight:600}}>Organisation hierarchy</div>
                <div className="grow"/>
                <button className="btn ghost text-xs">Manage</button>
              </div>
              <div className="col gap-2">
                <div className="row gap-3" style={{padding:'10px 12px', background:'var(--ks-primary-tint)', borderRadius:8}}>
                  <div style={{color:'var(--ks-primary)'}}>{IC.building}</div>
                  <div className="col grow" style={{gap:0}}>
                    <div style={{fontWeight:600, fontSize:13}}>{A.orgTree[0].name}</div>
                    <div className="muted text-xs">Root organisation · 4,820 users</div>
                  </div>
                  <span className="chip info">Owner tenant</span>
                </div>
                {A.orgTree.slice(1).map(o => (
                  <div key={o.name} className="row gap-3" style={{padding:'8px 12px', marginLeft: 24, borderLeft:'1.5px solid var(--ink-200)', paddingLeft: 20}}>
                    <div style={{color:'var(--ink-500)'}}>{IC.building}</div>
                    <div className="col grow" style={{gap:0}}>
                      <div style={{fontSize:13, fontWeight:500}}>{o.name}</div>
                      <div className="muted text-xs">{o.users.toLocaleString('en-IN')} users</div>
                    </div>
                    <div className="row gap-2">
                      <span className="chip ok">Active</span>
                      <button className="ks-icon-btn">{IC.more}</button>
                    </div>
                  </div>
                ))}
              </div>
            </div>

            {/* Compliance */}
            <div className="card" style={{gridColumn:'3 / 5'}}>
              <div className="row" style={{marginBottom:12}}>
                <div style={{fontSize:14, fontWeight:600}}>Compliance & certifications</div>
                <div className="grow"/>
                <span className="chip ok">All current</span>
              </div>
              <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:8}}>
                {A.compliance.map(c => (
                  <div key={c.code} className="row gap-3" style={{padding:'8px 10px', border:'1px solid var(--ink-150)', borderRadius:6}}>
                    <div style={{width:28, height:28, borderRadius:6, background:'var(--ok-tint)', color:'var(--ok)', display:'grid', placeItems:'center'}}>{IC.shieldCheck}</div>
                    <div className="col" style={{gap:1, minWidth:0}}>
                      <div style={{fontSize:12.5, fontWeight:600}}>{c.code}</div>
                      <div className="muted text-xs" style={{overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap'}}>{c.status} · {c.renewed}</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>

            {/* Recent audit */}
            <div className="card" style={{gridColumn: '1 / 3'}}>
              <div className="row" style={{marginBottom:8}}>
                <div style={{fontSize:14, fontWeight:600}}>Recent audit events</div>
                <div className="grow"/>
                <button className="btn ghost text-xs" onClick={()=>setTab('audit')}>View all</button>
              </div>
              <table className="ks-table" style={{fontSize:12.5}}>
                <tbody>
                  {A.audit.slice(0, 6).map((row, i) => (
                    <tr key={i}>
                      <td className="mono text-xs" style={{color:'var(--ink-500)', width:70}}>{row[0]}</td>
                      <td className="mono text-xs" style={{color:'var(--ink-700)'}}>{row[1]}</td>
                      <td className="mono text-xs"><span className="chip" style={{fontSize:10, background: row[4]==='err'?'var(--err-tint)':row[4]==='warn'?'var(--warn-tint)':'var(--ink-100)', color: row[4]==='err'?'var(--err)':row[4]==='warn'?'var(--warn)':'var(--ink-700)'}}>{row[2]}</span></td>
                      <td>{row[3]}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>

            {/* Security score */}
            <div className="card" style={{gridColumn:'3 / 5'}}>
              <div className="row" style={{marginBottom:12}}>
                <div style={{fontSize:14, fontWeight:600}}>Security posture</div>
                <div className="grow"/>
                <span className="chip ok">Strong</span>
              </div>
              <div className="col gap-3">
                {[
                  {l:'Multi-factor authentication', v:'98%', c:'var(--ok)', d:'4,725 of 4,820 users enrolled'},
                  {l:'SSO adoption',                v:'100%', c:'var(--ok)', d:'SAML + OIDC via Keycloak'},
                  {l:'DLP policies',                v:'12 active', c:'var(--ok)', d:'PII detection · Aadhaar redaction'},
                  {l:'Encryption',                  v:'AES-256', c:'var(--ok)', d:'At rest + TLS 1.3 in transit'},
                  {l:'Air-gap deployment',          v:'Available', c:'var(--ok)', d:'For classified workspaces'},
                ].map(s => (
                  <div key={s.l} className="row">
                    <div style={{color:'var(--ok)', marginRight:10}}>{IC.check}</div>
                    <div className="col grow" style={{gap:0}}>
                      <div style={{fontSize:12.5, fontWeight:550}}>{s.l}</div>
                      <div className="muted text-xs">{s.d}</div>
                    </div>
                    <span style={{fontSize:12.5, fontFamily:'var(--f-mono)', color:s.c, fontWeight:600}}>{s.v}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        )}

        {tab === 'users' && (
          <div style={{maxWidth: 1280, margin:'0 auto'}}>
            <div className="row" style={{marginBottom:16}}>
              <div style={{fontSize:20, fontWeight:600}}>Users & Roles</div>
              <span className="chip" style={{marginLeft:8}}>{A.users.length * 605} total</span>
              <div className="grow"/>
              <div className="row gap-2">
                <button className="btn ghost text-sm">{IC.filter}</button>
                <button className="btn ghost text-sm">{IC.download}</button>
                <button className="btn primary">{IC.plus} Invite</button>
              </div>
            </div>
            <div className="card" style={{padding:0, overflow:'hidden'}}>
              <table className="ks-table">
                <thead>
                  <tr>
                    <th style={{width:34}}><input type="checkbox"/></th>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Designation</th>
                    <th>Department</th>
                    <th>Role</th>
                    <th>Status</th>
                    <th>Last active</th>
                    <th style={{width:40}}></th>
                  </tr>
                </thead>
                <tbody>
                  {A.users.map((u, i) => (
                    <tr key={i}>
                      <td><input type="checkbox"/></td>
                      <td>
                        <div className="row gap-3">
                          <div style={{width:26, height:26, borderRadius:999, background:['#0B4C8C','#0F7A3E','#B45309','#6B4EA0','#475569'][i%5], color:'white', fontSize:10.5, fontWeight:600, display:'grid', placeItems:'center'}}>{u[0].split(' ').map(s=>s[0]).join('').slice(0,2)}</div>
                          <span style={{fontWeight:500}}>{u[0]}</span>
                        </div>
                      </td>
                      <td className="mono text-xs muted">{u[1]}</td>
                      <td>{u[2]}</td>
                      <td>{u[3]}</td>
                      <td>
                        <span className="chip" style={{fontSize:11, background: u[4]==='Admin'?'var(--err-tint)':u[4]==='Approver'?'var(--ks-primary-tint)':u[4]==='Editor'?'var(--ok-tint)':'var(--ink-100)', color: u[4]==='Admin'?'var(--err)':u[4]==='Approver'?'var(--ks-primary)':u[4]==='Editor'?'var(--ok)':'var(--ink-700)'}}>{u[4]}</span>
                      </td>
                      <td>
                        <span className="row gap-2" style={{fontSize:12}}>
                          <div style={{width:6, height:6, borderRadius:999, background: u[5]==='Active'?'var(--ok)':u[5]==='Locked'?'var(--err)':'var(--ink-400)'}}/>
                          {u[5]}
                        </span>
                      </td>
                      <td className="muted text-xs">{u[6]}</td>
                      <td><button className="ks-icon-btn">{IC.more}</button></td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        )}

        {tab === 'audit' && (
          <div style={{maxWidth: 1280, margin:'0 auto'}}>
            <div className="row" style={{marginBottom:16}}>
              <div style={{fontSize:20, fontWeight:600}}>Audit Log</div>
              <span className="chip" style={{marginLeft:8}}>209,841 events · retained 7y</span>
              <div className="grow"/>
              <button className="btn ghost text-sm">{IC.filter}</button>
              <button className="btn ghost text-sm">{IC.download}</button>
            </div>
            <div className="card" style={{padding:0, overflow:'hidden'}}>
              <table className="ks-table">
                <thead>
                  <tr>
                    <th style={{width:100}}>Timestamp</th>
                    <th>Actor</th>
                    <th>Event</th>
                    <th>Target</th>
                    <th style={{width:70}}>Result</th>
                    <th style={{width:100}}>Source IP</th>
                  </tr>
                </thead>
                <tbody>
                  {A.audit.map((row, i) => (
                    <tr key={i}>
                      <td className="mono text-xs muted">2026-07-13 {row[0]}</td>
                      <td className="mono text-xs">{row[1]}</td>
                      <td className="mono text-xs"><span className="chip" style={{fontSize:10, background: row[4]==='err'?'var(--err-tint)':row[4]==='warn'?'var(--warn-tint)':'var(--ink-100)', color: row[4]==='err'?'var(--err)':row[4]==='warn'?'var(--warn)':'var(--ink-700)'}}>{row[2]}</span></td>
                      <td>{row[3]}</td>
                      <td>
                        <span className="chip" style={{fontSize:10.5, background: row[4]==='err'?'var(--err-tint)':row[4]==='warn'?'var(--warn-tint)':'var(--ok-tint)', color: row[4]==='err'?'var(--err)':row[4]==='warn'?'var(--warn)':'var(--ok)'}}>
                          {row[4]==='err'?'blocked':row[4]==='warn'?'warn':'ok'}
                        </span>
                      </td>
                      <td className="mono text-xs muted">10.42.{Math.floor(Math.random()*255)}.{Math.floor(Math.random()*255)}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        )}

        {tab === 'compliance' && (
          <div style={{maxWidth: 1280, margin:'0 auto', display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:16}}>
            {A.compliance.map(c => (
              <div key={c.code} className="card">
                <div className="row" style={{marginBottom:10}}>
                  <div style={{width:36, height:36, borderRadius:8, background:'var(--ok-tint)', color:'var(--ok)', display:'grid', placeItems:'center'}}>{IC.shieldCheck}</div>
                  <div className="grow"/>
                  <span className="chip ok" style={{fontSize:11}}>Compliant</span>
                </div>
                <div style={{fontSize:16, fontWeight:600}}>{c.code}</div>
                <div className="muted text-xs" style={{marginTop:4}}>{c.status} · {c.renewed}</div>
                <div className="divider" style={{margin:'12px 0'}}/>
                <div className="row gap-2">
                  <button className="btn ghost text-xs" style={{padding:'0 8px'}}>View report</button>
                  <button className="btn ghost text-xs" style={{padding:'0 8px'}}>Download</button>
                </div>
              </div>
            ))}

            <div className="card" style={{gridColumn:'1 / 4', background:'var(--ink-50)'}}>
              <div className="row gap-3">
                <div style={{color:'var(--ks-primary)'}}>{IC.shieldCheck}</div>
                <div>
                  <div style={{fontSize:13, fontWeight:600}}>Data residency</div>
                  <div className="muted text-sm" style={{marginTop:4}}>
                    All customer data resides within Indian sovereign infrastructure. Primary region: MeghRaj Mumbai (AZ-1);
                    disaster recovery: MeghRaj Hyderabad (AZ-2). No data is transferred outside Indian territory. Air-gapped
                    deployment available for classified workspaces (up to Secret classification with additional accreditation).
                  </div>
                </div>
              </div>
            </div>
          </div>
        )}

        {tab === 'licenses' && (
          <div style={{maxWidth: 1280, margin:'0 auto'}}>
            <div className="card" style={{marginBottom:16}}>
              <div className="row" style={{marginBottom:14}}>
                <div>
                  <div style={{fontSize:16, fontWeight:600}}>KaryaSuite V3 Enterprise · Government Edition</div>
                  <div className="muted text-sm" style={{marginTop:4}}>Contract MeitY/2026/PROC/1129 · Expires 31 Mar 2027</div>
                </div>
                <div className="grow"/>
                <button className="btn">Renew</button>
                <button className="btn primary">Purchase more</button>
              </div>
              <div style={{
                height:14, background:'var(--ink-100)', borderRadius:999, overflow:'hidden',
                marginBottom:8,
              }}>
                <div style={{
                  width:'96.4%', height:'100%',
                  background:'linear-gradient(90deg, var(--ks-primary), var(--warn))',
                }}/>
              </div>
              <div className="row" style={{justifyContent:'space-between', fontSize:12.5}}>
                <span className="muted">4,820 of 5,000 licenses assigned</span>
                <span style={{fontWeight:600}}>180 available</span>
              </div>
            </div>

            <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap: 16}}>
              {[
                {l:'Word Processor',  v:'4,820'},
                {l:'Spreadsheet',     v:'4,820'},
                {l:'Presentation',    v:'4,820'},
                {l:'PDF Studio',      v:'4,205'},
                {l:'Whiteboard',      v:'2,140'},
                {l:'Database',        v:'421 (specialist)'},
                {l:'AI Assistant',    v:'4,820'},
                {l:'Admin console',   v:'47 (delegated)'},
                {l:'Offline / local AI', v:'820'},
              ].map(m => (
                <div key={m.l} className="card">
                  <div className="muted text-xs" style={{textTransform:'uppercase', letterSpacing:'0.05em', fontWeight:600}}>{m.l}</div>
                  <div style={{fontSize:20, fontWeight:700, marginTop:4}}>{m.v}</div>
                </div>
              ))}
            </div>
          </div>
        )}

        {tab === 'settings' && (
          <div style={{maxWidth: 900, margin:'0 auto'}}>
            <div style={{fontSize:20, fontWeight:600, marginBottom:16}}>Policies</div>
            <div className="col gap-3">
              {[
                {l:'Multi-factor authentication', d:'Require MFA for all users. Currently: TOTP + hardware key optional.', on:true},
                {l:'External sharing',            d:'Documents may be shared with @gov.in, @nic.in domains only.', on:true},
                {l:'Data loss prevention',        d:'Scan and block Aadhaar, PAN, and bank account patterns in outbound files.', on:true},
                {l:'Retention',                   d:'Records classified as "Official" retained 7 years, "Secret" retained 25 years.', on:true},
                {l:'Watermarking',                d:'All documents printed or exported carry a user-identifying watermark.', on:true},
                {l:'AI training opt-out',         d:'Workspace data is never used to train foundation models.', on:true, locked:true},
                {l:'Legal hold',                  d:'When enabled, files under litigation cannot be deleted or altered.', on:false},
                {l:'On-premise AI models',        d:'Route AI inference to on-premise Karya-8B model rather than cloud.', on:true},
              ].map(p => (
                <div key={p.l} className="card">
                  <div className="row gap-3">
                    <div style={{width:36, height:36, borderRadius:8, background: p.on?'var(--ok-tint)':'var(--ink-100)', color: p.on?'var(--ok)':'var(--ink-500)', display:'grid', placeItems:'center'}}>{p.on?IC.check:IC.x}</div>
                    <div className="col grow" style={{gap:2}}>
                      <div className="row gap-2">
                        <div style={{fontWeight:600, fontSize:13.5}}>{p.l}</div>
                        {p.locked && <span className="chip" style={{fontSize:10, padding:'0 6px'}}>{IC.lock} Locked by contract</span>}
                      </div>
                      <div className="muted text-sm">{p.d}</div>
                    </div>
                    <div style={{
                      width:38, height:22, borderRadius:999,
                      background: p.on ? 'var(--ks-primary)' : 'var(--ink-300)',
                      position:'relative', flexShrink:0,
                    }}>
                      <div style={{
                        position:'absolute', top:2,
                        left: p.on ? 18 : 2,
                        width:18, height:18, borderRadius:'50%',
                        background:'white',
                        boxShadow:'0 1px 2px rgba(0,0,0,0.2)',
                      }}/>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

window.ModuleAdmin = ModuleAdmin;