"use client";

import { useActionState, useState } from "react";
import type { SiteSettings } from "yt-dlp-transcript-common/lib/settings";
// From the CLIENT-SAFE digest module, NOT settings.ts's re-exports of them:
// settings.ts opens with `import fs from "node:fs"`, so pulling the option
// lists through it drags node:fs into the client bundle and the page dies at
// runtime. Same rule the digest modules are already split along.
import {
  DEFAULT_DIGEST_TIMESTAMP_MODE,
  DIGEST_SECTION_KINDS as DIGEST_SECTION_OPTIONS,
  DIGEST_TIMESTAMP_MODES as DIGEST_TIMESTAMP_MODE_OPTIONS,
} from "yt-dlp-transcript-common/lib/digest";
import type { DigestAppDescriptor } from "yt-dlp-transcript-common/lib/digestApps";
import { Field, SeededSelect } from "../../../components/forms/Field";
import { ControlledCheck } from "../../../components/forms/Controlled";
import { seedChecked } from "../../../lib/formState";
import { DigestAppsField } from "./DigestAppsField";
import { saveDigestSettingsAction } from "../../settingsActions";
import type { SaveResult } from "../../../settings/actions";

// The `digest` block of settings.json, on /operations/digest. Moved off
// /settings by slice 3: an operation's settings belong on its operation page,
// beside the state, the sweep and the pause an operator reads there.
//
// The legend and every field NAME are verbatim from the old fieldset — the
// action reads those names and two e2e specs select by them.
export function DigestSettingsForm({
  initial,
  digestApps,
}: {
  initial: SiteSettings["digest"];
  digestApps: DigestAppDescriptor[];
}) {
  const [state, formAction, pending] = useActionState<
    SaveResult | undefined,
    FormData
  >(saveDigestSettingsAction, undefined);
  // THE ONE NAME POSTED MORE THAN ONCE in the editor's forms — a box per
  // section, all named `digestSections` — so a failed submit's `values` (each
  // name's first value) cannot say which were ticked. Controlled instead:
  // what the operator ticked lives here, and ControlledCheck keeps it through
  // the reset. The posted shape is unchanged.
  const [sections, setSections] = useState<string[]>(() => [
    ...initial.sections,
  ]);
  // AFTER A SUCCESS THE BOXES SHOW WHAT WAS STORED, as the uncontrolled boxes
  // did after their reset: unticking every box saves the stored list again, so
  // what was ticked is not always what was saved. Re-read on a new result or a
  // new stored list, unless the result is a failure (then the ticks stay).
  const stored = initial.sections.join(",");
  const [shown, setShown] = useState({ state, stored });
  if (shown.state !== state || shown.stored !== stored) {
    setShown({ state, stored });
    if (state?.ok !== false) setSections([...initial.sections]);
  }

  return (
    <form
      action={formAction}
      data-settings-block="digest"
      className="flex flex-col gap-3"
    >
      <fieldset className="flex flex-col gap-3 border border-border rounded p-3">
        <legend className="px-1 text-sm font-medium">Digest</legend>
        <p className="text-xs text-muted-foreground">
          AI chapters and topic tags generated from existing transcripts by a
          local model, written to <code>ai-digest.json</code> beside each one.
          Run a sweep from a channel&apos;s <strong>Digest</strong> stage. Every
          section records the exact engine, model, prompt version and prompt
          shape that produced it, and a re-run regenerates only what no longer
          matches — so changing anything here is what makes the next run redo
          work, and leaving it alone is what makes a re-run nearly free.
        </p>
        <label className="flex flex-col gap-1 text-sm">
          <span className="font-medium">Local engine</span>
          <SeededSelect
            state={state}
            name="digestLocalAppId"
            initial={initial.localAppId}
            className="rounded border border-border bg-card px-2 py-1 text-sm"
          >
            {digestApps
              .filter((a) => !a.metered)
              .map((a) => (
                <option key={a.id} value={a.id}>
                  {a.label}
                </option>
              ))}
          </SeededSelect>
          <span className="text-xs text-muted-foreground">
            The lane that carries the corpus. Runs on your own hardware; nothing
            leaves the machine.
          </span>
        </label>
        <label className="flex flex-col gap-1 text-sm">
          <span className="font-medium">Sections to generate</span>
          <span className="flex flex-wrap gap-3">
            {DIGEST_SECTION_OPTIONS.map((section) => (
              <label key={section} className="flex items-center gap-1 text-sm">
                <ControlledCheck
                  type="checkbox"
                  name="digestSections"
                  value={section}
                  checked={sections.includes(section)}
                  onChange={(e) =>
                    setSections((prev) =>
                      e.target.checked
                        ? [...prev, section]
                        : prev.filter((s) => s !== section),
                    )
                  }
                />
                {section}
              </label>
            ))}
          </span>
          <span className="text-xs text-muted-foreground">
            Tags double the model calls but cost only 5–15% more time: a tag call
            re-sends the same transcript as the chapter call before it, so it
            reuses the engine&apos;s cached prompt and pays for decoding ~30
            output tokens instead of ~250. Generating them <em>later</em>, in
            their own pass, pays for the transcript again — measured at 44% of a
            full chapters pass. So if you want tags at all, check them now
            rather than after. Unchecking everything falls back to chapters
            rather than generating nothing.
          </span>
        </label>
        <label className="flex flex-col gap-1 text-sm">
          <span className="font-medium">Timestamp mode</span>
          <SeededSelect
            state={state}
            name="digestTimestampMode"
            initial={initial.timestampMode}
            className="rounded border border-border bg-card px-2 py-1 text-sm"
          >
            {DIGEST_TIMESTAMP_MODE_OPTIONS.map((mode) => (
              <option key={mode} value={mode}>
                {mode}
                {mode === DEFAULT_DIGEST_TIMESTAMP_MODE ? " (recommended)" : ""}
              </option>
            ))}
          </SeededSelect>
          <span className="text-xs text-muted-foreground">
            How each chunk&apos;s transcript markers are numbered.{" "}
            <strong>chunk-local</strong> re-bases every chunk to 00:00:00 and
            adds the offset back before any guard runs; on the long tail it cut
            wasted chunks from 29.4% to 11.8% and the worst coverage gap from
            1:05:16 to 24:13, because the model stops having to hold a large
            offset. <strong>absolute</strong> is kept for comparison. This
            changes the recorded identity, so switching it re-runs the corpus
            instead of silently mixing two shapes.
          </span>
        </label>
        <Field
          label="Prompt variant label"
          name="digestPromptVariant"
          state={state}
          defaultValue={initial.promptVariant}
          hint="Free-text label for a non-default prompt shape, recorded in every section's provenance (trimmed, max 40 chars). Setting or changing it invalidates digests generated under a different label — which is exactly what makes a bake-off round re-run its sample instead of skipping it as fresh. Leave blank unless you are running one."
        />
        <label className="flex items-start gap-2 text-sm">
          <input
            type="checkbox"
            name="digestYieldToCpuWorkers"
            defaultChecked={seedChecked(
              state,
              "digestYieldToCpuWorkers",
              initial.yieldToCpuWorkers,
            )}
            className="mt-1"
          />
          <span className="flex flex-col gap-1">
            <span className="font-medium">
              Also yield the GPU to CPU-only transcription workers
            </span>
            <span className="text-xs text-muted-foreground">
              Off by default. The digest lane steps aside while transcription
              uses the card, but a worker pinned to{" "}
              <code>device: cpu</code> competes for no GPU shaders at all —
              treating it as contention held the digest lane at zero throughput
              for nothing. A worker with <em>no</em> device set still counts,
              because that is the engine binary&apos;s own default and it may be
              the GPU. Turn this on to make every local worker block the digest
              lane regardless of device.
            </span>
          </span>
        </label>
        <details className="text-sm">
          <summary className="cursor-pointer font-medium">
            Per-engine configuration
          </summary>
          <div className="mt-2">
            <DigestAppsField
              apps={digestApps}
              initial={initial.apps}
              name="digestAppsJson"
            />
          </div>
        </details>
        <label className="flex items-start gap-2 text-sm">
          <input
            type="checkbox"
            name="digestRemoteEnabled"
            defaultChecked={seedChecked(
              state,
              "digestRemoteEnabled",
              initial.remoteEnabled,
            )}
            className="mt-1"
          />
          <span className="flex flex-col gap-1">
            <span className="font-medium">
              Enable the metered (paid) digest lane
            </span>
            <span className="text-xs text-muted-foreground">
              Off by default, and deliberately: this lane sends transcripts to a
              paid API. It exists for the long tail of very long videos, which
              is a small fraction of the corpus by count and a large one by
              tokens. With it off, the metered option is disabled in every
              channel&apos;s Digest stage rather than failing after the fact.
            </span>
          </span>
        </label>
        <label className="flex flex-col gap-1 text-sm">
          <span className="font-medium">Metered engine</span>
          <SeededSelect
            state={state}
            name="digestRemoteAppId"
            initial={initial.remoteAppId}
            className="rounded border border-border bg-card px-2 py-1 text-sm"
          >
            {digestApps
              .filter((a) => a.metered)
              .map((a) => (
                <option key={a.id} value={a.id}>
                  {a.label}
                </option>
              ))}
          </SeededSelect>
        </label>
        <Field
          label="Long-tail cutoff (seconds)"
          name="digestLongTailSeconds"
          state={state}
          defaultValue={String(initial.longTailSeconds)}
          type="number"
          hint="Videos at least this long are what the metered lane takes when you run it. Default 14400 (4 h)."
        />
        <Field
          label="Spend cap (USD per job)"
          name="digestSpendCapUsd"
          state={state}
          defaultValue={String(initial.spendCapUsd)}
          type="number"
          step="0.01"
          hint="Hard ceiling on cumulative metered spend within one job; the lane parks itself when it is reached. 0 means no cap. Only ever consulted for a metered engine."
        />
        <div className="flex items-center gap-3">
          <button
            type="submit"
            disabled={pending}
            className="px-3 py-1.5 rounded-md bg-primary text-primary-foreground text-sm font-medium hover:opacity-90 disabled:opacity-50"
          >
            {pending ? "Saving…" : "Save digest settings"}
          </button>
          {state?.ok === true && (
            <span role="status" className="text-sm text-success">
              Saved.
            </span>
          )}
          {state?.ok === false && (
            <span role="alert" className="text-sm text-destructive">
              {state.error}
            </span>
          )}
        </div>
      </fieldset>
    </form>
  );
}