import { createFileRoute } from "@tanstack/react-router";
import { requireSignedIn } from "~/lib/route-guards";
import { z } from "zod";
import { getBilling } from "~/fns/billing";
import { BillingPage } from "~/components/billing/BillingPage";
import { PageContainer } from "~/ui/PageContainer";
import { Heading } from "~/ui/Heading";

export const Route = createFileRoute("/orgs/$org/billing")({
  beforeLoad: ({ context, location }) => {
    requireSignedIn({ context, location });
  },
  validateSearch: z.object({ period: z.string().optional() }),
  loaderDeps: ({ search }) => ({ period: search.period }),
  loader: ({ params, deps }) => getBilling({ data: { org: params.org, period: deps.period } }),
  component: OrgBillingPage,
});

function OrgBillingPage() {
  const params = Route.useParams();
  return (
    <PageContainer className="max-w-4xl space-y-4">
      <Heading>{params.org}</Heading>
      <BillingPage billing={Route.useLoaderData()} org={params.org} />
    </PageContainer>
  );
}