// Shared chrome for the in-progress run surfaces (the dashboard banner and
// the runs page header): accent banner, pulsing dot, header line with the
// run id and started stamp, done/total counter, and the shimmer progress
// bar over terminal region statuses. Callers add their own header chips
// (badges) and footer content (the per-region grid) as children.

import type { ReactNode } from "react";
import { utc8Stamp } from "@/lib/fmt";
import { StatusDot } from "@/components/ui/StatusDot";

export function RunProgressBanner(props: {
  runId: string;
  startedAt: string;
  done: number;
  total: number;
  /** Extra header chips (badges) after the run id. */
  children?: ReactNode;
  /** Content below the progress bar (per-region grid). */
  footer?: ReactNode;
}) {
  const { runId, startedAt, done, total, children, footer } = props;
  const pctDone = total === 0 ? 0 : Math.round((done / total) * 100);
  return (
    <div className="rounded-lg border border-accent/30 bg-accent-muted px-4 py-3">
      <div className="flex items-center justify-between gap-4 text-sm">
        <div className="flex flex-wrap items-center gap-2">
          <StatusDot status="accent" pulse />
          <span className="font-medium text-accent-hover">Run in progress</span>
          <span className="font-mono text-xs text-accent">{runId}</span>
          {children}
          <span className="text-accent">started {utc8Stamp(startedAt)}</span>
        </div>
        <span className="tabular-nums text-accent">
          {done}/{total} regions
        </span>
      </div>
      <div className="mt-2 h-1.5 overflow-hidden rounded bg-surface-1">
        <div className="h-full progress-shimmer" style={{ width: `${pctDone}%` }} />
      </div>
      {footer}
    </div>
  );
}