import type { Metadata } from "next";
import { createRunnerAction, deleteRunnerAction } from "@/app/actions/ci";
import { NewRunnerForm } from "@/components/ci/new-runner-form";
import { RunnerList } from "@/components/ci/runner-list";
import { PlateSection } from "@/components/settings-plate";
import { PageTitle } from "@/components/ui";
import { requireViewer } from "@/lib/auth";
import { serverOrigin } from "@/lib/request-origin";
import { listRunners } from "@/lib/runners";

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

export default async function RunnersPage() {
  const viewer = await requireViewer("/settings/runners");
  return (
    <div>
      <PageTitle
        title="Runners"
        description="Machines that run workflow jobs for every repository you own. A repository can also have its own runners, under its settings."
      />
      <div className="flex flex-col gap-7">
        <RunnerList runners={await listRunners({ userId: viewer.id })} deleteAction={deleteRunnerAction.bind(null, null)} />
        <PlateSection title="Register a runner">
          <NewRunnerForm
            action={createRunnerAction.bind(null, null)}
            origin={await serverOrigin()}
            scopeText="This runner will pick up jobs from all repositories you own, including ones you create later."
          />
        </PlateSection>
      </div>
    </div>
  );
}