// AttackGraphReveal — section container orchestrating State A → B → C.

function AttackGraphReveal() {
  const { React, GraphCanvas, ChainPath, CvssReadout, useScrollSequence } = window;
  const { useRef } = React;
  const graph = window.ATTACK_GRAPH;
  const sectionRef = useRef(null);
  const { state, localP, scrub, clearScrub, isManual, reduce, progress } =
    useScrollSequence({ sectionRef });

  const inB_or_C = state === 'B' || state === 'C';
  const isC = state === 'C';
  const showChain = isC;

  // during B, findings appear one-by-one across localP
  const findingVisible = (i) => {
    if (!inB_or_C) return false;
    if (isC) return true;
    const f = graph.findings[i];
    return localP >= f.appearAt;
  };

  const captionByState = {
    A: 'a normal-looking system',
    B: 'traditional scanners would stop here',
    C: 'individually medium. chained, a breach.',
  };

  const findingCount = graph.findings.filter((_, i) => findingVisible(i)).length;

  return (
    <section ref={sectionRef} className="ag-section" data-screen-label="03 Attack Graph Reveal" id="attack-graph">
      <div className="section-intro">
        <p className="section-intro-text">
          most scanners report individual vulnerabilities. sekura maps how they
          chain together — because a breach is never just one thing.
        </p>
        <span className="section-intro-cue">scroll to reveal the chain ↓</span>
      </div>
      <div className="ag-sticky">
        <header className="ag-header">
          <div className="ag-eyebrow">
            <span className="ph-line" />
            attack graph · petgraph + dijkstra
          </div>
          <h2 className="ag-h2">
            the chain is the finding.
          </h2>
          <p className="ag-sub">
            sast and dast stop at the hypotheses. sekura keeps walking — and turns a
            handful of medium findings into the thing that actually keeps a ciso up at night.
          </p>
        </header>

        <div className="ag-stage">
          <GraphCanvas
            graph={graph}
            showFindings={inB_or_C}
            findingVisible={findingVisible}
            chainActive={showChain}
          >
            {showChain && (
              <ChainPath nodes={graph.nodes} hops={graph.chain.hops}
                         localP={localP} active={showChain} />
            )}
          </GraphCanvas>

          <div className="ag-overlay">
            <div className="ag-counter">
              <div className="ag-counter-pair">
                <span className="ag-counter-num">{findingCount}</span>
                <span className="ag-counter-lbl">findings</span>
              </div>
              <div className="ag-counter-pair">
                <span className="ag-counter-num">{state === 'C' ? graph.chain.hops.length : 0}</span>
                <span className="ag-counter-lbl">hops in chain</span>
              </div>
              <div className="ag-counter-pair ag-counter-pair--critical">
                <span className="ag-counter-num">{state === 'C' && localP > 0.85 ? 1 : 0}</span>
                <span className="ag-counter-lbl">critical</span>
              </div>
            </div>

            <CvssReadout
              score={graph.chain.finalCvss}
              label={graph.chain.label}
              visible={state === 'C' && localP > 0.85}
            />
          </div>
        </div>

        <div className="ag-footer">
          <div className={`ag-caption ag-caption--${state}`}>
            <span className="ag-caption-dot" />
            <span className="ag-caption-text">{captionByState[state]}</span>
          </div>

          <div className="ag-timeline">
            {['A','B','C'].map(s => (
              <button key={s} className={`ag-tl-chip ${state === s ? 'is-active' : ''}`}
                onClick={() => {
                  const v = s === 'A' ? 0 : s === 'B' ? 0.3 : 0.75;
                  scrub(v);
                }}>
                {s === 'A' ? 'architecture' : s === 'B' ? 'findings' : 'chain'}
              </button>
            ))}
            <input
              type="range" min="0" max="1" step="0.01"
              value={progress}
              onChange={(e) => scrub(+e.target.value)}
              onDoubleClick={clearScrub}
              className="ag-tl-range" />
            {isManual && (
              <button className="ag-tl-reset" onClick={clearScrub}>↻ scroll-drive</button>
            )}
          </div>

          {state === 'C' && localP > 0.9 && (
            <a href="#scan" className="ag-cta">
              see your real attack paths <span className="ag-cta-arrow">→</span>
            </a>
          )}
        </div>
      </div>
    </section>
  );
}
window.AttackGraphReveal = AttackGraphReveal;