import { createFileRoute } from "@tanstack/react-router";
import { listRepoContainers, stopRepoContainerFn } from "~/fns/containers";
import { useAction } from "~/hooks/use-action";
import { ContainerSessionList } from "~/components/containers/ContainerSessionList";

export const Route = createFileRoute("/$owner/$repo/settings/containers")({
  loader: ({ params }) => listRepoContainers({ data: { owner: params.owner, repo: params.repo } }),
  component: RepoContainersPage,
});

function RepoContainersPage() {
  const overview = Route.useLoaderData();
  const params = Route.useParams();
  const stop = useAction(stopRepoContainerFn);
  return (
    <div className="space-y-4">
      <p className="text-sm text-kumo-subtle">
        Editor containers running against this repository, across every user. Each is billed to the person who started
        it.
      </p>
      <ContainerSessionList
        overview={overview}
        showAccount
        canStop
        error={stop.error}
        pending={stop.pending}
        onStop={(sessionId) => stop.run({ data: { owner: params.owner, repo: params.repo, sessionId } })}
      />
    </div>
  );
}