import BreadCrumbLink from "@/layouts/shared/page.breadcrumbLink";
import { createRoleProtectedLoader } from "@/lib/features/protectedFetcher";
import { listEDMFolders } from "@/lib/features/edm/query";
import type { EDMFolder } from "@/lib/features/edm/types";
import type { AccessScope, CoreResponse } from "@/lib/features/types";
import { FEATURE_SLUGS, getCheckedAccess, isDevInstance } from "@/lib/role-helpers";
import type { Route } from "./+types/page";
import EDMImportClientPage from "./_client";

export const handle = {
  breadcrumb: () => (
    <BreadCrumbLink
      links={[
        { label: "Email Templates", to: "/admin/edm" },
        { label: "Import" },
      ]}
    />
  ),
};

export const loader = createRoleProtectedLoader(
  FEATURE_SLUGS.edm,
  "create",
  async ({ request }) => {
    const foldersResponse = await listEDMFolders({
      Cookie: request.headers.get("Cookie") ?? "",
    });
    const accessScope = getCheckedAccess(request, FEATURE_SLUGS.edm);
    if (isDevInstance(request)) {
      accessScope.create = false;
      accessScope.update = false;
      accessScope.delete = false;
    }
    return { foldersResponse, accessScope };
  },
);

const EDMImportPage: React.FC<Route.ComponentProps> = ({ loaderData }) => {
  const { foldersResponse, accessScope } = loaderData as unknown as {
    foldersResponse: CoreResponse<EDMFolder[]>;
    accessScope: AccessScope;
  };

  return (
    <EDMImportClientPage
      initialFolders={
        foldersResponse?.success && Array.isArray(foldersResponse.data)
          ? foldersResponse.data
          : []
      }
      accessScope={accessScope}
    />
  );
};

export default EDMImportPage;