"use client";

import { Globe } from "lucide-react";

import { PortalPermissionTree } from "@/components/admins/portal/portal-permission-tree";
import { ErrorBanner } from "@/components/shared/error-banner";
import type { PortalRouteCatalogApp } from "@/app/dashboard/admins/portal/_lib/portal-access-server-api";

type PortalCatalogPageClientProps = {
  apps: PortalRouteCatalogApp[];
  initialErrorMessage: string | null;
};

export function PortalCatalogPageClient({
  apps,
  initialErrorMessage,
}: PortalCatalogPageClientProps) {
  if (initialErrorMessage) {
    return <ErrorBanner message={initialErrorMessage} />;
  }

  const allRoutes = apps.flatMap((app) =>
    app.groups.flatMap((group) => group.routes.map((route) => route.route)),
  );

  return (
    <div className="space-y-4">
      <p className="text-muted-foreground text-sm">
        Global portal route registry ({allRoutes.length} routes). CRUD mutations are exposed via dashboard BFF routes for operators with <span className="font-mono">portal.catalog</span>.
      </p>
      <PortalPermissionTree
        apps={apps}
        selectedRoutes={allRoutes}
        onSelectedRoutesChange={() => undefined}
        readOnly
      />
      <p className="flex items-center gap-2 text-muted-foreground text-xs">
        <Globe className="size-3.5" />
        Route catalog changes should be synced with CUSTOMER_ROUTE_KEYS via CI drift checks.
      </p>
    </div>
  );
}