"use client";

import { useActionState } from "react";
import type { PublishSettings } from "yt-dlp-transcript-common/lib/settings";
import { Field } from "../../../components/forms/Field";
import { seedChecked, seedValue } from "../../../lib/formState";
import { savePublishSettingsAction } from "../../settingsActions";
import type { SaveResult } from "../../../settings/actions";

// `settings.publish` (release 18), every field but `held` — the hold button
// beside the runner writes that one. The policies of the hub and the homepage
// live here; a SITE's policy is its own (site.json `publish.auto`, set on the
// site's page).

const POLICIES = [
  ["off", "Off"],
  ["build", "Build"],
  ["preview", "Preview"],
  ["production", "Production"],
] as const;

function PolicySelect({
  label,
  name,
  initial,
  state,
}: {
  label: string;
  name: string;
  initial: string;
  state: SaveResult | undefined;
}) {
  return (
    <label className="flex flex-col gap-1 text-sm">
      <span className="font-medium">{label}</span>
      <select
        name={name}
        defaultValue={seedValue(state, name, initial)}
        className="w-48 rounded border border-border bg-card px-2 py-1 text-sm"
      >
        {POLICIES.map(([v, l]) => (
          <option key={v} value={v}>
            {l}
          </option>
        ))}
      </select>
    </label>
  );
}

export function PublishSettingsForm({ initial }: { initial: PublishSettings }) {
  const [state, formAction, pending] = useActionState<SaveResult | undefined, FormData>(
    savePublishSettingsAction,
    undefined,
  );

  return (
    <form action={formAction} data-settings-block="publish" className="flex flex-col gap-3">
      <fieldset className="flex flex-col gap-3 rounded border border-border p-3">
        <legend className="px-1 text-sm font-medium">Publish lane settings</legend>
        <label className="flex items-start gap-2 text-sm">
          <input
            type="checkbox"
            name="publishEnabled"
            defaultChecked={seedChecked(state, "publishEnabled", initial.enabled)}
            className="mt-1"
          />
          <span className="flex flex-col gap-1">
            <span className="font-medium">Run the publish lane</span>
            <span className="text-xs text-muted-foreground">
              The runner wakes, and when the index is stale (or a policy target is left stale) it updates
              the index, then builds and deploys what each policy says — one stage at a time on the publish
              queue. Off, the buttons on /sites still run.
            </span>
          </span>
        </label>
        <Field
          label="Check every (minutes)"
          name="publishCheckEveryMinutes"
          type="number"
          min="1"
          state={state}
          defaultValue={String(initial.checkEveryMinutes)}
          hint="How often the runner asks whether a pass is due. 1–1440."
        />
        <Field
          label="Refresh every (minutes)"
          name="publishRefreshEveryMinutes"
          type="number"
          min="0"
          state={state}
          defaultValue={String(initial.refreshEveryMinutes)}
          hint="The least time between two index updates the lane starts; 0 = whenever the index is stale."
        />
        <div className="flex flex-wrap gap-3">
          <Field
            label="Quiet hours: start (0–23)"
            name="publishQuietStart"
            type="number"
            min="0"
            state={state}
            defaultValue={initial.quietHours ? String(initial.quietHours.start) : ""}
            placeholder="none"
          />
          <Field
            label="Quiet hours: end (0–23)"
            name="publishQuietEnd"
            type="number"
            min="0"
            state={state}
            defaultValue={initial.quietHours ? String(initial.quietHours.end) : ""}
            placeholder="none"
            hint="No pass starts in [start, end) on this machine's clock (may wrap midnight). Both empty: none."
          />
        </div>
        <label className="flex flex-col gap-1 text-sm">
          <span className="font-medium">Build runner</span>
          <select
            name="publishRunner"
            defaultValue={seedValue(state, "publishRunner", initial.runner)}
            className="w-48 rounded border border-border bg-card px-2 py-1 text-sm"
          >
            <option value="local">Local (one site at a time)</option>
            <option value="docker">Docker (host only)</option>
          </select>
          <span className="text-xs text-muted-foreground">
            Docker builds every stale site in containers — a host with a container engine only; refused in
            a container.
          </span>
        </label>
        <Field
          label="Preview branch"
          name="publishPreviewBranch"
          state={state}
          defaultValue={initial.previewBranch}
          hint="Where a “preview” policy deploys (wrangler --branch). Lowercase letters, digits and dashes; never main."
        />
        <div className="flex flex-wrap gap-4">
          <PolicySelect label="Hub policy" name="publishHub" initial={initial.hub} state={state} />
          <PolicySelect label="Homepage policy" name="publishHomepage" initial={initial.homepage} state={state} />
        </div>
        <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 publish 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>
  );
}