"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { cn } from "@stigmer/theme";
import { BillingAccountStatus } from "@stigmer/protos/ai/stigmer/billing/v1/enum_pb";
const BRAND_DISPLAY = {
    visa: "Visa",
    mastercard: "Mastercard",
    amex: "American Express",
    discover: "Discover",
    diners: "Diners Club",
    jcb: "JCB",
    unionpay: "UnionPay",
};
function formatBrand(brand) {
    return BRAND_DISPLAY[brand.toLowerCase()] ?? brand;
}
function formatExpiry(month, year) {
    const m = String(month).padStart(2, "0");
    const y = String(year).slice(-2);
    return `${m}/${y}`;
}
/**
 * Displays the saved payment method with a button to open the
 * Stripe Customer Portal for management.
 *
 * Shows card brand, last 4 digits, and expiry when a payment method
 * is on file. Shows an empty state prompt when none exists. The
 * "Manage" button opens the Stripe Customer Portal where users can
 * add, update, or remove payment methods.
 *
 * @example
 * ```tsx
 * <PaymentMethodCard
 *   paymentMethod={account.defaultPaymentMethod}
 *   accountStatus={account.status}
 *   onManage={() => openPortal(orgId)}
 * />
 * ```
 */
export function PaymentMethodCard({ paymentMethod, accountStatus, isPortalLoading, onManage, className, }) {
    const isAccountActive = accountStatus === BillingAccountStatus.billing_account_active;
    const hasPm = paymentMethod != null && paymentMethod.paymentMethodId !== "";
    return (_jsxs("div", { className: cn("rounded-lg border border-border bg-card px-4 py-4", className), children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("h3", { className: "text-xs font-semibold text-foreground", children: "Payment Method" }), hasPm && (_jsx("button", { type: "button", disabled: !isAccountActive || isPortalLoading, onClick: onManage, className: cn("rounded-md px-2.5 py-1 text-xs font-medium transition-colors", "text-muted-foreground hover:bg-accent hover:text-foreground", "disabled:pointer-events-none disabled:opacity-50"), "aria-busy": isPortalLoading, children: isPortalLoading ? "Opening\u2026" : "Manage" }))] }), hasPm ? (_jsxs("div", { className: "mt-2 flex items-center gap-3", children: [_jsx(CardBrandIcon, { brand: paymentMethod.brand }), _jsxs("div", { children: [_jsxs("div", { className: "text-sm font-medium text-foreground", children: [formatBrand(paymentMethod.brand), " \u00B7\u00B7\u00B7\u00B7", " ", paymentMethod.last4] }), _jsxs("div", { className: "text-xs text-muted-foreground", children: ["Expires", " ", formatExpiry(paymentMethod.expMonth, paymentMethod.expYear)] })] })] })) : (_jsx("div", { className: "mt-2", children: _jsx("p", { className: "text-xs text-muted-foreground", children: "No payment method on file. A card will be saved automatically when you purchase your first credit pack." }) }))] }));
}
function CardBrandIcon({ brand }) {
    return (_jsx("div", { className: "flex size-9 items-center justify-center rounded-md border border-border bg-background", children: _jsx("span", { className: "text-[0.6rem] font-bold uppercase text-muted-foreground", children: brand.slice(0, 4) }) }));
}
//# sourceMappingURL=PaymentMethodCard.js.map