import { listRuns } from "@autoscholar/core";
import type { RunStatus } from "@autoscholar/schemas";
import Link from "next/link";
import { StatusBadge } from "@/components/StatusBadge";
import { ago, fmtUsd, modeLabel } from "@/lib/format";
import { db } from "@/lib/server/db";

export const dynamic = "force-dynamic";
const GROUPS: Record<string, string[]> = {
  active: [
    "queued",
    "provisioning",
    "running",
    "quality_check",
    "revising",
    "retrying",
    "publishing",
    "cancelling",
  ],
  blocked: ["quality_failed", "awaiting_approval", "ready_to_publish"],
  done: ["published", "failed", "cancelled"],
};

export default async function RunsPage({ searchParams }: { searchParams: Promise<{ filter?: string }> }) {
  const { filter } = await searchParams;
  const statuses = filter && GROUPS[filter] ? (GROUPS[filter] as RunStatus[]) : undefined;
  const runs = await listRuns(db(), { status: statuses, limit: 200 });
  return (
    <div className="space-y-6">
      <header className="flex flex-wrap items-end justify-between gap-3">
        <div>
          <p className="eyebrow">Orchestration</p>
          <h1 className="title-2 mt-1">Runs</h1>
        </div>
        <nav aria-label="Filter" className="flex flex-wrap gap-1">
          {[
            ["", "All"],
            ["active", "Active"],
            ["blocked", "Needs attention"],
            ["done", "Finished"],
          ].map(([k, l]) => (
            <Link
              key={k}
              href={k ? `/admin/runs?filter=${k}` : "/admin/runs"}
              className={`btn btn-sm ${(filter ?? "") === k ? "btn-primary" : ""}`}
            >
              {l}
            </Link>
          ))}
        </nav>
      </header>
      <ul className="divide-y hairline md:hidden">
        {runs.length === 0 && <li className="muted py-8 text-center text-sm">No runs match.</li>}
        {runs.map((r) => (
          <li key={r.id} className="py-3">
            <Link href={`/admin/runs/${r.id}`} className="block font-medium no-underline hover:underline">
              {r.title}
            </Link>
            <div className="mt-1 flex flex-wrap items-center gap-2 text-xs">
              <StatusBadge status={r.status} />
              <span className="font-mono">{r.currentStage ?? "—"}</span>
              <span className="muted">{modeLabel(r.researchMode)}</span>
              <span className="muted">
                {r.currentAttemptNo}/{r.maxAttempts}
              </span>
              <span className="muted">{fmtUsd(r.totalCostUsd)}</span>
              <span className="subtle">{ago(r.updatedAt)}</span>
            </div>
          </li>
        ))}
      </ul>
      <div className="table-wrap hidden md:block">
        <table className="table">
          <thead>
            <tr>
              <th>Title</th>
              <th>Mode</th>
              <th>Status</th>
              <th>Stage</th>
              <th>Attempt</th>
              <th>Cost</th>
              <th>Auto-publish</th>
              <th>Updated</th>
            </tr>
          </thead>
          <tbody>
            {runs.length === 0 && (
              <tr>
                <td colSpan={8} className="muted py-8 text-center">
                  No runs match.
                </td>
              </tr>
            )}
            {runs.map((r) => (
              <tr key={r.id}>
                <td>
                  <Link href={`/admin/runs/${r.id}`}>{r.title}</Link>
                  <p className="subtle font-mono text-[10px]">{r.id}</p>
                </td>
                <td>{modeLabel(r.researchMode)}</td>
                <td>
                  <StatusBadge status={r.status} />
                </td>
                <td className="font-mono text-xs">{r.currentStage ?? "—"}</td>
                <td>
                  {r.currentAttemptNo}/{r.maxAttempts}
                </td>
                <td>
                  {fmtUsd(r.totalCostUsd)} <span className="subtle text-xs">/ {fmtUsd(r.maxBudgetUsd)}</span>
                </td>
                <td>{r.autoPublish ? "yes" : "no"}</td>
                <td className="subtle text-xs">{ago(r.updatedAt)}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}