KpiCard

import * as React from "react";
import { cn } from "@/lib/ledger/cn";
import type { MoneyValue, PercentChange, Polarity } from "@/lib/ledger/money.types";
import { Card } from "@/components/ledger/card";
import { Delta } from "@/components/ledger/delta";
import { Figure } from "@/components/ledger/figure";
import { Sparkline } from "@/components/ledger/sparkline";

export interface KpiCardProps extends React.ComponentPropsWithoutRef<"div"> {
  /** Always shown. Never a bare "+5.3%". */
  basis: string;
  data?: number[];
  delta?: MoneyValue | null;
  footnote?: string;
  label: string;
  percent?: PercentChange;
  /** Required, no default. Forcing the decision is the point. */
  polarity: Polarity;
  value: MoneyValue | null;
}

/**
 * The dashboard atom. The display family is forbidden here — these figures
 * align across a `KpiRow`, and only the figure face holds a column.
 *
 * Baselines align across the row via `auto-rows-fr` plus a fixed label row,
 * or two cards with different label lengths put their figures at different
 * heights — the most visible alignment failure on any dashboard.
 */
export const KpiCard = React.forwardRef<HTMLDivElement, KpiCardProps>(
  ({ className, label, value, delta, percent, polarity, basis, data, footnote, ...props }, ref) => (
    <Card className={cn("flex h-full flex-col", className)} ref={ref} {...props}>
      <span className="line-clamp-2 min-h-8 text-label font-medium text-text-secondary">{label}</span>
      <div className="mt-2">
        {/* family is not offered: the parent forces Inter. */}
        <Figure size="lg" value={value} />
      </div>
      {/* The basis gets its own line rather than trailing the delta. Inline, it
          wrapped on some cards in a row and not others, which put the sparklines
          at different heights — the alignment failure this component exists to
          avoid. On its own line it costs one row on every card equally. */}
      <div className="mt-2">
        <Delta percent={percent} polarity={polarity} size="xs" value={delta ?? null} />
        <p className="mt-0.5 truncate text-caption text-text-tertiary">{basis}</p>
      </div>
      {data ? (
        <div className="mt-auto pt-4">
          <Sparkline data={data} height={24} polarity={polarity} />
        </div>
      ) : null}
      {footnote ? <p className="mt-2 text-caption text-text-tertiary">{footnote}</p> : null}
    </Card>
  ),
);
KpiCard.displayName = "KpiCard";

export interface KpiRowProps extends React.ComponentPropsWithoutRef<"div"> {
  columns?: 2 | 3 | 4;
}

/** 2–4 cards on a shared figure baseline. Equal-height rows, one line of CSS. */
export const KpiRow = React.forwardRef<HTMLDivElement, KpiRowProps>(
  ({ className, columns = 4, ...props }, ref) => (
    <div
      className={cn(
        "grid auto-rows-fr gap-4",
        columns === 2 && "grid-cols-1 sm:grid-cols-2",
        columns === 3 && "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
        columns === 4 && "grid-cols-1 sm:grid-cols-2 xl:grid-cols-4",
        className,
      )}
      ref={ref}
      {...props}
    />
  ),
);
KpiRow.displayName = "KpiRow";

export interface StatCardProps extends React.ComponentPropsWithoutRef<"div"> {
  label: string;
  value: MoneyValue | null;
}

/** The minimal unit: label + value, 16px inset. No delta, no media. */
export const StatCard = React.forwardRef<HTMLDivElement, StatCardProps>(
  ({ className, label, value, ...props }, ref) => (
    <Card className={className} inset="compact" ref={ref} {...props}>
      <span className="block truncate text-caption text-text-secondary">{label}</span>
      <Figure className="mt-1" size="md" value={value} />
    </Card>
  ),
);
StatCard.displayName = "StatCard";