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

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

/**
 * No data is loaded here on purpose.
 *
 * The workspace fetches folder contents lazily as the tree is expanded, so a
 * loader would either duplicate that or force the whole store to be walked
 * before the page could paint.
 */
export const loader = createRoleProtectedLoader(
  FEATURE_SLUGS.edm,
  "read",
  async ({ request }) => {
    const accessScope = getCheckedAccess(request, FEATURE_SLUGS.edm);
    if (isDevInstance(request)) {
      accessScope.create = false;
      accessScope.update = false;
      accessScope.delete = false;
    }
    return { accessScope };
  },
);

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

export default EDMWorkspacePage;