Money

import { cva, type VariantProps } from "class-variance-authority";
import * as React from "react";
import { cn } from "@/lib/ledger/cn";
import { formatMoneyParts, isNegative, isZero, moneyAriaLabel, rawMoney } from "@/lib/ledger/format-money";
import type { MoneyValue } from "@/lib/ledger/money.types";
import { Tooltip } from "@/components/ledger/tooltip";

/* Server-safe by design: a 400-row statement renders on the server. */

/* `relative` anchors the absolutely-positioned spoken label to the figure, so
   it can never widen a scroll container it sits in. */
const moneyVariants = cva("numeric relative inline-flex items-baseline whitespace-nowrap", {
  defaultVariants: { size: "sm", tone: "primary" },
  variants: {
    size: {
      hero: "text-figure-hero font-medium",
      lg: "text-figure-lg font-medium",
      md: "text-figure-md font-medium",
      sm: "text-figure-sm font-normal",
      xs: "text-figure-xs font-normal",
    },
    tone: {
      inherit: "text-inherit",
      negative: "text-negative",
      positive: "text-positive",
      primary: "text-text-primary",
      // Never --text-tertiary for a monetary value: money holds 7:1.
      secondary: "text-text-secondary",
    },
  },
});

export interface MoneyProps
  extends Omit<React.ComponentPropsWithoutRef<"span">, "children">,
    VariantProps<typeof moneyVariants> {
  /** Parentheses for negatives — statements and tables. */
  accounting?: boolean;
  /** A converted value is a derived value: renders "≈" and states its basis. */
  approximate?: { rate: number; asOf: Date; from: string };
  /** Colour the figure by sign. Off by default; the glyphs carry the sign. */
  colorBySign?: boolean;
  /** Drop the cents. Display surfaces only — never a table or a statement. */
  dropCents?: boolean;
  locale?: string;
  redacted?: boolean;
  /** The ISO code — required in a mixed-currency context. */
  showCode?: boolean;
  /** Subordinate the symbol. Default true. */
  showSymbol?: boolean;
  /** Em dash for a true zero — statements only. */
  statement?: boolean;
  value: MoneyValue | null | undefined;
}

/**
 * The core primitive. Every monetary value in the system renders through it.
 *
 * Five slots, four optional: [≈] [symbol] [integer] [.decimals] [code].
 * The paren column is reserved on both sides regardless of sign, so a
 * right-aligned column of mixed-sign values keeps its decimal alignment.
 */
export const Money = React.forwardRef<HTMLSpanElement, MoneyProps>(
  (
    {
      className,
      value,
      size,
      tone,
      accounting = false,
      statement = false,
      showSymbol = true,
      showCode = false,
      approximate,
      redacted = false,
      dropCents = false,
      colorBySign = false,
      locale,
      ...props
    },
    ref,
  ) => {
    // Five distinct renders. Never `value ?? 0`.
    if (value == null) {
      return (
        <span
          className={cn(moneyVariants({ size, tone: "secondary" }), "text-text-tertiary", className)}
          ref={ref}
          {...props}
        >
          <span aria-hidden="true">n/a</span>
          <Spoken>not available</Spoken>
        </span>
      );
    }

    if (redacted) {
      return (
        <span
          className={cn(moneyVariants({ size, tone }), "text-text-tertiary", className)}
          ref={ref}
          {...props}
        >
          <span aria-hidden="true">••••</span>
          <Spoken>hidden</Spoken>
        </span>
      );
    }

    if (statement && isZero(value)) {
      return (
        <span className={cn(moneyVariants({ size, tone }), className)} ref={ref} {...props}>
          <span aria-hidden="true">—</span>
          <Spoken>zero</Spoken>
          <ParenSlot />
        </span>
      );
    }

    const negative = isNegative(value);
    const parts = formatMoneyParts(value, { dropCents, locale, showSymbol });
    const useParens = accounting && negative;
    const largeFigure = size === "lg" || size === "hero";
    const resolvedTone =
      colorBySign && negative ? "negative" : colorBySign && !isZero(value) ? "positive" : tone;

    const label = moneyAriaLabel(value, { locale });
    const spoken = approximate ? `approximately ${label}` : label;

    const body = (
      <span
        className={cn(moneyVariants({ size, tone: resolvedTone }), className)}
        data-raw={rawMoney(value, locale)}
        ref={ref}
        {...props}
      >
        {approximate ? (
          // The figure face has no ≈; the text face does, at the same weight.
          <span aria-hidden="true" className="mr-1 font-sans text-text-tertiary">
            ≈
          </span>
        ) : null}

        {/* Opening paren slot — reserved on both signs so digits never shift. */}
        <span aria-hidden="true" className={useParens ? undefined : "invisible"}>
          (
        </span>

        {!useParens && negative ? (
          // U+2212, not a hyphen: it aligns with the plus and sits on the
          // lining figures once `case` is on.
          <span aria-hidden="true">−</span>
        ) : null}

        {parts.symbol ? (
          <span aria-hidden="true" className="mr-[var(--numeric-symbol-gap)] font-normal text-text-tertiary">
            {parts.symbol}
          </span>
        ) : null}

        <span aria-hidden="true">{parts.integer}</span>

        {parts.fraction ? (
          <span aria-hidden="true" className={largeFigure ? "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}

        <span aria-hidden="true" className={useParens ? undefined : "invisible"}>
          )
        </span>

        {showCode ? (
          <span aria-hidden="true" className="ml-1 text-caption text-text-tertiary">
            {value.currency}
          </span>
        ) : null}

        <Spoken>{spoken}</Spoken>
      </span>
    );

    // A converted value is a derived value. The basis — source currency, rate,
    // and the instant it was struck — is the tooltip's whole job here.
    if (!approximate) return body;
    return <Tooltip content={approximateTitle(value, approximate, locale)}>{body}</Tooltip>;
  },
);
Money.displayName = "Money";

/**
 * What a screen reader says in place of the glyphs, which are all
 * `aria-hidden`. Text rather than `aria-label`: a label on a role-less span is
 * prohibited ARIA and ignored by some readers. `select-none` keeps it out of a
 * copied selection, so a figure pasted into a spreadsheet is still the figure.
 */
function Spoken({ children }: { children: React.ReactNode }) {
  return <span className="sr-only select-none">{children}</span>;
}

/** Keeps a `—` or `n/a` on the same decimal grid as its neighbours. */
function ParenSlot() {
  return (
    <span aria-hidden="true" className="invisible">
      )
    </span>
  );
}

function approximateTitle(
  value: MoneyValue,
  approximate: NonNullable<MoneyProps["approximate"]>,
  locale?: string,
): string {
  void value;
  void locale;
  const stamp = new Intl.DateTimeFormat("en-GB", {
    day: "numeric",
    hour: "2-digit",
    minute: "2-digit",
    month: "short",
    timeZone: "UTC",
    year: "numeric",
  }).format(approximate.asOf);
  return `Converted from ${approximate.from} @ ${approximate.rate} · ${stamp} UTC`;
}