"use client";

import type { ElementType, ReactElement, ReactNode } from "react";

import {
  adminMoneyDisplayClass,
  adminMoneyDisplayTitle,
  type AdminMoneyDisplaySize,
} from "@/lib/admin-money-display";
import { cn } from "@/lib/utils";

export type AdminMoneyDisplayProps = {
  children: ReactNode;
  /** 用于自适应字号与 hover 完整值；缺省时从 string children 推断 */
  value?: string | number | null;
  size?: AdminMoneyDisplaySize;
  emphasize?: boolean;
  className?: string;
  title?: string;
  as?: ElementType;
};

/** 卡片/摘要区金额：自适应字号 + 换行，禁止 truncate 裁切 */
export function AdminMoneyDisplay({
  children,
  value,
  size = "lg",
  emphasize = true,
  className,
  title,
  as: Component = "span",
}: AdminMoneyDisplayProps): ReactElement {
  const resolvedValue =
    value != null
      ? String(value)
      : typeof children === "string" || typeof children === "number"
        ? String(children)
        : "";
  const resolvedTitle = title ?? adminMoneyDisplayTitle(resolvedValue);

  return (
    <Component
      title={resolvedTitle}
      className={cn(
        resolvedValue
          ? adminMoneyDisplayClass(resolvedValue, { size, emphasize, className })
          : cn(
              "min-w-0 whitespace-normal break-words [overflow-wrap:anywhere] tabular-nums leading-tight tracking-tight",
              emphasize ? "font-semibold" : "font-medium",
              className,
            ),
      )}
    >
      {children}
    </Component>
  );
}