"use client";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useState } from "react";
import { cn } from "@stigmer/theme";
import { getUserMessage } from "@stigmer/sdk";
import { formatLedgerAmount, formatCreditBalance, formatLedgerDate, ledgerEntryLabel, isCredit, isHold, } from "./format";
import { useCreditLedger } from "./useCreditLedger";
/**
 * Paginated transaction history table showing credit ledger entries.
 *
 * Displays entries with type badges, signed amounts, and running
 * balance. Supports pagination with simple prev/next controls.
 * Uses semantic colors: green for credits, red for debits, gray
 * for holds and releases.
 *
 * @example
 * ```tsx
 * <CreditLedgerTable orgId={activeOrg.metadata.id} />
 * ```
 */
export function CreditLedgerTable({ orgId, className, }) {
    const [pageNum, setPageNum] = useState(1);
    const options = { pageNum, pageSize: 10 };
    const { ledger, isLoading, error } = useCreditLedger(orgId, options);
    if (isLoading) {
        return (_jsxs("div", { className: cn("space-y-2", className), "aria-busy": "true", children: [_jsx("div", { className: "h-4 w-32 animate-pulse rounded bg-muted-subtle" }), Array.from({ length: 5 }, (_, i) => (_jsx("div", { className: "h-10 animate-pulse rounded-lg bg-muted-subtle" }, i)))] }));
    }
    if (error) {
        return (_jsx("p", { className: cn("text-destructive text-xs", className), role: "alert", children: getUserMessage(error) }));
    }
    const entries = ledger?.entries ?? [];
    const totalPages = ledger?.totalPages ?? 0;
    return (_jsxs("div", { className: className, children: [_jsx("h3", { className: "mb-2 text-xs font-semibold text-foreground", children: "Transaction History" }), entries.length === 0 ? (_jsx(EmptyLedger, {})) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "rounded-lg border border-border bg-card", role: "table", "aria-label": "Credit ledger", children: [_jsx(LedgerHeader, {}), entries.map((entry) => (_jsx(LedgerRow, { entry: entry }, entry.entryId)))] }), totalPages > 1 && (_jsx(Pagination, { pageNum: pageNum, totalPages: totalPages, onPageChange: setPageNum }))] }))] }));
}
// ---------------------------------------------------------------------------
// LedgerHeader (internal)
// ---------------------------------------------------------------------------
function LedgerHeader() {
    return (_jsxs("div", { role: "row", className: "grid grid-cols-[1fr_auto_auto] gap-x-4 border-b border-border px-3.5 py-2 text-[0.65rem] font-medium uppercase tracking-wider text-muted-foreground sm:grid-cols-[auto_1fr_auto_auto]", children: [_jsx("span", { role: "columnheader", className: "hidden sm:block", children: "Date" }), _jsx("span", { role: "columnheader", children: "Type" }), _jsx("span", { role: "columnheader", className: "text-right", children: "Amount" }), _jsx("span", { role: "columnheader", className: "text-right", children: "Balance" })] }));
}
// ---------------------------------------------------------------------------
// LedgerRow (internal)
// ---------------------------------------------------------------------------
function LedgerRow({ entry }) {
    const entryType = entry.type;
    const credit = isCredit(entryType);
    const hold = isHold(entryType);
    return (_jsxs("div", { role: "row", className: "grid grid-cols-[1fr_auto_auto] items-center gap-x-4 border-b border-border-muted px-3.5 py-2.5 last:border-b-0 sm:grid-cols-[auto_1fr_auto_auto]", children: [_jsx("span", { role: "cell", className: "hidden text-xs tabular-nums text-muted-foreground sm:block sm:w-36", children: entry.createdAt
                    ? formatLedgerDate(entry.createdAt.seconds)
                    : "\u2014" }), _jsxs("div", { role: "cell", className: "min-w-0", children: [_jsx("span", { className: cn("inline-block rounded-full px-2 py-0.5 text-[0.65rem] font-medium", credit
                            ? "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400"
                            : hold
                                ? "bg-muted text-muted-foreground"
                                : "bg-destructive/10 text-destructive"), children: ledgerEntryLabel(entryType) }), entry.source?.description && (_jsx("span", { className: "ml-2 text-xs text-muted-foreground", children: entry.source.description })), entry.createdAt && (_jsx("span", { className: "mt-0.5 block text-[0.6rem] tabular-nums text-muted-foreground sm:hidden", children: formatLedgerDate(entry.createdAt.seconds) }))] }), _jsx("span", { role: "cell", className: cn("text-right text-xs font-medium tabular-nums", credit
                    ? "text-emerald-600 dark:text-emerald-400"
                    : hold
                        ? "text-muted-foreground"
                        : "text-destructive"), children: formatLedgerAmount(entry.amountMicros) }), _jsx("span", { role: "cell", className: "text-right text-xs tabular-nums text-muted-foreground", children: formatCreditBalance(entry.balanceAfterMicros) })] }));
}
// ---------------------------------------------------------------------------
// Pagination (internal)
// ---------------------------------------------------------------------------
function Pagination({ pageNum, totalPages, onPageChange, }) {
    return (_jsxs("div", { className: "mt-3 flex items-center justify-between", role: "navigation", "aria-label": "Ledger pagination", children: [_jsx("button", { type: "button", disabled: pageNum <= 1, onClick: () => onPageChange(pageNum - 1), className: "rounded-md px-2.5 py-1 text-xs font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-foreground disabled:pointer-events-none disabled:opacity-40", children: "Previous" }), _jsxs("span", { className: "text-xs tabular-nums text-muted-foreground", children: ["Page ", pageNum, " of ", totalPages] }), _jsx("button", { type: "button", disabled: pageNum >= totalPages, onClick: () => onPageChange(pageNum + 1), className: "rounded-md px-2.5 py-1 text-xs font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-foreground disabled:pointer-events-none disabled:opacity-40", children: "Next" })] }));
}
// ---------------------------------------------------------------------------
// EmptyLedger (internal)
// ---------------------------------------------------------------------------
function EmptyLedger() {
    return (_jsxs("div", { className: "flex flex-col items-center justify-center rounded-lg border border-border bg-card py-10 text-center", children: [_jsx(ReceiptIcon, { className: "text-muted-foreground mb-3 size-8" }), _jsx("p", { className: "text-sm font-medium text-foreground", children: "No transactions yet" }), _jsx("p", { className: "mt-1 max-w-xs text-xs text-muted-foreground", children: "Credit purchases and usage charges will appear here as your organization runs agent executions." })] }));
}
function ReceiptIcon({ className }) {
    return (_jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", className: className, "aria-hidden": "true", children: [_jsx("path", { d: "M4 2v20l2-1 2 1 2-1 2 1 2-1 2 1 2-1 2 1V2l-2 1-2-1-2 1-2-1-2 1-2-1-2 1Z" }), _jsx("path", { d: "M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8" }), _jsx("path", { d: "M12 17.5v.5M12 6v.5" })] }));
}
//# sourceMappingURL=CreditLedgerTable.js.map