Figure

import * as React from "react";
import { cn } from "@/lib/ledger/cn";
import { formatMoneyParts, moneyAriaLabel } from "@/lib/ledger/format-money";
import type { FigureSize, MoneyValue } from "@/lib/ledger/money.types";

export interface FigureProps extends Omit<React.ComponentPropsWithoutRef<"div">, "children"> {
  colorBySign?: boolean;
  /**
   * A figure may leave the figure face for Inter at display size only when it
   * never aligns with another figure. A parent that stacks figures (KpiRow, a
   * table) forces `"sans"` rather than trusting the caller.
   */
  family?: "sans" | "display";
  locale?: string;
  redacted?: boolean;
  size?: FigureSize;
  value: MoneyValue | null;
}

const STEPS: FigureSize[] = ["xs", "sm", "md", "lg", "hero"];

const CLASSES: Record<FigureSize, string> = {
  hero: "text-figure-hero",
  lg: "text-figure-lg",
  md: "text-figure-md",
  sm: "text-figure-sm",
  xs: "text-figure-xs",
};

/**
 * A number never truncates. A truncated figure is not degraded, it is wrong.
 *
 * The step-down is driven by character count so the value always lands on a
 * type-scale token, rather than `clamp()` landing it between two.
 */
export const Figure = React.forwardRef<HTMLDivElement, FigureProps>(
  (
    {
      className,
      value,
      size = "hero",
      family = "sans",
      redacted = false,
      colorBySign = false,
      locale,
      ...props
    },
    ref,
  ) => {
    if (value == null) {
      return (
        <div
          className={cn("numeric relative text-text-tertiary", CLASSES[size], className)}
          ref={ref}
          {...props}
        >
          <span aria-hidden="true">n/a</span>
          <span className="sr-only select-none">not available</span>
        </div>
      );
    }

    const parts = formatMoneyParts(value, { locale });
    const characters = parts.symbol.length + parts.integer.length + parts.fraction.length;

    // Step down one token per threshold crossed, never below `md`.
    const index = STEPS.indexOf(size);
    let resolved = size;
    if (size === "hero" && characters > 15) resolved = "md";
    else if (size === "hero" && characters > 11) resolved = "lg";
    else if (size === "lg" && characters > 14) resolved = "md";
    void index;

    const large = resolved === "hero" || resolved === "lg";
    const negative = parts.negative;

    return (
      <div
        className={cn(
          "numeric relative flex items-baseline font-medium leading-none",
          CLASSES[resolved],
          family === "display" && "font-display font-normal",
          colorBySign && negative ? "text-negative" : "text-text-primary",
          className,
        )}
        ref={ref}
        {...props}
      >
        {redacted ? (
          <span aria-hidden="true" className="text-text-tertiary">
            ••••••
          </span>
        ) : (
          <>
            {negative ? <span aria-hidden="true">−</span> : null}
            {parts.symbol ? (
              <span
                aria-hidden="true"
                className={cn(
                  "font-normal text-text-tertiary",
                  /* Display sets in Inter, which needs the air a mono cell
                     already carries. */
                  family === "display" ? "mr-[4px]" : "mr-[var(--numeric-symbol-gap)]",
                )}
              >
                {parts.symbol}
              </span>
            ) : null}
            <span aria-hidden="true">{parts.integer}</span>
            {parts.fraction ? (
              <span aria-hidden="true" className={large ? "text-text-tertiary" : undefined}>
                {parts.fraction}
              </span>
            ) : null}
            {parts.symbolSuffix ? (
              <span aria-hidden="true" className="ml-1 font-normal text-text-tertiary">
                {parts.symbolSuffix}
              </span>
            ) : null}
          </>
        )}
        {/* Spoken text, not an aria-label (prohibited on a role-less element).
            A redacted figure says so — it never reads the amount it hides. */}
        <span className="sr-only select-none">{redacted ? "hidden" : moneyAriaLabel(value, { locale })}</span>
      </div>
    );
  },
);
Figure.displayName = "Figure";