BalanceCard

"use client";

import * as React from "react";
import { useValueFlash } from "@/hooks/ledger/use-live-value";
import { cn } from "@/lib/ledger/cn";
import { isNegative } from "@/lib/ledger/format-money";
import type { MoneyValue, PercentChange, Polarity } from "@/lib/ledger/money.types";
import { AsOf } from "@/components/ledger/as-of";
import { Card } from "@/components/ledger/card";
import { Delta } from "@/components/ledger/delta";
import { EntityMark } from "@/components/ledger/entity-mark";
import { Figure } from "@/components/ledger/figure";
import { Sparkline } from "@/components/ledger/sparkline";
import { StaleIndicator } from "@/components/ledger/stale-indicator";
import { StatusPill } from "@/components/ledger/status-pill";

export interface BalanceCardProps extends React.ComponentPropsWithoutRef<"div"> {
  actions?: React.ReactNode;
  asOf?: Date;
  /**
   * A bank balance has two values and they differ. `available` is the figure;
   * `current` is a secondary line, shown only when they diverge. Conflating
   * them is the most consequential copy error in consumer banking UI.
   */
  available: MoneyValue | null;
  basis?: string;
  current?: MoneyValue | null;
  data?: number[];
  delta?: MoneyValue | null;
  eyebrow: string;
  institution?: string;
  institutionSrc?: string;
  live?: boolean;
  percent?: PercentChange;
  polarity?: Polarity;
  redacted?: boolean;
  stale?: { lastSynced: Date; onRetry?: () => void };
  timeZone?: string;
}

/**
 * The hero. One trusted number — the component a user opens the product
 * to see.
 *
 * 3 sizes, 2 weights: eyebrow (label/500), figure (hero/500), delta
 * (caption/400). The as-of and any secondary line reuse caption/400, which
 * is a fourth slot at the same rank rather than a fourth rank.
 */
export const BalanceCard = React.forwardRef<HTMLDivElement, BalanceCardProps>(
  (
    {
      className,
      eyebrow,
      available,
      current,
      delta,
      percent,
      polarity = "standard",
      basis,
      asOf,
      timeZone,
      data,
      institution,
      institutionSrc,
      redacted = false,
      stale,
      live = false,
      actions,
      ...props
    },
    ref,
  ) => {
    const amount = available
      ? typeof available.amount === "bigint"
        ? Number(available.amount)
        : available.amount
      : null;
    const { flash, key } = useValueFlash(live ? amount : undefined);
    const overdrawn = available != null && isNegative(available);

    const diverges =
      current != null && available != null && Number(current.amount) !== Number(available.amount);

    return (
      <Card
        className={cn("min-w-[280px] overflow-hidden", className)}
        ref={ref}
        stale={Boolean(stale)}
        {...props}
      >
        {/* The eyebrow row carries the account's *state*. An overdrawn pill is a
            fact about the account, not about the change, and putting it down in
            the delta row was what made that row read as a run-on sentence. */}
        <div className="flex items-start justify-between gap-3">
          <span className="flex min-w-0 items-center gap-2">
            <span className="truncate text-label font-medium text-text-secondary">{eyebrow}</span>
            {overdrawn ? <StatusPill entity="Account" status="overdue" /> : null}
          </span>
          {institution ? (
            <EntityMark category="bank" name={institution} size={24} src={institutionSrc} />
          ) : null}
        </div>

        <div
          aria-live={live ? "polite" : undefined}
          className={cn(
            "mt-2 -mx-1 rounded-xs px-1",
            flash === "positive" && "ledger-flash-positive",
            flash === "negative" && "ledger-flash-negative",
          )}
          key={key}
        >
          <Figure colorBySign={overdrawn} redacted={redacted} size="hero" value={available} />
        </div>

        {diverges ? (
          <p className="mt-1 text-caption text-text-secondary">
            Current <span className="numeric">{formatSecondary(current)}</span>
          </p>
        ) : null}

        {/* Change on the left, freshness on the right — two facts at opposite
            ends rather than four clauses in a row. The comparison basis rides
            with the delta as a tooltip, because it is a restatement of a date
            the delta already implies, not a fact the reader has to be told. */}
        <div className="mt-2 flex flex-wrap items-baseline justify-between gap-x-3 gap-y-1">
          {delta !== undefined ? (
            <Delta basisTooltip={basis} percent={percent} polarity={polarity} size="xs" value={delta} />
          ) : (
            <span />
          )}
          {asOf ? <AsOf className="shrink-0" compact date={asOf} timeZone={timeZone} /> : null}
        </div>

        {stale ? (
          <div className="mt-3">
            <StaleIndicator lastSynced={stale.lastSynced} onRetry={stale.onRetry} />
          </div>
        ) : null}

        {actions ? <div className="mt-4 flex gap-2">{actions}</div> : null}

        {data ? (
          // Full-bleed to three edges.
          <div className="-mx-6 -mb-6 mt-4 aspect-[4/1] overflow-hidden">
            <Sparkline className="h-full" data={data} height={64} polarity={polarity} showEndpoint={false} />
          </div>
        ) : null}
      </Card>
    );
  },
);
BalanceCard.displayName = "BalanceCard";

function formatSecondary(value: MoneyValue | null | undefined) {
  if (!value) return "n/a";
  return new Intl.NumberFormat("en-US", {
    currency: value.currency,
    currencyDisplay: "narrowSymbol",
    currencySign: "accounting",
    style: "currency",
  }).format(Number(value.amount) / 10 ** (value.scale ?? 2));
}