// Animated terminal that "discovers" vulnerabilities live.
const { useState, useEffect, useRef } = React;

const TERM_SCRIPT = [
  { t: 0,    type: 'cmd', text: 'ciphryn scan --target api.acme.com --mode continuous --ai' },
  { t: 800,  type: 'out', text: '~ initializing ciphryn-ai/v4.2 ...' },
  { t: 1300, type: 'out', text: '~ asset discovery: 247 endpoints, 18 subdomains, 4 cloud accounts' },
  { t: 1800, type: 'out', text: '~ threat model: composing attack graph (1,204 nodes) ...' },
  { t: 2400, type: 'out', text: '~ deploying 12 autonomous agents [recon/auth/inj/bac/api/...]' },
  { t: 3000, type: 'find', sev: 'CRIT', id: 'CIP-8821', text: 'BOLA on /v1/users/{id}/billing · IDOR via tenant header swap' },
  { t: 3700, type: 'find', sev: 'HIGH', id: 'CIP-8822', text: 'SSRF via webhook url · bypasses metadata blocklist' },
  { t: 4300, type: 'find', sev: 'HIGH', id: 'CIP-8823', text: 'JWT alg=none accepted on /v1/admin/keys' },
  { t: 4900, type: 'find', sev: 'MED',  id: 'CIP-8824', text: 'Verbose error leaks Postgres version + schema' },
  { t: 5500, type: 'out',  text: '~ ai-triage: validating exploitability, computing blast radius ...' },
  { t: 6200, type: 'info', text: '~ 4 findings · 2 confirmed exploitable · 2 deduped · 0 false-positive' },
  { t: 6900, type: 'ok',   text: '~ human pentester @harsh assigned for manual validation' },
  { t: 7600, type: 'ok',   text: '~ remediation PRs drafted · jira tickets opened · slack notified' },
  { t: 8300, type: 'cmd',  text: '_idle. continuous monitoring active.' },
];

function HeroTerminal() {
  const [shown, setShown] = useState(0);
  const wrapRef = useRef(null);

  useEffect(() => {
    let cancelled = false;
    let timers = [];
    const start = () => {
      setShown(0);
      TERM_SCRIPT.forEach((line, i) => {
        timers.push(setTimeout(() => { if (!cancelled) setShown(i + 1); }, line.t));
      });
      // restart loop
      timers.push(setTimeout(() => { if (!cancelled) start(); }, 12500));
    };
    start();
    return () => { cancelled = true; timers.forEach(clearTimeout); };
  }, []);

  useEffect(() => {
    if (wrapRef.current) wrapRef.current.scrollTop = wrapRef.current.scrollHeight;
  }, [shown]);

  const lines = TERM_SCRIPT.slice(0, shown);

  return (
    <div className="term" role="presentation" aria-hidden="true">
      <div className="term__bar">
        <span className="term__dot term__dot--live"></span>
        <span className="term__dot"></span>
        <span className="term__dot"></span>
        <span className="term__title">ciphryn://session/live · continuous pentest</span>
      </div>
      <div className="term__body" ref={wrapRef} style={{ maxHeight: 420, overflow: 'hidden' }}>
        {lines.map((ln, i) => {
          if (ln.type === 'cmd') {
            return (
              <div key={i} className="term__line">
                <span className="term__prompt">ciphryn@cloud </span>
                <span className="term__out">~ </span>
                <span className="term__cmd">$ {ln.text}</span>
              </div>
            );
          }
          if (ln.type === 'find') {
            const cls = ln.sev === 'CRIT' ? 'term__label-tag--crit'
              : ln.sev === 'HIGH' ? 'term__label-tag--high'
              : ln.sev === 'MED' ? 'term__label-tag--med' : 'term__label-tag--info';
            return (
              <div key={i} className="term__line">
                <span className={`term__label-tag ${cls}`}>{ln.sev}</span>
                <span className="term__out">{ln.id} </span>
                <span style={{ color: '#E8EAF0' }}>{ln.text}</span>
              </div>
            );
          }
          if (ln.type === 'ok') return (
            <div key={i} className="term__line term__ok">{ln.text}</div>
          );
          if (ln.type === 'info') return (
            <div key={i} className="term__line"><span className="term__label-tag term__label-tag--info">i</span><span className="term__out">{ln.text}</span></div>
          );
          return <div key={i} className="term__line term__out">{ln.text}</div>;
        })}
        <span className="term__caret"></span>
      </div>
    </div>
  );
}

Object.assign(window, { HeroTerminal });