podcastdistributiona/app/(admin)/admin/jobs/page.tsx

import type { Metadata } from "next";
import Link from "next/link";
import { Clock, Loader2, CheckCircle2, XCircle } from "lucide-react";
import { listJobs, JOBS_PAGE_SIZE, getJobStatusCounts } from "@/lib/admin/ops";
import { PageHeader } from "@/components/app/page-header";
import { StatCard } from "@/components/admin/ui/stat-card";
import { DataTable, TableToolbar, type Column } from "@/components/admin/ui/data-table";
import { FilterSelect, Pagination } from "@/components/admin/ui/table-controls";
import { JobRowActions } from "@/components/admin/job-row-actions";
import { Badge, type BadgeProps } from "@/components/ui/badge";
import { requireAdmin } from "@/lib/auth/guards";

export const metadata: Metadata = { title: "Admin · Jobs" };

type Row = Awaited<ReturnType<typeof listJobs>>["rows"][number];

const STATUS_VARIANT: Record<string, BadgeProps["variant"]> = {
  queued: "secondary",
  running: "warning",
  completed: "success",
  failed: "destructive",
};

function duration(start: Date | null, end: Date | null): string {
  if (!start || !end) return "—";
  return `${Math.max(0, Math.round((end.getTime() - start.getTime()) / 1000))}s`;
}

export default async function AdminJobsPage({
  searchParams,
}: {
  searchParams: Promise<Record<string, string | undefined>>;
}) {
  // Defence in depth: the (admin) layout also guards, but a layout is not an
  // authorization boundary — pages render concurrently with it, and a route moved
  // out of the group would silently lose its only check.
  await requireAdmin();

  const sp = await searchParams;
  const page = Math.max(1, Number(sp.page ?? "1"));
  const [{ rows, total }, counts] = await Promise.all([
    listJobs({ status: sp.status, page }),
    getJobStatusCounts(),
  ]);

  const columns: Column<Row>[] = [
    {
      key: "episode",
      header: "Episode",
      cell: (j) => (
        <Link href={`/episodes/${j.episode.id}`} className="truncate font-medium hover:text-brand">
          {j.episode.title}
        </Link>
      ),
    },
    { key: "type", header: "Type", cell: (j) => <span className="capitalize">{j.type}</span> },
    {
      key: "status",
      header: "Status",
      cell: (j) => <Badge variant={STATUS_VARIANT[j.status] ?? "secondary"}>{j.status}</Badge>,
    },
    { key: "attempts", header: "Attempts", align: "right", cell: (j) => j.attempts },
    {
      key: "duration",
      header: "Duration",
      align: "right",
      cell: (j) => <span className="text-muted-foreground">{duration(j.startedAt, j.finishedAt)}</span>,
    },
    {
      key: "error",
      header: "Error",
      cell: (j) =>
        j.error ? (
          <span className="truncate font-mono text-xs text-destructive" title={j.error}>
            {j.error.slice(0, 40)}
          </span>
        ) : (
          "—"
        ),
    },
    {
      key: "actions",
      header: "",
      align: "right",
      cell: (j) => <JobRowActions job={{ id: j.id, status: j.status }} />,
    },
  ];

  return (
    <>
      <PageHeader title="Generation jobs" description="The episode pipeline, job by job." />
      <div className="mb-6 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
        <StatCard label="Queued" value={String(counts.queued)} icon={Clock} />
        <StatCard label="Running" value={String(counts.running)} icon={Loader2} />
        <StatCard label="Completed" value={String(counts.completed)} icon={CheckCircle2} />
        <StatCard label="Failed" value={String(counts.failed)} icon={XCircle} />
      </div>

      <TableToolbar>
        <div />
        <FilterSelect
          param="status"
          placeholder="Status"
          allLabel="All status"
          options={[
            { value: "queued", label: "Queued" },
            { value: "running", label: "Running" },
            { value: "completed", label: "Completed" },
            { value: "failed", label: "Failed" },
          ]}
        />
      </TableToolbar>
      <DataTable columns={columns} rows={rows} getRowKey={(j) => j.id} empty="No jobs yet." />
      <div className="mt-4">
        <Pagination page={page} pageSize={JOBS_PAGE_SIZE} total={total} />
      </div>
    </>
  );
}