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 PromoCodeBookingsClientPage from "./_client";

export const handle = {
  breadcrumb: () => (
    <BreadCrumbLink
      links={[{ label: "Promo Codes" }, { label: "Bookings" }]}
    />
  ),
};

/*
 * Analytics and the row list are both fetched client-side.
 *
 * They aggregate across every promo-code booking, which is slower than a page
 * load should block on, and both need to refetch whenever the window or code
 * filter changes — so there is nothing useful to prefetch here.
 */
export const loader = createRoleProtectedLoader(
  FEATURE_SLUGS.promoCodeCampaigns,
  "read",
  async ({ request }) => ({
    accessScope: getCheckedAccess(request, FEATURE_SLUGS.promoCodeCampaigns),
  }),
);

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

export default Page;