// RunHistory scene: cross-scenario timeline.
import { useMemo, useState } from "react";
import { useApp } from "../state/store";
import { Clock, HistoryIcon } from "../components/icons";

const STATUS_FILTERS = ["all", "running", "completed", "errored", "queued"] as const;
type Status = (typeof STATUS_FILTERS)[number];

const STATUS_COLOR: Record<string, string> = {
  running: "var(--run)",
  completed: "var(--ok)",
  done: "var(--ok)",
  errored: "var(--block)",
  failed: "var(--block)",
  queued: "var(--queue)",
};

export default function RunHistory() {
  const [filter, setFilter] = useState<Status>("all");
  const scenarios = useApp((s) => s.scenarios);

  const rows = useMemo(() => {
    const out: Array<{ scenarioId: string; scenarioLabel: string; accent: string; live: boolean; run: (typeof scenarios)[number]["runs"][number] }> = [];
    for (const s of scenarios) {
      for (const r of s.runs) {
        if (filter !== "all" && r.status !== filter && !(filter === "completed" && r.status === "done")) continue;
        out.push({ scenarioId: s.id, scenarioLabel: s.family.label, accent: s.family.accent, live: s.live, run: r });
      }
    }
    return out.sort((a, b) => (b.run.startedAt || "").localeCompare(a.run.startedAt || ""));
  }, [filter]);

  const maxDuration = useMemo(() => Math.max(60, ...rows.map((r) => r.run.durationSec)), [rows]);

  return (
    <div className="rh">
      <header className="rh-head">
        <div>
          <span className="mc-hero-eyebrow"><HistoryIcon size={12} /> Run history</span>
          <h2 className="mc-hero-title">All scenarios · all runs</h2>
        </div>
        <nav className="rh-filters">
          {STATUS_FILTERS.map((f) => (
            <button key={f} className={`rh-chip${filter === f ? " rh-chip-sel" : ""}`} onClick={() => setFilter(f)}>
              {f}
            </button>
          ))}
        </nav>
      </header>

      <div className="rh-list">
        {rows.length === 0 && <div className="empty">No runs match the current filter.</div>}
        {rows.map((row) => (
          <div className="rh-row" key={`${row.scenarioId}-${row.run.id}`}>
            <div className="rh-row-id">
              <span className="rh-dot" style={{ background: row.accent }} />
              <span className="mono">{row.run.shortId}</span>
              <span className={`tag ${row.live ? "tag-live" : "tag-syn"}`}>{row.live ? "live" : "bp"}</span>
            </div>
            <div className="rh-row-scenario">{row.scenarioLabel}</div>
            <div className="rh-row-step">{row.run.activeStep ?? "—"}</div>
            <div className="rh-row-bar">
              <div
                className="rh-bar-fill"
                style={{
                  width: `${Math.max(2, (row.run.durationSec / maxDuration) * 100)}%`,
                  background: STATUS_COLOR[row.run.status] ?? "var(--border-strong)",
                }}
                title={`${Math.round(row.run.durationSec / 60)}m`}
              />
            </div>
            <div className="rh-row-meta">
              <span className="mono"><Clock size={11} /> {Math.round(row.run.durationSec / 60)}m</span>
              <span className={`pill pill-${row.run.status === "completed" || row.run.status === "done" ? "done" : row.run.status === "running" ? "running" : row.run.status === "errored" || row.run.status === "failed" ? "errored" : "queued"}`}>{row.run.status}</span>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}