// Run detail — one run's per-region outcome rows: status, stage, duration,
// and the persisted failure cause from run.json (the thing the history list
// cannot show). One-shot load, no polling: this page answers "why did this
// run fail" after the fact.

"use client";

import { useEffect, useState } from "react";
import Link from "next/link";
import { useParams } from "next/navigation";
import { fetchRunDetail } from "@/lib/api-client";
import type { RunDetailResponse } from "@/lib/api-types";
import { utc8Stamp } from "@/lib/fmt";
import { Section } from "@/components/ui/Section";
import { Loading } from "@/components/ui/Loading";
import { ErrorBox } from "@/components/ui/ErrorBox";
import { RunStatusBadge, TriggerBadge } from "@/components/runs/RunBadges";
import { RunRegionTable } from "@/components/runs/RunRegionTable";

export default function RunDetailPage() {
  const params = useParams<{ runId: string | string[] }>();
  const runId = Array.isArray(params?.runId) ? params.runId[0] : (params?.runId ?? "");
  const [detail, setDetail] = useState<RunDetailResponse | null>(null);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    if (!runId) return;
    let cancelled = false;
    (async () => {
      try {
        const resp = await fetchRunDetail(runId);
        if (!cancelled) {
          setDetail(resp);
          setError(null);
        }
      } catch (e) {
        if (!cancelled) {
          setError(e instanceof Error ? e.message : String(e));
          setDetail(null);
        }
      }
    })();
    return () => {
      cancelled = true;
    };
  }, [runId]);

  if (error) return <ErrorBox message={error} />;
  if (!runId) return <ErrorBox message="missing run id" />;
  if (!detail) return <Loading label="loading run detail…" />;

  return (
    <div className="animate-fade-in space-y-4">
      <div className="flex flex-wrap items-center justify-between gap-2">
        <h1 className="text-xl font-semibold tracking-tight">Run detail</h1>
        <Link href="/runs" className="text-sm text-accent hover:underline">
          ← back to history
        </Link>
      </div>

      <div className="flex flex-wrap items-center gap-x-3 gap-y-2 text-sm text-text-secondary">
        <span className="font-mono text-xs">{detail.runId}</span>
        <TriggerBadge trigger={detail.trigger} />
        <RunStatusBadge status={detail.status} />
        <span>started {utc8Stamp(detail.startedAt)}</span>
        {detail.finishedAt ? <span>finished {utc8Stamp(detail.finishedAt)}</span> : null}
        {detail.regionsTotal !== undefined ? (
          <span>
            {detail.regions.length}/{detail.regionsTotal} regions succeeded
            {detail.regions.length < detail.regionsTotal
              ? ` (${detail.regionsTotal - detail.regions.length} failed)`
              : ""}
          </span>
        ) : null}
      </div>

      <Section
        title="Regions"
        subtitle="per-region outcome — failure causes are read from the run header"
      >
        <RunRegionTable entries={detail.regionEntries} />
      </Section>
    </div>
  );
}