"use client";

import { useActionState } from "react";
import type { Worker } from "yt-dlp-transcript-common/lib/workers";
import type { TranscriptionAppDescriptor } from "yt-dlp-transcript-common/lib/transcriptionApps";
import { saveWorkersAction, type SaveWorkersResult } from "../actions";
import { WorkersField } from "./WorkersField";

// THE PERSISTED WORKER LIST, configured beside the workers it describes.
//
// It was a fieldset inside the one big settings form, which is the shape slice
// 3 spent a whole commit undoing: this form writes ONE block and nothing else
// on this page is a form, which is what lets a save here never read another
// block's checkbox as off.
//
// Both type imports are load-bearing as types: workers.ts reaches node:fs
// through transcriptionApps.ts. The app list and the tag vocabulary are built
// on the server in page.tsx and travel as props.
export function WorkersConfigForm({
  initial,
  apps,
  knownTags,
}: {
  initial: Worker[];
  apps: TranscriptionAppDescriptor[];
  knownTags: string[];
}) {
  const [state, formAction, pending] = useActionState<
    SaveWorkersResult | undefined,
    FormData
  >(saveWorkersAction, undefined);

  return (
    <form
      action={formAction}
      data-settings-block="workers"
      className="flex flex-col gap-3 rounded border border-border p-3"
    >
      <h2 className="text-sm font-semibold">Configuration</h2>
      <p className="text-xs text-muted-foreground">
        Each worker is one processing slot — one transcription at a time. To run
        several in parallel on the same engine, add more workers (use{" "}
        <strong>Copy</strong> to duplicate one). List order is priority (top =
        preferred); each video goes to the highest-priority free worker, so a
        fast GPU worker and a CPU worker run side by side. Enable, disable and
        drain individual workers live in the list above.
      </p>
      <WorkersField
        initial={initial}
        apps={apps}
        name="workersJson"
        knownTags={knownTags}
      />
      <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 workers"}
        </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>
    </form>
  );
}