import BreadCrumbLink from "@/layouts/shared/page.breadcrumbLink";
import { createRoleProtectedLoader } from "@/lib/features/protectedFetcher";
import type {
  AccessScope,
  CoreAPIPagination,
  CoreResponse,
} from "@/lib/features/types";
import { getAdminRoles } from "@/lib/features/users/roles/query";
import type { AdminRole } from "@/lib/features/users/roles/types";
import { FEATURE_SLUGS, getCheckedAccess } from "@/lib/role-helpers";
import RolesClientPage from "./_client";
import type { Route } from "./+types/page";

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

export const loader = createRoleProtectedLoader(
  FEATURE_SLUGS.roleManagement,
  "read",
  async ({ request }) => {
    const url = new URL(request.url);
    const page = parseInt(url.searchParams.get("page") ?? "1");
    const pageSize = parseInt(url.searchParams.get("pageSize") ?? "15");
    const search = url.searchParams.get("search") ?? undefined;
    const adminRoles = await getAdminRoles(page, pageSize, search, request);
    const accessScope = getCheckedAccess(request, FEATURE_SLUGS.roleManagement);
    return { adminRoles, accessScope };
  },
);

const RolesPage: React.FC<Route.ComponentProps> = ({ loaderData }) => {
  const { adminRoles, accessScope } = loaderData as unknown as {
    adminRoles: CoreResponse<{
      roles: AdminRole[];
      pagination: CoreAPIPagination;
    }>;
    accessScope: AccessScope;
  };
  return (
    <RolesClientPage
      tableProps={{
        data: adminRoles?.data.roles ?? [],
        totalRows: adminRoles?.data?.pagination?.total ?? 0,
      }}
      accessScope={accessScope}
    />
  );
};

export default RolesPage;