InvoiceCard

import * as React from "react";
import { cn } from "@/lib/ledger/cn";
import { daysBetween, formatDate } from "@/lib/ledger/fiscal-period";
import type { MoneyValue } from "@/lib/ledger/money.types";
import { Card } from "@/components/ledger/card";
import { Money } from "@/components/ledger/money";
import { Reference } from "@/components/ledger/reference";
import { Rule } from "@/components/ledger/rule";
import { StatusPill } from "@/components/ledger/status-pill";

export type AgingBucket = "current" | "1-30" | "31-60" | "61-90" | "90+";

export function bucketFor(dueDate: Date, today: Date): AgingBucket {
  const overdue = daysBetween(dueDate, today);
  if (overdue <= 0) return "current";
  if (overdue <= 30) return "1-30";
  if (overdue <= 60) return "31-60";
  if (overdue <= 90) return "61-90";
  return "90+";
}

export interface InvoiceCardProps extends React.ComponentPropsWithoutRef<"div"> {
  customer: string;
  dueDate: Date;
  number: string;
  outstanding: MoneyValue;
  paid?: MoneyValue;
  today?: Date;
  total: MoneyValue;
}

/** Overdue is `--negative` with the day count, never colour alone. */
export const InvoiceCard = React.forwardRef<HTMLDivElement, InvoiceCardProps>(
  ({ className, number, customer, total, paid, outstanding, dueDate, today = new Date(), ...props }, ref) => {
    const overdueDays = daysBetween(dueDate, today);
    const bucket = bucketFor(dueDate, today);
    const partial = paid != null && Number(paid.amount) > 0;

    return (
      <Card className={cn("flex flex-col gap-3", className)} ref={ref} {...props}>
        <div className="flex items-start justify-between gap-3">
          <div className="min-w-0">
            <p className="truncate text-body font-medium">{customer}</p>
            <Reference truncate={false} value={number} />
          </div>
          <StatusPill entity="Invoice" status={bucket === "current" ? "pending" : "overdue"} />
        </div>

        <div className="space-y-1">
          <Row label="Invoice total" value={total} />
          {partial ? <Row label="Paid" tone="secondary" value={paid} /> : null}
        </div>

        <div>
          <Rule className="ml-auto w-[45%]" variant="subtotal" />
          <div className="flex items-baseline justify-between pt-1">
            <span className="text-label font-medium">Outstanding</span>
            <Money accounting size="md" value={outstanding} />
          </div>
        </div>

        <p className={cn("text-caption", bucket === "current" ? "text-text-secondary" : "text-negative")}>
          {bucket === "current"
            ? `Due ${formatDate(dueDate)}`
            : `${overdueDays} days overdue · due ${formatDate(dueDate)}`}
        </p>
      </Card>
    );
  },
);
InvoiceCard.displayName = "InvoiceCard";

function Row({
  label,
  value,
  tone = "primary",
}: {
  label: string;
  value: MoneyValue;
  tone?: "primary" | "secondary";
}) {
  return (
    <div className="flex items-baseline justify-between gap-4">
      <span className="text-body text-text-secondary">{label}</span>
      <Money accounting tone={tone} value={value} />
    </div>
  );
}