pieced-portal/src/components/admin/billing/invoices-table.tsx

"use client";

import { useState, useEffect } from "react";
import Link from "next/link";
import { useTranslations } from "next-intl";
import { Card } from "@/components/ui/card";
import type { Invoice, InvoiceStatus } from "@/types";

interface Props {
  initialInvoices: Invoice[];
}

const STATUS_FILTERS: (InvoiceStatus | "all")[] = [
  "all",
  "open",
  "overdue",
  "paid",
  "void",
];

/**
 * Filterable invoice list. Filters live in URL-less local state
 * (simpler than syncing to query string for a v1 admin tool); a
 * page refresh resets.
 *
 * Re-fetching strategy: when filters change, hit the API directly
 * rather than router.refresh() so we don't bounce the user through
 * a full page render.
 */
export function InvoicesTable({ initialInvoices }: Props) {
  const t = useTranslations("adminBilling");
  const [statusFilter, setStatusFilter] = useState<InvoiceStatus | "all">("all");
  const [monthFilter, setMonthFilter] = useState("");
  const [invoices, setInvoices] = useState(initialInvoices);
  const [busy, setBusy] = useState(false);

  useEffect(() => {
    // Effect runs after initial render too; skip refetch on mount
    // when filters are at their defaults — the server already
    // gave us the right initial set.
    if (statusFilter === "all" && monthFilter === "") return;
    let cancelled = false;
    setBusy(true);
    const params = new URLSearchParams();
    if (statusFilter !== "all") params.set("status", statusFilter);
    if (monthFilter) params.set("month", monthFilter);
    fetch(`/api/admin/billing/invoices?${params}`)
      .then((r) => r.json())
      .then((data) => {
        if (!cancelled) setInvoices(data);
      })
      .catch((e) => console.error("Failed to load invoices:", e))
      .finally(() => {
        if (!cancelled) setBusy(false);
      });
    return () => {
      cancelled = true;
    };
  }, [statusFilter, monthFilter]);

  return (
    <div className="space-y-4">
      <Card>
        <div className="flex flex-wrap items-end gap-4">
          <label className="block">
            <span className="text-xs text-text-muted">{t("statusFilterLabel")}</span>
            <select
              value={statusFilter}
              onChange={(e) =>
                setStatusFilter(e.target.value as InvoiceStatus | "all")
              }
              className="mt-1 px-3 py-1.5 rounded-md border border-border bg-surface-2 text-sm"
            >
              {STATUS_FILTERS.map((s) => (
                <option key={s} value={s}>
                  {s === "all" ? t("allStatuses") : t(`status_${s}`)}
                </option>
              ))}
            </select>
          </label>
          <label className="block">
            <span className="text-xs text-text-muted">{t("monthFilterLabel")}</span>
            <input
              type="month"
              value={monthFilter}
              onChange={(e) => setMonthFilter(e.target.value)}
              className="mt-1 px-3 py-1.5 rounded-md border border-border bg-surface-2 text-sm"
            />
          </label>
          {monthFilter && (
            <button
              onClick={() => setMonthFilter("")}
              className="text-xs text-text-muted hover:underline"
            >
              {t("clearFilter")}
            </button>
          )}
          {busy && (
            <span className="text-xs text-text-muted ml-auto">
              {t("loading")}
            </span>
          )}
        </div>
      </Card>

      <Card>
        {invoices.length === 0 ? (
          <p className="text-sm text-text-muted italic text-center py-6">
            {t("noInvoicesFound")}
          </p>
        ) : (
          <table className="w-full text-sm">
            <thead className="text-xs text-text-muted text-left">
              <tr>
                <th className="pb-2">{t("invoiceNumberCol")}</th>
                <th className="pb-2">{t("orgCol")}</th>
                <th className="pb-2">{t("periodCol")}</th>
                <th className="pb-2">{t("statusCol")}</th>
                <th className="pb-2 text-right">{t("totalCol")}</th>
                <th className="pb-2 text-right">{t("dueCol")}</th>
              </tr>
            </thead>
            <tbody>
              {invoices.map((inv) => (
                <tr
                  key={inv.id}
                  className="border-t border-border hover:bg-surface-2 cursor-pointer"
                >
                  <td className="py-2">
                    <Link
                      href={`/admin/billing/invoices/${inv.id}`}
                      className="font-mono text-xs hover:underline"
                    >
                      {inv.invoiceNumber}
                    </Link>
                  </td>
                  <td className="py-2">
                    <div className="text-xs">
                      {inv.billingSnapshot.companyName || (
                        <span className="font-mono">{inv.zitadelOrgId}</span>
                      )}
                    </div>
                  </td>
                  <td className="py-2 text-xs font-mono">
                    {inv.periodStart.slice(0, 7)}
                  </td>
                  <td className="py-2">
                    <StatusPill status={inv.status} />
                  </td>
                  <td className="py-2 text-right">
                    CHF {inv.totalChf.toFixed(2)}
                  </td>
                  <td className="py-2 text-right text-xs text-text-muted">
                    {inv.dueAt}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        )}
      </Card>
    </div>
  );
}

function StatusPill({ status }: { status: InvoiceStatus }) {
  const t = useTranslations("adminBilling");
  const color =
    status === "paid"
      ? "bg-success/15 text-success"
      : status === "overdue"
        ? "bg-error/15 text-error"
        : status === "void" || status === "uncollectible"
          ? "bg-text-muted/15 text-text-muted"
          : "bg-accent/15 text-accent";
  return (
    <span
      className={`inline-block px-2 py-0.5 rounded text-xs font-medium ${color}`}
    >
      {t(`status_${status}`)}
    </span>
  );
}