"use client";

import Link from "next/link";
import { useCallback, useEffect, useState, useTransition } from "react";
import { formatDuration } from "yt-dlp-transcript-common/lib/format";
import {
  disableWorkerAction,
  drainWorkerAction,
  enableWorkerAction,
  setDefaultWorkersAction,
  stopWorkerPartialAction,
} from "../actions";
import { PauseLaneButton } from "../../components/lanes/pauseControl";
import type {
  WorkersPayload,
  WorkerTask,
  WorkerView,
} from "yt-dlp-transcript-common/views/workers";

// The payload shape used to be DECLARED here, in a `"use client"` file, and
// the server builder imported it back out — the renderer owning the wire
// shape. It lives in `common/views/workers.ts` now, beside the function that
// builds it, and every component that names it says so.

// Live wall-clock that re-renders once a second; null until mounted so SSR and
// the first client render agree (no Date.now() hydration mismatch).
function useNow(): number | null {
  const [now, setNow] = useState<number | null>(null);
  useEffect(() => {
    setNow(Date.now());
    const id = setInterval(() => setNow(Date.now()), 1000);
    return () => clearInterval(id);
  }, []);
  return now;
}

const POLL_MS = 1000;

export function WorkersView({ initial }: { initial: WorkersPayload }) {
  const [payload, setPayload] = useState<WorkersPayload>(initial);
  const [pending, startTransition] = useTransition();
  // Transient "Saved as default" confirmation shown after the button runs.
  const [savedDefault, setSavedDefault] = useState(false);

  const refetch = useCallback(async () => {
    try {
      const res = await fetch("/api/view/workers", { cache: "no-store" });
      if (res.ok) setPayload((await res.json()) as WorkersPayload);
    } catch {
      // transient — keep polling
    }
  }, []);

  useEffect(() => {
    let cancelled = false;
    let timer: ReturnType<typeof setTimeout> | null = null;
    async function tick() {
      if (!cancelled) await refetch();
      if (!cancelled) timer = setTimeout(tick, POLL_MS);
    }
    timer = setTimeout(tick, POLL_MS);
    return () => {
      cancelled = true;
      if (timer) clearTimeout(timer);
    };
  }, [refetch]);

  function run(action: () => Promise<unknown>) {
    startTransition(async () => {
      await action();
      await refetch();
    });
  }

  function saveDefault() {
    startTransition(async () => {
      const res = (await setDefaultWorkersAction()) as { ok: boolean };
      await refetch();
      if (res.ok) setSavedDefault(true);
    });
  }

  // Clear the "Saved" confirmation a few seconds after it appears.
  useEffect(() => {
    if (!savedDefault) return;
    const id = setTimeout(() => setSavedDefault(false), 3000);
    return () => clearTimeout(id);
  }, [savedDefault]);

  const { workers, paused, defaultEnabledIds } = payload;
  const defaultSet = new Set(defaultEnabledIds ?? []);

  return (
    <div className="flex flex-col gap-3">
      <div className="flex items-center gap-3">
        <PauseLaneButton
          lane="transcription"
          held={paused}
          disabled={workers.length === 0}
          onChange={refetch}
        />
        {paused && (
          <span role="status" className="text-sm text-warning">
            Transcriptions paused — batches are waiting; parakeet jobs stop after
            the current segment and resume on the next run. Resume restores each
            worker&apos;s previous state.
          </span>
        )}
        <span className="ml-auto flex items-center gap-2">
          {savedDefault && (
            <span
              role="status"
              className="text-sm text-success"
            >
              Saved as default
            </span>
          )}
          <button
            type="button"
            disabled={pending || workers.length === 0}
            onClick={saveDefault}
            title="Save the currently enabled workers as the launch default; on the next server start only these workers start enabled and all others start disabled"
            className="px-3 py-1.5 rounded-md border border-border text-sm hover:bg-muted disabled:opacity-50"
          >
            {defaultEnabledIds ? "Update default" : "Set as default"}
          </button>
        </span>
      </div>

      {workers.length === 0 ? (
        <p className="text-sm text-muted-foreground border border-dashed border-border rounded p-4">
          No workers configured. Add one on the{" "}
          <a href="/settings" className="underline">
            Settings
          </a>{" "}
          page.
        </p>
      ) : (
        <ul className="flex flex-col gap-2">
          {workers.map((w) => (
            <WorkerCard
              key={w.id}
              worker={w}
              pending={pending}
              run={run}
              inDefault={defaultSet.has(w.id)}
            />
          ))}
        </ul>
      )}
    </div>
  );
}

// Token-driven semantic tones so worker state recolors with every base.
function stateBadge(w: WorkerView): { label: string; className: string } {
  if (w.degraded) {
    return {
      label: "degraded",
      className: "bg-destructive-soft text-destructive border-destructive/30",
    };
  }
  switch (w.state) {
    case "enabled":
      return {
        label: w.busy ? "busy" : "idle",
        className: "bg-success-soft text-success border-success/30",
      };
    case "draining":
      return {
        label: "draining",
        className: "bg-warning-soft text-warning border-warning/30",
      };
    default:
      return {
        label: "disabled",
        className: "bg-muted text-muted-foreground border-border",
      };
  }
}

function WorkerCard({
  worker: w,
  pending,
  run,
  inDefault,
}: {
  worker: WorkerView;
  pending: boolean;
  run: (action: () => Promise<unknown>) => void;
  // True when this worker is part of the saved launch default — it will start
  // enabled on the next server start.
  inDefault: boolean;
}) {
  const badge = stateBadge(w);
  const engine =
    w.kind === "remote"
      ? "remote"
      : w.kind === "llm"
        ? "llm endpoint"
        : (w.appId ?? "local");
  return (
    <li
      aria-label={`worker ${w.name}`}
      className="flex flex-col gap-2 rounded border border-border p-3 bg-card"
    >
      <div className="flex flex-wrap items-center gap-2">
        <span className="font-medium text-sm">{w.name}</span>
        <span
          className={`text-[11px] px-1.5 py-0.5 rounded-full border ${badge.className}`}
        >
          {badge.label}
        </span>
        <span className="text-xs text-muted-foreground">{engine}</span>
        <span className="text-xs text-muted-foreground">priority {w.priority}</span>
        {w.tags && w.tags.length > 0 && (
          <span
            className="text-xs text-muted-foreground"
            title="Capability tags — this worker only takes work requiring one of these"
          >
            tags: {w.tags.join(", ")}
          </span>
        )}
        {inDefault && (
          <span
            className="text-[11px] px-1.5 py-0.5 rounded-full border bg-info-soft text-info border-info/30"
            title="Starts enabled on the next server launch (part of the saved default)"
          >
            default
          </span>
        )}
        <span className="ml-auto flex items-center gap-1.5">
          {(w.state === "disabled" || w.state === "draining" || w.degraded) && (
            <button
              type="button"
              disabled={pending}
              onClick={() => run(() => enableWorkerAction(w.id))}
              aria-label={`enable ${w.name}`}
              className="px-2 py-1 rounded border border-success/30 text-xs text-success hover:bg-success-soft disabled:opacity-50"
            >
              Enable
            </button>
          )}
          {w.busy && w.canStopPartial && (
            <button
              type="button"
              disabled={pending}
              onClick={() => run(() => stopWorkerPartialAction(w.id))}
              aria-label={`stop ${w.name} keep progress`}
              title="Finish the current window, then stop and take the worker out of rotation (it ends disabled); completed windows are cached and resume on the next run"
              className="px-2 py-1 rounded border border-warning/30 text-xs text-warning hover:bg-warning-soft disabled:opacity-50"
            >
              Stop &amp; keep progress
            </button>
          )}
          {w.state === "enabled" && !w.degraded && (
            <>
              <button
                type="button"
                disabled={pending || !w.busy}
                onClick={() => run(() => drainWorkerAction(w.id))}
                aria-label={`drain ${w.name}`}
                title="Stop taking new work; let in-flight transcriptions finish"
                className="px-2 py-1 rounded border border-warning/30 text-xs text-warning hover:bg-warning-soft disabled:opacity-50"
              >
                Drain
              </button>
              <button
                type="button"
                disabled={pending}
                onClick={() => run(() => disableWorkerAction(w.id))}
                aria-label={`disable ${w.name}`}
                title="Stop immediately (in-flight transcriptions keep running)"
                className="px-2 py-1 rounded border border-border text-xs hover:bg-muted disabled:opacity-50"
              >
                Disable
              </button>
            </>
          )}
          {w.state === "draining" && (
            <button
              type="button"
              disabled={pending}
              onClick={() => run(() => disableWorkerAction(w.id))}
              aria-label={`force disable ${w.name}`}
              className="px-2 py-1 rounded border border-border text-xs hover:bg-muted disabled:opacity-50"
            >
              Disable now
            </button>
          )}
        </span>
      </div>
      {w.degraded && (
        <p className="text-xs text-destructive">
          Auto-disabled — unreachable or repeated failures. Enable to retry.
        </p>
      )}
      {w.tasks.length > 0 && (
        <ul className="flex flex-col gap-1.5">
          {w.tasks.map((t) => (
            <li key={t.id}>
              <TaskRow task={t} />
            </li>
          ))}
        </ul>
      )}
    </li>
  );
}

function TaskRow({ task }: { task: WorkerTask }) {
  const now = useNow();
  const hasFraction = typeof task.fraction === "number";
  const pct = hasFraction ? Math.round((task.fraction as number) * 100) : 0;
  const elapsed =
    now === null
      ? null
      : formatDuration(Math.max(0, Math.round((now - task.startedAt) / 1000))) ||
        "0:00";
  const meta = [elapsed, hasFraction ? `${pct}%` : null, task.detail]
    .filter(Boolean)
    .join(" · ");
  return (
    <div className="flex flex-col gap-0.5">
      <div className="flex items-baseline justify-between gap-2 text-xs">
        <span className="truncate">
          <span className="text-muted-foreground">Transcribing </span>
          {task.channelSlug ? (
            <Link
              href={`/channels/${task.channelSlug}/videos/${encodeURIComponent(task.label)}`}
              className="font-mono underline hover:text-foreground"
            >
              {task.label}
            </Link>
          ) : (
            <span className="font-mono">{task.label}</span>
          )}
          {task.channelSlug && (
            <span className="text-muted-foreground">
              {" "}
              in <span className="font-mono">{task.channelSlug}</span>
            </span>
          )}
        </span>
        <span className="font-mono text-muted-foreground shrink-0">{meta}</span>
      </div>
      <span
        role="progressbar"
        aria-label={`Transcribing ${task.label}`}
        aria-valuenow={hasFraction ? pct : undefined}
        className="relative block h-1.5 w-full overflow-hidden rounded bg-muted"
      >
        {hasFraction ? (
          <span
            className="absolute inset-y-0 left-0 bg-info"
            style={{ width: `${pct}%` }}
          />
        ) : (
          // Indeterminate (no parseable progress yet): a full-width amber pulse
          // reads as "working, no number" rather than a stalled ~33%.
          <span className="absolute inset-0 animate-pulse bg-warning" />
        )}
      </span>
    </div>
  );
}