import BreadCrumbLink from "@/layouts/shared/page.breadcrumbLink";
import { createRoleProtectedLoader } from "@/lib/features/protectedFetcher";
import { FEATURE_SLUGS, getCheckedAccess } from "@/lib/role-helpers";
import type { AccessScope } from "@/lib/features/types";
import type { Route } from "./+types/page";
import CreatePromoCodeClientPage from "./_client";

export const handle = {
  breadcrumb: () => (
    <BreadCrumbLink
      links={[
        { label: "Promo Codes" },
        { label: "Karma Subito Promo Code", to: "/admin/promo-codes" },
        { label: "Create" },
      ]}
    />
  ),
};

/*
 * Gated on `create`, not `read`: this page only submits. Someone who may view promo
 * codes but not add them should not reach a form they cannot save.
 */
export const loader = createRoleProtectedLoader(
  FEATURE_SLUGS.promoCodes,
  "create",
  async ({ request }) => ({
    accessScope: getCheckedAccess(request, FEATURE_SLUGS.promoCodes),
  }),
);

const Page: React.FC<Route.ComponentProps> = ({ loaderData }) => {
  const { accessScope } = loaderData as unknown as { accessScope: AccessScope };
  return <CreatePromoCodeClientPage accessScope={accessScope} />;
};

export default Page;
