VarianceCell

import { cn } from "@/lib/ledger/cn";
import { safeRelativeChange } from "@/lib/ledger/format-money";
import type { 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 VarianceCellProps {
  currency: string;
  current: number | null;
  hidden?: boolean;
  /**
   * Both thresholds must be exceeded for a variance to flag. A 200% swing on
   * $12 isn't news, and $40,000 on $8M isn't either.
   */
  materiality?: { absolute: number; relative: number };
  polarity?: Polarity;
  prior: number | null;
}

/**
 * Absolute change and percent change together — either alone misleads.
 * Division by zero renders `n/a`, never Infinity.
 */
export function VarianceCell({
  current,
  prior,
  currency,
  polarity = "standard",
  materiality,
  hidden = false,
}: VarianceCellProps) {
  if (hidden || current === null || prior === null) {
    return (
      <>
        <td className="px-3 py-3" />
        <td className="px-6 py-3" />
      </>
    );
  }

  const absolute = current - prior;
  const relative = safeRelativeChange(current, prior);
  const material =
    materiality != null &&
    Math.abs(absolute) >= materiality.absolute &&
    relative != null &&
    Math.abs(relative.value) >= materiality.relative;

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

  return (
    <>
      <td className={cn("px-3 py-3 text-right", tone)}>
        <span className="inline-flex items-baseline gap-1">
          {material ? (
            <Tooltip content="Exceeds both the absolute and relative materiality thresholds">
              <span aria-label="material variance" className="text-[0.85em] leading-none" role="img">
                ▸
              </span>
            </Tooltip>
          ) : null}
          <Money accounting tone="inherit" value={{ amount: absolute, currency }} />
        </span>
      </td>
      <td className={cn("px-6 py-3 text-right", tone)}>
        <Percent className="text-inherit" value={relative} />
      </td>
    </>
  );
}