"use client";

import Link from "next/link";
import { useState } from "react";
import type { JobRowView } from "yt-dlp-transcript-common/views/jobRowView";
import { formatDuration } from "yt-dlp-transcript-common/lib/format";
import { JobLogTail } from "../[id]/components/JobLogTail";
import { jobKindLabel } from "../jobKindLabels";
import { formatElapsed } from "../../lib/formatElapsed";
import { CancelJobButton } from "./CancelJobButton";
import { DrainJobButton } from "./DrainJobButton";
import { ForceReleaseJobButton } from "./ForceReleaseJobButton";
import { ReorderJobButtons } from "./ReorderJobButtons";
import { RetryJobButton } from "./RetryJobButton";
import {
  JobProgressBar,
  TaskProgressBar,
  compactProgressText,
} from "./JobProgressBars";

// ONE JOB, DRAWN ONE WAY — in three sizes.
//
// Every surface that shows a job in flight draws a `JobRowView`
// (common/views/jobRowView.ts) through this file: the /jobs table (`table`, a
// <tr>), the card list a page shows for its own jobs (`card`, an <li>), and
// the dense lines of the monitor widget and the operations board's in-flight
// list (`compact`, a <div>). The heading, the status colours, the action
// buttons and the progress bars are this file's, once; a variant decides only
// the container and which parts it `show`s.

// Which parts a row draws. Every flag defaults per variant (see DEFAULTS).
export type JobRowShow = {
  tasks: boolean; // the per-task progress bars
  jobBar: boolean; // the batch progress bar
  headingProgress: boolean; // compact: "↓ 5/10" in the heading line
  eta: boolean; // compact: "~2m left" beside the batch figure
  actions: boolean; // JobRowActions
  links: boolean; // Job / channel / video links (compact: plain text when off)
  log: boolean; // card: the Show log toggle + tail
  elapsed: boolean; // compact: "3m07s" since startedAt, at the line's end
  statusPill: boolean; // off where every row is running by construction
};

type Variant = "table" | "card" | "compact";

const DEFAULTS: Record<Variant, JobRowShow> = {
  table: {
    tasks: true,
    jobBar: true,
    headingProgress: false,
    eta: true,
    actions: true,
    links: true,
    log: false,
    elapsed: false,
    statusPill: true,
  },
  card: {
    tasks: true,
    jobBar: true,
    headingProgress: false,
    eta: true,
    actions: true,
    links: true,
    log: false,
    elapsed: false,
    statusPill: true,
  },
  compact: {
    tasks: true,
    jobBar: false,
    headingProgress: false,
    eta: false,
    actions: false,
    links: false,
    log: false,
    elapsed: false,
    statusPill: true,
  },
};

function fmtDuration(ms: number): string {
  if (ms < 1000) return `${ms}ms`;
  const s = ms / 1000;
  if (s < 60) return `${s.toFixed(1)}s`;
  const m = s / 60;
  return `${m.toFixed(1)}m`;
}

// "next in line" reads better than "1st"; past that, an ordinal.
function queuePlace(position: number): string {
  if (position === 1) return "next in line";
  const rem100 = position % 100;
  const rem10 = position % 10;
  const suffix =
    rem100 >= 11 && rem100 <= 13
      ? "th"
      : rem10 === 1
        ? "st"
        : rem10 === 2
          ? "nd"
          : rem10 === 3
            ? "rd"
            : "th";
  return `${position}${suffix} in line`;
}

export function statusColor(status: string): string {
  switch (status) {
    case "queued":
      return "bg-muted text-muted-foreground";
    case "running":
      return "bg-info-soft text-info";
    case "done":
      return "bg-success-soft text-success";
    case "failed":
      return "bg-destructive-soft text-destructive";
    case "cancelled":
      return "bg-warning-soft text-warning";
    default:
      return "bg-muted text-muted-foreground";
  }
}

// WHY A JOB WAS CANCELLED, when no person pressed Cancel: the boot pass's
// reason for a job a restart left queued (JobRowView.cancelReason, from the
// meta). Drawn wherever the `cancelled` pill is, as plain text under or beside
// it; absent on every other row.
function cancelReasonOf(job: JobRowView): string | undefined {
  return job.status === "cancelled" ? job.cancelReason : undefined;
}

function CancelReason({ job, inline }: { job: JobRowView; inline?: boolean }) {
  const reason = cancelReasonOf(job);
  if (!reason) return null;
  return (
    <span
      data-testid="cancel-reason"
      className={
        inline
          ? "text-xs text-muted-foreground"
          : "self-start max-w-72 text-xs text-muted-foreground break-words"
      }
    >
      {inline ? `· ${reason}` : reason}
    </span>
  );
}

// A row with a page at /jobs/<id>. A runner's in-flight unit that is a task
// on its runner's job (a transcription, a digest) is not a registry job, so it
// does not link to one; a download unit is, and carries its id.
function linksToJob(job: JobRowView): boolean {
  return job.source !== "runner" || Boolean(job.inRegistry);
}

function videoHref(job: JobRowView): string | null {
  return job.channelSlug && job.videoId
    ? `/channels/${job.channelSlug}/videos/${encodeURIComponent(job.videoId)}`
    : null;
}

// THE ACTIONS, by status — one rule for every surface: Retry a failed
// replayable job, Reorder a queued one, Drain a drainable running one, Cancel
// anything live, and Force-release anything running or stuck (the escape hatch
// for a Cancel that leaves a queue wedged; see registry.forceRelease — a stuck
// terminal/evicted row has no Cancel to offer, so it gets this instead).
export function JobRowActions({
  job,
  forceRelease = "running-or-stuck",
}: {
  job: JobRowView;
  // The lane line offers Force-release only on a STUCK runner: for a healthy
  // one it does what Cancel beside it does, as a second, filled-red button.
  forceRelease?: "running-or-stuck" | "stuck";
}) {
  return (
    <>
      {job.status === "failed" && job.replayable && (
        <RetryJobButton jobId={job.id} />
      )}
      {job.status === "queued" && (job.canMoveUp || job.canMoveDown) && (
        <ReorderJobButtons
          jobId={job.id}
          canMoveUp={job.canMoveUp}
          canMoveDown={job.canMoveDown}
        />
      )}
      {job.status === "running" && (job.drainable || job.draining) && (
        <DrainJobButton jobId={job.id} draining={job.draining} />
      )}
      {(job.status === "running" || job.status === "queued") && (
        <CancelJobButton jobId={job.id} />
      )}
      {((forceRelease === "running-or-stuck" && job.status === "running") ||
        Boolean(job.stuck)) && <ForceReleaseJobButton jobId={job.id} />}
    </>
  );
}

function AutoBadge({ compact }: { compact?: boolean }) {
  return (
    <span
      className={
        compact
          ? "uppercase tracking-wide px-1 py-0.5 rounded text-[9px] bg-warning-soft text-warning"
          : "text-[10px] uppercase tracking-wide px-1.5 py-0.5 rounded bg-warning-soft text-warning"
      }
      title="Background work — yields to a manually-triggered sync/download on the same platform"
    >
      auto
    </span>
  );
}

// THE HEADING: status pill · kind · detail · auto badge · links · queue key.
// "Fetch window" alone is the least useful row on a page — every window fetch
// has that kind — so WHO ASKED (`detail`) sits beside the kind.
function JobRowHeading({
  job,
  compact = false,
  links = true,
  hideChannelSlug,
  hideVideoId,
  headingProgress = false,
  eta = false,
  statusPill = true,
}: {
  statusPill?: boolean;
  job: JobRowView;
  compact?: boolean;
  links?: boolean;
  hideChannelSlug?: boolean;
  hideVideoId?: boolean;
  headingProgress?: boolean;
  eta?: boolean;
}) {
  const linkClass = "font-mono text-xs underline hover:text-foreground";
  const video = videoHref(job);
  return (
    <>
      {statusPill && (
        <span
          className={
            compact
              ? `uppercase tracking-wide px-1.5 py-0.5 rounded text-[10px] ${statusColor(job.status)}`
              : `text-xs uppercase tracking-wide px-2 py-0.5 rounded ${statusColor(job.status)}`
          }
          title={cancelReasonOf(job)}
        >
          {job.status}
        </span>
      )}
      <span
        className={compact ? "shrink-0 font-mono" : "text-xs font-medium"}
        title={job.kind}
      >
        {job.kind ? jobKindLabel(job.kind) : "—"}
      </span>
      {job.detail &&
        (compact ? (
          // One line, always: a pinned widget and an in-flight list are
          // narrow, and "rule N · <leaf sentence>" would wrap into a paragraph.
          <span
            className="min-w-0 truncate text-xs text-muted-foreground"
            title={job.detail}
          >
            · {job.detail}
          </span>
        ) : (
          <span className="text-xs text-muted-foreground">· {job.detail}</span>
        ))}
      {job.background && <AutoBadge compact={compact} />}
      {links && linksToJob(job) && (
        <Link href={`/jobs/${job.id}`} className={linkClass}>
          Job {job.id}
        </Link>
      )}
      {!hideChannelSlug &&
        job.channelSlug &&
        (links ? (
          <Link href={`/channels/${job.channelSlug}`} className={linkClass}>
            {job.channelSlug}
          </Link>
        ) : (
          <span className="font-mono text-muted-foreground truncate max-w-[12rem]">
            {job.channelSlug}
          </span>
        ))}
      {links && !hideVideoId && video && (
        <Link href={video} className={linkClass}>
          {job.videoId}
        </Link>
      )}
      {headingProgress && job.progress && (
        <span className="font-mono text-muted-foreground shrink-0">
          {compactProgressText(job.progress, eta)}
        </span>
      )}
      {!compact && job.status === "queued" && (
        <span className="text-xs text-muted-foreground">
          queue <code className="font-mono">{job.queueKey || "—"}</code>
          {job.background && " · waiting behind a manual job"}
        </span>
      )}
      {/* Its counterpart for a cancelled job: why. Compact rows carry it as
          the pill's title instead — they are one line, always. */}
      {!compact && <CancelReason job={job} inline />}
    </>
  );
}

function TaskList({ job, compact }: { job: JobRowView; compact?: boolean }) {
  if (!job.tasks || job.tasks.length === 0) return null;
  if (compact)
    return (
      <>
        {job.tasks.map((t) => (
          <TaskProgressBar key={t.id} task={t} compact />
        ))}
      </>
    );
  return (
    <ul
      aria-label="In-progress operations"
      className="flex flex-col gap-1.5 pl-2 border-l-2 border-border"
    >
      {job.tasks.map((t) => (
        <li key={t.id}>
          <TaskProgressBar task={t} />
        </li>
      ))}
    </ul>
  );
}

export function JobRow({
  job,
  variant,
  hideChannelSlug,
  hideVideoId,
  show: showPatch,
  live = false,
  now = null,
}: {
  job: JobRowView;
  variant: Variant;
  hideChannelSlug?: boolean;
  hideVideoId?: boolean;
  show?: Partial<JobRowShow>;
  // table: the row came from the live payload (SSR seed or poll) — `data-live`.
  live?: boolean;
  // The ticking clock (useNow), for elapsed and running durations. null until
  // mounted; the table falls back to Date.now() behind suppressHydrationWarning,
  // as it always has.
  now?: number | null;
}) {
  const show = { ...DEFAULTS[variant], ...showPatch };
  if (variant === "table") return <TableRow job={job} live={live} now={now} />;
  if (variant === "card")
    return (
      <CardRow
        job={job}
        show={show}
        hideChannelSlug={hideChannelSlug}
        hideVideoId={hideVideoId}
      />
    );
  return (
    <div className="flex flex-col gap-1">
      <div className="flex min-w-0 items-center gap-1.5 whitespace-nowrap text-xs">
        <JobRowHeading
          job={job}
          compact
          statusPill={show.statusPill}
          links={show.links}
          hideChannelSlug={hideChannelSlug}
          hideVideoId={hideVideoId}
          headingProgress={show.headingProgress}
          eta={show.eta}
        />
        {(show.actions || show.elapsed) && (
          <span className="ml-auto flex items-center gap-2">
            {show.actions && <JobRowActions job={job} />}
            {show.elapsed && (
              <span className="tabular-nums text-xs text-muted-foreground">
                {now !== null && typeof job.startedAt === "number"
                  ? formatElapsed(now - job.startedAt)
                  : "—"}
              </span>
            )}
          </span>
        )}
      </div>
      {show.jobBar && job.progress && (
        <JobProgressBar progress={job.progress} compact showEta={show.eta} />
      )}
      {show.tasks && <TaskList job={job} compact />}
    </div>
  );
}

// THE CARD: a page's own jobs (channel, video, build, operation pages).
function CardRow({
  job,
  show,
  hideChannelSlug,
  hideVideoId,
}: {
  job: JobRowView;
  show: JobRowShow;
  hideChannelSlug?: boolean;
  hideVideoId?: boolean;
}) {
  const [showLog, setShowLog] = useState(false);
  return (
    <li className="flex flex-col gap-2 border-t border-border pt-2 first:border-t-0 first:pt-0">
      <div className="flex flex-wrap items-center gap-2 text-sm">
        <JobRowHeading
          job={job}
          links={show.links}
          hideChannelSlug={hideChannelSlug}
          hideVideoId={hideVideoId}
        />
        {(show.actions || show.log) && (
          <div className="ml-auto flex items-center gap-2">
            {show.actions && <JobRowActions job={job} />}
            {show.log && (
              <button
                type="button"
                onClick={() => setShowLog((s) => !s)}
                aria-expanded={showLog}
                aria-label={`${showLog ? "hide" : "show"} log for job ${job.id}`}
                className="px-2 py-1 rounded-md bg-muted text-foreground text-xs font-medium hover:opacity-90"
              >
                {showLog ? "Hide log" : "Show log"}
              </button>
            )}
          </div>
        )}
      </div>
      {show.jobBar && job.progress && (
        <JobProgressBar progress={job.progress} />
      )}
      {show.tasks && <TaskList job={job} />}
      {showLog && <JobLogTail jobId={job.id} initiallyRunning />}
    </li>
  );
}

// THE TABLE ROW: /jobs, one <tr> per job, live head and history tail alike.
function TableRow({
  job: j,
  live,
  now,
}: {
  job: JobRowView;
  live: boolean;
  now: number | null;
}) {
  const start = j.startedAt ?? j.queuedAt;
  const dur = j.endedAt
    ? j.endedAt - (start ?? j.endedAt)
    : j.startedAt
      ? (now ?? Date.now()) - j.startedAt
      : 0;
  const video = videoHref(j);
  return (
    <tr
      // The kind cell renders a human label (jobKindLabel), so the machine
      // kind is not matchable from the row text. Expose it here as well as on
      // the cell's title: asserting on the label text is what rotted 9 e2e
      // tests when kinds gained labels.
      data-kind={j.kind || undefined}
      data-job-id={j.id}
      // Came from the live payload — the SSR seed or the poll.
      data-live={live ? "" : undefined}
      data-stuck={j.stuck?.reason}
      className="border-t border-border"
    >
      <td className="px-3 py-2 font-mono text-xs align-top">
        <Link
          href={`/jobs/${j.id}`}
          className="underline hover:text-foreground"
        >
          {j.id}
        </Link>
      </td>
      <td className="px-3 py-2 align-top" title={j.kind || undefined}>
        <span className="flex items-center gap-1.5">
          {j.kind ? jobKindLabel(j.kind) : "—"}
          {j.detail && (
            <span className="text-xs text-muted-foreground">· {j.detail}</span>
          )}
          {j.background && <AutoBadge />}
        </span>
      </td>
      <td className="px-3 py-2 font-mono text-xs align-top">
        {j.channelSlug ? (
          <Link
            href={`/channels/${j.channelSlug}`}
            className="underline hover:text-foreground"
          >
            {j.channelSlug}
          </Link>
        ) : (
          "—"
        )}
      </td>
      <td className="px-3 py-2 font-mono text-xs align-top">
        {video ? (
          <Link href={video} className="underline hover:text-foreground">
            {j.videoId}
          </Link>
        ) : (
          "—"
        )}
      </td>
      <td className="px-3 py-2 font-mono text-xs align-top">
        {j.queueKey === undefined
          ? "—"
          : j.queueKey === ""
            ? "(immediate)"
            : j.queueKey}
        {j.status === "queued" &&
          typeof j.position === "number" &&
          j.position >= 1 && (
            <span className="text-muted-foreground">
              {" "}
              · {queuePlace(j.position)}
            </span>
          )}
      </td>
      <td className="px-3 py-2 align-top min-w-56">
        {/* gap-1, deliberately NOT gap-0.5: the suite climbs from a task's
            progressbar to its nearest gap-0.5 ancestor to read the elapsed
            timer, and that ancestor must stay the task's own wrapper. */}
        <div className="flex flex-col gap-1">
          <span
            className={`self-start text-xs uppercase tracking-wide px-2 py-0.5 rounded ${statusColor(j.status)}`}
          >
            {j.status}
          </span>
          <CancelReason job={j} />
          {j.stuck && (
            <span
              data-stuck={j.stuck.reason}
              title={j.pid ? `pid ${j.pid} — kill -9 ${j.pid}` : undefined}
              className="self-start text-[10px] uppercase tracking-wide px-1.5 py-0.5 rounded bg-destructive-soft text-destructive"
            >
              stuck · {j.stuck.reason}
            </span>
          )}
          {j.progress && <JobProgressBar progress={j.progress} />}
          <TaskList job={j} />
        </div>
      </td>
      <td
        className="px-3 py-2 text-xs text-muted-foreground whitespace-nowrap align-top"
        suppressHydrationWarning
      >
        {start === undefined ? "—" : new Date(start).toLocaleString()}
      </td>
      <td
        className="px-3 py-2 text-xs text-muted-foreground whitespace-nowrap align-top"
        suppressHydrationWarning
      >
        {j.startedAt === undefined && typeof j.heldMs === "number"
          ? `held for ${formatDuration(Math.round(j.heldMs / 1000)) || "0:00"}`
          : fmtDuration(dur)}
      </td>
      <td className="px-3 py-2 text-xs text-muted-foreground text-right whitespace-nowrap align-top">
        {j.stuck && j.lastLogLine ? (
          <span
            className="font-mono text-xs text-muted-foreground truncate max-w-64 block"
            title={j.lastLogLine}
          >
            {j.lastLogLine}
          </span>
        ) : typeof j.logSize === "number" ? (
          `${j.logSize.toLocaleString()} B`
        ) : (
          "—"
        )}
      </td>
      <td className="px-3 py-2 text-right align-top">
        <div className="flex items-center justify-end gap-2">
          <JobRowActions job={j} />
        </div>
      </td>
    </tr>
  );
}