Invoice Table

"use client";

import { DropdownMenu } from "radix-ui";
import { MoreHorizontal } from "lucide-react";
import { cn } from "@/lib/utils";

export interface InvoiceTableRow {
  number: string;
  customer: string;
  amount: number;
  due: string;
  status: "paid" | "open" | "overdue" | "draft";
  /** Days past due (overdue only). */
  daysLate?: number;
}

export interface InvoiceTableProps {
  rows?: InvoiceTableRow[];
  onAction?: (action: "view" | "remind" | "duplicate" | "void", invoice: string) => void;
  da?: string;
  className?: string;
}

const DEFAULT_ROWS: InvoiceTableRow[] = [
  { number: "INV-2041", customer: "Northwind Traders", amount: 18400, due: "Oct 14", status: "open" },
  { number: "INV-2040", customer: "Lumen Health", amount: 6250, due: "Oct 02", status: "paid" },
  { number: "INV-2039", customer: "Parcel Logistics", amount: 42900, due: "Sep 18", status: "overdue", daysLate: 6 },
  { number: "INV-2038", customer: "Quanta Labs", amount: 27450, due: "Aug 29", status: "overdue", daysLate: 26 },
  { number: "INV-2037", customer: "Heliograph", amount: 950, due: "—", status: "draft" },
];

const STATUS = {
  paid: ["Paid", "bg-da-success/12 text-da-success"],
  open: ["Open", "bg-da-primary/10 text-da-primary"],
  overdue: ["Overdue", "bg-da-danger/10 text-da-danger"],
  draft: ["Draft", "bg-da-muted text-da-muted-fg"],
} as const;

/** Receivables table with status pills, days-late aging text, mono amounts, a totals footer and a per-row Radix dropdown (view, send reminder, duplicate, void). */
export function InvoiceTable({ rows = DEFAULT_ROWS, onAction, da = "neo-corporate", className }: InvoiceTableProps) {
  const fmt = (n: number) => n.toLocaleString("en-US", { style: "currency", currency: "USD" });
  const open = rows.filter((r) => r.status === "open" || r.status === "overdue").reduce((s, r) => s + r.amount, 0);
  const item = "flex cursor-default items-center rounded-da-sm px-2 py-1.5 text-sm outline-none data-highlighted:bg-da-muted";
  return (
    <div
      className={cn("da-stroke relative overflow-x-auto rounded-da-lg bg-da-surface text-da-surface-fg shadow-da-sm", className)}
      role="region"
      aria-label="Invoices"
      tabIndex={0}
    >
      <table className="w-full min-w-[640px] text-sm">
        <caption className="sr-only">Invoices</caption>
        <thead className="border-b border-da-border bg-da-surface-2 text-left text-xs text-da-muted-fg">
          <tr>
            <th scope="col" className="px-4 py-2.5 font-medium">
              Invoice
            </th>
            <th scope="col" className="px-4 py-2.5 font-medium">
              Customer
            </th>
            <th scope="col" className="px-4 py-2.5 font-medium">
              Status
            </th>
            <th scope="col" className="px-4 py-2.5 font-medium">
              Due
            </th>
            <th scope="col" className="px-4 py-2.5 text-right font-medium">
              Amount
            </th>
            <th scope="col" className="w-12 px-4 py-2.5">
              <span className="sr-only">Actions</span>
            </th>
          </tr>
        </thead>
        <tbody className="divide-y divide-da-border">
          {rows.map((r) => (
            <tr key={r.number} className="da-transition hover:bg-da-surface-2">
              <td className="px-4 py-3 font-da-mono text-xs">{r.number}</td>
              <td className="px-4 py-3 font-medium">{r.customer}</td>
              <td className="px-4 py-3">
                <span className={cn("rounded-da-pill px-2 py-0.5 text-xs font-semibold", STATUS[r.status][1])}>{STATUS[r.status][0]}</span>
              </td>
              <td className="px-4 py-3">
                {r.due}
                {r.daysLate ? <span className="ml-2 text-xs font-medium text-da-danger">{r.daysLate}d late</span> : null}
              </td>
              <td className="px-4 py-3 text-right font-da-mono tabular-nums">{fmt(r.amount)}</td>
              <td className="px-2 py-2 text-right">
                <DropdownMenu.Root modal={false}>
                  <DropdownMenu.Trigger
                    aria-label={`Actions for ${r.number}`}
                    className="da-focus grid size-8 place-items-center rounded-da-md text-da-muted-fg hover:bg-da-muted hover:text-da-fg"
                  >
                    <MoreHorizontal aria-hidden className="size-4" />
                  </DropdownMenu.Trigger>
                  <DropdownMenu.Portal>
                    <DropdownMenu.Content
                      data-da={da}
                      align="end"
                      sideOffset={4}
                      className="da-stroke z-50 min-w-44 rounded-da-md bg-da-surface p-1 text-da-surface-fg shadow-da-lg transition-opacity duration-(--da-duration) starting:opacity-0"
                    >
                      <DropdownMenu.Item className={item} onSelect={() => onAction?.("view", r.number)}>
                        View invoice
                      </DropdownMenu.Item>
                      <DropdownMenu.Item
                        className={item}
                        disabled={r.status === "paid" || r.status === "draft"}
                        onSelect={() => onAction?.("remind", r.number)}
                      >
                        <span className="data-disabled:opacity-50">Send reminder</span>
                      </DropdownMenu.Item>
                      <DropdownMenu.Item className={item} onSelect={() => onAction?.("duplicate", r.number)}>
                        Duplicate
                      </DropdownMenu.Item>
                      <DropdownMenu.Separator className="my-1 h-px bg-da-border" />
                      <DropdownMenu.Item className={cn(item, "text-da-danger data-highlighted:bg-da-danger/10")} onSelect={() => onAction?.("void", r.number)}>
                        Void
                      </DropdownMenu.Item>
                    </DropdownMenu.Content>
                  </DropdownMenu.Portal>
                </DropdownMenu.Root>
              </td>
            </tr>
          ))}
        </tbody>
        <tfoot className="border-t border-da-border bg-da-surface-2">
          <tr>
            <th scope="row" colSpan={4} className="px-4 py-3 text-left font-semibold">
              Total outstanding
            </th>
            <td className="px-4 py-3 text-right font-da-mono font-medium tabular-nums">{fmt(open)}</td>
            <td />
          </tr>
        </tfoot>
      </table>
    </div>
  );
}

export default InvoiceTable;