import type { Metadata } from "next";
import Link from "next/link";
import path from "node:path";
import { notFound } from "next/navigation";
import { getJobEntry } from "yt-dlp-transcript-common/jobs/listJobs";
import { getPaths } from "yt-dlp-transcript-common/lib/paths";
import { JobLogTail } from "./components/JobLogTail";
import { jobKindLabel } from "../jobKindLabels";

export const dynamic = "force-dynamic";

export async function generateMetadata({
  params,
}: {
  params: Promise<{ id: string }>;
}): Promise<Metadata> {
  const { id } = await params;
  const job = await getJobEntry(getPaths(), id);
  if (!job) return { title: `${id} — Job` };
  const scope = job.channelSlug
    ? job.videoId
      ? `${job.channelSlug}/${job.videoId}`
      : job.channelSlug
    : null;
  const kindLabel = job.kind ? jobKindLabel(job.kind) : "job";
  const subject = scope ? `${kindLabel} (${scope})` : kindLabel;
  return { title: `${subject} — Job` };
}

export default async function JobDetailPage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;
  const job = await getJobEntry(getPaths(), id);
  if (!job) notFound();
  return (
    <div className="flex flex-col gap-4">
      <div className="flex items-center gap-2 text-sm text-muted-foreground">
        <Link
          href="/jobs"
          className="underline hover:text-foreground"
        >
          Jobs
        </Link>
        <span>/</span>
        <span className="font-mono">{id}</span>
      </div>
      <div className="flex items-center justify-between gap-3">
        <h1 className="text-2xl font-semibold" title={job.kind ?? undefined}>
          {job.kind ? jobKindLabel(job.kind) : "job"}
        </h1>
      </div>
      {job.channelSlug && (
        <p className="text-sm">
          Channel:{" "}
          <Link
            href={`/channels/${job.channelSlug}`}
            className="underline font-mono hover:text-foreground"
          >
            {job.channelSlug}
          </Link>
          {job.videoId && (
            <>
              {" / Video: "}
              <Link
                href={`/channels/${job.channelSlug}/videos/${encodeURIComponent(job.videoId)}`}
                className="underline font-mono hover:text-foreground"
              >
                {job.videoId}
              </Link>
            </>
          )}
        </p>
      )}
      <dl className="text-sm grid grid-cols-2 sm:grid-cols-4 gap-3">
        <Cell label="Status" value={job.status} />
        <Cell
          label="Started"
          value={
            job.startedAt
              ? new Date(job.startedAt).toLocaleString()
              : new Date(job.queuedAt).toLocaleString()
          }
        />
        <Cell
          label="Ended"
          value={job.endedAt ? new Date(job.endedAt).toLocaleString() : "—"}
        />
        <Cell
          label="Exit code"
          value={typeof job.exitCode === "number" ? String(job.exitCode) : "—"}
        />
        {/* Why, when no person pressed Cancel: the boot pass's reason for a
            job a restart left queued (JobMeta.cancelReason). */}
        {job.status === "cancelled" && job.cancelReason && (
          <Cell
            label="Cancelled because"
            value={job.cancelReason}
            className="col-span-2 sm:col-span-4"
            testId="cancel-reason"
          />
        )}
      </dl>
      <p className="text-xs text-muted-foreground font-mono">
        log: {path.relative(getPaths().monorepoRoot, job.logPath)}
      </p>
      <JobLogTail
        jobId={id}
        initiallyRunning={
          job.status === "running" || job.status === "queued"
        }
      />
    </div>
  );
}

function Cell({
  label,
  value,
  className = "",
  testId,
}: {
  label: string;
  value: string;
  className?: string;
  testId?: string;
}) {
  return (
    <div
      className={`rounded border border-border px-3 py-2 ${className}`}
      data-testid={testId}
    >
      <div className="text-xs uppercase tracking-wide text-muted-foreground">
        {label}
      </div>
      <div className="mt-1">{value}</div>
    </div>
  );
}