import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { memo, useState } from 'react';
import { Wallet, CreditCard, AlertCircle, Loader2, X } from 'lucide-react';
import { apiClient } from '../../lib/api-client';
import { toast } from '../../stores/toastStore';
import { useSetuStore } from '../../stores/setuStore';
export const TopupApprovalCard = memo(function TopupApprovalCard({ pendingTopup, onMethodSelected, onCancel, }) {
    const [isProcessing, setIsProcessing] = useState(false);
    const [selectedMethod, setSelectedMethod] = useState(null);
    const openTopupModal = useSetuStore((s) => s.openTopupModal);
    const handleSelectCrypto = async () => {
        setSelectedMethod('crypto');
        setIsProcessing(true);
        try {
            await apiClient.selectTopupMethod(pendingTopup.sessionId, 'crypto');
            onMethodSelected('crypto');
        }
        catch (error) {
            toast.error(error instanceof Error ? error.message : 'Failed to process payment');
            setIsProcessing(false);
            setSelectedMethod(null);
        }
    };
    const handleSelectFiat = async () => {
        setSelectedMethod('fiat');
        // Open modal immediately - don't wait for API
        openTopupModal();
        // Tell server fiat was selected (this will gracefully pause the request)
        apiClient.selectTopupMethod(pendingTopup.sessionId, 'fiat').catch(() => {
            // Ignore errors - the server handles fiat selection gracefully
        });
        onMethodSelected('fiat');
    };
    const handleCancel = async () => {
        setIsProcessing(true);
        try {
            await apiClient.cancelTopup(pendingTopup.sessionId);
            onCancel();
        }
        catch (error) {
            toast.error(error instanceof Error ? error.message : 'Failed to cancel');
            setIsProcessing(false);
        }
    };
    return (_jsxs("div", { className: "flex flex-col gap-3 py-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(AlertCircle, { className: "h-4 w-4 text-amber-500 flex-shrink-0" }), _jsx("span", { className: "font-medium text-foreground text-sm", children: "Insufficient Balance" }), _jsx("span", { className: "text-amber-600 dark:text-amber-400 font-medium text-sm", children: "payment required" })] }), _jsxs("div", { className: "ml-6 bg-muted/30 rounded-lg p-3 space-y-2 text-sm", children: [_jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-muted-foreground", children: "Request cost" }), _jsxs("span", { className: "font-mono", children: ["~$", pendingTopup.amountUsd.toFixed(4)] })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-muted-foreground", children: "Current balance" }), _jsxs("span", { className: "font-mono", children: ["$", pendingTopup.currentBalance.toFixed(4)] })] })] }), _jsxs("div", { className: "ml-6 flex flex-wrap items-center gap-2", children: [_jsxs("button", { type: "button", onClick: handleCancel, disabled: isProcessing, title: "Cancel request", className: "flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded border border-border bg-background hover:bg-muted transition-colors disabled:opacity-50", children: [_jsx(X, { className: "w-3 h-3" }), "Cancel"] }), _jsxs("button", { type: "button", onClick: handleSelectCrypto, disabled: isProcessing, title: "Pay with USDC from your wallet", className: "flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded bg-violet-600 text-white hover:bg-violet-700 transition-colors disabled:opacity-50", children: [selectedMethod === 'crypto' && isProcessing ? (_jsx(Loader2, { className: "w-3 h-3 animate-spin" })) : (_jsx(Wallet, { className: "w-3 h-3" })), "Pay with USDC"] }), _jsxs("button", { type: "button", onClick: handleSelectFiat, disabled: isProcessing, title: "Top up balance with card (min $5)", className: "flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded border border-violet-500 text-violet-600 dark:text-violet-400 hover:bg-violet-500/10 transition-colors disabled:opacity-50", children: [selectedMethod === 'fiat' && isProcessing ? (_jsx(Loader2, { className: "w-3 h-3 animate-spin" })) : (_jsx(CreditCard, { className: "w-3 h-3" })), "Top up with Card", _jsx("span", { className: "text-[10px] opacity-70", children: "(min $5)" })] })] }), _jsx("p", { className: "ml-6 text-xs text-muted-foreground", children: selectedMethod === 'crypto'
                    ? 'Processing USDC payment from your wallet...'
                    : selectedMethod === 'fiat'
                        ? 'Opening Polar checkout...'
                        : 'Select a payment method to continue your request.' })] }));
});
//# sourceMappingURL=TopupApprovalCard.js.map