"use client";

import { useActionState } from "react";
import type { SiteSettings } from "yt-dlp-transcript-common/lib/settings";
import type { DigestAppDescriptor } from "yt-dlp-transcript-common/lib/digestApps";
import { Field, SeededSelect } from "../../../components/forms/Field";
import { seedChecked } from "../../../lib/formState";
import { saveAttributionSettingsAction } from "../../settingsActions";
import type { SaveResult } from "../../../settings/actions";

// The `attribution` block of settings.json — ONE block behind TWO operations,
// so this same form is drawn on /operations/attribution-text and on
// /operations/attribution-diarized. Both pages save the same block, which is
// why the operations declare the same `settingsBlock` rather than one each.
export function AttributionSettingsForm({
  initial,
  digestApps,
}: {
  initial: SiteSettings["attribution"];
  digestApps: DigestAppDescriptor[];
}) {
  const [state, formAction, pending] = useActionState<
    SaveResult | undefined,
    FormData
  >(saveAttributionSettingsAction, undefined);

  return (
    <form
      action={formAction}
      data-settings-block="attribution"
      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">Speaker attribution</legend>
        <p className="text-xs text-muted-foreground">
          Putting names to the speakers. Nothing here runs on its own — it
          registers two operations, and the Speaker work lane below decides when
          they get the machine. Both are on the same shared pause as speaker
          diarization.
        </p>
        <label className="flex items-start gap-2 text-sm">
          <input
            type="checkbox"
            name="attributionEnabled"
            defaultChecked={seedChecked(
              state,
              "attributionEnabled",
              initial.enabled,
            )}
            className="mt-1"
          />
          <span className="flex flex-col gap-1">
            <span className="font-medium">Enable speaker attribution</span>
            <span className="text-xs text-muted-foreground">
              Off means neither lane below reports work, whatever their own
              switches say.
            </span>
          </span>
        </label>
        <label className="flex items-start gap-2 text-sm">
          <input
            type="checkbox"
            name="attributionDiarized"
            defaultChecked={seedChecked(
              state,
              "attributionDiarized",
              initial.diarizedEnabled,
            )}
            className="mt-1"
          />
          <span className="flex flex-col gap-1">
            <span className="font-medium">
              Name the speakers found in the audio
            </span>
            <span className="text-xs text-muted-foreground">
              About <strong>one model call per video</strong>: the diarizer
              already grouped the voices, so the model only has to put a name to
              each group. Needs <code>diarization.json</code>, which is why
              videos without it are counted separately.
            </span>
          </span>
        </label>
        <label className="flex items-start gap-2 text-sm">
          <input
            type="checkbox"
            name="attributionTextOnly"
            defaultChecked={seedChecked(
              state,
              "attributionTextOnly",
              initial.textOnlyEnabled,
            )}
            className="mt-1"
          />
          <span className="flex flex-col gap-1">
            <span className="font-medium">
              Guess the speakers from the transcript
            </span>
            <span className="text-xs text-muted-foreground">
              For videos with no diarization. Roughly{" "}
              <strong>one call per transcript chunk</strong> — about 194,000
              across this archive, or 25–55 days of GPU time, which is the same
              order as the digest sweep and would compete with it. Quality is
              genuinely uncertain: it misfires on rapid back-and-forth, and
              auto-caption channels have no speaker turns in the first place. It
              never overwrites a record made from the audio.
            </span>
          </span>
        </label>
        <label className="flex flex-col gap-1 text-sm">
          <span className="font-medium">Engine</span>
          <SeededSelect
            state={state}
            name="attributionAppId"
            initial={initial.appId}
            className="rounded border border-border bg-card px-2 py-1 text-sm"
          >
            {digestApps.map((a) => (
              <option key={a.id} value={a.id}>
                {a.label}
                {a.metered ? " (metered)" : ""}
              </option>
            ))}
          </SeededSelect>
          <span className="text-xs text-muted-foreground">
            Uses the digest engines and their configuration, set on the Digest
            operation&apos;s page — same constrained-JSON workload, so there is
            no second copy of the URL and context size to keep in step.
          </span>
        </label>
        <Field
          label="Model override"
          name="attributionModel"
          state={state}
          defaultValue={initial.model}
          hint="Empty means the engine's own configured model. Set separately from the digest's so a digest bake-off does not invalidate every attribution record as a side effect — this value is part of what makes a record fresh."
        />
        <Field
          label="Prompt generation"
          name="attributionPromptVersion"
          state={state}
          defaultValue={String(initial.promptVersion)}
          type="number"
          hint="A record generated at an older number is stale and will be redone. Raise it to force a corpus-wide regeneration after changing the prompt; it cannot be set below the shipped value, because pinning it lower would freeze superseded output into the archive looking current."
        />
        <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 attribution 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>
  );
}