import { createFileRoute } from "@tanstack/react-router";
import { requireSignedIn } from "~/lib/route-guards";
import { createOwnerRunnerRegistration, deleteOwnerRunner, listOwnerRunnersFn } from "~/fns/runners";
import { useAction } from "~/hooks/use-action";
import { PageContainer } from "~/ui/PageContainer";
import { RegisterRunnerPanel, RunnerList } from "~/components/runners/RunnerPanels";
import { Heading } from "~/ui/Heading";

export const Route = createFileRoute("/orgs/$org/runners")({
  beforeLoad: ({ context, location }) => {
    requireSignedIn({ context, location });
  },
  loader: ({ params }) => listOwnerRunnersFn({ data: { owner: params.org } }),
  component: OrgRunnersPage,
});

function OrgRunnersPage() {
  const { owner, runners, serverUrl } = Route.useLoaderData();
  const params = Route.useParams();
  const register = useAction(createOwnerRunnerRegistration, { invalidate: false });
  const remove = useAction(deleteOwnerRunner);
  return (
    <PageContainer className="max-w-4xl space-y-4">
      <Heading>{owner} runners</Heading>
      <p className="text-sm text-kumo-subtle">
        Owner-wide self-hosted runners take jobs from every repository {owner} owns. They never run fork pull request
        jobs; register a runner on a single repository for that.
      </p>
      <RegisterRunnerPanel
        serverUrl={serverUrl}
        pending={register.pending}
        error={register.error}
        onMint={({ labels, isolation }) => register.run({ data: { owner: params.org, labels, isolation } })}
      />
      <RunnerList
        runners={runners}
        error={remove.error}
        onRemove={(id) => remove.run({ data: { owner: params.org, id } })}
      />
    </PageContainer>
  );
}