// Live panel for the run currently in progress: the shared progress banner
// (with trigger/status badges) plus a per-region status grid. Failed
// regions carry their error as a tooltip; running regions show their stage.

import type { RunHeader as RunHeaderText } from "@/lib/api-types";
import { RegionStatusBadge, RunStatusBadge, TriggerBadge } from "@/components/runs/RunBadges";
import { RunProgressBanner } from "@/components/runs/RunProgressBanner";

/** Progress over the run's regions: pending/running are not done yet. */
export function runProgress(run: RunHeaderText): { done: number; total: number } {
  const entries = Object.values(run.regions);
  const done = entries.filter(
    (e) => e.status === "success" || e.status === "failed",
  ).length;
  return { done, total: entries.length };
}

export function RunHeader({ run }: { run: RunHeaderText }) {
  const regions = Object.entries(run.regions).sort(([a], [b]) => a.localeCompare(b));
  const { done, total } = runProgress(run);
  return (
    <RunProgressBanner
      runId={run.runId}
      startedAt={run.startedAt}
      done={done}
      total={total}
      footer={
        <div className="mt-3 grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-4">
          {regions.map(([regionKey, entry]) => (
            <div
              key={regionKey}
              className="flex items-center justify-between gap-2 rounded border border-surface-2 bg-surface-0 px-2 py-1 text-xs"
            >
              <span className="truncate font-medium text-text-secondary">{regionKey}</span>
              <span className="flex shrink-0 items-center gap-1.5">
                {entry.status === "running" && entry.stage ? (
                  <span className="text-text-muted">{entry.stage}</span>
                ) : null}
                <RegionStatusBadge status={entry.status} title={entry.error} />
              </span>
            </div>
          ))}
        </div>
      }
    >
      <TriggerBadge trigger={run.trigger} />
      <RunStatusBadge status={run.status} />
    </RunProgressBanner>
  );
}