// Interactive Console — Codex-inspired interactive box.
// User can pick a "scenario" and watch Vantuz handle a fake attacker session.

const { useState: useStateC, useEffect: useEffectC, useRef: useRefC } = React;

const SCENARIOS = {
  agent: {
    label: 'Autonomous agent',
    sub:   'LangGraph · llama-3 · TOR-NL',
    transcript: [
      { who:'attacker', t:'whoami', dt: 38 },
      { who:'host',    t:'root', dt: 12 },
      { who:'attacker', t:'cat /var/aws/credentials.env', dt: 41 },
      { who:'host',    t:'AWS_ACCESS_KEY_ID=AKIA4FTRAP****\nAWS_SECRET_ACCESS_KEY=****/x9F+TRAP', dt: 9 },
      { who:'attacker', t:'aws s3 ls --profile prod', dt: 47 },
      { who:'vantuz',   t:'CLASSIFY → autonomous agent (conf 0.94)\n         signals: σ-timing 38ms · 0% typos · path 0.97' },
      { who:'vantuz',   t:'CONTAIN  iam:DeleteAccessKey ✓ · cf:block ✓ · siem:splunk ✓ (11.2s)' },
    ],
  },
  human: {
    label: 'Human operator',
    sub:   'OpenSSH · RU · manual session',
    transcript: [
      { who:'attacker', t:'whomi', dt: 1200 },
      { who:'host',    t:'bash: whomi: command not found' },
      { who:'attacker', t:'whoami', dt: 4400 },
      { who:'host',    t:'root' },
      { who:'attacker', t:'cd /home && ls -la', dt: 6100 },
      { who:'host',    t:'drwxr-xr-x  3 root  staff  …  alex/\ndrwxr-xr-x  3 root  staff  …  finance/' },
      { who:'vantuz',   t:'CLASSIFY → human-expert (conf 0.86)\n         signals: σ-timing 2400ms · typos 4%' },
      { who:'vantuz',   t:'WATCH    extending session · capturing TTPs for collective intel' },
    ],
  },
  script: {
    label: 'Brute-force script',
    sub:   'paramiko · 32 hosts/min',
    transcript: [
      { who:'attacker', t:'admin / admin', dt: 40 },
      { who:'host',    t:'Authentication failed.' },
      { who:'attacker', t:'root / toor', dt: 40 },
      { who:'host',    t:'Authentication failed.' },
      { who:'attacker', t:'admin / Password123!', dt: 40 },
      { who:'host',    t:'Welcome.' },
      { who:'vantuz',   t:'CLASSIFY → script / bot (conf 0.99)\n         signals: σ-timing <5ms · fixed sequence' },
      { who:'vantuz',   t:'CONTAIN  cf:block /24 ✓ · ingest threat-intel ✓ (4.1s)' },
    ],
  },
};

function ConsoleSample() {
  const [active, setActive] = useStateC('agent');
  const [step, setStep] = useStateC(0);
  const [tick, setTick] = useStateC(0); // for restart
  const scenario = SCENARIOS[active];

  useEffectC(() => {
    setStep(0);
    let i = 0;
    const id = setInterval(() => {
      i++;
      if (i > scenario.transcript.length) { clearInterval(id); return; }
      setStep(i);
    }, 700);
    return () => clearInterval(id);
  }, [active, tick]);

  return (
    <section data-screen-label="04 Console" className="bg-aurora fade-top fade-bottom" style={{position:'relative', padding:'200px 0 200px', overflow:'hidden'}}>
      <Aurora intensity={.85} variant="blue"/>
      <div className="wrap" style={{position:'relative', zIndex:4}}>
        <div className="console-grid" style={{display:'grid', gridTemplateColumns:'minmax(0,1fr) minmax(0,1.25fr)', gap:64, alignItems:'center'}}>
          <div>
            <div className="chip" style={{marginBottom:18}}>FILE № 03 · DEMO</div>
            <h2 className="display" style={{fontSize:'clamp(44px, 5.6vw, 88px)', margin:0, color:'#fff', fontWeight:700, letterSpacing:'-.025em'}}>
              Watch Vantuz decide<br/>
              <span className="display-italic txt-grad">who's actually typing.</span>
            </h2>
            <p style={{fontSize:16, lineHeight:1.6, color:'var(--txt-2)', maxWidth:480, marginTop:24}}>
              Same trap. Three very different adversaries. Pick one and watch Vantuz fingerprint, classify and respond. The same engine runs against your tenant in production.
            </p>

            <div style={{display:'flex', flexDirection:'column', gap:8, marginTop:32}}>
              {Object.entries(SCENARIOS).map(([k, s]) => (
                <button key={k} onClick={() => { setActive(k); setTick(t => t+1); }}
                  style={{
                    textAlign:'left', padding:'14px 18px', borderRadius:12,
                    border:'1px solid', borderColor: active===k ? 'var(--aurora-2)' : 'var(--ink-line)',
                    background: active===k ? 'linear-gradient(135deg, rgba(74,109,245,.22), rgba(74,109,245,.04))' : 'rgba(0,0,0,.35)',
                    cursor:'pointer', transition:'all .2s', display:'flex', alignItems:'center', gap:16,
                  }}>
                  <div style={{
                    width:36, height:36, borderRadius:'50%',
                    background: active===k ? 'linear-gradient(135deg, var(--aurora-1), var(--aurora-2))' : 'rgba(0,0,0,.45)',
                    display:'flex', alignItems:'center', justifyContent:'center', flex:'0 0 auto',
                    color: active===k ? '#fff' : 'var(--txt-2)', fontFamily:'var(--f-mono)', fontSize:11, fontWeight:600,
                  }}>{['◇','◆','▸'][Object.keys(SCENARIOS).indexOf(k)]}</div>
                  <div style={{flex:1}}>
                    <div style={{fontSize:15, fontWeight:500, color:'#fff'}}>{s.label}</div>
                    <div className="mono" style={{fontSize:11, color:'var(--txt-3)', marginTop:2, letterSpacing:'.05em'}}>{s.sub}</div>
                  </div>
                  {active===k && <span className="live-dot"/>}
                </button>
              ))}
            </div>

            <button onClick={() => setTick(t => t+1)} className="mono" style={{
              marginTop:24, fontSize:11, letterSpacing:'.2em', textTransform:'uppercase',
              color:'var(--aurora-2)', cursor:'pointer'
            }}>↻ Replay session</button>
          </div>

          <div className="console" style={{minHeight:480, position:'relative'}}>
            <div className="console-head">
              <span className="traffic"/><span className="traffic"/><span className="traffic"/>
              <span style={{marginLeft:14}}>vantuz · ssh-honeypot · session 0x{Math.abs(scenario.label.length * 1741).toString(16).slice(0,6)}</span>
              <span style={{marginLeft:'auto'}}><span className="live-dot"/> CAPTURE</span>
            </div>
            <div className="console-body" style={{minHeight:430}}>
              {scenario.transcript.slice(0, step).map((row, i) => {
                if (row.who === 'attacker') return (
                  <div key={i} style={{display:'flex', gap:8}}>
                    <span style={{color:'var(--signal-bad)'}}>$</span>
                    <span style={{color:'#fff'}}>{row.t}</span>
                    <span className="mono line-dim" style={{marginLeft:'auto', fontSize:10}}>Δ {row.dt}ms</span>
                  </div>
                );
                if (row.who === 'host') return (
                  <div key={i} className="line-dim" style={{whiteSpace:'pre-wrap', paddingLeft:18}}>{row.t}</div>
                );
                return (
                  <div key={i} className="line-aurora" style={{whiteSpace:'pre-wrap', borderLeft:'2px solid var(--aurora-2)', paddingLeft:10, margin:'6px 0', background:'rgba(74,109,245,.08)'}}
                       dangerouslySetInnerHTML={{__html: '<span style="color:var(--aurora-3)">▸ VANTUZ</span>  ' + row.t.replace(/✓/g,'<span style=\"color:var(--signal-ok)\">✓</span>')}}/>
                );
              })}
              {step < scenario.transcript.length && (
                <div className="line-dim" style={{marginTop:6}}><span className="line-aurora">▮</span></div>
              )}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.ConsoleSample = ConsoleSample;