import type { JobRun } from "../api/types";
import { count, runPillClass, RUN_STATUS_LABEL, TRIGGER_LABEL } from "../lib/feed";
import { fmtTime } from "../lib/format";

/** The last runs of the VISUAL feed as a small table. `attached` maps a run id to the drawings attached after it. */
export function RunsTable({ runs, attached, label = "Last runs" }: { runs: JobRun[]; attached?: Map<number, number>; label?: string }) {
  if (!runs.length) return <div className="empty slim">No runs yet.</div>;
  return (
    <div className="tw">
      <table aria-label={label}>
        <thead>
          <tr>
            <th>When</th>
            <th>Trigger</th>
            <th>Status</th>
            <th className="num">New</th>
            <th className="num">Updated</th>
            <th className="num">Change orders</th>
            <th className="num">Drawings attached</th>
            <th>Errors</th>
          </tr>
        </thead>
        <tbody>
          {runs.map((r) => (
            <tr key={r.id}>
              <td className="small mono nowrap">{fmtTime(r.started_at)}</td>
              <td className="small">{TRIGGER_LABEL[r.trigger] ?? r.trigger}</td>
              <td>
                <span className={runPillClass(r.status)}>{RUN_STATUS_LABEL[r.status] ?? r.status}</span>
              </td>
              <td className="num">{count(r, "new_drafts")}</td>
              <td className="num">{count(r, "drafts_updated")}</td>
              <td className="num">{count(r, "cos_opened") + count(r, "cos_reaimed")}</td>
              <td className="num">{attached?.get(r.id) ?? count(r, "attached")}</td>
              <td className="small">
                {r.errors.length ? (
                  <span className="due over" title={r.errors.join("\n")}>
                    {r.errors.length === 1 ? r.errors[0] : `${r.errors.length} errors: ${r.errors[0] ?? ""}`}
                  </span>
                ) : (
                  <span className="muted">None</span>
                )}
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}