"use client";

// Per-engine digest configuration, serialized to a hidden JSON field — the
// WorkersField idiom, for the same reason: `settings.digest.apps` is a keyed map
// of optional fields, and a flat set of form inputs cannot express "this app
// overrides only the model" without inventing a naming scheme per app.
//
// Only the fields an engine actually supports are rendered (DigestApp.fields),
// so the metered lane never shows a `num_ctx` box it would ignore.
//
// A blank input means "unset" and is OMITTED from the JSON rather than written
// as "" or 0 — sanitizeDigestApps drops empty values anyway, but writing them
// would make an untouched app look configured, and `numCtx: 0` in particular
// would read as a real (invalid) context size rather than as absence.

import { useState } from "react";
import type { DigestAppDescriptor } from "yt-dlp-transcript-common/lib/digestApps";
import type { DigestAppConfig } from "yt-dlp-transcript-common/lib/digest";
import { DEFAULT_DIGEST_NUM_CTX } from "yt-dlp-transcript-common/lib/digest";

type Row = {
  bin: string;
  baseUrl: string;
  model: string;
  numCtx: string;
  temperature: string;
};

function toRow(cfg: DigestAppConfig | undefined): Row {
  return {
    bin: cfg?.bin ?? "",
    baseUrl: cfg?.baseUrl ?? "",
    model: cfg?.model ?? "",
    numCtx: cfg?.numCtx != null ? String(cfg.numCtx) : "",
    temperature: cfg?.temperature != null ? String(cfg.temperature) : "",
  };
}

function serialize(rows: Record<string, Row>): string {
  const out: Record<string, DigestAppConfig> = {};
  for (const [id, row] of Object.entries(rows)) {
    const cfg: DigestAppConfig = {};
    if (row.bin.trim()) cfg.bin = row.bin.trim();
    if (row.baseUrl.trim()) cfg.baseUrl = row.baseUrl.trim();
    if (row.model.trim()) cfg.model = row.model.trim();
    const n = Number.parseInt(row.numCtx.trim(), 10);
    if (Number.isFinite(n) && n > 0) cfg.numCtx = n;
    const t = Number.parseFloat(row.temperature.trim());
    if (Number.isFinite(t) && t >= 0) cfg.temperature = t;
    if (Object.keys(cfg).length > 0) out[id] = cfg;
  }
  return JSON.stringify(out);
}

export function DigestAppsField({
  apps,
  initial,
  name,
}: {
  apps: DigestAppDescriptor[];
  initial: Record<string, DigestAppConfig>;
  name: string;
}) {
  const [rows, setRows] = useState<Record<string, Row>>(() =>
    Object.fromEntries(apps.map((a) => [a.id, toRow(initial[a.id])])),
  );

  const set = (id: string, key: keyof Row, value: string): void =>
    setRows((prev) => ({ ...prev, [id]: { ...prev[id], [key]: value } }));

  return (
    <div className="flex flex-col gap-3">
      {apps.map((app) => {
        const row = rows[app.id] ?? toRow(undefined);
        return (
          <div
            key={app.id}
            aria-label={`digest engine ${app.id}`}
            className="flex flex-col gap-2 rounded border border-border p-2"
          >
            <div className="flex items-baseline gap-2">
              <span className="text-sm font-medium">{app.label}</span>
              <code className="text-xs text-muted-foreground">{app.id}</code>
              <span className="text-xs text-muted-foreground">
                {app.metered ? "metered" : "local"}
              </span>
            </div>
            {app.fields.model && (
              <Cell
                label="Model"
                id={app.id}
                field="model"
                value={row.model}
                onChange={set}
                placeholder={app.defaultModel}
                hint={`Blank uses ${app.defaultModel}. Freshness compares what you ask for, so an alias resolving to a full tag is not a model change.`}
              />
            )}
            {app.fields.numCtx && (
              <Cell
                label="Context window (num_ctx)"
                id={app.id}
                field="numCtx"
                value={row.numCtx}
                onChange={set}
                placeholder={String(DEFAULT_DIGEST_NUM_CTX)}
                type="number"
                hint={`Blank uses ${DEFAULT_DIGEST_NUM_CTX}, the size the bake-off measured best. The transcript slice is sized to this automatically — ollama truncates an over-long input SILENTLY, so the two must move together. Changing it changes the recorded identity and re-runs the corpus.`}
              />
            )}
            {app.fields.temperature && (
              <Cell
                label="Temperature"
                id={app.id}
                field="temperature"
                value={row.temperature}
                onChange={set}
                placeholder="0"
                hint="0 for a structured extraction task."
              />
            )}
            {app.fields.baseUrl && (
              <Cell
                label="Base URL"
                id={app.id}
                field="baseUrl"
                value={row.baseUrl}
                onChange={set}
                placeholder="http://127.0.0.1:11434"
                hint="Blank uses OLLAMA_URL, then the local default."
              />
            )}
            {app.fields.bin && (
              <Cell
                label="Binary"
                id={app.id}
                field="bin"
                value={row.bin}
                onChange={set}
                placeholder="claude"
                hint="Blank uses CLAUDE_BIN, then PATH."
              />
            )}
          </div>
        );
      })}
      <input type="hidden" name={name} value={serialize(rows)} readOnly />
    </div>
  );
}

function Cell({
  label,
  id,
  field,
  value,
  onChange,
  placeholder,
  hint,
  type = "text",
}: {
  label: string;
  id: string;
  field: keyof Row;
  value: string;
  onChange: (id: string, key: keyof Row, value: string) => void;
  placeholder?: string;
  hint?: string;
  type?: string;
}) {
  return (
    <label className="flex flex-col gap-1 text-sm">
      <span className="font-medium">{label}</span>
      <input
        type={type}
        value={value}
        placeholder={placeholder}
        aria-label={`${label} for ${id}`}
        onChange={(e) => onChange(id, field, e.target.value)}
        className="rounded border border-border bg-card px-2 py-1 text-sm"
      />
      {hint && <span className="text-xs text-muted-foreground">{hint}</span>}
    </label>
  );
}