import { createFileRoute } from "@tanstack/react-router";
import { requireSignedIn } from "~/lib/route-guards";
import { listIntegrations } from "~/fns/integrations";
import { IntegrationsPage } from "~/components/integrations/IntegrationsPage";
import { PageContainer } from "~/ui/PageContainer";
import { Heading } from "~/ui/Heading";

export const Route = createFileRoute("/orgs/$org/integrations")({
  beforeLoad: ({ context, location }) => {
    requireSignedIn({ context, location });
  },
  loader: ({ params }) => listIntegrations({ data: { owner: params.org, repo: null } }),
  component: OrgIntegrationsPage,
});

function OrgIntegrationsPage() {
  const data = Route.useLoaderData();
  const params = Route.useParams();
  return (
    <PageContainer className="max-w-4xl space-y-4">
      <Heading>{params.org} integrations</Heading>
      <p className="text-sm text-kumo-subtle">
        Integrations here receive events from every repository in the organization.
      </p>
      <IntegrationsPage data={data} scope={{ owner: params.org, repo: null }} />
    </PageContainer>
  );
}