// Hand-written mirror of arr-api's /api/policies and /api/roots schemas,
// plus the settings view over them — same reasoning as search.ts: the
// generated client (src/api/) is uncommitted, so CI's tsc cannot see it.

import { navigate } from "./router";
import type { Root } from "./search";

/** One policy row: the JSON columns as the API returns them. */
export interface PolicyDoc {
  id: number;
  name: string;
  required_audio: { require: "original_language" } | { require: "any_of"; langs: string[] };
  dub_blacklist: string[];
  hdr_rules: { dv_profile_reject: string[] };
  size_bands: Record<
    string,
    { floor_gib: number; target_gib: number; penalty_points_per_gib_over: number }
  >;
  resolution_pref: string[];
  source_weights: Record<string, number>;
  score_weights: {
    size_at_target: number;
    source_tier: number;
    seeder_doubling: number;
    resolution_step: number;
  };
}

export interface RootInput {
  kind: string;
  audience: string;
  path: string;
  policy_id: number;
}

const RESOLUTIONS = ["2160p", "1080p", "720p"] as const;
const SOURCES = ["Remux", "BluRay", "WEB-DL", "WEBRip", "HDTV"] as const;
/** DESIGN.md §15: OpenSubtitles and Podnapisi, no cargo feature gate. */
const PROVIDERS = ["opensubtitles", "podnapisi"] as const;

/** The runtime-editable half of subtitle config (§15) — issue #198's shape. */
export interface SubtitleSettings {
  wanted_languages: string[];
  providers_enabled: string[];
  translation_engine: string | null;
  provider_daily_budgets: Record<string, number>;
  translator_daily_budgets: Record<string, number>;
  remote_command_timeout_seconds: number;
  /**
   * Where the OpenAI-compatible backend points and which model it names
   * (§15, #220). `null` on either means the backend's own default — that
   * backend is anything speaking the shape, `llama.cpp` included, so both
   * are settings rather than deployment facts. Neither is a secret; the API
   * key stays in the environment.
   */
  openai_base_url: string | null;
  openai_model: string | null;
  /** Engines this binary compiled in — `translation_engine` is always one of these, or null. */
  available_engines: string[];
}

export type SubtitleSettingsInput = Omit<SubtitleSettings, "available_engines">;

async function errorDetail(response: Response): Promise<string> {
  try {
    const body = (await response.json()) as { error?: string };
    return body.error ?? `http ${response.status}`;
  } catch {
    return `http ${response.status}`;
  }
}

async function fetchPolicies(): Promise<PolicyDoc[]> {
  const response = await fetch("/api/policies");
  if (!response.ok) {
    throw new Error(await errorDetail(response));
  }
  return (await response.json()) as PolicyDoc[];
}

async function fetchRoots(): Promise<Root[]> {
  const response = await fetch("/api/roots");
  if (!response.ok) {
    throw new Error(await errorDetail(response));
  }
  return (await response.json()) as Root[];
}

async function fetchSubtitleSettings(): Promise<SubtitleSettings> {
  const response = await fetch("/api/settings/subtitles");
  if (!response.ok) {
    throw new Error(await errorDetail(response));
  }
  return (await response.json()) as SubtitleSettings;
}

function saveSubtitleSettings(input: SubtitleSettingsInput): Promise<SaveOutcome> {
  return sendJson("/api/settings/subtitles", "PUT", input);
}

type SaveOutcome = { ok: true; json: unknown } | { ok: false; detail: string };

async function sendJson(url: string, method: string, body: unknown): Promise<SaveOutcome> {
  try {
    const response = await fetch(url, {
      method,
      headers: { "content-type": "application/json" },
      body: JSON.stringify(body),
    });
    if (!response.ok) {
      return { ok: false, detail: await errorDetail(response) };
    }
    return { ok: true, json: await response.json() };
  } catch {
    return { ok: false, detail: "daemon unreachable" };
  }
}

function savePolicy(id: number | null, policy: Omit<PolicyDoc, "id">): Promise<SaveOutcome> {
  return id === null
    ? sendJson("/api/policies", "POST", policy)
    : sendJson(`/api/policies/${id}`, "PUT", policy);
}

function saveRoot(id: number | null, root: RootInput): Promise<SaveOutcome> {
  return id === null
    ? sendJson("/api/roots", "POST", root)
    : sendJson(`/api/roots/${id}`, "PUT", root);
}

async function deleteRow(kind: "policies" | "roots", id: number): Promise<string | null> {
  try {
    const response = await fetch(`/api/${kind}/${id}`, { method: "DELETE" });
    if (!response.ok) {
      return await errorDetail(response);
    }
    return null;
  } catch {
    return "daemon unreachable";
  }
}

/* ---- form primitives ---------------------------------------------------- */

function must<T extends Element>(selector: string): T {
  const element = document.querySelector<T>(selector);
  if (!element) {
    throw new Error(`settings markup is missing ${selector}`);
  }
  return element;
}

function el<K extends keyof HTMLElementTagNameMap>(
  tag: K,
  className: string,
  text?: string,
): HTMLElementTagNameMap[K] {
  const node = document.createElement(tag);
  node.className = className;
  if (text !== undefined) {
    node.textContent = text;
  }
  return node;
}

function chip(text: string): HTMLSpanElement {
  return el("span", "chip readout", text);
}

function rowTitle(title: string): HTMLElement {
  const wrap = el("span", "row-id");
  wrap.append(el("span", "row-title", title));
  return wrap;
}

function field(labelText: string, control: HTMLElement): HTMLDivElement {
  const wrap = el("div", "field");
  wrap.append(el("span", "field-label readout dim", labelText), control);
  return wrap;
}

function textControl(value: string, placeholder = ""): HTMLInputElement {
  const input = document.createElement("input");
  input.type = "text";
  input.className = "form-input readout";
  input.value = value;
  input.placeholder = placeholder;
  input.spellcheck = false;
  input.autocomplete = "off";
  return input;
}

function numberControl(value: number): HTMLInputElement {
  const input = document.createElement("input");
  input.type = "number";
  input.className = "form-input readout form-num";
  input.value = String(value);
  return input;
}

function selectControl(options: readonly string[], value: string): HTMLSelectElement {
  const select = document.createElement("select");
  select.className = "form-input readout";
  for (const option of options) {
    const item = document.createElement("option");
    item.value = option;
    item.textContent = option;
    if (option === value) {
      item.selected = true;
    }
    select.append(item);
  }
  select.value = value;
  return select;
}

/** `a, b, c` ⇄ parts. Empty entries dropped; validation happens at save. */
function listValue(input: HTMLInputElement): string[] {
  return input.value
    .split(",")
    .map((part) => part.trim())
    .filter((part) => part !== "");
}

/**
 * First click arms the destructive action, second confirms. The armed state
 * clears on blur or after a few seconds, so an accidental double click
 * never deletes. Shared with the series detail rows — one confirmation
 * idiom for row-level destruction, not one per page.
 */
export function armedDelete(label: string, execute: () => void): HTMLButtonElement {
  const button = el("button", "control control-quiet readout", label);
  button.type = "button";
  let armed = false;
  let resetTimer: number | undefined;
  const disarm = () => {
    armed = false;
    window.clearTimeout(resetTimer);
    delete button.dataset.armed;
    button.textContent = label;
  };
  button.addEventListener("click", () => {
    if (armed) {
      disarm();
      button.disabled = true;
      execute();
      return;
    }
    armed = true;
    button.dataset.armed = "true";
    button.textContent = `confirm ${label}`;
    resetTimer = window.setTimeout(disarm, 4000);
  });
  button.addEventListener("blur", () => {
    if (armed) {
      disarm();
    }
  });
  return button;
}

interface SettingsView {
  hide: () => void;
  open: () => void;
}

export function settingsMain(views: { hide: () => void }[], goHome: () => void): SettingsView {
  const view = must<HTMLElement>("#settings");
  const deck = must<HTMLElement>("#deck");
  const nav = must<HTMLButtonElement>("#nav-settings");
  const summary = must<HTMLElement>("#settings-summary");
  const status = must<HTMLElement>("#settings-status");
  const rootsSection = must<HTMLElement>("#group-roots");
  const rootsRows = must<HTMLUListElement>("#rows-roots");
  const policiesSection = must<HTMLElement>("#group-policies");
  const policiesRows = must<HTMLUListElement>("#rows-policies");
  const subtitlesSection = must<HTMLElement>("#group-subtitles");
  const subtitlesBody = must<HTMLElement>("#subtitles-body");

  let roots: Root[] = [];
  let policies: PolicyDoc[] = [];
  let subtitleSettings: SubtitleSettings | null = null;
  // guards a stale fetch from painting over a newer view
  let sequence = 0;

  function setStatus(text: string | null, tone?: "fault") {
    status.hidden = text === null;
    status.textContent = text ?? "";
    if (tone) {
      status.dataset.tone = tone;
    } else {
      delete status.dataset.tone;
    }
  }

  function clearGroups() {
    for (const section of [rootsSection, policiesSection, subtitlesSection]) {
      section.hidden = true;
    }
    rootsRows.replaceChildren();
    policiesRows.replaceChildren();
    subtitlesBody.replaceChildren();
    summary.textContent = "";
  }

  async function load() {
    sequence += 1;
    const ticket = sequence;
    setStatus("reading settings…");
    try {
      const [fetchedRoots, fetchedPolicies, fetchedSubtitleSettings] = await Promise.all([
        fetchRoots(),
        fetchPolicies(),
        fetchSubtitleSettings(),
      ]);
      if (ticket !== sequence) {
        return;
      }
      roots = fetchedRoots;
      policies = fetchedPolicies;
      subtitleSettings = fetchedSubtitleSettings;
    } catch (error) {
      if (ticket !== sequence) {
        return;
      }
      clearGroups();
      setStatus(`settings unavailable — ${(error as Error).message}`, "fault");
      return;
    }
    render();
  }

  function render() {
    clearGroups();
    setStatus(null);
    rootsSection.hidden = false;
    policiesSection.hidden = false;
    summary.textContent = `${roots.length} roots · ${policies.length} policies`;
    for (const root of roots) {
      rootsRows.append(rootRow(root));
    }
    for (const policy of policies) {
      policiesRows.append(policyRow(policy));
    }
    if (subtitleSettings) {
      subtitlesSection.hidden = false;
      subtitlesBody.append(subtitlesPanel(subtitleSettings));
    }
  }

  /* -- roots -------------------------------------------------------------- */

  /** A delete/edit action pair sharing the row's feedback line. */
  function rowActions(
    item: HTMLLIElement,
    del: HTMLButtonElement,
    edit: HTMLButtonElement,
  ): HTMLParagraphElement {
    const actions = el("div", "settings-row-actions");
    actions.append(edit, del);
    item.append(actions);
    const note = el("p", "add-note readout");
    note.setAttribute("role", "status");
    note.hidden = true;
    item.append(note);
    return note;
  }

  function rootRow(root: Root): HTMLLIElement {
    const item = el("li", "queue-item");
    const row = el("div", "row");
    const chips = el("span", "row-chips");
    chips.append(chip(root.kind), chip(root.audience), chip(root.policy_name));
    row.append(rowTitle(root.path), chips);
    item.append(row);

    const del = armedDelete("delete", () => {
      void deleteRow("roots", root.id).then((detail) => {
        if (detail !== null) {
          note.hidden = false;
          note.dataset.tone = "fault";
          note.textContent = detail;
          return;
        }
        void load();
      });
    });

    const edit = el("button", "control control-quiet readout", "edit");
    edit.type = "button";
    edit.setAttribute("aria-expanded", "false");
    edit.addEventListener("click", () => {
      const existing = item.querySelector(".edit-panel");
      if (existing) {
        existing.remove();
        edit.setAttribute("aria-expanded", "false");
        return;
      }
      item.append(rootPanel(root));
      edit.setAttribute("aria-expanded", "true");
    });

    const note = rowActions(item, del, edit);
    return item;
  }

  function rootPanel(root: Root | null): HTMLElement {
    const panel = el("div", "edit-panel add-panel");
    const grid = el("div", "form-grid");

    const kind = selectControl(["movie", "tv"], root?.kind ?? "movie");
    const audience = selectControl(["main", "kids"], root?.audience ?? "main");
    const path = textControl(root?.path ?? "", "/mnt/media/…");
    const policyId = selectControl(
      policies.map((policy) => String(policy.id)),
      String(root?.policy_id ?? policies[0]?.id ?? ""),
    );
    // readable option labels without coupling value → name lookups
    for (const [index, policy] of policies.entries()) {
      const option = policyId.options[index];
      if (option) {
        option.textContent = policy.name;
      }
    }

    grid.append(
      field("kind", kind),
      field("audience", audience),
      field("path", path),
      field("policy", policyId),
    );

    const note = el("p", "add-note readout");
    note.setAttribute("role", "status");
    note.hidden = true;

    const save = el("button", "control readout", root === null ? "create root" : "save root");
    save.type = "button";
    save.addEventListener("click", () => {
      save.disabled = true;
      note.hidden = false;
      delete note.dataset.tone;
      note.textContent = "saving…";
      const input: RootInput = {
        kind: kind.value,
        audience: audience.value,
        path: path.value.trim(),
        policy_id: Number(policyId.value),
      };
      void saveRoot(root?.id ?? null, input).then((outcome) => {
        if (outcome.ok) {
          void load();
          return;
        }
        save.disabled = false;
        note.hidden = false;
        note.dataset.tone = "fault";
        note.textContent = outcome.detail;
      });
    });

    const cancel = el("button", "control control-quiet readout", "cancel");
    cancel.type = "button";
    cancel.addEventListener("click", () => {
      panel.remove();
    });

    const actions = el("div", "add-actions");
    actions.append(save, cancel, note);
    panel.append(grid, actions);

    queueMicrotask(() => (root === null ? kind : path).focus());
    return panel;
  }

  /* -- policies ------------------------------------------------------------ */

  function requiredAudioLabel(policy: PolicyDoc): string {
    return policy.required_audio.require === "original_language"
      ? "original language"
      : `any of ${policy.required_audio.langs.join(", ")}`;
  }

  function policyRow(policy: PolicyDoc): HTMLLIElement {
    const item = el("li", "queue-item");
    const row = el("div", "row");
    const chips = el("span", "row-chips");
    chips.append(chip(policy.resolution_pref.join(" › ") || "no resolutions"));
    chips.append(chip(requiredAudioLabel(policy)));
    const bandCount = Object.keys(policy.size_bands).length;
    chips.append(chip(`${bandCount} band${bandCount === 1 ? "" : "s"}`));
    row.append(rowTitle(policy.name), chips);
    item.append(row);

    const del = armedDelete("delete", () => {
      void deleteRow("policies", policy.id).then((detail) => {
        if (detail !== null) {
          note.hidden = false;
          note.dataset.tone = "fault";
          note.textContent = detail;
          return;
        }
        void load();
      });
    });

    const edit = el("button", "control control-quiet readout", "edit");
    edit.type = "button";
    edit.setAttribute("aria-expanded", "false");
    edit.addEventListener("click", () => {
      const existing = item.querySelector(".edit-panel");
      if (existing) {
        existing.remove();
        edit.setAttribute("aria-expanded", "false");
        return;
      }
      item.append(policyPanel(policy));
      edit.setAttribute("aria-expanded", "true");
    });

    const note = rowActions(item, del, edit);
    return item;
  }

  /**
   * Comma-list editor that checks its vocabulary while typing, so an unknown
   * resolution or profile is named before a round trip.
   */
  function knownList(
    labelText: string,
    values: string[],
    known: readonly string[],
    invalid: (message: string | null) => void,
  ): HTMLDivElement {
    const input = textControl(values.join(", "), known.join(", "));
    input.addEventListener("input", () => {
      const unknown = listValue(input).find((part) => !known.includes(part));
      if (unknown !== undefined) {
        input.dataset.invalid = "true";
        invalid(`${labelText}: unknown value '${unknown}'`);
      } else if (input.dataset.invalid !== undefined) {
        delete input.dataset.invalid;
        invalid(null);
      }
    });
    return field(labelText, input);
  }

  function newPolicyDoc(): Omit<PolicyDoc, "id"> {
    return {
      name: "",
      required_audio: { require: "original_language" },
      dub_blacklist: ["pt-BR"],
      hdr_rules: { dv_profile_reject: ["5", "7"] },
      size_bands: {},
      resolution_pref: ["2160p", "1080p"],
      source_weights: {},
      score_weights: {
        size_at_target: 1000,
        source_tier: 25,
        seeder_doubling: 8,
        resolution_step: 300,
      },
    };
  }

  function policyPanel(policy: PolicyDoc | null): HTMLElement {
    const current: Omit<PolicyDoc, "id"> = policy ?? newPolicyDoc();

    const panel = el("div", "edit-panel add-panel");
    const grid = el("div", "form-grid");

    const invalidate = (message: string | null) => {
      note.hidden = message === null || note.textContent === "";
      if (message !== null) {
        note.dataset.tone = "fault";
        note.textContent = message;
      } else if (note.dataset.tone === "fault") {
        note.hidden = true;
      }
    };

    const note = el("p", "add-note readout");
    note.setAttribute("role", "status");
    note.hidden = true;

    const name = textControl(current.name, "policy name");
    grid.append(field("name", name));

    const audioMode = selectControl(
      ["original_language", "any_of"],
      current.required_audio.require,
    );
    const audioLangs = textControl(
      current.required_audio.require === "any_of" ? current.required_audio.langs.join(", ") : "",
      "pt-PT, …",
    );
    audioMode.addEventListener("change", () => {
      audioLangs.disabled = audioMode.value === "original_language";
    });
    audioLangs.disabled = audioMode.value === "original_language";

    const blacklist = textControl(current.dub_blacklist.join(", "), "pt-BR");

    grid.append(field("required audio", audioMode), field("required langs", audioLangs));
    grid.append(field("dub blacklist", blacklist));

    let profilesInput: HTMLInputElement;
    const profiles = knownList(
      "rejected dv profiles",
      current.hdr_rules.dv_profile_reject,
      ["5", "7", "8"],
      invalidate,
    );
    profilesInput = profiles.querySelector("input") ?? document.createElement("input");
    grid.append(profiles);

    // one line per resolution: floor, target, penalty — numbers stay numbers
    for (const resolution of RESOLUTIONS) {
      const band = current.size_bands[resolution];
      const line = el("div", "band-line");
      line.dataset.resolution = resolution;
      line.append(el("span", "field-label readout dim", resolution));
      const floor = numberControl(band?.floor_gib ?? 0);
      const target = numberControl(band?.target_gib ?? 0);
      const penalty = numberControl(band?.penalty_points_per_gib_over ?? 0);
      floor.setAttribute("aria-label", `${resolution} floor GiB`);
      target.setAttribute("aria-label", `${resolution} target GiB`);
      penalty.setAttribute("aria-label", `${resolution} penalty points per GiB over`);
      for (const input of [floor, target, penalty]) {
        input.classList.add("band-num");
        line.append(input);
      }
      grid.append(line);
    }

    let prefInput: HTMLInputElement;
    const pref = knownList(
      "resolution preference (first wins)",
      current.resolution_pref,
      RESOLUTIONS,
      invalidate,
    );
    prefInput = pref.querySelector("input") ?? document.createElement("input");
    grid.append(pref);

    const WEIGHT_KEYS = [
      "size_at_target",
      "source_tier",
      "seeder_doubling",
      "resolution_step",
    ] as const;
    type SourceKey = (typeof SOURCES)[number];
    type WeightKey = (typeof WEIGHT_KEYS)[number];
    const sourceInputs = {} as Record<SourceKey, HTMLInputElement>;
    for (const source of SOURCES) {
      const weight = numberControl(current.source_weights[source] ?? 0);
      weight.setAttribute("aria-label", `${source} source weight`);
      grid.append(field(`source · ${source.toLowerCase()}`, weight));
      sourceInputs[source] = weight;
    }
    const scoreInputs = {} as Record<WeightKey, HTMLInputElement>;
    for (const key of WEIGHT_KEYS) {
      const input = numberControl(current.score_weights[key]);
      input.setAttribute("aria-label", key.replaceAll("_", " "));
      grid.append(field(key.replaceAll("_", " "), input));
      scoreInputs[key] = input;
    }

    const save = el("button", "control readout", policy === null ? "create policy" : "save policy");
    save.type = "button";
    save.addEventListener("click", () => {
      const bad = panel.querySelector<HTMLElement>("[data-invalid]");
      if (bad !== null) {
        note.hidden = false;
        note.dataset.tone = "fault";
        note.textContent = "fix the highlighted fields first";
        return;
      }
      const emptyWeight = [...Object.values(sourceInputs), ...Object.values(scoreInputs)].find(
        (input) => input.value === "",
      );
      if (name.value.trim() === "" || emptyWeight !== undefined) {
        note.hidden = false;
        note.dataset.tone = "fault";
        note.textContent = "name and every scoring weight are required";
        return;
      }

      const sizeBands: PolicyDoc["size_bands"] = {};
      for (const line of panel.querySelectorAll<HTMLDivElement>(".band-line")) {
        const [floor, target, penalty] = [...line.querySelectorAll<HTMLInputElement>("input")];
        if (!floor || !target || !penalty) {
          continue;
        }
        sizeBands[line.dataset.resolution ?? ""] = {
          floor_gib: Number(floor.value),
          target_gib: Number(target.value),
          penalty_points_per_gib_over: Number(penalty.value),
        };
      }

      save.disabled = true;
      note.hidden = false;
      delete note.dataset.tone;
      note.textContent = "saving…";
      const payload: Omit<PolicyDoc, "id"> = {
        name: name.value.trim(),
        required_audio:
          audioMode.value === "any_of"
            ? { require: "any_of", langs: listValue(audioLangs) }
            : { require: "original_language" },
        dub_blacklist: listValue(blacklist),
        hdr_rules: { dv_profile_reject: listValue(profilesInput) },
        size_bands: sizeBands,
        resolution_pref: listValue(prefInput),
        source_weights: Object.fromEntries(
          SOURCES.filter((source) => sourceInputs[source].value !== "").map((source) => [
            source,
            Number(sourceInputs[source].value),
          ]),
        ),
        score_weights: Object.fromEntries(
          WEIGHT_KEYS.map((key) => [key, Number(scoreInputs[key].value)]),
        ) as PolicyDoc["score_weights"],
      };
      void savePolicy(policy?.id ?? null, payload).then((outcome) => {
        if (outcome.ok) {
          void load();
          return;
        }
        save.disabled = false;
        note.hidden = false;
        note.dataset.tone = "fault";
        note.textContent = outcome.detail;
      });
    });

    const cancel = el("button", "control control-quiet readout", "cancel");
    cancel.type = "button";
    cancel.addEventListener("click", () => {
      panel.remove();
    });

    const actions = el("div", "add-actions");
    actions.append(save, cancel, note);
    panel.append(grid, actions);

    queueMicrotask(() => name.focus());
    return panel;
  }

  /* -- subtitles ------------------------------------------------------------ */

  /**
   * One row per known provider, checkbox to enable, a daily-budget number,
   * and up/down controls — list order is the priority order the API stores
   * in `providers_enabled`. Disabled providers stay in the list, at
   * whatever position they were left, so re-enabling one keeps its spot.
   */
  function providerRow(
    provider: string,
    enabled: boolean,
    budget: number,
  ): { item: HTMLLIElement; enabledInput: HTMLInputElement; budgetInput: HTMLInputElement } {
    const item = el("li", "provider-row");
    item.dataset.provider = provider;

    const enabledInput = document.createElement("input");
    enabledInput.type = "checkbox";
    enabledInput.className = "provider-toggle";
    enabledInput.checked = enabled;
    enabledInput.setAttribute("aria-label", `enable ${provider}`);

    const name = el("span", "row-title provider-name", provider);

    const budgetInput = numberControl(budget);
    budgetInput.classList.add("provider-budget");
    budgetInput.setAttribute("aria-label", `${provider} daily budget`);

    const up = el("button", "control control-quiet readout provider-move", "up");
    up.type = "button";
    up.setAttribute("aria-label", `move ${provider} up`);
    const down = el("button", "control control-quiet readout provider-move", "down");
    down.type = "button";
    down.setAttribute("aria-label", `move ${provider} down`);

    up.addEventListener("click", () => {
      const previous = item.previousElementSibling;
      if (previous) {
        previous.before(item);
        refreshProviderEdges();
      }
    });
    down.addEventListener("click", () => {
      const next = item.nextElementSibling;
      if (next) {
        next.after(item);
        refreshProviderEdges();
      }
    });

    item.append(enabledInput, name, budgetInput, up, down);
    return { item, enabledInput, budgetInput };
  }

  let refreshProviderEdges: () => void = () => {};

  function subtitlesPanel(settings: SubtitleSettings): HTMLElement {
    const panel = el("div", "add-panel subtitle-panel");
    const grid = el("div", "form-grid");

    const wanted = textControl(settings.wanted_languages.join(", "), "pt-PT, en");
    grid.append(field("wanted languages", wanted));

    const hasEngines = settings.available_engines.length > 0;
    const engineSelect = selectControl(
      ["none", ...settings.available_engines],
      settings.translation_engine ?? "none",
    );
    engineSelect.disabled = !hasEngines;
    grid.append(field("translation engine", engineSelect));

    const timeout = numberControl(settings.remote_command_timeout_seconds);
    grid.append(field("remote command timeout (s)", timeout));

    const hasOpenAi = settings.available_engines.includes("openai");
    const openAiBaseUrl = textControl(
      settings.openai_base_url ?? "",
      "optional — e.g. http://127.0.0.1:8080/v1",
    );
    const openAiModel = textControl(settings.openai_model ?? "", "optional — e.g. gpt-4o-mini");
    openAiBaseUrl.setAttribute("aria-label", "openai base url");
    openAiModel.setAttribute("aria-label", "openai model");

    panel.append(grid);
    if (!hasEngines) {
      panel.append(
        el(
          "p",
          "add-note readout dim",
          "no translation engine is compiled into this binary — pick is unavailable",
        ),
      );
    }

    // Their own labelled row rather than two more cells in the grid above:
    // paired, they belong to one engine, and a base URL needs the width.
    if (hasOpenAi) {
      panel.append(
        el("p", "field-label readout dim", "openai-compatible endpoint — blank means its default"),
      );
      const openAiGrid = el("div", "form-grid");
      openAiGrid.append(field("base url", openAiBaseUrl), field("model", openAiModel));
      panel.append(openAiGrid);
    }

    const translatorInputs: Record<string, HTMLInputElement> = {};
    if (hasEngines) {
      panel.append(el("p", "field-label readout dim", "translator daily budgets"));
      const translatorGrid = el("div", "form-grid");
      for (const engine of settings.available_engines) {
        const input = numberControl(settings.translator_daily_budgets[engine] ?? 0);
        input.setAttribute("aria-label", `${engine} daily budget`);
        translatorInputs[engine] = input;
        translatorGrid.append(field(engine, input));
      }
      panel.append(translatorGrid);
    }

    panel.append(el("p", "field-label readout dim", "providers — enabled, and in priority order"));
    const enabledProviders = new Set(settings.providers_enabled);
    const order = [
      ...settings.providers_enabled,
      ...PROVIDERS.filter((provider) => !enabledProviders.has(provider)),
    ];
    const list = el("ul", "provider-list");
    const rows: Record<string, { enabledInput: HTMLInputElement; budgetInput: HTMLInputElement }> =
      {};
    for (const provider of order) {
      const { item, enabledInput, budgetInput } = providerRow(
        provider,
        enabledProviders.has(provider),
        settings.provider_daily_budgets[provider] ?? 0,
      );
      rows[provider] = { enabledInput, budgetInput };
      list.append(item);
    }
    refreshProviderEdges = () => {
      const items = [...list.children];
      items.forEach((item, index) => {
        const up = item.querySelector<HTMLButtonElement>("button:nth-of-type(1)");
        const down = item.querySelector<HTMLButtonElement>("button:nth-of-type(2)");
        if (up) up.disabled = index === 0;
        if (down) down.disabled = index === items.length - 1;
      });
    };
    refreshProviderEdges();
    panel.append(list);

    const note = el("p", "add-note readout");
    note.setAttribute("role", "status");
    note.hidden = true;

    const save = el("button", "control readout", "save subtitles");
    save.type = "button";
    save.addEventListener("click", () => {
      const providerOrder = [...list.children].map(
        (item) => (item as HTMLElement).dataset.provider ?? "",
      );
      const providersEnabled = providerOrder.filter(
        (provider) => rows[provider]?.enabledInput.checked,
      );
      const providerBudgets: Record<string, number> = {};
      for (const provider of providerOrder) {
        const value = Number(rows[provider]?.budgetInput.value ?? 0);
        if (value > 0) {
          providerBudgets[provider] = value;
        }
      }
      const translatorBudgets: Record<string, number> = {};
      for (const [engine, input] of Object.entries(translatorInputs)) {
        const value = Number(input.value);
        if (value > 0) {
          translatorBudgets[engine] = value;
        }
      }

      save.disabled = true;
      note.hidden = false;
      delete note.dataset.tone;
      note.textContent = "saving…";
      const input: SubtitleSettingsInput = {
        wanted_languages: listValue(wanted),
        providers_enabled: providersEnabled,
        translation_engine: engineSelect.value === "none" ? null : engineSelect.value,
        provider_daily_budgets: providerBudgets,
        translator_daily_budgets: translatorBudgets,
        remote_command_timeout_seconds: Number(timeout.value),
        // An emptied field is "use the backend's default", which the API
        // stores as NULL.
        openai_base_url: hasOpenAi ? openAiBaseUrl.value.trim() || null : settings.openai_base_url,
        openai_model: hasOpenAi ? openAiModel.value.trim() || null : settings.openai_model,
      };
      void saveSubtitleSettings(input).then((outcome) => {
        if (outcome.ok) {
          void load();
          return;
        }
        save.disabled = false;
        note.hidden = false;
        note.dataset.tone = "fault";
        note.textContent = outcome.detail;
      });
    });

    const actions = el("div", "add-actions");
    actions.append(save, note);
    panel.append(actions);

    return panel;
  }

  /* -- shell ---------------------------------------------------------------- */

  function open() {
    for (const sibling of views) {
      sibling.hide();
    }
    deck.hidden = true;
    view.hidden = false;
    nav.setAttribute("aria-pressed", "true");
    void load();
  }

  function hide() {
    view.hidden = true;
    nav.setAttribute("aria-pressed", "false");
    sequence += 1;
  }

  function close() {
    hide();
    goHome();
    nav.focus();
  }

  nav.addEventListener("click", () => {
    if (view.hidden) {
      navigate({ kind: "settings" });
      open();
    } else {
      navigate({ kind: "library" });
      close();
    }
  });

  must<HTMLButtonElement>("#root-add").addEventListener("click", () => {
    rootsSection.append(rootPanel(null));
  });

  must<HTMLButtonElement>("#policy-add").addEventListener("click", () => {
    policiesSection.append(policyPanel(null));
  });

  // capture, like the other decks: one Esc steps back one layer
  window.addEventListener(
    "keydown",
    (event) => {
      if (event.key === "Escape" && !view.hidden) {
        event.stopImmediatePropagation();
        navigate({ kind: "library" });
        close();
      }
    },
    true,
  );

  return { hide, open };
}