AnomalyCard

"use client";

import * as React from "react";
import { cn } from "@/lib/ledger/cn";
import type { MoneyValue, Polarity } from "@/lib/ledger/money.types";
import { Button } from "@/components/ledger/button";
import { Card } from "@/components/ledger/card";
import { Delta } from "@/components/ledger/delta";
import { ExclamationTriangleIcon } from "@/components/ledger/icons";
import { Money } from "@/components/ledger/money";
import { Tooltip } from "@/components/ledger/tooltip";

export interface AnomalyCardProps extends React.ComponentPropsWithoutRef<"div"> {
  baseline: MoneyValue;
  baselineLabel: string;
  delta: MoneyValue;
  explanation: string;
  /** The comparison that triggered the flag. An anomaly without its baseline is noise. */
  observed: MoneyValue;
  onApprove?: () => void;
  onCreateRule?: () => void;
  onFlag?: () => void;
  polarity?: Polarity;
  title: string;
}

export const AnomalyCard = React.forwardRef<HTMLDivElement, AnomalyCardProps>(
  (
    {
      className,
      title,
      observed,
      baseline,
      baselineLabel,
      delta,
      polarity = "inverted",
      explanation,
      onApprove,
      onFlag,
      onCreateRule,
      ...props
    },
    ref,
  ) => (
    <Card className={cn("flex flex-col gap-4", className)} ref={ref} {...props}>
      <div className="flex items-start gap-3">
        <div className="grid size-8 shrink-0 place-items-center rounded-sm bg-warning-subtle">
          <ExclamationTriangleIcon aria-hidden="true" className="size-4 text-warning" />
        </div>
        <div className="min-w-0">
          <p className="text-body font-medium">{title}</p>
          {/* The explanation is the card's substance, so it stays on the card —
              but capped at two lines. A five-line paragraph pushes the figures
              it exists to explain below the fold of a dashboard tile. */}
          <Tooltip content={explanation} display="block">
            <p className="mt-1 line-clamp-2 text-caption text-text-secondary">{explanation}</p>
          </Tooltip>
        </div>
      </div>

      <div className="grid grid-cols-2 gap-4 rounded-md bg-surface-sunken p-3">
        <div>
          <span className="block text-caption text-text-secondary">This period</span>
          <Money className="mt-0.5" size="md" value={observed} />
        </div>
        <div>
          <span className="block text-caption text-text-secondary">{baselineLabel}</span>
          <Money className="mt-0.5" size="md" tone="secondary" value={baseline} />
        </div>
        <div className="col-span-2">
          {/* The baseline is the column header two inches away; repeating it
              inline is the third mention. It rides on hover instead. */}
          <Delta basisTooltip={`vs. ${baselineLabel.toLowerCase()}`} polarity={polarity} value={delta} />
        </div>
      </div>

      <div className="flex flex-wrap gap-2">
        <Button onClick={onApprove} size="sm" variant="primary">
          Approve
        </Button>
        <Button onClick={onFlag} size="sm" variant="secondary">
          Flag for review
        </Button>
        <Button onClick={onCreateRule} size="sm" variant="ghost">
          Create a rule
        </Button>
      </div>
    </Card>
  ),
);
AnomalyCard.displayName = "AnomalyCard";