"use client";

import { useState } from "react";
import { buttonVariants } from "@/components/ui/button";

// Starts one check-sources job over the given projects. The route serialises it
// with builds through the same job runner, so a running build makes this a 409
// that is shown, not swallowed.
export default function CheckSourcesButton({
  projects,
  label,
}: {
  projects: string[];
  label?: string;
}) {
  const [state, setState] = useState<"idle" | "busy" | "started" | "failed">("idle");
  const [msg, setMsg] = useState<string | null>(null);
  if (!projects.length && !label) return null;
  return (
    <>
      <button
        type="button"
        data-action="check-sources"
        data-state={state}
        disabled={state === "busy" || !projects.length}
        className={buttonVariants({ size: "sm" })}
        onClick={async () => {
          setState("busy");
          setMsg(null);
          try {
            const r = await fetch("/api/report/check-sources", {
              method: "POST",
              headers: { "content-type": "application/json" },
              body: JSON.stringify({ projects }),
            });
            const j = (await r.json()) as { error?: string };
            if (!r.ok) throw new Error(j.error ?? String(r.status));
            setState("started");
          } catch (e) {
            setState("failed");
            setMsg(e instanceof Error ? e.message : String(e));
          }
        }}
      >
        {state === "started"
          ? "checking…"
          : label ?? `re-check ${projects.length} project${projects.length === 1 ? "" : "s"}`}
      </button>
      {msg && <span className="ml-2 text-[11px] text-[var(--color-bad)]">{msg}</span>}
    </>
  );
}