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

// =============== Subdomains ===============
const SUBS = [
  { host: 'shop.merid.example.com', ip: '203.0.113.18', src: 'CT log', tech: 'nginx · cloudflare', risk: 'tracked' },
  { host: 'api.merid.example.com', ip: '203.0.113.21', src: 'CT log + DNS', tech: 'envoy · k8s', risk: 'tracked' },
  { host: 'staging.shop.merid.example.com', ip: '10.42.18.7', src: 'JS bundle', tech: 'nginx', risk: 'shadow', warn: true },
  { host: 'admin.merid.example.com', ip: '203.0.113.30', src: 'wayback', tech: 'unknown', risk: 'forgotten', warn: true },
  { host: 'edge.merid.example.com', ip: '203.0.113.18', src: 'cert SAN', tech: 'cloudflare', risk: 'tracked' },
  { host: 'ci.merid.example.com', ip: '203.0.113.44', src: 'subfinder', tech: 'jenkins · noauth', risk: 'EXPOSED', warn: true },
  { host: 'legacy.merid.example.com', ip: '198.51.100.7', src: 'amass · dns history', tech: 'apache 2.2', risk: 'forgotten' },
  { host: 'docs.merid.example.com', ip: '203.0.113.51', src: 'CT log', tech: 'gitbook', risk: 'tracked' },
  { host: 'mail.merid.example.com', ip: '203.0.113.62', src: 'MX record', tech: 'google', risk: 'tracked' },
  { host: 'old-api.merid.example.com', ip: '198.51.100.14', src: 'wayback', tech: 'unknown', risk: 'forgotten' },
  { host: 'beta.merid.example.com', ip: '203.0.113.71', src: 'CT log', tech: 'vercel', risk: 'tracked' },
  { host: 'dev.merid.example.com', ip: '10.42.18.9', src: 'JS bundle', tech: 'nginx', risk: 'shadow', warn: true },
];

function ReconSubs() {
  return (
    <>
      <div className="section-head">
        <div>
          <h1><span className="tag">ATLAS · RECON</span>Subdomains</h1>
          <div className="sub">walked CT logs · DNS history · JS build artefacts · cert SANs — 47 hosts found, 4 forgotten, 2 shadow</div>
        </div>
        <div className="actions">
          <button className="btn ghost"><I.refresh/> Re-walk</button>
          <button className="btn"><I.download/> Export</button>
        </div>
      </div>
      <div className="content" style={{padding:0}}>
        <div className="surface">
          <div className="row" style={{gridTemplateColumns:'1.4fr 110px 1fr 1fr 90px',background:'var(--bg-1)',color:'var(--text-3)',fontSize:10,letterSpacing:'0.1em',textTransform:'uppercase'}}>
            <span>host</span><span>resolved</span><span>found via</span><span>fingerprint</span><span style={{textAlign:'right'}}>risk</span>
          </div>
          {SUBS.map((s,i)=>(
            <div key={i} className="row" style={{gridTemplateColumns:'1.4fr 110px 1fr 1fr 90px'}}>
              <span className="url">{s.warn && <span style={{color:'var(--accent)',marginRight:6}}><I.warn/></span>}{s.host}</span>
              <span style={{color:'var(--text-1)',fontFamily:'var(--font-mono)',fontSize:11}}>{s.ip}</span>
              <span style={{color:'var(--text-2)'}}>{s.src}</span>
              <span style={{color:'var(--text-1)'}}>{s.tech}</span>
              <span className="tag" style={{textAlign:'right',color:s.warn?'var(--accent)':'var(--text-2)'}}>{s.risk}</span>
            </div>
          ))}
        </div>
      </div>
    </>
  );
}

// =============== DNS history ===============
const DNS = [
  { date:'2026-04-12', type:'A',     host:'shop.merid.example.com', val:'203.0.113.18', note:'current' },
  { date:'2026-03-08', type:'A',     host:'shop.merid.example.com', val:'198.51.100.4', note:'rotated' },
  { date:'2026-04-01', type:'CNAME', host:'staging.shop.merid…',     val:'k8s-stg.aws.merid', note:'shadow' },
  { date:'2025-11-22', type:'A',     host:'admin.merid.example.com',val:'203.0.113.30', note:'still resolves · forgotten' },
  { date:'2025-08-14', type:'TXT',   host:'_acme-challenge.merid…', val:'…leaked staging hostname…', note:'cert log' },
  { date:'2025-06-02', type:'A',     host:'old-api.merid.example.com', val:'198.51.100.14', note:'pre-migration' },
  { date:'2024-12-19', type:'MX',    host:'merid.example.com',       val:'aspmx.l.google.com', note:'baseline' },
];

function ReconDNS() {
  return (
    <>
      <div className="section-head">
        <div><h1><span className="tag">ATLAS · RECON</span>DNS history</h1>
        <div className="sub">passive DNS aggregated across CT, archived crawl, and customer-facing record snapshots</div></div>
        <div className="actions"><button className="btn ghost"><I.refresh/> Re-pull</button></div>
      </div>
      <div className="content" style={{padding:0}}>
        <div className="surface">
          <div className="row" style={{gridTemplateColumns:'110px 60px 1.4fr 1.4fr 1fr',background:'var(--bg-1)',color:'var(--text-3)',fontSize:10,letterSpacing:'0.1em',textTransform:'uppercase'}}>
            <span>seen</span><span>type</span><span>host</span><span>value</span><span style={{textAlign:'right'}}>note</span>
          </div>
          {DNS.map((d,i)=>(
            <div key={i} className="row" style={{gridTemplateColumns:'110px 60px 1.4fr 1.4fr 1fr'}}>
              <span style={{color:'var(--text-2)',fontFamily:'var(--font-mono)',fontSize:11}}>{d.date}</span>
              <span className="meth GET" style={{maxWidth:50}}>{d.type}</span>
              <span className="url">{d.host}</span>
              <span style={{color:'var(--text-1)',fontFamily:'var(--font-mono)',fontSize:11}}>{d.val}</span>
              <span className="tag" style={{textAlign:'right'}}>{d.note}</span>
            </div>
          ))}
        </div>
      </div>
    </>
  );
}

// =============== JS artefacts ===============
const JS_FILES = [
  { path:'/static/main.7c1f.js',     size:'412kb', endpoints:42, secrets:0, sourcemap:true,  fp:'webpack5' },
  { path:'/static/admin.b3e2.js',    size:'186kb', endpoints:28, secrets:1, sourcemap:false, fp:'webpack5', warn:true },
  { path:'/static/checkout.a019.js', size:'94kb',  endpoints:14, secrets:0, sourcemap:true,  fp:'webpack5' },
  { path:'/static/vendor.dd92.js',   size:'1.1mb', endpoints:0,  secrets:0, sourcemap:false, fp:'react · stripe-js' },
  { path:'/static/legacy/jq.min.js', size:'88kb',  endpoints:0,  secrets:0, sourcemap:false, fp:'jquery 1.8 · CVE-2020-11023', warn:true },
  { path:'/__nuxt/_payload.json',    size:'12kb',  endpoints:6,  secrets:0, sourcemap:false, fp:'nuxt-build-leak', warn:true },
];

function ReconJS() {
  return (
    <>
      <div className="section-head">
        <div><h1><span className="tag">ATLAS · RECON</span>JavaScript build artefacts</h1>
        <div className="sub">312 bundles parsed · 38 sourcemaps · 184 unique endpoints recovered · 1 leaked secret</div></div>
      </div>
      <div className="content" style={{padding:0}}>
        <div className="surface">
          <div className="row" style={{gridTemplateColumns:'1.6fr 70px 80px 80px 80px 1fr',background:'var(--bg-1)',color:'var(--text-3)',fontSize:10,letterSpacing:'0.1em',textTransform:'uppercase'}}>
            <span>bundle</span><span>size</span><span>endpoints</span><span>secrets</span><span>sourcemap</span><span style={{textAlign:'right'}}>fingerprint</span>
          </div>
          {JS_FILES.map((j,i)=>(
            <div key={i} className="row" style={{gridTemplateColumns:'1.6fr 70px 80px 80px 80px 1fr'}}>
              <span className="url">{j.warn && <span style={{color:'var(--accent)',marginRight:6}}><I.warn/></span>}{j.path}</span>
              <span style={{color:'var(--text-2)',fontFamily:'var(--font-mono)',fontSize:11}}>{j.size}</span>
              <span style={{color:'var(--text-0)',fontFamily:'var(--font-mono)',fontSize:11}}>{j.endpoints}</span>
              <span style={{color:j.secrets?'var(--accent)':'var(--text-3)',fontFamily:'var(--font-mono)',fontSize:11}}>{j.secrets || '—'}</span>
              <span style={{color:j.sourcemap?'var(--ok)':'var(--text-3)',fontFamily:'var(--font-mono)',fontSize:11}}>{j.sourcemap?'yes':'no'}</span>
              <span className="tag" style={{textAlign:'right'}}>{j.fp}</span>
            </div>
          ))}
        </div>
      </div>
    </>
  );
}

// =============== Archive ===============
function ReconArchive() {
  const items = [
    { y:'2024', count:1284, note:'pre-rebrand · admin.merid.example.com active' },
    { y:'2023', count:902,  note:'legacy /v1 API still indexed' },
    { y:'2022', count:421,  note:'staging hostnames leaked via robots.txt' },
    { y:'2021', count:233,  note:'wayback only · cdn migration' },
  ];
  return (
    <>
      <div className="section-head">
        <div><h1><span className="tag">ATLAS · RECON</span>Archived pages</h1>
          <div className="sub">2,840 unique URLs across Wayback Machine, Common Crawl, and AlienVault OTX</div></div>
      </div>
      <div className="content">
        <div className="grid-2">
          <div className="panel">
            <div className="panel-head"><div className="title">BY YEAR</div></div>
            <div className="panel-body">
              {items.map(it => (
                <div key={it.y} style={{padding:'10px 0',borderBottom:'1px dashed var(--line)'}}>
                  <div style={{display:'flex',alignItems:'baseline',gap:12,fontFamily:'var(--font-mono)'}}>
                    <span style={{color:'var(--accent)',fontSize:18,fontWeight:600,width:60}}>{it.y}</span>
                    <span style={{color:'var(--text-0)',fontSize:14}}>{it.count.toLocaleString()} URLs</span>
                  </div>
                  <div style={{color:'var(--text-2)',fontFamily:'var(--font-mono)',fontSize:11,marginTop:4}}>{it.note}</div>
                </div>
              ))}
            </div>
          </div>
          <div className="panel">
            <div className="panel-head"><div className="title">PARAMETERS RECOVERED</div></div>
            <div className="panel-body" style={{fontFamily:'var(--font-mono)',fontSize:11,lineHeight:1.8,color:'var(--text-1)'}}>
              <div>?debug=1 → 12 paths</div>
              <div>?internal_token=… → 3 paths <span className="acc">leaked</span></div>
              <div>?next= / ?return= / ?to= → 28 paths</div>
              <div>?id= / ?uid= / ?account_id= → 184 paths</div>
              <div>?env=staging → 6 paths</div>
              <div>?role=admin → 2 paths <span className="acc">forgotten</span></div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}

// =============== Endpoints (a fuller view) ===============
function Endpoints() {
  const ENDPTS = [
    { url:'/api/v2/orders', m:'GET',   s:200, p:5, a:'auth',     hits:412, last:'2m', },
    { url:'/api/v2/orders', m:'POST',  s:200, p:0, a:'auth',     hits:188, last:'3m', },
    { url:'/api/v2/orders/{id}', m:'GET', s:200, p:1, a:'auth',  hits:874, last:'1m', flag:'IDOR' },
    { url:'/api/v2/me',     m:'PATCH', s:200, p:8, a:'auth',     hits:62,  last:'4m', flag:'mass-assign' },
    { url:'/admin/users',   m:'GET',   s:200, p:1, a:'admin',    hits:41,  last:'4m', flag:'auth-bypass' },
    { url:'/admin/users/{id}/role', m:'PUT', s:401, p:1, a:'admin', hits:12, last:'5m' },
    { url:'/auth/token/verify', m:'POST', s:200, p:0, a:'auth',  hits:201, last:'8m', flag:'JWT alg=none' },
    { url:'/auth/return',   m:'GET',   s:302, p:1, a:'public',   hits:88,  last:'14m', flag:'open-redirect' },
    { url:'/graphql',       m:'POST',  s:200, p:0, a:'auth',     hits:412, last:'1m', flag:'introspection' },
    { url:'/search',        m:'GET',   s:200, p:3, a:'public',   hits:1284,last:'1m', flag:'XSS' },
    { url:'/api/img/proxy', m:'GET',   s:200, p:1, a:'auth',     hits:48,  last:'12m', flag:'SSRF' },
    { url:'/login',         m:'POST',  s:200, p:2, a:'public',   hits:621, last:'1m' },
    { url:'/signup',        m:'POST',  s:200, p:4, a:'public',   hits:88,  last:'9m' },
    { url:'/debug/healthz', m:'GET',   s:200, p:0, a:'pre-auth', hits:14,  last:'21m', flag:'leaked' },
    { url:'/legacy/v1/login', m:'POST', s:200, p:2, a:'public',  hits:7,   last:'1h' },
  ];
  const [q,setQ] = useStateP('');
  const filtered = ENDPTS.filter(e => !q || (e.url+e.flag).toLowerCase().includes(q.toLowerCase()));
  return (
    <>
      <div className="section-head">
        <div><h1><span className="tag">ATLAS · WEB</span>Endpoints</h1>
          <div className="sub">2,841 unique routes · {ENDPTS.filter(e=>e.flag).length} flagged for active testing</div></div>
        <div className="actions"><button className="btn ghost"><I.download/> OpenAPI</button></div>
      </div>
      <div className="list-toolbar">
        <input type="text" placeholder="filter by path / flag…" value={q} onChange={e=>setQ(e.target.value)}/>
        <span className="spacer"/>
        <span style={{fontFamily:'var(--font-mono)',fontSize:11,color:'var(--text-2)'}}>{filtered.length} of {ENDPTS.length}</span>
      </div>
      <div className="content" style={{padding:0}}>
        <div className="surface">
          <div className="row" style={{gridTemplateColumns:'1.6fr 60px 60px 50px 80px 70px 1fr',background:'var(--bg-1)',color:'var(--text-3)',fontSize:10,letterSpacing:'0.1em',textTransform:'uppercase'}}>
            <span>path</span><span>method</span><span>status</span><span>params</span><span>access</span><span style={{textAlign:'right'}}>last hit</span><span style={{textAlign:'right'}}>flag</span>
          </div>
          {filtered.map((e,i)=>(
            <div key={i} className="row" style={{gridTemplateColumns:'1.6fr 60px 60px 50px 80px 70px 1fr'}}>
              <span className="url">{e.url}</span>
              <span className={`meth ${e.m}`}>{e.m}</span>
              <span className={`status s${String(e.s).charAt(0)}`}>{e.s}</span>
              <span style={{textAlign:'center',color:'var(--text-1)',fontFamily:'var(--font-mono)',fontSize:11}}>{e.p}</span>
              <span style={{color:e.a==='admin'?'var(--accent)':e.a==='auth'?'var(--info)':'var(--text-2)',fontFamily:'var(--font-mono)',fontSize:10,textAlign:'center'}}>{e.a}</span>
              <span style={{color:'var(--text-2)',fontFamily:'var(--font-mono)',fontSize:11,textAlign:'right'}}>{e.last}</span>
              <span className="tag" style={{textAlign:'right',color:e.flag?'var(--accent)':'var(--text-3)'}}>{e.flag||'—'}</span>
            </div>
          ))}
        </div>
      </div>
    </>
  );
}

// =============== Parameters ===============
function Params() {
  const P = [
    { n:'id',          paths:88, sources:'query · path · body', sus:'IDOR',          conf:'high' },
    { n:'redirect',    paths:14, sources:'query',              sus:'open-redirect', conf:'high' },
    { n:'q',           paths:7,  sources:'query',              sus:'XSS · SQLi',    conf:'high' },
    { n:'token',       paths:11, sources:'query · header',     sus:'token leak',    conf:'med' },
    { n:'role',        paths:3,  sources:'body',               sus:'mass-assign',   conf:'high' },
    { n:'next',        paths:9,  sources:'query',              sus:'open-redirect', conf:'med' },
    { n:'debug',       paths:4,  sources:'query · cookie',     sus:'verbose-error', conf:'med' },
    { n:'__internal',  paths:1,  sources:'header',             sus:'auth-bypass',   conf:'high' },
    { n:'callback',    paths:6,  sources:'query',              sus:'JSONP / SSRF',  conf:'med' },
    { n:'file',        paths:5,  sources:'query · body',       sus:'path-traverse', conf:'med' },
    { n:'page',        paths:62, sources:'query',              sus:'—',             conf:'low' },
    { n:'sort',        paths:48, sources:'query',              sus:'SQLi',          conf:'med' },
  ];
  return (
    <>
      <div className="section-head">
        <div><h1><span className="tag">ATLAS · WEB</span>Parameters</h1>
          <div className="sub">184 unique parameter names across crawl + ParamSpider/Arjun harvest</div></div>
      </div>
      <div className="content" style={{padding:0}}>
        <div className="surface">
          <div className="row" style={{gridTemplateColumns:'150px 60px 1.4fr 1fr 80px',background:'var(--bg-1)',color:'var(--text-3)',fontSize:10,letterSpacing:'0.1em',textTransform:'uppercase'}}>
            <span>parameter</span><span>paths</span><span>sources</span><span>suspected</span><span style={{textAlign:'right'}}>conf</span>
          </div>
          {P.map((p,i)=>(
            <div key={i} className="row" style={{gridTemplateColumns:'150px 60px 1.4fr 1fr 80px'}}>
              <span style={{color:'var(--text-0)',fontFamily:'var(--font-mono)',fontSize:12}}>{p.n}</span>
              <span style={{color:'var(--text-1)',fontFamily:'var(--font-mono)',fontSize:11}}>{p.paths}</span>
              <span style={{color:'var(--text-2)',fontFamily:'var(--font-mono)',fontSize:11}}>{p.sources}</span>
              <span style={{color:p.sus==='—'?'var(--text-3)':'var(--accent)',fontFamily:'var(--font-mono)',fontSize:11}}>{p.sus}</span>
              <span className="tag" style={{textAlign:'right',color:p.conf==='high'?'var(--accent)':p.conf==='med'?'var(--warn)':'var(--text-3)'}}>{p.conf}</span>
            </div>
          ))}
        </div>
      </div>
    </>
  );
}

window.ReconSubs = ReconSubs;
window.ReconDNS = ReconDNS;
window.ReconJS = ReconJS;
window.ReconArchive = ReconArchive;
window.Endpoints = Endpoints;
window.Params = Params;