"use client";

import Link from "next/link";

import { cn } from "@/lib/utils";
import { customerUrl } from "@/lib/tenant";
import { useReportBankMode } from "@/app/customer/_lib/use-report-bank-mode";
import type { ReportBankFilterMode } from "@/app/customer/_lib/report-bank-mode-events";

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

type ReportBankModeHeaderBadgeProps = {
  tenant: string;
  className?: string;
};

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

export function ReportBankModeHeaderBadge({ tenant, className }: ReportBankModeHeaderBadgeProps) {
  const { mode, loading } = useReportBankMode(tenant);

  if (loading || !mode) return null;

  return (
    <Link
      href={customerUrl(tenant, "/settings?section=report-banks")}
      title="Consolidated select bank mode — open Report Bank Settings"
      className={cn(
        "hidden h-8 items-center rounded-lg border border-border bg-background px-2.5 text-xs font-medium tracking-wide text-muted-foreground transition-colors hover:bg-muted hover:text-foreground sm:inline-flex",
        className,
      )}
    >
      {MODE_LABEL[mode]}
    </Link>
  );
}