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

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

export const loader = createRoleProtectedLoader(
  FEATURE_SLUGS.edm,
  "read",
  async ({ request, params }) => {
    const { templateId } = params as { templateId: string };
    const accessScope = getCheckedAccess(request, FEATURE_SLUGS.edm);
    if (isDevInstance(request)) {
      accessScope.create = false;
      accessScope.update = false;
      accessScope.delete = false;
    }

    if (templateId === "new") {
      return { template: null, isNew: true, accessScope };
    }

    const response = await getEDMTemplate(templateId, {
      Cookie: request.headers.get("Cookie") ?? "",
    });

    return {
      template: response.success ? response.data : null,
      isNew: false,
      accessScope,
      error: response.success ? undefined : response.message,
    };
  },
);

const EDMEditorPage: React.FC<Route.ComponentProps> = ({ loaderData }) => {
  const { template, isNew, error, accessScope } = loaderData as unknown as {
    template: EDMTemplate | null;
    isNew: boolean;
    accessScope: AccessScope;
    error?: string;
  };

  return (
    <EDMEditorClientPage
      initialTemplate={template}
      isNew={isNew}
      initialError={error}
      accessScope={accessScope}
    />
  );
};

export default EDMEditorPage;