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

function SurfaceMap() {
  const [filter, setFilter] = useStateS2('all');
  const items = SURFACE.filter(r => {
    if (filter === 'all') return true;
    if (filter === 'preauth') return r.tag === 'pre-auth' || r.tag === 'leaked' || r.tag === 'public';
    if (filter === 'auth') return r.tag === 'auth' || r.tag === 'admin';
    if (filter === 'graphql') return r.tag === 'graphql';
    return true;
  });
  return (
    <>
      <div className="section-head">
        <div>
          <h1>
            <span className="tag">ATLAS · RECON</span>
            Attack surface map
          </h1>
          <div className="sub">subdomains · DNS history · JS artefacts · archived pages — assembled before the engagement begins</div>
        </div>
        <div className="actions">
          <button className="btn ghost"><I.refresh/> Re-walk</button>
          <button className="btn"><I.download/> Export OpenAPI diff</button>
        </div>
      </div>
      <div className="list-toolbar">
        <input type="text" placeholder="filter endpoints / hosts / params"/>
        <div className="seg-group">
          {[['all','all (2,841)'],['preauth','pre-auth (412)'],['auth','authed (2,114)'],['graphql','graphql (38)']].map(([k,l]) =>
            <button key={k} className={filter===k?'on':''} onClick={()=>setFilter(k)}>{l}</button>)}
        </div>
        <div className="spacer"/>
        <span style={{fontFamily:'var(--font-mono)',fontSize:11,color:'var(--text-2)'}}>last walk · 14m ago</span>
      </div>
      <div className="content" style={{padding:0}}>
        <div className="surface">
          <div className="row" style={{color:'var(--text-3)',fontSize:10,letterSpacing:'0.1em',textTransform:'uppercase',background:'var(--bg-1)',borderBottom:'1px solid var(--line)'}}>
            <span>endpoint</span><span style={{textAlign:'center'}}>method</span><span style={{textAlign:'center'}}>status</span><span style={{textAlign:'right'}}>tag</span>
          </div>
          {items.map((r,i) => (
            <div key={i} className="row">
              <span className="url"><span className="scheme">https://</span>{r.url.replace('https://','')}</span>
              <span className={`meth ${r.m}`}>{r.m}</span>
              <span className={`status s${String(r.s).charAt(0)}`}>{r.s}</span>
              <span className="tag">{r.tag}</span>
            </div>
          ))}
        </div>
      </div>
    </>
  );
}

function FindingsList({ openFinding }) {
  return (
    <>
      <div className="section-head">
        <div>
          <h1><span className="tag">ATLAS · WEB</span>Findings</h1>
          <div className="sub">validated by Track B · ready for client-facing report</div>
        </div>
        <div className="actions">
          <button className="btn ghost"><I.filter/> Filter</button>
          <button className="btn"><I.download/> Evidence pack</button>
          <button className="btn primary"><I.doc/> Render report</button>
        </div>
      </div>
      <div className="content" style={{padding:0,overflow:'auto'}}>
        <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">
          {FINDINGS.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">
                {f.logic && <span className="badge">LOGIC</span>}
                {f.cipher && <span className="badge" style={{borderColor:'var(--accent-line)'}}>CIPHER</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>
    </>
  );
}

window.SurfaceMap = SurfaceMap;
window.FindingsList = FindingsList;