"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useCallback, useEffect } from "react";
import { cn } from "@stigmer/theme";
import { BillingAccountStatus } from "@stigmer/protos/ai/stigmer/billing/v1/enum_pb";
import { getUserMessage } from "@stigmer/sdk";
import { useSetAutoRechargeConfig } from "./useSetAutoRechargeConfig";
const MICROS_PER_DOLLAR = BigInt(1_000_000);
function microsToDollars(micros) {
    if (micros === BigInt(0))
        return "";
    const dollars = Number(micros) / 1_000_000;
    return dollars.toString();
}
function dollarsToMicros(value) {
    const num = parseFloat(value);
    if (isNaN(num) || num < 0)
        return BigInt(0);
    return BigInt(Math.round(num * 1_000_000));
}
/**
 * Auto-recharge configuration card for the billing settings page.
 *
 * Shows a toggle to enable/disable auto-recharge, with input fields
 * for threshold, recharge amount, and monthly cap. Displays a
 * disabled state with an explanatory message when no payment method
 * is on file. Validates inputs client-side before submitting.
 *
 * @example
 * ```tsx
 * <AutoRechargeCard
 *   orgId={orgId}
 *   autoRecharge={account.autoRecharge}
 *   hasPaymentMethod={!!account.defaultPaymentMethod?.paymentMethodId}
 *   accountStatus={account.status}
 *   onSaved={refetch}
 * />
 * ```
 */
export function AutoRechargeCard({ orgId, autoRecharge, hasPaymentMethod, accountStatus, onSaved, className, }) {
    const { setConfig, isSubmitting, error, clearError } = useSetAutoRechargeConfig();
    const [enabled, setEnabled] = useState(autoRecharge?.enabled ?? false);
    const [threshold, setThreshold] = useState(microsToDollars(autoRecharge?.thresholdMicros ?? BigInt(0)));
    const [amount, setAmount] = useState(microsToDollars(autoRecharge?.rechargeAmountMicros ?? BigInt(0)));
    const [cap, setCap] = useState(microsToDollars(autoRecharge?.monthlyCapMicros ?? BigInt(0)));
    const [saved, setSaved] = useState(false);
    useEffect(() => {
        if (!autoRecharge)
            return;
        setEnabled(autoRecharge.enabled);
        setThreshold(microsToDollars(autoRecharge.thresholdMicros));
        setAmount(microsToDollars(autoRecharge.rechargeAmountMicros));
        setCap(microsToDollars(autoRecharge.monthlyCapMicros));
    }, [autoRecharge]);
    const isAccountActive = accountStatus === BillingAccountStatus.billing_account_active;
    const canConfigure = hasPaymentMethod && isAccountActive;
    const hasChanges = enabled !== (autoRecharge?.enabled ?? false) ||
        dollarsToMicros(threshold) !==
            (autoRecharge?.thresholdMicros ?? BigInt(0)) ||
        dollarsToMicros(amount) !==
            (autoRecharge?.rechargeAmountMicros ?? BigInt(0)) ||
        dollarsToMicros(cap) !== (autoRecharge?.monthlyCapMicros ?? BigInt(0));
    const handleSave = useCallback(async () => {
        clearError();
        setSaved(false);
        try {
            await setConfig({
                orgId,
                enabled,
                thresholdMicros: dollarsToMicros(threshold),
                rechargeAmountMicros: dollarsToMicros(amount),
                monthlyCapMicros: dollarsToMicros(cap),
            });
            setSaved(true);
            onSaved?.();
            setTimeout(() => setSaved(false), 3000);
        }
        catch {
            // error state is managed by the hook
        }
    }, [orgId, enabled, threshold, amount, cap, setConfig, clearError, onSaved]);
    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: [_jsxs("div", { children: [_jsx("h3", { className: "text-xs font-semibold text-foreground", children: "Auto-Recharge" }), _jsx("p", { className: "mt-0.5 text-[0.7rem] text-muted-foreground", children: "Automatically add credits when your balance runs low." })] }), _jsx("button", { type: "button", role: "switch", "aria-checked": enabled, disabled: !canConfigure || isSubmitting, onClick: () => setEnabled((prev) => !prev), className: cn("relative inline-flex h-5 w-9 shrink-0 rounded-full transition-colors", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", "disabled:cursor-not-allowed disabled:opacity-50", enabled ? "bg-primary" : "bg-muted"), children: _jsx("span", { className: cn("pointer-events-none block size-4 rounded-full bg-background shadow-sm ring-0 transition-transform", enabled ? "translate-x-4" : "translate-x-0.5", "mt-0.5") }) })] }), !hasPaymentMethod && (_jsx("p", { className: "mt-3 text-xs text-muted-foreground", children: "A saved payment method is required to enable auto-recharge. Purchase a credit pack first to save a card." })), canConfigure && (_jsxs("div", { className: "mt-4 space-y-3", children: [_jsx(DollarInput, { id: "ar-threshold", label: "When balance drops below", value: threshold, onChange: setThreshold, disabled: isSubmitting, placeholder: "e.g. 5" }), _jsx(DollarInput, { id: "ar-amount", label: "Recharge amount", value: amount, onChange: setAmount, disabled: isSubmitting, placeholder: "e.g. 50" }), _jsx(DollarInput, { id: "ar-cap", label: "Monthly cap", value: cap, onChange: setCap, disabled: isSubmitting, placeholder: "e.g. 200" }), _jsxs("div", { className: "flex items-center gap-3 pt-1", children: [_jsx("button", { type: "button", disabled: !hasChanges || isSubmitting, onClick: handleSave, className: cn("rounded-md px-3 py-1.5 text-xs font-medium transition-colors", "bg-primary text-primary-foreground hover:bg-primary/90", "disabled:pointer-events-none disabled:opacity-50"), "aria-busy": isSubmitting, children: isSubmitting ? "Saving\u2026" : "Save" }), saved && (_jsx("span", { className: "text-xs text-emerald-600 dark:text-emerald-400", children: "Saved" }))] }), error && (_jsx("p", { className: "text-xs text-destructive", role: "alert", children: getUserMessage(error) }))] }))] }));
}
// ---------------------------------------------------------------------------
// DollarInput (internal)
// ---------------------------------------------------------------------------
function DollarInput({ id, label, value, onChange, disabled, placeholder, }) {
    return (_jsxs("div", { children: [_jsx("label", { htmlFor: id, className: "block text-xs text-muted-foreground", children: label }), _jsxs("div", { className: "relative mt-1", children: [_jsx("span", { className: "pointer-events-none absolute left-2.5 top-1/2 -translate-y-1/2 text-xs text-muted-foreground", children: "$" }), _jsx("input", { id: id, type: "number", min: "0", step: "any", value: value, onChange: (e) => onChange(e.target.value), disabled: disabled, placeholder: placeholder, className: cn("w-full rounded-md border border-input bg-background py-1.5 pl-6 pr-3 text-xs tabular-nums", "text-foreground placeholder:text-muted-foreground/60", "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring", "disabled:cursor-not-allowed disabled:opacity-50") })] })] }));
}
//# sourceMappingURL=AutoRechargeCard.js.map