StatusPill

import * as React from "react";
import { cn } from "@/lib/ledger/cn";
import type { PaymentStatus } from "@/lib/ledger/money.types";
import {
  ArrowPathIcon,
  ArrowUturnLeftIcon,
  CheckIcon,
  ClockIcon,
  EllipsisHorizontalCircleIcon,
  ExclamationTriangleIcon,
  LinkIcon,
  NoSymbolIcon,
  PaperAirplaneIcon,
  TruckIcon,
  XMarkIcon,
} from "@/components/ledger/icons";

type Tone = "positive" | "negative" | "warning" | "neutral" | "accent";

const CONFIG: Record<
  PaymentStatus,
  { label: string; tone: Tone; icon: React.ComponentType<{ className?: string }> }
> = {
  cancelled: { icon: NoSymbolIcon, label: "Cancelled", tone: "neutral" },
  draft: { icon: EllipsisHorizontalCircleIcon, label: "Draft", tone: "neutral" },
  failed: { icon: XMarkIcon, label: "Failed", tone: "negative" },
  "in-transit": { icon: TruckIcon, label: "In transit", tone: "accent" },
  matched: { icon: CheckIcon, label: "Matched", tone: "positive" },
  "needs-review": { icon: ExclamationTriangleIcon, label: "Needs review", tone: "warning" },
  overdue: { icon: ExclamationTriangleIcon, label: "Overdue", tone: "negative" },
  // Pending is a state, not a load — a clock, never a spinner.
  pending: { icon: ClockIcon, label: "Pending", tone: "warning" },
  processing: { icon: ArrowPathIcon, label: "Processing", tone: "warning" },
  reconciled: { icon: LinkIcon, label: "Reconciled", tone: "positive" },
  returned: { icon: ArrowUturnLeftIcon, label: "Returned", tone: "negative" },
  scheduled: { icon: ClockIcon, label: "Scheduled", tone: "neutral" },
  sent: { icon: PaperAirplaneIcon, label: "Sent", tone: "accent" },
  settled: { icon: CheckIcon, label: "Settled", tone: "positive" },
};

const TONES: Record<Tone, string> = {
  accent: "bg-accent-subtle text-accent",
  negative: "bg-negative-subtle text-negative",
  neutral: "bg-surface-sunken text-text-secondary",
  // Tint, not fill. Saturated fills are reserved for the one primary action.
  positive: "bg-positive-subtle text-positive",
  warning: "bg-warning-subtle text-warning",
};

export interface StatusPillProps extends React.ComponentPropsWithoutRef<"span"> {
  /** The entity, so the accessible name reads "Payment pending". */
  entity?: string;
  size?: "sm" | "md";
  status: PaymentStatus;
}

/** Icon and text, always. An icon alone is not a status. */
export const StatusPill = React.forwardRef<HTMLSpanElement, StatusPillProps>(
  ({ className, status, entity, size = "sm", ...props }, ref) => {
    const config = CONFIG[status];
    const Icon = config.icon;
    return (
      <span
        className={cn(
          "relative inline-flex select-none items-center gap-1 rounded-sm font-medium",
          "transition-colors duration-2 ease-standard",
          size === "sm" ? "h-6 px-2 text-caption" : "h-8 px-3 text-label",
          TONES[config.tone],
          className,
        )}
        ref={ref}
        {...props}
      >
        <Icon aria-hidden="true" className={size === "sm" ? "size-3" : "size-3.5"} />
        <span aria-hidden="true">{config.label}</span>
        {/* Spoken text, not an aria-label: a label on a role-less span is
            prohibited ARIA. select-none keeps it out of a copied selection. */}
        <span className="sr-only select-none">
          {entity ? `${entity} ${config.label.toLowerCase()}` : config.label}
        </span>
      </span>
    );
  },
);
StatusPill.displayName = "StatusPill";

export const STATUS_LABELS = CONFIG;