Metric value

import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"
import {
  compareMetric,
  formatDelta,
  formatMetric,
  type DeltaDirection,
  type FormatMetricOptions,
  type Metric,
  type Provenance,
} from "@/lib/metric"
import { ExplainNumber } from "@/components/ui/explain-number"
import {
  TREND_ICONS,
  TREND_LABELS,
  metricDeltaVariants,
  type MetricDeltaTrend,
} from "@/components/ui/metric-delta"

const metricValueVariants = cva("flex flex-col", {
  variants: {
    size: { sm: "gap-0.5", md: "gap-1", lg: "gap-1.5" },
  },
  defaultVariants: { size: "md" },
})

// The numeral register. Both the number and the meta row set their own size and
// their own tracking rather than inheriting one, so a MetricValue handed to
// StatCard's `value` slot — which is itself 30px on the numeral track — still
// writes its delta at 12px on normal tracking. Whatever tracking a preset gives
// the digits belongs to the digits and to nothing under them.
const metricNumberVariants = cva("type-numeral", {
  variants: {
    size: { sm: "text-xl", md: "text-3xl", lg: "text-4xl" },
  },
  defaultVariants: { size: "md" },
})

const metricMetaVariants = cva(
  "flex flex-wrap items-center gap-x-2 gap-y-1 font-sans font-normal tracking-normal",
  {
    variants: {
      size: { sm: "text-xs", md: "text-xs", lg: "text-sm" },
    },
    defaultVariants: { size: "md" },
  }
)

// The chip is MetricDelta's pill — same variant table, same arrows, same word
// before the number — because two independent copies of one chip in the
// registry drift apart quietly. Only the tone rule differs, and that is the
// point of this component: it comes from the Delta's `favorable`, never from
// the sign, so a fall in latency is good news and a fall in revenue is not.
const DELTA_TREND: Record<DeltaDirection, MetricDeltaTrend> = {
  up: "up",
  down: "down",
  flat: "neutral",
}

// MetricDelta has two densities to this component's three: sm and md both sit in
// a text-xs meta row, lg in a text-sm one.
const DELTA_SIZE = { sm: "sm", md: "sm", lg: "default" } as const

export type MetricValueSize = NonNullable<VariantProps<typeof metricValueVariants>["size"]>

export type MetricValueProps = Omit<React.ComponentProps<"div">, "children"> & {
  metric: Metric
  /** The same measure over the period before. A bare number is read in `metric`'s own kind. */
  previous?: Metric | number
  /** False for metrics where down is the win — churn, latency, cost. */
  positiveIsGood?: boolean
  /** What the change is measured against, e.g. "vs previous 30 days". */
  compareLabel?: React.ReactNode
  /**
   * What the number measures, e.g. "Signups". Not rendered — the card or row
   * around it already writes the label — but it names the explain button
   * ("Explain Signups"), so a page of them offers a page of distinct buttons
   * rather than four called "Explain this number".
   */
  label?: string
  /** The rows behind the number; renders the "Explain this number" button. */
  provenance?: Provenance
  size?: MetricValueSize
  /** Locale and compactness for the number itself. */
  format?: FormatMetricOptions
}

/**
 * A number that explains itself: formatted for its kind, with the change since
 * the previous period, what that change is measured against, and — when it
 * knows where it came from — a button that opens the rows behind it.
 */
function MetricValue({
  className,
  metric,
  previous,
  positiveIsGood = true,
  compareLabel,
  label,
  provenance,
  size = "md",
  format,
  ...props
}: MetricValueProps) {
  const formatted = formatMetric(metric, format)

  const before =
    previous === undefined
      ? undefined
      : typeof previous === "number"
        ? { ...metric, value: previous }
        : previous
  const delta = before ? compareMetric(metric, before, { positiveIsGood }) : undefined

  const tone = !delta || delta.favorable === null ? "neutral" : delta.favorable ? "good" : "bad"
  const trend = delta ? DELTA_TREND[delta.direction] : null
  const TrendIcon = trend ? TREND_ICONS[trend] : null

  const hasMeta = delta !== undefined || Boolean(compareLabel) || provenance !== undefined

  return (
    <div
      data-slot="metric-value"
      data-size={size}
      className={cn(metricValueVariants({ size }), className)}
      {...props}
    >
      <div data-slot="metric-value-number" className={metricNumberVariants({ size })}>
        {formatted}
      </div>

      {hasMeta ? (
        <div data-slot="metric-value-meta" className={metricMetaVariants({ size })}>
          {delta && trend && TrendIcon ? (
            <span
              data-slot="metric-value-delta"
              data-direction={delta.direction}
              data-tone={tone}
              // Through cn like MetricDelta's own root, so the variant table's
              // base icon size and its density override collapse the same way.
              className={cn(
                metricDeltaVariants({ tone, variant: "pill", size: DELTA_SIZE[size] })
              )}
            >
              <TrendIcon aria-hidden="true" />
              <span className="sr-only">{`${TREND_LABELS[trend]} `}</span>
              {formatDelta(delta, metric.kind, {
                locale: format?.locale,
                currency: metric.currency,
                unit: metric.unit,
                precision: metric.precision,
              })}
            </span>
          ) : null}

          {compareLabel ? (
            <span data-slot="metric-value-compare" className="text-muted-foreground">
              {compareLabel}
            </span>
          ) : null}

          {provenance ? (
            <ExplainNumber
              provenance={provenance}
              value={formatted}
              triggerLabel={label ? `Explain ${label}` : undefined}
              className="-my-1"
            />
          ) : null}
        </div>
      ) : null}
    </div>
  )
}

export { MetricValue, metricValueVariants }