"use client";

import Link from "next/link";

import { cn } from "@/lib/utils";
import { customerUrl } from "@/lib/tenant";
import { useAumCalcMode } from "@/app/customer/_lib/use-aum-calc-mode";

export { AUM_MODE_CHANGED_EVENT, dispatchAumModeChanged } from "@/app/customer/_lib/aum-mode-events";

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

export function AumModeHeaderBadge({ tenant, className }: AumModeHeaderBadgeProps) {
  const { mode, loading } = useAumCalcMode();

  if (loading || !mode) return null;

  const label = mode === "gross" ? "AUM: Gross" : "AUM: Net";
  const isNet = mode === "net";

  return (
    <Link
      href={customerUrl(tenant, "/settings")}
      title="AUM calculation mode — open Settings"
      className={cn(
        "hidden h-8 items-center rounded-lg border px-2.5 text-xs font-medium tracking-wide transition-colors sm:inline-flex",
        isNet
          ? "border-emerald-500/30 bg-emerald-500/10 text-emerald-700 hover:bg-emerald-500/15 dark:text-emerald-400"
          : "border-border bg-background text-muted-foreground hover:bg-muted hover:text-foreground",
        className,
      )}
    >
      {label}
    </Link>
  );
}