MetricDefinition

import * as React from "react";
import { cn } from "@/lib/ledger/cn";
import { InfoTip } from "@/components/ledger/info-tip";
import { Rule } from "@/components/ledger/rule";

export interface MetricDefinitionProps extends React.ComponentPropsWithoutRef<"div"> {
  cohort: string;
  computedUnderOlderDefinition?: boolean;
  /** Definitions are versioned; a value computed under an older one says so. */
  definitionVersion?: string;
  formula: string;
  name: string;
  /**
   * The caveat. It is the longest thing on the card and the least often
   * needed, so it rides the ⓘ on the metric name rather than taking three
   * lines of the definition list.
   */
  note?: string;
  period: string;
  source: string;
  /** The same formula with the actual input values substituted. */
  substituted: string;
  /** Rendered as given — the caller owns formatting and rounding. */
  value: string;
}

/**
 * **Every metric card requires one.** There is no variant without a
 * definition.
 *
 * "ARR" means four different things at four companies. This component is why
 * the number in this product is not one of them.
 */
export const MetricDefinition = React.forwardRef<HTMLDivElement, MetricDefinitionProps>(
  (
    {
      className,
      name,
      value,
      formula,
      substituted,
      cohort,
      period,
      source,
      note,
      definitionVersion,
      computedUnderOlderDefinition = false,
      ...props
    },
    ref,
  ) => (
    <div className={cn("rounded-xl border border-border bg-surface p-6", className)} ref={ref} {...props}>
      <div className="flex items-baseline justify-between gap-4">
        <h3 className="text-title-sm font-medium">
          {name}
          {note ? (
            <InfoTip about={`Caveat on ${name}`} className="text-left" triggerClassName="ml-1.5 align-[-1px]">
              {note}
            </InfoTip>
          ) : null}
        </h3>
        <span className="numeric text-figure-lg font-medium">{value}</span>
      </div>

      <Rule className="mt-3" variant="subtotal" />

      <div className="mt-3 space-y-0.5">
        <p className="numeric text-caption text-text-secondary">{formula}</p>
        <p className="numeric text-caption text-text-primary">{substituted}</p>
      </div>

      <dl className="mt-4 space-y-1">
        <Row label="Cohort">{cohort}</Row>
        <Row label="Period">{period}</Row>
        <Row label="Source">{source}</Row>
        {definitionVersion ? <Row label="Definition">{definitionVersion}</Row> : null}
      </dl>

      {computedUnderOlderDefinition ? (
        /* The warning is the fact; why it matters is the rationale. One belongs
           in the strip, the other one press away. */
        <p className="mt-3 flex items-center gap-1.5 rounded-sm bg-warning-subtle px-3 py-2 text-caption text-text-primary">
          Computed under an earlier definition
          <InfoTip about="Why an earlier definition matters">
            An unannounced definition change looks like a business change. Comparing this figure with one
            computed under the current definition compares two different metrics.
          </InfoTip>
        </p>
      ) : null}
    </div>
  ),
);
MetricDefinition.displayName = "MetricDefinition";

function Row({ label, children }: { label: string; children: React.ReactNode }) {
  return (
    <div className="flex gap-3">
      <dt className="w-20 shrink-0 text-caption text-text-tertiary">{label}</dt>
      <dd className="flex-1 text-caption text-text-secondary">{children}</dd>
    </div>
  );
}