// Live "gb run" terminal illustration for the Hero.
// Shows what the benchmark actually does — agent submission being scored in real time.
const LiveRun = () => {
  // Animated state: progress 0->100, then score bars fill in
  const [progress, setProgress] = React.useState(0);
  const [phase, setPhase] = React.useState(0); // 0 boot, 1 progress, 2 scoring, 3 done
  const [tick, setTick] = React.useState(0);
  const [vw, setVw] = React.useState(() => (typeof window === "undefined" ? 1200 : window.innerWidth));

  React.useEffect(() => {
    const start = performance.now();
    let raf;
    const loop = (now) => {
      const elapsed = (now - start) / 1000;
      const cycle = elapsed % 9; // 9s loop
      if (cycle < 0.8) {
        setPhase(0); setProgress(0);
      } else if (cycle < 4.2) {
        setPhase(1);
        const p = Math.min(100, ((cycle - 0.8) / 3.4) * 100);
        setProgress(p);
      } else if (cycle < 5.4) {
        setPhase(2); setProgress(100);
      } else {
        setPhase(3); setProgress(100);
      }
      setTick(t => (t + 1) % 1000);
      raf = requestAnimationFrame(loop);
    };
    raf = requestAnimationFrame(loop);
    return () => cancelAnimationFrame(raf);
  }, []);

  React.useEffect(() => {
    const onResize = () => setVw(window.innerWidth);
    window.addEventListener("resize", onResize);
    return () => window.removeEventListener("resize", onResize);
  }, []);

  // Scores reveal when phase >= 2
  const scores = [
    { k: "correctness", v: 92, c: "var(--accent)" },
    { k: "latency",         v: 78, c: "var(--accent)" },
    { k: "diagnostics", v: 85, c: "var(--accent)" },
  ];

  const isPhone = vw <= 520;
  const isTiny = vw <= 360;
  const progressSlots = isTiny ? 10 : isPhone ? 12 : 20;
  const scoreSlots = isTiny ? 7 : isPhone ? 9 : 12;
  const scoreCols = isTiny ? "74px 1fr 24px" : isPhone ? "82px 1fr 26px" : "100px 1fr 30px";
  const scoringLine = isPhone ? "─── scoring ───────────" : "─── scoring ──────────────────────";
  const closingLine = isPhone ? "──────────────────────" : "──────────────────────────────────";

  // Styles
  const wrap = {
    fontFamily: "JetBrains Mono, monospace",
    fontSize: isTiny ? 9.5 : isPhone ? 10.5 : 12,
    lineHeight: isPhone ? 1.6 : 1.7,
    padding: isTiny ? "12px 12px 14px" : isPhone ? "14px 14px 16px" : "18px 20px 20px",
    color: "var(--text)",
    background:
      "radial-gradient(ellipse 80% 60% at 50% 60%, rgba(74,222,128,0.06), transparent 70%)," +
      "linear-gradient(180deg, #0D1311 0%, #0A0D0C 100%)",
    minHeight: isTiny ? 250 : isPhone ? 286 : 360,
    position: "relative",
    overflow: "hidden",
    width: "100%",
    boxSizing: "border-box",
  };
  const cmd = { color: "var(--text)" };
  const dim = { color: "var(--muted-2)" };
  const ok = { color: "var(--accent)" };
  const warn = { color: "var(--warn)" };
  const ph = (n) => phase >= n;

  const stepLine = (label, ready) => (
    <div style={{ display: "flex", justifyContent: "space-between", gap: isPhone ? 8 : 12, whiteSpace: "nowrap" }}>
      <span><span style={ok}>▶</span> <span style={dim}>{label}</span></span>
      <span style={{ ...(ready ? ok : warn), flexShrink: 0 }}>{ready ? "[ ok ]" : "running"}</span>
    </div>
  );

  const ProgressBar = () => {
    const slots = progressSlots;
    const filled = Math.round((progress / 100) * slots);
    return (
      <div style={{ display: "flex", gap: isPhone ? 8 : 12, alignItems: "center", margin: "8px 0", whiteSpace: "nowrap" }}>
        <span style={dim}>progress</span>
        <span style={{ fontFamily: "JetBrains Mono, monospace", letterSpacing: "-0.05em", color: "var(--accent)" }}>
          {"█".repeat(filled)}
          <span style={{ color: "var(--muted-2)" }}>{"░".repeat(slots - filled)}</span>
        </span>
        <span style={{ ...ok, minWidth: 38, textAlign: "right", flexShrink: 0 }}>{Math.round(progress)}%</span>
      </div>
    );
  };

  const ScoreBar = ({ s, reveal, delay }) => {
    const v = reveal ? s.v : 0;
    const slots = scoreSlots;
    const filled = Math.round((v / 100) * slots);
    return (
      <div style={{
        display: "grid",
        gridTemplateColumns: scoreCols,
        gap: isPhone ? 7 : 10,
        alignItems: "center",
        whiteSpace: "nowrap",
        transition: `opacity .35s ${delay}ms`,
        opacity: reveal ? 1 : 0.25,
      }}>
        <span style={dim}>{s.k}</span>
        <span style={{ letterSpacing: "-0.05em" }}>
          <span style={{ color: s.c, transition: `letter-spacing .8s ${delay}ms` }}>{"█".repeat(filled)}</span>
          <span style={{ color: "var(--muted-2)" }}>{"░".repeat(slots - filled)}</span>
        </span>
        <span style={{ color: s.c, textAlign: "right" }}>{v}</span>
      </div>
    );
  };

  const cursor = (
    <span style={{
      display: "inline-block",
      width: 8, height: 14,
      background: "var(--accent)",
      verticalAlign: "text-bottom",
      marginLeft: 2,
      opacity: (tick % 30 < 15) ? 1 : 0,
    }}></span>
  );

  return (
    <div style={wrap}>
      <div style={cmd}>
        <span style={dim}>$</span> <span style={ok}>gb run</span> <span style={dim}>--task</span> <span style={{ color: "var(--blue)" }}>GB-001</span>
      </div>
      <div style={{ height: 10 }} />
      {stepLine("booting sandbox", ph(1))}
      {stepLine("loading 147 tests", ph(1))}
      {stepLine("executing suite", ph(2))}
      <div style={{ height: 10 }} />
      <ProgressBar />
      <div style={{ height: 10 }} />
      <div style={{ color: "var(--muted-2)" }}>{scoringLine}</div>
      <div style={{ display: "flex", flexDirection: "column", gap: 4, marginTop: 6 }}>
        {scores.map((s, i) => (
          <ScoreBar key={s.k} s={s} reveal={ph(2)} delay={i * 120} />
        ))}
      </div>
      <div style={{ color: "var(--muted-2)", marginTop: 8 }}>{closingLine}</div>
      <div style={{ minHeight: 50 }}>
      {ph(3) ? (
        <>
          <div style={{ display: "flex", justifyContent: "space-between", marginTop: 6 }}>
            <span><span style={ok}>→</span> score</span>
            <span style={ok}>87.4</span>
          </div>
          <div style={{ display: "flex", justifyContent: "space-between" }}>
            <span><span style={ok}>→</span> rank</span>
            <span style={ok}>#3 of 24</span>
          </div>
        </>
      ) : (
        <div style={{ marginTop: 6 }}>
          <span style={dim}>→ awaiting result</span>{cursor}
        </div>
      )}
      </div>
    </div>
  );
};
window.LiveRun = LiveRun;