import type { Metadata } from "next";
import { getSettings } from "yt-dlp-transcript-common/lib/settings";
import { listTranscriptionApps } from "yt-dlp-transcript-common/lib/transcriptionApps";
import { operationCatalog } from "yt-dlp-transcript-common/lib/operations";
import { WORKER_RESOURCE_TAGS } from "yt-dlp-transcript-common/lib/workers";
import { WorkersView } from "./components/WorkersView";
import { WorkersConfigForm } from "./components/WorkersConfigForm";
import { buildWorkersPayload } from "./buildWorkers";

export const dynamic = "force-dynamic";

export const metadata: Metadata = { title: "Workers" };

export default async function WorkersPage() {
  const initial = buildWorkersPayload();
  const settings = getSettings();
  // The tag vocabulary a worker can be matched on: every PER-VIDEO operation (a
  // delegate takes a UNIT of one — lanes.ts, runsOnFor) plus the resources.
  // `scope` is the filter, not the id: sync is catalogued and channel-scoped,
  // and no worker will ever be handed a channel.
  const knownTags = [
    ...new Set([
      ...operationCatalog()
        .filter((o) => o.scope === "video")
        .map((o) => o.id),
      ...WORKER_RESOURCE_TAGS,
    ]),
  ];
  return (
    <div className="flex flex-col gap-4">
      <h1 className="text-2xl font-semibold">Workers</h1>
      <WorkersView initial={initial} />
      <WorkersConfigForm
        initial={settings.workers}
        apps={listTranscriptionApps()}
        knownTags={knownTags}
      />
    </div>
  );
}