Delta

import * as React from "react";
import { cn } from "@/lib/ledger/cn";
import { isZero } from "@/lib/ledger/format-money";
import type { MoneyValue, PercentChange, Polarity } from "@/lib/ledger/money.types";
import { Money } from "@/components/ledger/money";
import { Percent } from "@/components/ledger/percent";
import { Tooltip } from "@/components/ledger/tooltip";

export interface DeltaProps extends Omit<React.ComponentPropsWithoutRef<"span">, "children"> {
  /** Never omit the comparison basis. A bare "+5.3%" answers nothing. */
  basis?: string;
  /**
   * The basis, carried on hover instead of inline. For dense surfaces — a card
   * meta row, a KPI tile — where the visible basis is what turns a two-item
   * row into a wrapping sentence. Ignored when `basis` is also given, because
   * saying it twice is worse than either.
   */
  basisTooltip?: string;
  percent?: PercentChange;
  /** Percent-only delta, for metrics with no monetary magnitude. */
  percentOnly?: boolean;
  /** Required in practice: up is not assumed good. */
  polarity?: Polarity;
  showArrow?: boolean;
  size?: "xs" | "sm" | "md";
  value: MoneyValue | null;
}

/**
 * A signed change, never coloured without a redundant cue.
 *
 * The sign glyph slot is reserved so a column of deltas aligns even when
 * some are unchanged, and the arrow is a second non-chromatic signal so
 * the whole thing survives greyscale.
 */
export const Delta = React.forwardRef<HTMLSpanElement, DeltaProps>(
  (
    {
      className,
      value,
      percent,
      polarity = "standard",
      showArrow = true,
      basis,
      basisTooltip,
      size = "sm",
      percentOnly = false,
      ...props
    },
    ref,
  ) => {
    const magnitude = percentOnly ? (percent?.value ?? 0) : numberOf(value);
    const unchanged = value == null ? percent == null || percent.value === 0 : isZero(value);

    const hint = basis ? undefined : basisTooltip;

    if (unchanged) {
      return (
        <Tooltip content={hint}>
          <span
            className={cn("numeric relative inline-flex items-baseline gap-1", sizeClass(size), className)}
            ref={ref}
            style={{ color: "var(--neutral-value)" }}
            {...props}
          >
            <span aria-hidden="true">—</span>
            <span className="sr-only select-none">{hint ? `unchanged, ${hint}` : "unchanged"}</span>
            {basis ? <BasisText>{basis}</BasisText> : null}
          </span>
        </Tooltip>
      );
    }

    const up = magnitude > 0;
    const toneClass =
      polarity === "neutral"
        ? "text-text-secondary"
        : (polarity === "standard") === up
          ? "text-positive"
          : "text-negative";

    return (
      <Tooltip content={hint}>
        <span
          aria-description={hint}
          className={cn(
            "numeric inline-flex flex-wrap items-baseline gap-1",
            sizeClass(size),
            toneClass,
            className,
          )}
          ref={ref}
          {...props}
        >
          {/* The signed run stays one unbreakable unit; only a trailing basis is
            allowed to fall to the next line. Previously `nowrap` sat on the
            whole span, so a basis clause forced the entire delta to overflow. */}
          <span className="inline-flex items-baseline gap-1 whitespace-nowrap">
            {showArrow ? (
              <span aria-hidden="true" className="text-[0.85em] leading-none">
                {up ? "↑" : "↓"}
              </span>
            ) : null}

            {percentOnly ? null : (
              <Money
                className="font-inherit"
                size={size === "md" ? "md" : size === "sm" ? "sm" : "xs"}
                tone="inherit"
                value={value}
              />
            )}

            {percent ? (
              <span className={percentOnly ? undefined : "text-[0.95em]"}>
                {percentOnly ? null : <span aria-hidden="true">(</span>}
                <Percent className="text-inherit" size={size === "md" ? "md" : "xs"} value={percent} />
                {percentOnly ? null : <span aria-hidden="true">)</span>}
              </span>
            ) : null}
          </span>

          {basis ? <BasisText>{basis}</BasisText> : null}
        </span>
      </Tooltip>
    );
  },
);
Delta.displayName = "Delta";

function BasisText({ children }: { children: React.ReactNode }) {
  return <span className="font-normal text-caption text-text-tertiary">{children}</span>;
}

function sizeClass(size: "xs" | "sm" | "md") {
  return size === "md" ? "text-figure-md font-medium" : size === "sm" ? "text-figure-sm" : "text-figure-xs";
}

function numberOf(value: MoneyValue | null): number {
  if (!value) return 0;
  return typeof value.amount === "bigint" ? Number(value.amount) : value.amount;
}