/* global React, I, FINDINGS */
const { useState: useStateE } = React;

// ============ Suppressed (CIPHER noise) ============
function Suppressed() {
  const ROWS = [
    { cat:'baseline-tls',          count:204, src:'ZAP',     reason:'matches customer-stack TLS profile (HSTS preload, ALPN h2)' },
    { cat:'header.x-powered-by',   count:188, src:'ZAP+Burp',reason:'ubiquitous · low-signal · already in remediation backlog' },
    { cat:'cookie.samesite',       count:97,  src:'ZAP',     reason:'set at edge · suppressed for non-auth domains' },
    { cat:'cors.wildcard.preflight',count:71, src:'Burp',    reason:'OPTIONS reflection · auth required on actual verb' },
    { cat:'cve.match.outdated.lib',count:62,  src:'Nuclei',  reason:'lib pinned in vendor.dd92.js · not exploitable in shipped path' },
    { cat:'directory.listing.assets',count:48,src:'ffuf',    reason:'static asset bucket · public by design' },
    { cat:'verbose.error.404',     count:42,  src:'Burp',    reason:'low-signal · framework default page' },
    { cat:'sni.mismatch',          count:38,  src:'Nuclei',  reason:'cloudflare edge artefact · not customer-controlled' },
    { cat:'csp.report-only',       count:24,  src:'ZAP',     reason:'report-only header · not enforced — informational' },
    { cat:'http.options.allowed',  count:22,  src:'Nuclei',  reason:'CORS-required behaviour' },
    { cat:'banner.disclosure.nginx',count:18, src:'Nuclei',  reason:'edge banner · suppressed across cloudflare estate' },
    { cat:'duplicate.idor.candidate',count:14,src:'CIPHER',  reason:'collapsed into F-0040 · same root cause' },
  ];
  return (
    <>
      <div className="section-head">
        <div><h1><span className="tag">CIPHER · WEB</span>Suppressed</h1>
          <div className="sub">812 events suppressed across 12 categories — each suppression is reviewable and reversible</div></div>
        <div className="actions">
          <button className="btn ghost"><I.refresh/> Re-classify</button>
          <button className="btn"><I.download/> Audit log</button>
        </div>
      </div>
      <div className="content" style={{padding:0}}>
        <div className="surface">
          <div className="row" style={{gridTemplateColumns:'1.4fr 80px 100px 2fr 60px',background:'var(--bg-1)',color:'var(--text-3)',fontSize:10,letterSpacing:'0.1em',textTransform:'uppercase'}}>
            <span>category</span><span style={{textAlign:'right'}}>count</span><span>source</span><span>reason</span><span style={{textAlign:'right'}}>action</span>
          </div>
          {ROWS.map((r,i)=>(
            <div key={i} className="row" style={{gridTemplateColumns:'1.4fr 80px 100px 2fr 60px'}}>
              <span style={{color:'var(--text-0)',fontFamily:'var(--font-mono)',fontSize:11.5}}>{r.cat}</span>
              <span style={{color:'var(--text-2)',fontFamily:'var(--font-mono)',fontSize:11,textAlign:'right'}}>{r.count}</span>
              <span style={{color:'var(--text-1)',fontFamily:'var(--font-mono)',fontSize:11}}>{r.src}</span>
              <span style={{color:'var(--text-2)',fontFamily:'var(--font-mono)',fontSize:11}}>{r.reason}</span>
              <span style={{textAlign:'right'}}><span className="tag" style={{cursor:'pointer'}}>restore</span></span>
            </div>
          ))}
        </div>
      </div>
    </>
  );
}

// ============ Logic candidates ============
function LogicCandidates({ openFinding }) {
  const items = FINDINGS.filter(f => f.logic);
  const more = [
    { id:'F-0029', sev:'med',  title:'Coupon stacking — 2 sequential redemptions accepted', target:'/api/v2/checkout/coupon', src:'CIPHER', conf:0.71, age:'2h', logic:true },
    { id:'F-0028', sev:'med',  title:'Refund ≥ original total (negative balance)', target:'/api/v2/orders/{id}/refund', src:'CIPHER', conf:0.66, age:'2h', logic:true },
    { id:'F-0027', sev:'high', title:'2FA enrolment skip via X-Skip-MFA header', target:'/auth/2fa/enrol', src:'Burp+CIPHER', conf:0.81, age:'3h', logic:true, cipher:true },
    { id:'F-0026', sev:'med',  title:'Race in /api/v2/me/email — second token clobbers first', target:'/api/v2/me/email', src:'CIPHER', conf:0.62, age:'4h', logic:true },
  ];
  const all = [...items, ...more];
  return (
    <>
      <div className="section-head">
        <div><h1><span className="tag">CIPHER · WEB</span>Logic candidates</h1>
          <div className="sub">surfaced by CIPHER — patterns scanner heuristics deprioritise · need Track B reviewer eyes</div></div>
        <div className="actions">
          <button className="btn primary" onClick={() => openFinding(all[0].id)}><I.brain/> Open lead candidate</button>
        </div>
      </div>
      <div className="content" style={{padding:0}}>
        <div className="findings-head">
          <span></span><span>SEV</span><span>FINDING</span><span>TARGET</span><span>SOURCE</span><span>CONF</span><span>AGE</span>
        </div>
        <div className="findings">
          {all.map(f => (
            <div key={f.id} className="finding" onClick={() => openFinding(f.id)}>
              <span className="check"/>
              <span className={`sev ${f.sev}`}>{f.sev}</span>
              <span className="title"><span className="badge">LOGIC</span>{f.title}</span>
              <span className="target">{f.target}</span>
              <span className="src">{f.src}</span>
              <span className="conf"><div className="bar"><i style={{width:`${f.conf*100}%`}}/></div>{(f.conf*100).toFixed(0)}%</span>
              <span className="age">{f.age}</span>
            </div>
          ))}
        </div>
      </div>
    </>
  );
}

// ============ Evidence vault ============
function EvidenceVault() {
  const PACKS = [
    { id:'evx-0042', f:'F-0042', size:'4.2mb', items:'req · resp · har · macro · video', sealed:'04:18:22', op:'r.shibata' },
    { id:'evx-0041', f:'F-0041', size:'2.8mb', items:'req · resp · sqlmap dump · har',    sealed:'04:11:08', op:'r.shibata' },
    { id:'evx-0040', f:'F-0040', size:'1.4mb', items:'req · resp · har',                   sealed:'04:08:14', op:'k.okafor' },
    { id:'evx-0039', f:'F-0039', size:'612kb', items:'token · forged · jwt_tool log',      sealed:'03:56:01', op:'k.okafor' },
    { id:'evx-0038', f:'F-0038', size:'2.1mb', items:'req · resp · har · video',           sealed:'03:47:33', op:'r.shibata' },
    { id:'evx-0037', f:'F-0037', size:'88kb',  items:'introspection sdl · req',            sealed:'03:40:18', op:'k.okafor' },
  ];
  return (
    <>
      <div className="section-head">
        <div><h1><span className="tag">VAULT</span>Evidence vault</h1>
          <div className="sub">hardware-backed · sealed per finding · auto-purge per ROE retention policy</div></div>
        <div className="actions">
          <button className="btn ghost"><I.download/> Export pack</button>
          <button className="btn"><I.shield/> Audit chain</button>
        </div>
      </div>
      <div className="content" style={{padding:0}}>
        <div className="surface">
          <div className="row" style={{gridTemplateColumns:'120px 80px 80px 1.6fr 100px 100px',background:'var(--bg-1)',color:'var(--text-3)',fontSize:10,letterSpacing:'0.1em',textTransform:'uppercase'}}>
            <span>vault id</span><span>finding</span><span>size</span><span>contains</span><span>operator</span><span style={{textAlign:'right'}}>sealed</span>
          </div>
          {PACKS.map(p => (
            <div key={p.id} className="row" style={{gridTemplateColumns:'120px 80px 80px 1.6fr 100px 100px'}}>
              <span style={{color:'var(--accent)',fontFamily:'var(--font-mono)',fontSize:11}}>{p.id}</span>
              <span style={{color:'var(--text-0)',fontFamily:'var(--font-mono)',fontSize:11}}>{p.f}</span>
              <span style={{color:'var(--text-2)',fontFamily:'var(--font-mono)',fontSize:11}}>{p.size}</span>
              <span style={{color:'var(--text-1)',fontFamily:'var(--font-mono)',fontSize:11}}>{p.items}</span>
              <span style={{color:'var(--text-1)',fontFamily:'var(--font-mono)',fontSize:11}}>{p.op}</span>
              <span style={{color:'var(--text-2)',fontFamily:'var(--font-mono)',fontSize:11,textAlign:'right'}}>{p.sealed}</span>
            </div>
          ))}
        </div>
      </div>
    </>
  );
}

// ============ Report draft ============
function ReportDraft() {
  return (
    <>
      <div className="section-head">
        <div><h1><span className="tag">DELIVERABLE</span>Report draft</h1>
          <div className="sub">v0.4 · auto-assembled from validated findings · last regenerated 2m ago</div></div>
        <div className="actions">
          <button className="btn ghost"><I.refresh/> Regenerate</button>
          <button className="btn"><I.download/> PDF</button>
          <button className="btn primary"><I.ext/> Send to Gateway</button>
        </div>
      </div>
      <div className="content">
        <div className="grid-2">
          <div className="panel">
            <div className="panel-head"><div className="title">SECTIONS</div></div>
            <div className="panel-body" style={{padding:0,fontFamily:'var(--font-mono)',fontSize:11.5}}>
              {[
                ['1. Executive summary',         'auto · CIPHER',    'ready'],
                ['2. Engagement scope',          'manual · validated','ready'],
                ['3. Methodology · Track A/B',   'template',          'ready'],
                ['4. Findings · critical (2)',   'manual',            'ready'],
                ['5. Findings · high (4)',       'manual',            'ready'],
                ['6. Findings · medium (3)',     'manual',            'in review'],
                ['7. Findings · low/info (3)',   'auto',              'in review'],
                ['8. Logic candidates appendix', 'manual',            'draft'],
                ['9. Suppressed (audit appendix)','auto',             'pending'],
                ['10. Remediation prioritised',  'CIPHER · reviewed', 'in review'],
                ['11. Retest plan',              'manual',            'pending'],
              ].map((r,i)=>(
                <div key={i} style={{display:'grid',gridTemplateColumns:'1.6fr 1fr 80px',padding:'8px 12px',borderBottom:'1px solid var(--line)'}}>
                  <span style={{color:'var(--text-0)'}}>{r[0]}</span>
                  <span style={{color:'var(--text-2)'}}>{r[1]}</span>
                  <span style={{color:r[2]==='ready'?'var(--ok)':r[2]==='in review'?'var(--warn)':'var(--text-3)',textAlign:'right'}}>{r[2]}</span>
                </div>
              ))}
            </div>
          </div>
          <div className="panel">
            <div className="panel-head"><div className="title">EXECUTIVE SUMMARY · DRAFT</div></div>
            <div className="panel-body" style={{fontFamily:'var(--font-sans)',fontSize:13,color:'var(--text-1)',lineHeight:1.65}}>
              <p>Across the two-week engagement on <b style={{color:'var(--text-0)'}}>shop.merid.example.com</b>, Authify Labs identified <b style={{color:'var(--accent)'}}>2 critical</b>, <b style={{color:'var(--high)'}}>4 high</b>, and <b style={{color:'var(--warn)'}}>3 medium</b> exploitable issues, plus 9 business-logic candidates surfaced by CIPHER that scanner heuristics deprioritised.</p>
              <p>The most material exposure is an authentication bypass on the admin sub-router (F-0042), reachable from a low-privilege member account by adding an internal-network <code style={{color:'var(--accent)'}}>X-Forwarded-For</code> header on the staging tier. The same pattern enables a privilege-escalation chain to <code>superadmin</code> and to long-lived API tokens.</p>
              <p>Two parallel issues — IDOR on order detail (F-0040) and JWT <code>alg=none</code> acceptance on the staging issuer (F-0039) — compound the blast radius if F-0042 is exploited at scale.</p>
              <p style={{color:'var(--text-2)'}}>The remediation section prioritises the edge-trust fix first; everything else can be sequenced behind it.</p>
            </div>
          </div>
        </div>

        <div style={{marginTop:12}} className="panel">
          <div className="panel-head"><div className="title">CLIENT GATEWAY · PREVIEW</div><div className="actions"><span className="lnk">view as client ↗</span></div></div>
          <div className="panel-body" style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:10}}>
            {[['CRITICAL',2,'var(--accent)'],['HIGH',4,'var(--high)'],['MEDIUM',3,'var(--warn)'],['LOW/INFO',3,'var(--text-1)']].map((c,i)=>(
              <div key={i} style={{padding:'14px 16px',background:'var(--bg-2)',borderRadius:6,border:'1px solid var(--line)'}}>
                <div style={{fontFamily:'var(--font-mono)',fontSize:10,letterSpacing:'0.1em',color:'var(--text-2)'}}>{c[0]}</div>
                <div style={{fontFamily:'var(--font-mono)',fontSize:28,color:c[2],fontWeight:600,marginTop:4}}>{c[1]}</div>
                <div style={{fontFamily:'var(--font-mono)',fontSize:10,color:'var(--text-3)'}}>findings ready for client</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </>
  );
}

window.Suppressed = Suppressed;
window.LogicCandidates = LogicCandidates;
window.EvidenceVault = EvidenceVault;
window.ReportDraft = ReportDraft;