"use client";
import { RESEARCH_MODE_LABELS } from "@autoscholar/schemas";
import { useRouter } from "next/navigation";
import { useToast } from "@/components/Toast";
import { type ApiError, api } from "@/lib/client/api";

export function SettingsControls({
  settings,
}: {
  settings: { dispatchPaused: boolean; publishingHalted: boolean; haltedModes: string[] };
}) {
  const router = useRouter();
  const toast = useToast();
  const set = async (key: string, value: unknown, msg: string) => {
    try {
      await api("/api/admin/settings", { json: { key, value } });
      toast.push("success", msg);
      router.refresh();
    } catch (e) {
      toast.push("error", (e as ApiError).message);
    }
  };
  return (
    <section className="surface p-4">
      <h2 className="title-3">Emergency controls</h2>
      <div className="mt-3 grid gap-3 sm:grid-cols-2">
        <label className="flex items-start gap-2 text-sm">
          <input
            type="checkbox"
            checked={settings.dispatchPaused}
            onChange={(e) =>
              set(
                "dispatch.paused",
                e.target.checked,
                e.target.checked ? "All new dispatches paused." : "Dispatch resumed.",
              )
            }
            className="mt-1"
          />
          <span>
            <strong>Pause all new research dispatches</strong>
            <span className="muted block text-xs">Workers stop leasing jobs; running jobs continue.</span>
          </span>
        </label>
        <label className="flex items-start gap-2 text-sm">
          <input
            type="checkbox"
            checked={settings.publishingHalted}
            onChange={(e) =>
              set(
                "publishing.halted",
                e.target.checked,
                e.target.checked
                  ? "Automatic publication halted globally."
                  : "Automatic publication resumed.",
              )
            }
            className="mt-1"
          />
          <span>
            <strong>Halt automatic publication</strong>
            <span className="muted block text-xs">Passing runs stop at awaiting approval.</span>
          </span>
        </label>
        <fieldset className="sm:col-span-2 text-sm">
          <legend className="label mb-1">Halt automatic publication for research modes</legend>
          <div className="flex flex-wrap gap-3">
            {Object.entries(RESEARCH_MODE_LABELS).map(([k, l]) => (
              <label key={k} className="flex items-center gap-1">
                <input
                  type="checkbox"
                  checked={settings.haltedModes.includes(k)}
                  onChange={(e) =>
                    set(
                      "publishing.haltedModes",
                      e.target.checked
                        ? [...settings.haltedModes, k]
                        : settings.haltedModes.filter((x) => x !== k),
                      `Mode halt updated for ${l}.`,
                    )
                  }
                />
                {l}
              </label>
            ))}
          </div>
        </fieldset>
      </div>
    </section>
  );
}