import { createFileRoute } from "@tanstack/react-router";
import { requireSignedIn } from "~/lib/route-guards";
import { listAccountContainers, stopAccountContainerFn } from "~/fns/containers";
import { useAction } from "~/hooks/use-action";
import { PageContainer } from "~/ui/PageContainer";
import { ContainerSessionList } from "~/components/containers/ContainerSessionList";
import { Heading } from "~/ui/Heading";

export const Route = createFileRoute("/orgs/$org/containers")({
  beforeLoad: ({ context, location }) => {
    requireSignedIn({ context, location });
  },
  loader: ({ params }) => listAccountContainers({ data: { org: params.org } }),
  component: OrgContainersPage,
});

function OrgContainersPage() {
  const overview = Route.useLoaderData();
  const params = Route.useParams();
  const stop = useAction(stopAccountContainerFn);
  return (
    <PageContainer className="max-w-4xl space-y-4">
      <Heading>{overview.account} editor containers</Heading>
      <p className="text-sm text-kumo-subtle">
        Containers billed to this organization. Owners can stop any of them; the member who started one is shown.
      </p>
      <ContainerSessionList
        overview={overview}
        showAccount
        canStop
        error={stop.error}
        pending={stop.pending}
        onStop={(sessionId) => stop.run({ data: { org: params.org, sessionId } })}
      />
    </PageContainer>
  );
}