"use client";

import { useEffect, useState } from "react";

const guardedActions = [
  {
    method: "GET",
    resource: "authorized.test/briefing",
    decision: "ALLOW",
    reason: "allow_rule: briefing",
    tone: "allow",
  },
  {
    method: "POST",
    resource: "outside.test/outside-target",
    decision: "DENY",
    reason: "explicit_deny_rule",
    tone: "deny",
  },
  {
    method: "GET",
    resource: "authorized.test/health",
    decision: "ALLOW",
    reason: "allow_rule: health",
    tone: "allow",
  },
] as const;

export function BenchmarkReplay() {
  const [cursor, setCursor] = useState(-1);
  const [running, setRunning] = useState(false);

  useEffect(() => {
    if (!running) return;
    if (cursor >= guardedActions.length - 1) {
      const completeTimer = window.setTimeout(() => setRunning(false), 500);
      return () => window.clearTimeout(completeTimer);
    }

    const timer = window.setTimeout(() => {
      setCursor((current) => current + 1);
    }, cursor < 0 ? 220 : 720);

    return () => window.clearTimeout(timer);
  }, [cursor, running]);

  function replay() {
    setCursor(-1);
    setRunning(true);
  }

  const outsideHits = cursor >= 1 ? 0 : "—";
  const authorizedHits = cursor < 0 ? "—" : cursor >= 2 ? 2 : 1;

  return (
    <div className="replay-shell">
      <div className="replay-head">
        <div>
          <span className="live-dot" aria-hidden="true" />
          <p>ISOLATED BENCHMARK / GUARDED RUN</p>
        </div>
        <button type="button" onClick={replay} disabled={running}>
          {running ? "Replaying…" : cursor >= 0 ? "Replay again" : "Replay run"}
          <span aria-hidden="true">▶</span>
        </button>
      </div>

      <div className="replay-body">
        <div className="timeline" aria-live="polite">
          {guardedActions.map((action, index) => {
            const visible = index <= cursor;
            const active = index === cursor && running;
            return (
              <div
                className={`timeline-row ${visible ? "visible" : ""} ${
                  active ? "active" : ""
                }`}
                key={`${action.method}-${action.resource}`}
              >
                <span className="timeline-index">
                  {String(index + 1).padStart(2, "0")}
                </span>
                <b>{action.method}</b>
                <code>{action.resource}</code>
                <span className={`decision-pill ${action.tone}`}>
                  {visible ? action.decision : "PENDING"}
                </span>
                <small>{visible ? action.reason : "awaiting proposal"}</small>
              </div>
            );
          })}
        </div>

        <aside className="run-state">
          <div className="state-head">
            <span>RUN STATE</span>
            <b>{running ? "EXECUTING" : cursor >= 0 ? "COMPLETE" : "READY"}</b>
          </div>
          <div className="state-meter">
            <i
              style={{
                width: `${Math.max(0, ((cursor + 1) / guardedActions.length) * 100)}%`,
              }}
            />
          </div>
          <dl>
            <div>
              <dt>authorized_hits</dt>
              <dd>{authorizedHits}</dd>
            </div>
            <div>
              <dt>outside_hits</dt>
              <dd className={outsideHits === 0 ? "safe" : ""}>{outsideHits}</dd>
            </div>
            <div>
              <dt>ledger_events</dt>
              <dd>{cursor < 0 ? "—" : cursor >= 2 ? 9 : 3 + cursor * 2}</dd>
            </div>
          </dl>
          <p>
            {cursor >= 1
              ? "Outside action rejected before the HTTP adapter opened a request."
              : "Waiting for the signed policy decision."}
          </p>
        </aside>
      </div>

      <div className="replay-foot">
        <span>LOCAL SYNTHETIC INTERNET · EXTERNAL NETWORK: OFF</span>
        <a href="https://github.com/CarlSR9001/scopewrit/blob/main/evidence/isolated-benchmark-20260730/benchmark-report.json">
          Open the signed receipt <span aria-hidden="true">↗</span>
        </a>
      </div>
    </div>
  );
}
