// PEN Landing — Live console mock for hero section.
// Shows a compact "operations" panel with live-feel:
//   - scan progress bar that loops
//   - threat feed where rows reveal one-by-one then animate "containment"
//   - tabular numeric KPIs

const { useState: useStateLC, useEffect: useEffectLC, useRef: useRefLC } = React;

function LiveConsole({ copy }) {
  // ── Scan progress loop ─────────────────────────────────────
  const [scan, setScan] = useStateLC(0.12);
  useEffectLC(() => {
    const t = setInterval(() => {
      setScan((p) => p >= 0.98 ? 0.08 : p + 0.018);
    }, 220);
    return () => clearInterval(t);
  }, []);

  // ── Clock ticks (for the "ts" col + status) ────────────────
  const [tick, setTick] = useStateLC(0);
  useEffectLC(() => {
    const t = setInterval(() => setTick((x) => x + 1), 1000);
    return () => clearInterval(t);
  }, []);

  // ── Threat feed: reveal rows, then mark them contained ─────
  const baseFeed = copy.threats;
  const [revealed, setRevealed] = useStateLC(2); // start with 2 rows visible
  const [contained, setContained] = useStateLC({}); // index -> true

  useEffectLC(() => {
    let r = 2;
    setRevealed(2);
    setContained({});
    const revealTimer = setInterval(() => {
      r++;
      if (r > baseFeed.length) {
        clearInterval(revealTimer);
      } else {
        setRevealed(r);
      }
    }, 1100);
    // After 4s start containing the criticals one-by-one
    const containTimer = setTimeout(() => {
      let idx = 0;
      const ct = setInterval(() => {
        setContained((prev) => ({ ...prev, [idx]: true }));
        idx++;
        if (idx >= 2) clearInterval(ct);
      }, 1600);
    }, 4200);
    return () => {clearInterval(revealTimer);clearTimeout(containTimer);};
  }, [copy]);

  // ── KPI nudges (animated count) ────────────────────────────
  const kpis = copy.kpis;

  const hostsScanned = Math.round(scan * 217);
  const eta = String(Math.max(2, Math.round((1 - scan) * 90))).padStart(2, "0");

  return (
    <div className="live-console">
      {/* window chrome */}
      <div className="lc-chrome">
        <div className="lc-dots">
          <span className="lc-dot lc-dot-r" />
          <span className="lc-dot lc-dot-y" />
          <span className="lc-dot lc-dot-g" />
        </div>
        <div className="lc-chrome-title">
          <span className="mono-eyebrow">{copy.eyebrow}</span>
          <span className="lc-chrome-spacer" />
          <span className="lc-live-pill">
            <span className="lc-live-dot" />
            LIVE
          </span>
        </div>
        <div className="lc-chrome-meta">
          <span className="mono-dim">v2026.05.22</span>
        </div>
      </div>

      {/* KPI strip */}
      <div className="lc-kpis">
        {kpis.map((k, i) =>
        <div className="lc-kpi" key={i}>
            <div className="mono-eyebrow lc-kpi-label">{k.label}</div>
            <div className="lc-kpi-value">
              <span className={"lc-kpi-num" + (i === 1 ? " is-crit" : "")}>{k.value}</span>
              {k.unit && <span className="lc-kpi-unit">{k.unit}</span>}
            </div>
            <div className="mono-dim lc-kpi-foot">{k.foot}</div>
          </div>
        )}
      </div>

      <div className="lc-grid">
        {/* Feed */}
        <div className="lc-panel">
          <div className="lc-panel-head">
            <div>
              <div className="mono-eyebrow">{copy.feedEyebrow}</div>
              <div className="lc-panel-title">{copy.feedTitle}</div>
            </div>
            <div className="lc-panel-foot">
              <span className="lc-pulse" />
              <span className="mono-dim">stream</span>
            </div>
          </div>
          <div className="lc-feed">
            {baseFeed.slice(0, revealed).map((t, i) => {
              const sev = t.sev;
              const wasContained = contained[i];
              return (
                <div className={"lc-row lc-row-" + sev + (wasContained ? " is-contained" : "")} key={i}>
                  <span className={"lc-sev lc-sev-" + sev} />
                  <div className="lc-row-body">
                    <div className="lc-row-title">{t.title}</div>
                    <div className="lc-row-meta">
                      <span className="mono-dim">{t.host}</span>
                      <span className="mono">{t.cve}</span>
                    </div>
                  </div>
                  <div className="lc-row-tail">
                    {wasContained ?
                    <span className="lc-chip lc-chip-ok">● {t.action}</span> :

                    <span className="mono-dim lc-ts">{t.ts}</span>
                    }
                  </div>
                </div>);

            })}
          </div>
        </div>

        {/* Scan side */}
        <div className="lc-side">
          <div className="lc-panel lc-panel-active">
            <div className="mono-eyebrow lc-pulse-label">
              <span className="lc-pulse" /> {copy.scanLabel}
            </div>
            <div className="lc-scan-title">{copy.scanTitle}</div>
            <div className="mono-dim lc-scan-cmd">{copy.scanCmd}</div>
            <div className="lc-bar">
              <div className="lc-bar-fill" style={{ width: (scan * 100).toFixed(1) + "%" }} />
              <div className="lc-bar-sweep" />
            </div>
            <div className="lc-bar-meta">
              <span className="mono">{hostsScanned} / 217 hosts</span>
              <span className="mono-dim">ETA 00:00:{eta}</span>
            </div>
          </div>

          {/* Operator log */}
          <div className="lc-panel lc-log">
            <div className="mono-eyebrow">OPERATOR · LOG</div>
            <OperatorLog tick={tick} />
          </div>
        </div>
      </div>

      <div className="lc-footbar">
        <span className="mono-dim">▸ pen ops watch --org=acme --tier=managed</span>
        <span className="lc-caret" />
      </div>
    </div>);

}

// Operator log — types out commands one at a time
function OperatorLog({ tick }) {
  const lines = [
  { t: "00:00:04", k: "ok", x: "▸ contain lax-04.pen.io" },
  { t: "00:00:05", k: "ok", x: "  ↳ host isolated · policy:fence-prod-v3" },
  { t: "00:01:42", k: "ok", x: "▸ contain nyc-12.pen.io" },
  { t: "00:02:11", k: "info", x: "  ↳ forensic snapshot captured · 2.4 GB" },
  { t: "00:04:21", k: "ok", x: "▸ incident IR-2026-04117 closed" }];

  // staged reveal
  const N = Math.min(lines.length, Math.floor(tick / 1.6) + 1);
  return (
    <div className="lc-log-body">
      {lines.slice(0, N).map((l, i) =>
      <div className="lc-log-line" key={i}>
          <span className="mono-dim lc-log-ts">{l.t}</span>
          <span className={"lc-log-glyph lc-log-glyph-" + l.k}>{l.k === "ok" ? "●" : "◇"}</span>
          <span className="mono lc-log-text">{l.x}</span>
        </div>
      )}
      {N < lines.length && <div className="lc-log-line"><span className="lc-caret" /></div>}
    </div>);

}

Object.assign(window, { LiveConsole });