{% extends "base.html" %}

{% block title %}Wallet{% endblock %}

{% block content %}
<h2 style="margin-bottom: 20px;"><i class="fas fa-wallet me-2"></i><span data-i18n="wallet_page.title">Wallet</span></h2>

{% if upgrade_tiers %}
<!-- Subscription upgrade hint -->
<div style="background: var(--bg-accent); border: 1px solid var(--color-border); border-radius: 8px; padding: 14px 20px; margin-bottom: 20px; display: flex; align-items: center; justify-content: space-between; gap: 15px; flex-wrap: wrap;">
    <div>
        <i class="fas fa-crown" style="color: #ffc107; margin-right: 8px;"></i>
        <span style="color: var(--color-text); font-weight: 600;" data-i18n="wallet_page.did_you_know">Did you know?</span>
        <span style="color: var(--color-muted); margin-left: 6px;" data-i18n="wallet_page.wallet_upgrade_hint">You can use your wallet balance to subscribe to a paid plan and unlock higher limits.</span>
    </div>
    <a href="{{ url_for(request, '/dashboard/pricing') }}" class="btn">
        <i class="fas fa-arrow-up me-1"></i> <span data-i18n="wallet_page.view_plans">View Plans</span>
    </a>
</div>
{% endif %}

<!-- Balance Banner -->
<div style="background: var(--bg-panel); border: 2px solid #28a745; border-radius: 8px; padding: 24px; margin-bottom: 20px;">
    <div style="display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 15px;">
        <div>
            <div style="color: var(--color-muted); font-size: 14px; margin-bottom: 6px;" data-i18n="wallet_page.available_balance">Available Balance</div>
            <div style="font-size: 42px; font-weight: bold; color: #4ade80;">{{ currency_symbol }}{{ "%.2f"|format(wallet.balance|float) }}</div>
            <div style="color: var(--color-muted); font-size: 13px; margin-top: 6px;">
                <span data-i18n="wallet_page.currency">Currency</span>: <span style="color: var(--color-text);">{{ wallet.currency_code }}</span>
                &nbsp;·&nbsp; <span data-i18n="wallet_page.wallet_id">Wallet ID</span>: <span style="color: var(--color-text); font-family: monospace;">{{ wallet.id }}</span>
            </div>
        </div>
        <div style="text-align: right;">
            {% if wallet.auto_topup_enabled %}
            <span style="background: #28a745; color: white; padding: 4px 12px; border-radius: 10px; font-size: 13px;">
                <i class="fas fa-sync-alt me-1"></i><span data-i18n="wallet_page.auto_topup_active">Auto Top-Up Active</span>
            </span>
            {% else %}
            <span style="background: #6c757d; color: white; padding: 4px 12px; border-radius: 10px; font-size: 13px;">
                <i class="fas fa-sync-alt me-1"></i><span data-i18n="wallet_page.auto_topup_off">Auto Top-Up Off</span>
            </span>
            {% endif %}
        </div>
    </div>
</div>

<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px;">

    <!-- Top Up -->
    <div style="background: var(--bg-panel); border: 2px solid var(--color-border); border-radius: 8px; padding: 20px;">
        <h3 style="margin: 0 0 18px 0; color: var(--color-link);">
            <i class="fas fa-plus-circle me-2"></i><span data-i18n="wallet_page.topup_title">Top Up Wallet</span>
        </h3>

        {% set fiat_gateways = enabled_gateways.keys() | select('in', ['stripe', 'paypal']) | list %}
        {% set crypto_gateways = enabled_gateways.keys() | select('in', ['bitcoin', 'ethereum', 'usdt', 'usdc']) | list %}

        {% if not enabled_gateways %}
        <div style="color: var(--color-muted); text-align: center; padding: 20px 10px;">
            <i class="fas fa-info-circle fa-2x" style="margin-bottom: 12px; display: block; color: var(--color-link);"></i>
            <span data-i18n="wallet_page.no_payment_methods">No payment methods are currently enabled.</span><br>
            <span style="font-size: 13px;" data-i18n="wallet_page.contact_admin">Please contact the administrator to enable a payment gateway.</span>
        </div>
        {% else %}

        {% if fiat_gateways %}
        <div style="margin-bottom: 16px;">
            <div style="color: var(--color-muted); font-size: 13px; margin-bottom: 8px;" data-i18n="wallet_page.quick_amounts">Quick amounts</div>
            <div style="display: flex; gap: 8px; flex-wrap: wrap;">
                {% for amt in [10, 15, 20, 50, 100] %}
                <button type="button" class="amount-btn" data-amount="{{ amt }}"
                    style="background: var(--bg-page); border: 1px solid var(--color-link); color: var(--color-link); padding: 8px 16px; border-radius: 6px; cursor: pointer; font-size: 14px; transition: all .15s;">
                    {{ currency_symbol }}{{ amt }}
                </button>
                {% endfor %}
            </div>
        </div>
        <div style="margin-bottom: 16px;">
            <label style="display: block; color: var(--color-muted); font-size: 13px; margin-bottom: 6px;" data-i18n="wallet_page.custom_amount">Custom amount</label>
            <input type="number" id="custom-amount"
                style="width: 100%; padding: 10px; background: var(--bg-page); border: 1px solid var(--color-border); border-radius: 6px; color: var(--color-text); font-size: 15px;"
                placeholder="Enter amount ({{ currency_symbol }}5 – {{ currency_symbol }}500)" step="0.01" min="5" max="500">
        </div>
        <div style="display: flex; flex-direction: column; gap: 10px; {% if crypto_gateways %}margin-bottom: 16px;{% endif %}">
            {% for name in fiat_gateways %}
            {% if name == 'stripe' %}
            <button class="topup-fiat-btn" data-method="stripe"
                style="background: #635bff; border: none; color: white; padding: 11px; border-radius: 6px; cursor: pointer; font-size: 15px; font-weight: 600; transition: background .15s;">
                <i class="fab fa-cc-stripe me-2"></i>Top Up with Stripe
            </button>
            {% elif name == 'paypal' %}
            <button class="topup-fiat-btn" data-method="paypal"
                style="background: #003087; border: 1px solid #009cde; color: white; padding: 11px; border-radius: 6px; cursor: pointer; font-size: 15px; font-weight: 600; transition: background .15s;">
                <i class="fab fa-paypal me-2"></i>Top Up with PayPal
            </button>
            {% endif %}
            {% endfor %}
        </div>
        {% endif %}

        {% if crypto_gateways %}
        {% if fiat_gateways %}
        <hr style="border-color: var(--color-border); margin: 4px 0 14px 0;">
        {% endif %}
        <div style="color: var(--color-muted); font-size: 13px; margin-bottom: 10px;">
            <i class="fas fa-coins me-1"></i><span data-i18n="wallet_page.crypto_deposit">Crypto deposit</span>
        </div>
        <div style="display: flex; flex-wrap: wrap; gap: 8px;">
        {% for name in crypto_gateways %}
        {% set cfg = enabled_gateways[name] %}
        <button onclick="openCryptoModal('{{ name }}')"
            style="background:var(--bg-page); border:1px solid var(--color-border); color:var(--color-text); padding:8px 16px; border-radius:6px; cursor:pointer; font-size:13px; font-weight:600; display:flex; align-items:center; gap:6px; transition:border-color .15s;"
            onmouseover="this.style.borderColor='var(--color-link)'" onmouseout="this.style.borderColor='var(--color-border)'">
            {% if name == 'bitcoin' %}<i class="fab fa-bitcoin" style="color:#f7931a;"></i>
            {% elif name == 'ethereum' %}<i class="fab fa-ethereum" style="color:#627eea;"></i>
            {% else %}<i class="fas fa-coins" style="color:#26a17b;"></i>
            {% endif %}
            {{ name | upper }}
        </button>
        {% endfor %}
        </div>
        {% endif %}

        {% endif %}
    </div>

    <!-- Auto Top-Up -->
    <div style="background: var(--bg-panel); border: 2px solid var(--color-border); border-radius: 8px; padding: 20px;">
        <h3 style="margin: 0 0 18px 0; color: var(--color-link);">
            <i class="fas fa-sync-alt me-2"></i><span data-i18n="wallet_page.auto_topup_title">Auto Top-Up Settings</span>
        </h3>

        <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 20px;">
            <div style="position: relative; width: 48px; height: 26px; flex-shrink: 0;">
                <input type="checkbox" id="auto-topup-enabled"
                    {% if wallet.auto_topup_enabled %}checked{% endif %}
                    style="opacity: 0; width: 0; height: 0; position: absolute;">
                <label for="auto-topup-enabled" id="toggle-label"
                    style="position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background: var(--color-subtle); border-radius: 26px; transition: .3s;">
                    <span id="toggle-knob" style="position: absolute; height: 20px; width: 20px; left: 3px; bottom: 3px; background: white; border-radius: 50%; transition: .3s;"></span>
                </label>
            </div>
            <span style="color: var(--color-text); font-size: 15px;" data-i18n="wallet_page.enable_auto_topup">Enable Auto Top-Up</span>
        </div>

        <div id="auto-topup-settings" {% if not wallet.auto_topup_enabled %}style="display:none;"{% endif %}>
            {% if stripe_cards %}
            <div style="margin-bottom: 14px;">
                <label style="display: block; color: var(--color-muted); font-size: 13px; margin-bottom: 6px;" data-i18n="wallet_page.topup_amount">Top-up amount</label>
                <div style="position: relative;">
                    <span style="position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: #4ade80; font-weight: bold;">{{ currency_symbol }}</span>
                    <input type="number" id="auto-topup-amount"
                        style="width: 100%; padding: 10px 10px 10px 26px; background: var(--bg-page); border: 1px solid var(--color-border); border-radius: 6px; color: var(--color-text); font-size: 15px;"
                        value="{{ wallet.auto_topup_amount or '15' }}" step="0.01" min="10">
                </div>
            </div>
            <div style="margin-bottom: 14px;">
                <label style="display: block; color: var(--color-muted); font-size: 13px; margin-bottom: 6px;" data-i18n="wallet_page.trigger_below">Trigger when balance falls below</label>
                <div style="position: relative;">
                    <span style="position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: #ffc107; font-weight: bold;">{{ currency_symbol }}</span>
                    <input type="number" id="auto-topup-threshold"
                        style="width: 100%; padding: 10px 10px 10px 26px; background: var(--bg-page); border: 1px solid var(--color-border); border-radius: 6px; color: var(--color-text); font-size: 15px;"
                        value="{{ wallet.auto_topup_threshold or '5' }}" step="0.01" min="1">
                </div>
            </div>
            <div style="margin-bottom: 14px; color: var(--color-muted); font-size: 13px;">
                <i class="fab fa-cc-stripe me-1"></i>
                <span data-i18n="wallet_page.charged_to_card">Charged to your default credit card:</span>
                {% set default_card = stripe_cards | selectattr('is_default') | first | default(stripe_cards[0]) %}
                <strong style="color: var(--color-text);">•••• {{ default_card.last4 or '????'  }} ({{ default_card.brand | default('Card') | capitalize }})</strong>
            </div>
            <button id="save-auto-topup"
                style="background: var(--color-primary); border: none; color: white; padding: 10px 20px; border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 600; transition: background .15s;">
                <i class="fas fa-save me-2"></i><span data-i18n="wallet_page.save_settings">Save Settings</span>
            </button>
            {% else %}
            <div style="background: var(--bg-page); border: 1px solid var(--color-border); border-radius: 6px; padding: 16px; text-align: center;">
                <p style="color: var(--color-muted); margin: 0 0 12px 0; font-size: 13px;" data-i18n="wallet_page.no_card">
                    Auto top-up charges your saved credit card automatically.<br>You don't have a credit card on file yet.
                </p>
                <a href="{{ url_for(request, '/dashboard/billing') }}" class="btn" style="font-size: 13px; padding: 8px 16px;">
                    <i class="fab fa-cc-stripe me-2"></i><span data-i18n="wallet_page.add_credit_card">Add Credit Card</span>
                </a>
            </div>
            {% endif %}
        </div>

        {% if not wallet.auto_topup_enabled %}
        <div style="color: var(--color-muted); font-size: 13px; line-height: 1.6;" data-i18n="wallet_page.auto_topup_desc">
            Enable auto top-up to automatically reload your wallet when the balance drops below a threshold. This ensures uninterrupted API access.
        </div>
        {% endif %}
    </div>
</div>

<!-- Transaction History -->
<div style="background: var(--bg-panel); border: 2px solid var(--color-border); border-radius: 8px; padding: 20px;">
    <h3 style="margin: 0 0 20px 0; color: var(--color-link);">
        <i class="fas fa-history me-2"></i><span data-i18n="wallet_page.tx_history">Transaction History</span>
    </h3>

    <div style="overflow-x: auto;">
        <table style="width: 100%; border-collapse: collapse;">
            <thead>
                <tr style="background: var(--bg-accent); color: var(--color-text);">
                    <th style="padding: 12px 14px; text-align: left; font-weight: 600; border-bottom: 1px solid var(--bg-page);" data-i18n="wallet_page.col_date">Date</th>
                    <th style="padding: 12px 14px; text-align: left; font-weight: 600; border-bottom: 1px solid var(--bg-page);" data-i18n="wallet_page.col_type">Type</th>
                    <th style="padding: 12px 14px; text-align: left; font-weight: 600; border-bottom: 1px solid var(--bg-page);" data-i18n="wallet_page.col_description">Description</th>
                    <th style="padding: 12px 14px; text-align: right; font-weight: 600; border-bottom: 1px solid var(--bg-page);" data-i18n="wallet_page.col_amount">Amount</th>
                    <th style="padding: 12px 14px; text-align: center; font-weight: 600; border-bottom: 1px solid var(--bg-page);" data-i18n="wallet_page.col_status">Status</th>
                </tr>
            </thead>
            <tbody id="transaction-list">
                <tr id="tx-loading">
                    <td colspan="5" style="padding: 40px; text-align: center; color: var(--color-muted);">
                        <i class="fas fa-spinner fa-spin fa-2x"></i>
                        <div style="margin-top: 10px;">${window.i18n.t('wallet.loading_transactions')}</div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
<!-- Crypto deposit modal -->
<div class="ui-modal-backdrop" id="cryptoModal" style="z-index:1100;">
    <div class="ui-modal-box" style="max-width:420px;">
        <div class="ui-modal-header">
            <h3 id="cryptoModalTitle">Deposit</h3>
            <button class="close-modal" onclick="closeCryptoModal()">&times;</button>
        </div>
        <div style="text-align:center; padding: 0 0 16px;">
            <div id="cryptoQR" style="margin: 0 auto 16px; width:200px; height:200px; background:#fff; border-radius:8px; display:flex; align-items:center; justify-content:center;">
                <i class="fas fa-spinner fa-spin fa-2x" style="color:var(--bg-accent);"></i>
            </div>
            <div style="color:var(--color-muted); font-size:12px; margin-bottom:6px;" data-i18n="wallet.send_to_address">${window.i18n.t('wallet.send_to_address')}</div>
            <div id="cryptoAddress" style="font-family:monospace; font-size:12px; color:var(--color-text); word-break:break-all; background:var(--bg-page); padding:10px; border-radius:6px; margin-bottom:12px;"></div>
            <button onclick="copyCryptoAddress()"
                style="background:var(--color-primary); border:none; color:white; padding:8px 20px; border-radius:6px; cursor:pointer; font-size:13px; font-weight:600;">
                <i class="fas fa-copy me-1"></i><span data-i18n="wallet.copy_address">Copy Address</span>
            </button>
            <div style="color:var(--color-subtle); font-size:11px; margin-top:12px;" data-i18n="wallet.balance_credited">${window.i18n.t('wallet.balance_credited')}</div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<style>
.amount-btn:hover, .amount-btn.active {
    background: var(--color-link) !important;
    color: #fff !important;
    border-color: var(--color-link) !important;
}
.topup-fiat-btn[data-method="stripe"]:hover:not(:disabled) { background: #4f49d0 !important; }
.topup-fiat-btn[data-method="paypal"]:hover:not(:disabled)  { background: #00256b !important; }
#save-auto-topup:hover { background: var(--color-primary-hover) !important; }
#toggle-label.on     { background: var(--color-link) !important; }
#toggle-label.on #toggle-knob { transform: translateX(22px); }
</style>

<script>
let selectedAmount = 15;

document.addEventListener('DOMContentLoaded', function () {

    // ── Amount buttons ──────────────────────────────────────────

    document.querySelectorAll('.amount-btn').forEach(btn => {
        if (parseFloat(btn.dataset.amount) === selectedAmount) btn.classList.add('active');
        btn.addEventListener('click', function () {
            document.querySelectorAll('.amount-btn').forEach(b => b.classList.remove('active'));
            this.classList.add('active');
            selectedAmount = parseFloat(this.dataset.amount);
            document.getElementById('custom-amount').value = '';
        });
    });

    document.getElementById('custom-amount').addEventListener('input', function () {
        document.querySelectorAll('.amount-btn').forEach(b => b.classList.remove('active'));
        selectedAmount = parseFloat(this.value) || null;
    });

    function getAmount() {
        const custom = parseFloat(document.getElementById('custom-amount').value);
        return custom || selectedAmount;
    }

    // ── Fiat top-up buttons ─────────────────────────────────────
    document.querySelectorAll('.topup-fiat-btn').forEach(btn => {
        btn.addEventListener('click', function () {
            const amount = getAmount();
            if (!amount || amount < 5 || amount > 500) {
                showAlert(window.i18n.interpolate(window.i18n.t('wallet_page.invalid_amount'), {min: '{{ currency_symbol }}5', max: '{{ currency_symbol }}500'}), window.i18n.t('wallet_page.invalid_amount_title'), '⚠️', 'warn');
                return;
            }
            const method = this.dataset.method;
            const orig = this.innerHTML;
            this.disabled = true;
            this.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Processing…';
            fetch('/dashboard/wallet/topup', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ amount, payment_method: method })
            })
            .then(r => r.json())
            .then(data => {
                this.disabled = false;
                this.innerHTML = orig;
                let url = null;
                if (data.type === 'stripe' && data.checkout_url) url = data.checkout_url;
                else if (data.type === 'paypal' && data.approval_url) url = data.approval_url;

                if (url) {
                    const popup = window.open(url, 'payment_popup', 'width=600,height=700,scrollbars=yes,resizable=yes');
                    if (!popup) {
                        // Blocked by browser — open in new tab
                        window.open(url, '_blank');
                        return;
                    }
                    // Poll for popup close then reload wallet page
                    const timer = setInterval(() => {
                        if (popup.closed) {
                            clearInterval(timer);
                            window.location.reload();
                        }
                    }, 800);
                } else {
                    showAlert(data.error || window.i18n.t('wallet.failed_checkout'), 'Error', '❌', 'danger');
                }
            })
            .catch(() => {
                this.disabled = false;
                this.innerHTML = orig;
                showAlert(window.i18n.t('wallet.network_error'), 'Error', '❌', 'danger');
            });
        });
    });

    // ── Auto top-up toggle ──────────────────────────────────────
    const toggle   = document.getElementById('auto-topup-enabled');
    const label    = document.getElementById('toggle-label');
    const settings = document.getElementById('auto-topup-settings');

    function syncToggle() {
        if (toggle.checked) {
            label.classList.add('on');
            label.style.background = 'var(--color-link)';
            document.getElementById('toggle-knob').style.transform = 'translateX(22px)';
            settings.style.display = 'block';
        } else {
            label.classList.remove('on');
            label.style.background = 'var(--color-subtle)';
            document.getElementById('toggle-knob').style.transform = 'translateX(0)';
            settings.style.display = 'none';
        }
    }
    syncToggle();
    toggle.addEventListener('change', syncToggle);

    // ── Save auto top-up ────────────────────────────────────────
    document.getElementById('save-auto-topup').addEventListener('click', function () {
        const payload = {
            enabled:          toggle.checked,
            topup_amount:     parseFloat(document.getElementById('auto-topup-amount').value) || null,
            threshold_amount: parseFloat(document.getElementById('auto-topup-threshold').value) || null,
            payment_method:   'stripe'
        };
        fetch('/dashboard/wallet/auto-topup', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(payload)
        })
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                this.textContent = window.i18n.t('wallet.saved');
                setTimeout(() => { this.innerHTML = `<i class="fas fa-save me-2"></i>${window.i18n.t('wallet_page.save_settings')}`; }, 2000);
            } else {
                showAlert(data.error || window.i18n.t('wallet.save_failed'), 'Error', '❌', 'danger');
            }
        })
        .catch(() => showAlert(window.i18n.t('wallet.network_error'), 'Error', '❌', 'danger'));
    });

    // ── Transaction history ─────────────────────────────────────
    const typeLabels = {
        credit:  `<span style="color:#4ade80;">&#9650; ${window.i18n.t('wallet.credit')}</span>`,
        debit:   `<span style="color:#f87171;">&#9660; ${window.i18n.t('wallet.debit')}</span>`,
        refund:  `<span style="color:#60a5fa;">&#8617; ${window.i18n.t('wallet.refund')}</span>`,
        topup:   `<span style="color:#4ade80;">&#43; ${window.i18n.t('wallet.topup')}</span>`,
        payment: `<span style="color:#f87171;">&#8722; ${window.i18n.t('wallet.payment')}</span>`,
    };

    const statusBadge = {
        completed: 'background:#28a745;color:white;',
        pending:   'background:#ffc107;color:black;',
        failed:    'background:#dc3545;color:white;',
        refunded:  'background:#6c757d;color:white;',
    };

    const txLoading = document.getElementById('tx-loading');
    fetch('/dashboard/wallet/transactions')
        .then(r => {
            if (!r.ok) throw new Error('HTTP ' + r.status);
            return r.json();
        })
        .then(transactions => {
            const list = document.getElementById('transaction-list');
            if (txLoading && txLoading.parentNode) txLoading.remove();

            if (!Array.isArray(transactions) || transactions.length === 0) {
                list.innerHTML = `<tr><td colspan="5" style="padding:40px;text-align:center;color:var(--color-muted);">
                    <i class="fas fa-receipt fa-3x" style="margin-bottom:12px;display:block;"></i>
                    ${window.i18n.t('wallet.no_transactions')}
                </td></tr>`;
                return;
            }

            transactions.forEach((tx, i) => {
                const date = tx.created_at ? new Date(tx.created_at) : null;
                const dateStr  = date ? date.toLocaleDateString()  : '—';
                const timeStr  = date ? date.toLocaleTimeString([], {hour:'2-digit',minute:'2-digit'}) : '';
                const typeKey  = (tx.type || '').toLowerCase();
                const typeHtml = typeLabels[typeKey] || `<span style="color:var(--color-text);">${tx.type || '—'}</span>`;
                const amt      = parseFloat(tx.amount) || 0;
                const amtColor = amt >= 0 ? '#4ade80' : '#f87171';
                const amtStr   = (amt >= 0 ? '+' : '') + '$' + Math.abs(amt).toFixed(2);
                const status   = (tx.status || 'unknown').toLowerCase();
                const badgeStyle = statusBadge[status] || 'background:#6c757d;color:white;';
                const rowBg    = i % 2 === 0 ? 'var(--bg-page)' : 'var(--bg-panel)';

                const row = document.createElement('tr');
                row.style.cssText = `background:${rowBg};border-bottom:1px solid var(--color-border);`;
                row.innerHTML = `
                    <td style="padding:12px 14px;color:var(--color-text);">
                        <div style="font-weight:600;">${dateStr}</div>
                        <small style="color:var(--color-muted);">${timeStr}</small>
                    </td>
                    <td style="padding:12px 14px;">${typeHtml}</td>
                    <td style="padding:12px 14px;color:#c0c0c0;font-size:13px;">${tx.description || '—'}</td>
                    <td style="padding:12px 14px;text-align:right;font-weight:700;font-size:16px;color:${amtColor};">${amtStr}</td>
                    <td style="padding:12px 14px;text-align:center;">
                        <span style="${badgeStyle}padding:4px 10px;border-radius:10px;font-size:12px;white-space:nowrap;">${tx.status || 'unknown'}</span>
                    </td>`;
                list.appendChild(row);
            });
        })
        .catch(() => {
            const list = document.getElementById('transaction-list');
            if (txLoading && txLoading.parentNode) txLoading.remove();
            if (list) list.innerHTML =
                `<tr><td colspan="5" style="padding:30px;text-align:center;color:#f87171;">${window.i18n.t('wallet.failed_transactions')}</td></tr>`;
        });
});

function copyAddress(addr, btn) {
    navigator.clipboard.writeText(addr).then(() => {
        const orig = btn.innerHTML;
        btn.innerHTML = '<i class="fas fa-check me-1"></i>Copied!';
        btn.style.background = '#28a745';
        setTimeout(() => { btn.innerHTML = orig; btn.style.background = ''; }, 2000);
    }).catch(() => showAlert('Copy failed — please copy the address manually.', window.i18n.t('wallet.copy_failed_title'), '⚠️', 'warn'));
}

let _cryptoAddr = '';

function openCryptoModal(name) {
    const icons = { bitcoin: '₿ Bitcoin (BTC)', ethereum: 'Ξ Ethereum (ETH)', usdt: '₮ USDT', usdc: '◎ USDC' };
    document.getElementById('cryptoModalTitle').textContent = icons[name] || name.toUpperCase();
    document.getElementById('cryptoAddress').textContent = window.i18n.t('wallet.loading_address');
    _cryptoAddr = '';

    const qrEl = document.getElementById('cryptoQR');
    qrEl.innerHTML = '<i class="fas fa-spinner fa-spin fa-2x" style="color:var(--bg-accent);"></i>';

    document.getElementById('cryptoModal').classList.add('active');

    // Fetch a per-user deposit address from the server
    const customVal = parseFloat(document.getElementById('custom-amount').value);
    const amount = customVal || selectedAmount || 15;
    fetch('/dashboard/wallet/topup', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ amount, payment_method: name })
    })
    .then(r => r.json())
    .then(data => {
        if (data.error) {
            document.getElementById('cryptoAddress').textContent = data.error;
            qrEl.innerHTML = `<span style="color:#f87171;font-size:12px;">${window.i18n.t('wallet.error')}</span>`;
            return;
        }
        const address = data.address || '';
        _cryptoAddr = address;
        document.getElementById('cryptoAddress').textContent = address || window.i18n.t('wallet.address_unavailable');

        if (address) {
            const qrUrl = `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(address)}&bgcolor=ffffff&color=000000&margin=8`;
            const img = new Image();
            img.onload = () => { qrEl.innerHTML = ''; qrEl.appendChild(img); };
            img.onerror = () => { qrEl.innerHTML = `<span style="color:var(--color-subtle);font-size:12px;">${window.i18n.t('wallet.qr_unavailable')}</span>`; };
            img.src = qrUrl;
            img.style.cssText = 'width:200px;height:200px;border-radius:8px;';
        } else {
            qrEl.innerHTML = `<span style="color:var(--color-subtle);font-size:12px;">${window.i18n.t('wallet.no_address')}</span>`;
        }
    })
    .catch(() => {
        document.getElementById('cryptoAddress').textContent = window.i18n.t('wallet.address_unavailable');
        qrEl.innerHTML = `<span style="color:#f87171;font-size:12px;">${window.i18n.t('wallet.error')}</span>`;
    });
}

function closeCryptoModal() {
    document.getElementById('cryptoModal').classList.remove('active');
}

function copyCryptoAddress() {
    navigator.clipboard.writeText(_cryptoAddr)
        .then(() => showAlert(window.i18n.t('wallet.address_copied'), 'Copied', '✅', 'info'))
        .catch(() => showAlert(window.i18n.t('wallet.copy_failed'), window.i18n.t('wallet.copy_failed_title'), '⚠️', 'warn'));
}

document.getElementById('cryptoModal').addEventListener('click', e => {
    if (e.target === document.getElementById('cryptoModal')) closeCryptoModal();
});
</script>
{% endblock %}
