DuplicateBillAlert

"use client";

import * as React from "react";
import { cn } from "@/lib/ledger/cn";
import { formatDate } from "@/lib/ledger/fiscal-period";
import type { MoneyValue } from "@/lib/ledger/money.types";
import { Button } from "@/components/ledger/button";
import { DocumentDuplicateIcon, ExclamationTriangleIcon } from "@/components/ledger/icons";
import { Money } from "@/components/ledger/money";

export type BillFingerprint = {
  id: string;
  vendor: string;
  vendorInvoiceNumber: string;
  invoiceDate: Date;
  amount: MoneyValue;
  postedAt?: Date;
};

export type DuplicateMatch = {
  existing: BillFingerprint;
  /** Primary key: vendor + their invoice number. Secondary: fuzzy. */
  kind: "exact-invoice-number" | "fuzzy-amount-date" | "duplicate-vendor";
  detail: string;
};

export interface DuplicateBillAlertProps {
  candidate: BillFingerprint;
  className?: string;
  matches: DuplicateMatch[];
  onCancel?: () => void;
  onProceedAnyway?: (reason: string) => void;
}

/**
 * **Duplicate payment is the single most common AP loss.**
 *
 * Runs before save, and it is **blocking** — the suspected duplicate is
 * shown side by side with the new entry. Duplicate *vendors* are detected
 * too, because that is how duplicate payments survive duplicate-invoice
 * checks.
 */
export function DuplicateBillAlert({
  candidate,
  matches,
  onProceedAnyway,
  onCancel,
  className,
}: DuplicateBillAlertProps) {
  const [reason, setReason] = React.useState("");
  if (matches.length === 0) return null;

  return (
    <div className={cn("rounded-xl border-2 border-negative bg-surface p-6", className)} role="alert">
      <p className="flex items-center gap-2 text-title-sm font-medium text-negative">
        <ExclamationTriangleIcon aria-hidden="true" className="size-5 shrink-0" />
        This looks like a duplicate. Saving is blocked.
      </p>

      {matches.map((match) => (
        <div className="mt-4" key={match.existing.id}>
          <p className="flex items-center gap-1.5 text-caption text-text-secondary">
            <DocumentDuplicateIcon aria-hidden="true" className="size-3.5" />
            {match.kind === "exact-invoice-number"
              ? "Same vendor and vendor invoice number"
              : match.kind === "fuzzy-amount-date"
                ? "Same vendor and amount, within five days"
                : "Two vendor records look like the same vendor"}{" "}
            — {match.detail}
          </p>

          <div className="mt-2 grid gap-3 sm:grid-cols-2">
            <Side bill={candidate} title="New entry" tone="new" />
            <Side bill={match.existing} title="Already in the ledger" tone="existing" />
          </div>
        </div>
      ))}

      <label className="mt-4 block">
        <span className="mb-1 block text-label font-medium text-text-secondary">
          If this genuinely is not a duplicate, say why
        </span>
        <input
          className="h-10 w-full rounded-sm border border-border bg-surface px-3 text-body outline-none focus-visible:border-accent"
          onChange={(e) => setReason(e.target.value)}
          placeholder="e.g. vendor reissued the invoice with a new number after a correction"
          value={reason}
        />
      </label>

      <div className="mt-3 flex flex-wrap gap-2">
        <Button onClick={onCancel} variant="secondary">
          Cancel this bill
        </Button>
        <Button
          disabled={reason.trim().length < 10}
          onClick={() => onProceedAnyway?.(reason)}
          variant="destructive"
        >
          Save anyway — recorded with the reason
        </Button>
      </div>
    </div>
  );
}

function Side({ title, bill, tone }: { title: string; bill: BillFingerprint; tone: "new" | "existing" }) {
  return (
    <div
      className={cn(
        "rounded-md border p-3",
        tone === "new" ? "border-accent bg-accent-subtle" : "border-border bg-surface-sunken",
      )}
    >
      <p className="text-caption font-medium text-text-secondary">{title}</p>
      <p className="mt-1 text-body font-medium">{bill.vendor}</p>
      <p className="reference-numeric text-caption text-text-secondary">{bill.vendorInvoiceNumber}</p>
      <p className="numeric text-caption text-text-secondary">
        {formatDate(bill.invoiceDate)}
        {bill.postedAt ? ` · posted ${formatDate(bill.postedAt)}` : ""}
      </p>
      <Money className="mt-1" size="md" value={bill.amount} />
    </div>
  );
}