"use client";

import { CUSTOMER_ROUTE_KEYS } from "@/config/customer-route-keys";
import { sessionAllowsRouteKeys } from "@/app/customer/_lib/customer-route-guard";
import type { TenantDefaultLayout } from "@/app/customer/_lib/default-layout";
import { HeaderPreferenceBadge } from "@/app/customer/_components/header-preference-badge";
import { useDefaultLayout } from "@/app/customer/_lib/use-default-layout";

type DefaultLayoutHeaderBadgeProps = {
  tenant: string;
  allowedRoutes?: readonly string[];
  className?: string;
  layout?: TenantDefaultLayout | null;
  loading?: boolean;
};

const LAYOUT_LABEL: Record<TenantDefaultLayout, string> = {
  default: "Layout: Default",
  macro: "Layout: Macro",
  bridge: "Layout: Bridge",
};

export function DefaultLayoutHeaderBadge({
  tenant,
  allowedRoutes,
  className,
  layout: layoutProp,
  loading: loadingProp,
}: DefaultLayoutHeaderBadgeProps) {
  const canUseLayout = sessionAllowsRouteKeys(allowedRoutes ?? [], [
    CUSTOMER_ROUTE_KEYS.userLayout,
  ]);
  const standalone = useDefaultLayout(canUseLayout && layoutProp === undefined ? tenant : "");
  const layout = layoutProp !== undefined ? (layoutProp ?? "default") : standalone.layout;
  const loading = loadingProp !== undefined ? loadingProp : standalone.loading;

  if (!canUseLayout || loading) return null;

  return (
    <HeaderPreferenceBadge
      tenant={tenant}
      hrefPath="/settings?section=default-layout"
      title="Default layout — open Default layout settings"
      className={className}
    >
      {LAYOUT_LABEL[layout]}
    </HeaderPreferenceBadge>
  );
}