import BreadCrumbLink from "@/layouts/shared/page.breadcrumbLink";
import { createRoleProtectedLoader } from "@/lib/features/protectedFetcher";
import {
  getDashboardOverview,
  listCampaigns,
} from "@/lib/features/promo-code-campaigns/query";
import type {
  CampaignListResult,
  DashboardOverviewRow,
} from "@/lib/features/promo-code-campaigns/types";
import type { AccessScope, CoreResponse } from "@/lib/features/types";
import { FEATURE_SLUGS, getCheckedAccess } from "@/lib/role-helpers";
import type { Route } from "./+types/page";
import CampaignsClientPage from "./_client";

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

export const loader = createRoleProtectedLoader(
  FEATURE_SLUGS.promoCodeCampaigns,
  "read",
  async ({ request }) => {
    const url = new URL(request.url);
    const search = url.searchParams.get("search") ?? "";
    const page = Number.parseInt(url.searchParams.get("page") ?? "1", 10) || 1;
    const pageSize =
      Number.parseInt(url.searchParams.get("pageSize") ?? "25", 10) || 25;

    const cookieHeader = { Cookie: request.headers.get("Cookie") ?? "" };
    const [listResponse, dashboardResponse] = await Promise.all([
      listCampaigns(
        { search: search || undefined, page, pageSize },
        cookieHeader,
      ),
      getDashboardOverview(cookieHeader),
    ]);

    const accessScope = getCheckedAccess(
      request,
      FEATURE_SLUGS.promoCodeCampaigns,
    );

    return {
      listResponse,
      dashboardResponse,
      search,
      page,
      pageSize,
      accessScope,
    };
  },
);

const Page: React.FC<Route.ComponentProps> = ({ loaderData }) => {
  const {
    listResponse,
    dashboardResponse,
    search,
    page,
    pageSize,
    accessScope,
  } = loaderData as unknown as {
    listResponse: CoreResponse<CampaignListResult>;
    dashboardResponse: CoreResponse<DashboardOverviewRow[]>;
    search: string;
    page: number;
    pageSize: number;
    accessScope: AccessScope;
  };

  const list = listResponse?.success
    ? listResponse.data
    : { items: [], pagination: { page, pageSize, total: 0, totalPages: 1 } };
  const dashboard = dashboardResponse?.success ? dashboardResponse.data : [];

  return (
    <CampaignsClientPage
      initialList={list}
      initialDashboard={dashboard}
      initialSearch={search}
      initialError={listResponse?.success ? undefined : listResponse?.message}
      accessScope={accessScope}
    />
  );
};

export default Page;