"use client";

import { useId, useState } from "react";
import type { Worker } from "yt-dlp-transcript-common/lib/workers";
import type { TranscriptionAppDescriptor } from "yt-dlp-transcript-common/lib/transcriptionApps";
// Its controlled checkboxes and selects sit inside action forms, whose reset they would not
// survive alone (forms/Controlled.tsx).
import {
  ControlledCheck,
  ControlledSelect,
} from "../../components/forms/Controlled";

// Editor for the transcription worker list. Manages an ordered array of workers
// (list order == priority, top = highest) and serializes it to a hidden JSON
// input saveWorkersAction reads (mirrors SocialLinksField/socialLinksJson). The
// server re-sanitizes and validates, so this component only needs to produce a
// reasonable shape.
//
// BOTH IMPORTS BELOW ARE `import type` AND MUST STAY SO: workers.ts reaches
// transcriptionApps.ts, which reaches paths.ts and node:fs. The tag vocabulary
// and the app list are built on the server and passed down as props.

type Row = Worker & { _key: number };

let keyCounter = 0;
function withKeys(workers: Worker[]): Row[] {
  return workers.map((w) => ({ ...w, _key: keyCounter++ }));
}

function blankLocal(appId: string): Row {
  return {
    _key: keyCounter++,
    id: "",
    name: "",
    kind: "local",
    enabled: true,
    priority: 0,
    appId,
    config: {},
  };
}

function blankRemote(): Row {
  return {
    _key: keyCounter++,
    id: "",
    name: "",
    kind: "remote",
    enabled: true,
    priority: 0,
    remote: { baseUrl: "" },
  };
}

function blankLlm(): Row {
  return {
    _key: keyCounter++,
    id: "",
    name: "",
    kind: "llm",
    enabled: true,
    priority: 0,
    llm: { baseUrl: "" },
  };
}

// Duplicate a worker into a new slot: same config, fresh id, "(copy)" name.
function copyOf(row: Row): Row {
  const { _key, id, name, ...rest } = row;
  void _key;
  void id;
  return {
    ...rest,
    _key: keyCounter++,
    id: "",
    name: name ? `${name} (copy)` : "",
    config: row.config ? { ...row.config } : undefined,
    remote: row.remote ? { ...row.remote } : undefined,
    llm: row.llm ? { ...row.llm } : undefined,
  };
}

// Strip the React-only _key and set priority from list order before serializing.
function serialize(rows: Row[]): string {
  return JSON.stringify(
    rows.map(({ _key, ...w }, i) => {
      void _key;
      return { ...w, priority: i };
    }),
  );
}

type Props = {
  initial: Worker[];
  apps: TranscriptionAppDescriptor[];
  name: string;
  // The known tag vocabulary (operation ids + resource names), built on the
  // server: the catalog lives in operations.ts, whose import graph must not
  // reach the client bundle. Used only to WARN about a tag the scheduler will
  // never match — an unknown tag saves fine.
  knownTags?: string[];
};

export function WorkersField({ initial, apps, name, knownTags }: Props) {
  const [rows, setRows] = useState<Row[]>(() => withKeys(initial));
  const defaultAppId = apps[0]?.id ?? "whisper-cpp";

  function update(next: Row[]) {
    setRows(next);
  }
  function patch(key: number, change: Partial<Row>) {
    update(rows.map((r) => (r._key === key ? { ...r, ...change } : r)));
  }
  function patchConfig(key: number, change: Partial<NonNullable<Worker["config"]>>) {
    update(
      rows.map((r) =>
        r._key === key ? { ...r, config: { ...r.config, ...change } } : r,
      ),
    );
  }
  function patchRemote(key: number, change: Partial<NonNullable<Worker["remote"]>>) {
    update(
      rows.map((r) =>
        r._key === key
          ? { ...r, remote: { baseUrl: "", ...r.remote, ...change } }
          : r,
      ),
    );
  }
  function patchLlm(key: number, change: Partial<NonNullable<Worker["llm"]>>) {
    update(
      rows.map((r) =>
        r._key === key
          ? { ...r, llm: { baseUrl: "", ...r.llm, ...change } }
          : r,
      ),
    );
  }
  function remove(key: number) {
    update(rows.filter((r) => r._key !== key));
  }
  function copy(index: number) {
    const next = [...rows];
    next.splice(index + 1, 0, copyOf(rows[index]));
    update(next);
  }
  function move(index: number, dir: -1 | 1) {
    const j = index + dir;
    if (j < 0 || j >= rows.length) return;
    const next = [...rows];
    [next[index], next[j]] = [next[j], next[index]];
    update(next);
  }

  return (
    <div className="flex flex-col gap-3">
      <input type="hidden" name={name} value={serialize(rows)} readOnly />
      {rows.length === 0 && (
        <p className="text-xs text-destructive">
          No workers defined — add at least one so transcription can run.
        </p>
      )}
      {rows.map((row, i) => (
        <WorkerCard
          key={row._key}
          row={row}
          index={i}
          total={rows.length}
          apps={apps}
          knownTags={knownTags}
          onPatch={(c) => patch(row._key, c)}
          onPatchConfig={(c) => patchConfig(row._key, c)}
          onPatchRemote={(c) => patchRemote(row._key, c)}
          onPatchLlm={(c) => patchLlm(row._key, c)}
          onRemove={() => remove(row._key)}
          onCopy={() => copy(i)}
          onMove={(dir) => move(i, dir)}
        />
      ))}
      <div className="flex gap-2">
        <button
          type="button"
          onClick={() => update([...rows, blankLocal(defaultAppId)])}
          className="px-2 py-1 rounded border border-border text-xs hover:bg-muted"
        >
          + Local worker
        </button>
        <button
          type="button"
          onClick={() => update([...rows, blankRemote()])}
          className="px-2 py-1 rounded border border-border text-xs hover:bg-muted"
        >
          + Remote worker
        </button>
        <button
          type="button"
          onClick={() => update([...rows, blankLlm()])}
          className="px-2 py-1 rounded border border-border text-xs hover:bg-muted"
        >
          + LLM endpoint
        </button>
      </div>
    </div>
  );
}

function WorkerCard({
  row,
  index,
  total,
  apps,
  knownTags,
  onPatch,
  onPatchConfig,
  onPatchRemote,
  onPatchLlm,
  onRemove,
  onCopy,
  onMove,
}: {
  row: Row;
  index: number;
  total: number;
  apps: TranscriptionAppDescriptor[];
  knownTags?: string[];
  onPatch: (c: Partial<Row>) => void;
  onPatchConfig: (c: Partial<NonNullable<Worker["config"]>>) => void;
  onPatchRemote: (c: Partial<NonNullable<Worker["remote"]>>) => void;
  onPatchLlm: (c: Partial<NonNullable<Worker["llm"]>>) => void;
  onRemove: () => void;
  onCopy: () => void;
  onMove: (dir: -1 | 1) => void;
}) {
  const uid = useId();
  const app = apps.find((a) => a.id === row.appId);
  const cfg = row.config ?? {};
  const remote = row.remote ?? { baseUrl: "" };
  const llmCfg = row.llm ?? { baseUrl: "" };
  return (
    <div
      aria-label={`worker ${index + 1}`}
      className="flex flex-col gap-2 rounded border border-border p-3"
    >
      <div className="flex flex-wrap items-center gap-2">
        <span className="text-xs text-muted-foreground" title="priority (lower = preferred)">
          #{index + 1}
        </span>
        <input
          type="text"
          aria-label={`worker ${index + 1} name`}
          placeholder="Worker name"
          value={row.name}
          onChange={(e) => onPatch({ name: e.target.value })}
          className="flex-1 min-w-40 rounded border border-border bg-card px-2 py-1 text-sm"
        />
        <label className="flex items-center gap-1 text-xs">
          <ControlledCheck
            type="checkbox"
            checked={row.enabled}
            onChange={(e) => onPatch({ enabled: e.target.checked })}
            aria-label={`worker ${index + 1} enabled`}
          />
          Enabled
        </label>
        <div className="flex items-center gap-1">
          <button
            type="button"
            onClick={() => onMove(-1)}
            disabled={index === 0}
            aria-label={`move worker ${index + 1} up`}
            className="px-1.5 py-0.5 rounded border border-border text-xs disabled:opacity-40"
          >
            ↑
          </button>
          <button
            type="button"
            onClick={() => onMove(1)}
            disabled={index === total - 1}
            aria-label={`move worker ${index + 1} down`}
            className="px-1.5 py-0.5 rounded border border-border text-xs disabled:opacity-40"
          >
            ↓
          </button>
          <button
            type="button"
            onClick={onCopy}
            aria-label={`copy worker ${index + 1}`}
            title="Duplicate this worker into another slot"
            className="px-1.5 py-0.5 rounded border border-border text-xs hover:bg-muted"
          >
            Copy
          </button>
          <button
            type="button"
            onClick={onRemove}
            aria-label={`remove worker ${index + 1}`}
            className="px-1.5 py-0.5 rounded border border-destructive/30 text-xs text-destructive hover:bg-destructive-soft"
          >
            Remove
          </button>
        </div>
      </div>

      <div className="flex flex-wrap items-end gap-3">
        {row.kind === "local" && (
          <label className="flex flex-col gap-1 text-xs">
            <span className="font-medium">Engine</span>
            <ControlledSelect
              value={row.appId ?? ""}
              onChange={(e) => onPatch({ appId: e.target.value })}
              aria-label={`worker ${index + 1} engine`}
              className="rounded border border-border bg-card px-2 py-1 text-sm"
            >
              {apps.map((a) => (
                <option key={a.id} value={a.id}>
                  {a.label}
                </option>
              ))}
            </ControlledSelect>
          </label>
        )}
        <span className="text-xs text-muted-foreground">
          {row.kind === "local"
            ? "Local · one slot"
            : row.kind === "llm"
              ? `LLM endpoint · ${llmCfg.slots ?? 1} slot${(llmCfg.slots ?? 1) === 1 ? "" : "s"}`
              : remote.slots !== undefined
                ? `Remote · ${remote.slots} slot${remote.slots === 1 ? "" : "s"}`
                : "Remote · slots probed from the remote"}
        </span>
        <TagsField
          tags={row.tags ?? []}
          knownTags={knownTags}
          index={index}
          onChange={(tags) =>
            onPatch({ tags: tags.length > 0 ? tags : undefined })
          }
        />
      </div>

      {row.kind === "llm" ? (
        <div className="flex flex-col gap-2 border-t border-border pt-2">
          <CardField
            label="Base URL"
            value={llmCfg.baseUrl}
            onChange={(v) => onPatchLlm({ baseUrl: v })}
            hint="A bare ollama endpoint (e.g. http://macbook.lan:11434) — the box runs nothing but `ollama serve`. It must serve the primary's exact model tag; the scheduler checks and skips it if not."
            id={`${uid}-llmurl`}
          />
          <CardField
            label="Slots"
            type="number"
            value={llmCfg.slots !== undefined ? String(llmCfg.slots) : ""}
            onChange={(v) =>
              onPatchLlm({ slots: v.trim() === "" ? undefined : Number(v) })
            }
            hint="Concurrent generations to send this endpoint. Blank = 1."
            id={`${uid}-llmslots`}
          />
          <p className="text-xs text-muted-foreground">
            Takes digest and speaker-attribution model calls only — never a
            transcription. Tags narrow which of those operations it serves;
            blank tags mean all of them.
          </p>
        </div>
      ) : row.kind === "local" ? (
        <div className="flex flex-col gap-2 border-t border-border pt-2">
          <CardField
            label="Binary"
            value={cfg.bin ?? ""}
            onChange={(v) => onPatchConfig({ bin: v })}
            hint="Path/name of the executable. Blank = the engine's default."
            id={`${uid}-bin`}
          />
          {app?.fields.model && (
            <CardField
              label="Model"
              value={cfg.model ?? ""}
              onChange={(v) => onPatchConfig({ model: v })}
              hint="whisper.cpp: {model}. chough: CHOUGH_MODEL. parakeet: .gguf path. Blank = default."
              id={`${uid}-model`}
            />
          )}
          {app?.fields.remoteUrl && (
            <CardField
              label="chough server URL"
              value={cfg.remoteUrl ?? ""}
              onChange={(v) => onPatchConfig({ remoteUrl: v })}
              hint="chough only: transcribe via a chough --server (sets CHOUGH_URL). Point two copies of this worker at the same server for two togglable slots. Blank = run chough locally."
              id={`${uid}-remoteurl`}
            />
          )}
          {app?.fields.device && (
            <CardField
              label="Device"
              value={cfg.device ?? ""}
              onChange={(v) => onPatchConfig({ device: v })}
              hint="parakeet compute device (sets PARAKEET_DEVICE). e.g. cpu to force CPU, or CUDA0 / Vulkan1 for a specific GPU. Blank = parakeet-cli's default (first GPU)."
              id={`${uid}-device`}
            />
          )}
          {app?.fields.chunkSize && (
            <CardField
              label="Chunk size (seconds)"
              type="number"
              value={cfg.chunkSize !== undefined ? String(cfg.chunkSize) : ""}
              onChange={(v) =>
                onPatchConfig({
                  chunkSize: v.trim() === "" ? undefined : Number(v),
                })
              }
              hint="parakeet: per-window seconds. chough: -c. Blank = default."
              id={`${uid}-chunk`}
            />
          )}
          {app?.fields.customArgs && (
            <label className="flex flex-col gap-1 text-xs">
              <span className="font-medium">Custom args (one per line)</span>
              <textarea
                value={(cfg.customArgs ?? []).join("\n")}
                onChange={(e) =>
                  onPatchConfig({
                    customArgs: e.target.value
                      .split("\n")
                      .map((s) => s.trim())
                      .filter(Boolean),
                  })
                }
                rows={4}
                className="rounded border border-border bg-card px-2 py-1 text-sm font-mono"
              />
              <span className="text-muted-foreground">
                Blank = default. Placeholders: <code>{"{audioFile}"}</code>,{" "}
                <code>{"{outputBase}"}</code> (both required),{" "}
                <code>{"{model}"}</code>.
              </span>
            </label>
          )}
        </div>
      ) : (
        <div className="flex flex-col gap-2 border-t border-border pt-2">
          <CardField
            label="Base URL"
            value={remote.baseUrl}
            onChange={(v) => onPatchRemote({ baseUrl: v })}
            hint="Another instance of this app, e.g. http://gpu-box.lan:3001. It runs its own worker pool."
            id={`${uid}-url`}
          />
          <CardField
            label="Token"
            value={remote.token ?? ""}
            onChange={(v) => onPatchRemote({ token: v })}
            hint="Bearer token sent to the remote (must match its WORKER_TOKEN). Blank if the remote has no token."
            id={`${uid}-token`}
          />
          <CardField
            label="Slots"
            type="number"
            value={remote.slots !== undefined ? String(remote.slots) : ""}
            onChange={(v) =>
              onPatchRemote({
                slots: v.trim() === "" ? undefined : Number(v),
              })
            }
            hint="Concurrent units to send this remote. Blank = ask the remote itself (its enabled worker count, re-checked about once a minute)."
            id={`${uid}-slots`}
          />
          <label className="flex items-center gap-2 text-xs">
            <ControlledCheck
              type="checkbox"
              checked={remote.sharedFs === true}
              onChange={(e) => onPatchRemote({ sharedFs: e.target.checked })}
            />
            <span>
              Shared filesystem — send the video path instead of uploading audio
              (only if the remote mounts the same transcripts dir).
            </span>
          </label>
        </div>
      )}
    </div>
  );
}

// Comma-separated capability tags. Local text state so a trailing comma or
// space survives typing; the parsed list is pushed up on every change. Unknown
// tags WARN and still save — the scheduler tolerates them, it just never
// matches them.
function TagsField({
  tags,
  knownTags,
  index,
  onChange,
}: {
  tags: string[];
  knownTags?: string[];
  index: number;
  onChange: (tags: string[]) => void;
}) {
  const [text, setText] = useState(tags.join(", "));
  const unknown = knownTags ? tags.filter((t) => !knownTags.includes(t)) : [];
  return (
    <label className="flex flex-col gap-1 text-xs flex-1 min-w-48">
      <span className="font-medium">Tags</span>
      <input
        type="text"
        aria-label={`worker ${index + 1} tags`}
        value={text}
        placeholder="e.g. cpu, diarization"
        onChange={(e) => {
          setText(e.target.value);
          onChange([
            ...new Set(
              e.target.value
                .split(",")
                .map((s) => s.trim())
                .filter(Boolean),
            ),
          ]);
        }}
        className="rounded border border-border bg-card px-2 py-1 text-sm"
      />
      <span className="text-muted-foreground">
        Capability routing: operation ids (e.g. <code>diarization</code>) or
        resources (<code>gpu</code>, <code>cpu</code>, <code>network</code>),
        comma-separated. Blank = this worker takes anything.
      </span>
      {unknown.length > 0 && (
        <span className="text-warning">
          Unknown tag{unknown.length > 1 ? "s" : ""}: {unknown.join(", ")} —
          saved, but the scheduler will never match {unknown.length > 1 ? "them" : "it"}.
        </span>
      )}
    </label>
  );
}

function CardField({
  label,
  value,
  onChange,
  hint,
  type = "text",
  id,
}: {
  label: string;
  value: string;
  onChange: (v: string) => void;
  hint?: string;
  type?: string;
  id: string;
}) {
  return (
    <label className="flex flex-col gap-1 text-xs" htmlFor={id}>
      <span className="font-medium">{label}</span>
      <input
        id={id}
        type={type}
        value={value}
        onChange={(e) => onChange(e.target.value)}
        className="rounded border border-border bg-card px-2 py-1 text-sm"
      />
      {hint && <span className="text-muted-foreground">{hint}</span>}
    </label>
  );
}