"use client";

import type { ReportBankFilterMode } from "@/app/customer/_lib/report-bank-mode-events";
import { canAccessSettingsSection } from "@/app/customer/[tenant]/settings/_lib/settings-section-permissions";
import { HeaderPreferenceBadge } from "@/app/customer/_components/header-preference-badge";
import { useReportBankMode } from "@/app/customer/_lib/use-report-bank-mode";

export {
  REPORT_BANK_MODE_CHANGED_EVENT,
  dispatchReportBankModeChanged,
} from "@/app/customer/_lib/report-bank-mode-events";

type ReportBankModeHeaderBadgeProps = {
  tenant: string;
  allowedRoutes?: readonly string[];
  className?: string;
  mode?: ReportBankFilterMode | null;
  loading?: boolean;
};

const MODE_LABEL: Record<ReportBankFilterMode, string> = {
  parent_only: "Banks: Parent",
  children_only: "Banks: Child",
};

export function ReportBankModeHeaderBadge({
  tenant,
  allowedRoutes,
  className,
  mode: modeProp,
  loading: loadingProp,
}: ReportBankModeHeaderBadgeProps) {
  const canSee = canAccessSettingsSection("report-banks", allowedRoutes ?? []);
  const standalone = useReportBankMode(canSee && modeProp === undefined ? tenant : "");
  const mode = modeProp !== undefined ? modeProp : standalone.mode;
  const loading = loadingProp !== undefined ? loadingProp : standalone.loading;

  if (!canSee || loading || !mode) return null;

  return (
    <HeaderPreferenceBadge
      tenant={tenant}
      hrefPath="/settings?section=report-banks"
      title="Consolidated select bank mode — open Report Bank Settings"
      className={className}
    >
      {MODE_LABEL[mode]}
    </HeaderPreferenceBadge>
  );
}