<?php
require_once __DIR__ . '/db/config.php';
require_once __DIR__ . '/includes/lang.php';
if (session_status() === PHP_SESSION_NONE) session_start();

$user = null;
if (isset($_SESSION['user_id'])) {
    $stmt = db()->prepare("SELECT * FROM users WHERE id = ?");
    $stmt->execute([$_SESSION['user_id']]);
    $user = $stmt->fetch();
}

if (!$user) {
    header('Location: /auth/login.php');
    exit;
}

require_once __DIR__ . '/includes/header.php';
require_once __DIR__ . '/includes/exchange.php';

// Fetch rates
$rates = get_exchange_rates();

// Fetch settings
$stmt = db()->query("SELECT setting_key, setting_value FROM system_settings");
$settings = $stmt->fetchAll(PDO::FETCH_KEY_PAIR);

$trc20_addr = $settings['usdt_trc20_address'] ?? 'TYv9V5J1P1eEwz7y3WqJg9M2yv7f7xXv3x';
$erc20_addr = $settings['usdt_erc20_address'] ?? '0x742d35Cc6634C0532925a3b844Bc454e4438f44e';
$bep20_addr = $settings['usdt_bep20_address'] ?? '0x742d35Cc6634C0532925a3b844Bc454e4438f44e';
?>

<div class="container py-4">
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <!-- Back Button -->
            <div class="mb-4">
                <a href="javascript:history.back()" class="text-white-50 text-decoration-none d-inline-flex align-items-center gap-2">
                    <i class="bi bi-arrow-left fs-4"></i>
                    <span><?= __('back') ?></span>
                </a>
            </div>

            <div class="card bg-surface border-secondary rounded-4 shadow-lg overflow-hidden mb-4">
                <div class="card-header border-secondary bg-black bg-opacity-30 p-4">
                    <h4 class="mb-0 fw-bold d-flex align-items-center gap-3 text-white">
                        <i class="bi bi-wallet2 text-primary"></i>
                        <?= __('recharge') ?>
                    </h4>
                </div>
                
                <div class="card-body p-4">
                    <!-- Tabs -->
                    <ul class="nav nav-pills nav-fill mb-4 bg-black p-1 rounded-pill" id="rechargeTabs" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active rounded-pill px-4" id="fiat-tab" data-bs-toggle="pill" data-bs-target="#fiat" type="button" role="tab"><?= __('fiat_recharge') ?></button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link rounded-pill px-4" id="crypto-tab" data-bs-toggle="pill" data-bs-target="#crypto" type="button" role="tab"><?= __('crypto_recharge') ?></button>
                        </li>
                    </ul>

                    <div class="tab-content" id="rechargeTabsContent">
                        <!-- Fiat Recharge -->
                        <div class="tab-pane fade show active" id="fiat" role="tabpanel">
                            <form id="fiatRechargeForm">
                                <div class="mb-4">
                                    <label class="form-label text-white-50 small fw-bold mb-2"><?= __('select_currency') ?></label>
                                    <select class="form-select bg-dark border-secondary text-white py-3" id="fiatCurrency" onchange="updateRate()">
                                        <?php
                                        $currencies = get_global_currencies();
                                        foreach ($currencies as $code => $info) {
                                            $rate = $rates[$code] ?? 1.0;
                                            echo "<option value=\"$code\" data-rate=\"$rate\">{$info['flag']} $code - {$info['name']}</option>";
                                        }
                                        ?>
                                    </select>
                                </div>

                                <div class="mb-4">
                                    <label class="form-label text-white-50 small fw-bold mb-2"><?= __('fiat_amount') ?></label>
                                    <div class="input-group">
                                        <input type="number" class="form-control bg-dark border-secondary text-white py-3" id="fiatAmount" placeholder="0.00" oninput="calculateUSDT()">
                                        <span class="input-group-text bg-dark border-secondary text-white-50 fw-bold" id="selectedCurrencyLabel">USD</span>
                                    </div>
                                </div>

                                <div class="mb-5 p-4 bg-primary bg-opacity-10 border border-primary border-opacity-20 rounded-4">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <span class="text-white-50"><?= __('est_usdt') ?></span>
                                        <span class="h4 mb-0 fw-bold text-primary" id="estUsdt">0.00 USDT</span>
                                    </div>
                                    <div class="mt-2 small text-white-50">
                                        <i class="bi bi-info-circle me-1"></i>
                                        <?= __('rate') ?>: 1 USDT ≈ <span id="currentRateText" class="text-white">1.00 USD</span>
                                    </div>
                                </div>

                                <button type="button" class="btn btn-primary w-100 py-3 rounded-pill fw-bold shadow-lg" onclick="confirmFiatOrder()">
                                    <?= __('confirm_order') ?>
                                </button>
                            </form>

                            <div class="mt-5 p-4 bg-black bg-opacity-20 rounded-4 border border-secondary border-opacity-50">
                                <h6 class="text-white fw-bold mb-3 d-flex align-items-center gap-2">
                                    <i class="bi bi-info-circle text-info"></i> <?= __('recharge_steps') ?>
                                </h6>
                                <ul class="text-white-50 small mb-0 ps-3">
                                    <li class="mb-2"><?= __('recharge_step1') ?></li>
                                    <li class="mb-2"><?= __('recharge_step2') ?></li>
                                    <li class="mb-2"><?= __('recharge_step3') ?></li>
                                    <li><?= __('recharge_step4') ?></li>
                                </ul>
                            </div>

                            <div class="bg-black bg-opacity-20 rounded-4 p-4 mt-4 border border-secondary border-opacity-50">
                                <h6 class="text-white fw-bold mb-3 d-flex align-items-center gap-2">
                                    <i class="bi bi-shield-check text-warning"></i> <?= __('security_tips') ?>
                                </h6>
                                <ul class="text-white-50 small mb-0 ps-3">
                                    <li class="mb-2"><?= __('recharge_tip1') ?></li>
                                    <li class="mb-2"><?= __('recharge_tip2') ?></li>
                                    <li><?= __('recharge_tip3') ?></li>
                                </ul>
                            </div>
                        </div>

                        <!-- Crypto Recharge -->
                        <div class="tab-pane fade" id="crypto" role="tabpanel">
                            <div class="mb-4">
                                <label class="form-label text-white-50 small fw-bold mb-2"><?= __('coin') ?></label>
                                <div class="d-flex align-items-center gap-3 p-3 bg-dark border border-secondary rounded-4">
                                    <img src="<?= getCoinIcon('USDT') ?>" width="32" height="32" alt="USDT" onerror="handleIconError(this, 'USDT')">
                                    <div>
                                        <div class="fw-bold text-white"><?= $lang === 'zh' ? __('USDT') : 'USDT' ?></div>
                                        <div class="text-white-50 small"><?= __('tether') ?></div>
                                    </div>
                                </div>
                            </div>

                            <div class="mb-4">
                                <label class="form-label text-white-50 small fw-bold mb-2"><?= __('select_network') ?></label>
                                <div class="d-flex gap-2" id="networkSelectors">
                                    <button type="button" class="btn btn-outline-primary active flex-fill py-2 rounded-3" onclick="selectNetwork('TRC20', '<?= $trc20_addr ?>')">TRC20</button>
                                    <button type="button" class="btn btn-outline-secondary flex-fill py-2 rounded-3" onclick="selectNetwork('ERC20', '<?= $erc20_addr ?>')">ERC20</button>
                                    <button type="button" class="btn btn-outline-secondary flex-fill py-2 rounded-3" onclick="selectNetwork('BEP20', '<?= $bep20_addr ?>')">BEP20</button>
                                </div>
                            </div>

                            <div class="mb-4 text-center">
                                <div class="p-3 bg-white rounded-4 d-inline-block mb-3 shadow-sm">
                                    <img id="qrCode" src="https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=<?= $trc20_addr ?>" width="150" height="150" alt="QR Code">
                                </div>
                                <div class="input-group">
                                    <input type="text" id="cryptoAddress" class="form-control bg-dark border-secondary text-white text-center py-3" value="<?= $trc20_addr ?>" readonly>
                                    <button class="btn btn-outline-primary px-4" type="button" onclick="copyAddress()"><?= __('copy') ?></button>
                                </div>
                                <p class="text-warning small mt-3 mb-0">
                                    <i class="bi bi-exclamation-triangle-fill me-1"></i>
                                    <?= __('crypto_recharge_warning') ?>
                                </p>
                            </div>

                            <div class="mb-4">
                                <label class="form-label text-white-50 small fw-bold mb-2"><?= __('recharge_amount') ?></label>
                                <div class="input-group">
                                    <input type="number" class="form-control bg-dark border-secondary text-white py-3" id="cryptoAmount" placeholder="0.00">
                                    <span class="input-group-text bg-dark border-secondary text-white-50 fw-bold">USDT</span>
                                </div>
                            </div>

                            <button type="button" class="btn btn-primary w-100 py-3 rounded-pill fw-bold shadow-lg" onclick="confirmCryptoOrder()">
                                <?= __('i_have_paid') ?>
                            </button>

                            <div class="mt-5 p-4 bg-black bg-opacity-20 rounded-4 border border-secondary border-opacity-50">
                                <h6 class="text-white fw-bold mb-3 d-flex align-items-center gap-2">
                                    <i class="bi bi-info-circle text-info"></i> <?= __('recharge_steps') ?>
                                </h6>
                                <ul class="text-white-50 small mb-0 ps-3">
                                    <li class="mb-2"><?= __('recharge_step1') ?></li>
                                    <li class="mb-2"><?= __('recharge_step2') ?></li>
                                    <li class="mb-2"><?= __('recharge_step3') ?></li>
                                    <li><?= __('recharge_step4') ?></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    @media (max-width: 768px) {
        .container { padding-left: 10px !important; padding-right: 10px !important; }
        .card-body { padding: 1.25rem !important; }
        .nav-pills .nav-link { padding: 10px 15px !important; font-size: 13px; }
        .h4 { font-size: 1.25rem !important; }
    }
</style>

<!-- Recharge Confirmation Modal -->
<div class="modal fade" id="rechargeModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1">
    <div class="modal-dialog modal-xl modal-dialog-centered">
        <div class="modal-content border-0 shadow-lg overflow-hidden" style="border-radius: 24px; background: #161a1e;">
            <div class="modal-body p-0">
                <div class="row g-0">
                    <!-- Left Side: Online Service -->
                    <div class="col-lg-6 d-flex flex-column border-end border-secondary border-opacity-20 order-2 order-lg-1 chat-column" style="background: #1c2127;">
                        <div class="p-4 border-bottom border-secondary border-opacity-20 bg-black bg-opacity-40">
                            <div class="d-flex align-items-center gap-3">
                                <div class="position-relative">
                                    <div class="bg-primary rounded-circle d-flex align-items-center justify-content-center shadow-lg" style="width: 48px; height: 48px; border: 2px solid rgba(255,255,255,0.1);">
                                        <i class="bi bi-headset text-white fs-4"></i>
                                    </div>
                                    <div class="position-absolute bottom-0 end-0 bg-success border border-2 border-dark rounded-circle" style="width: 14px; height: 14px;"></div>
                                </div>
                                <div class="flex-grow-1">
                                    <h6 class="mb-0 fw-bold text-white fs-5" style="letter-spacing: 0.5px;"><?= __('online_support') ?></h6>
                                    <div class="d-flex align-items-center gap-2 mt-1">
                                        <span class="badge bg-primary bg-opacity-20 text-primary border border-primary border-opacity-30 small px-2 py-1" style="font-size: 10px;"><?= __('online') ?></span>
                                        <span class="text-white opacity-50 small"><?= __('ip') ?></span> 
                                        <span class="text-info small fw-bold fw-mono" style="text-shadow: 0 0 5px rgba(0,210,255,0.3);"><?= getRealIP() ?></span>
                                    </div>
                                </div>
                                <button type="button" class="btn-close btn-close-white ms-auto shadow-none" data-bs-dismiss="modal"></button>
                            </div>
                        </div>

                        <div id="modal-chat-messages" class="flex-grow-1 p-4 overflow-y-auto" style="scrollbar-width: thin; background: #161a1e; min-height: 300px;">
                            <div class="text-center text-muted small mb-4 py-3 bg-white bg-opacity-5 rounded-3 border border-white border-opacity-5">
                                <i class="bi bi-shield-lock-fill text-success me-2"></i><?= __('welcome_support') ?>
                            </div>
                        </div>

                        <div class="p-4 bg-black bg-opacity-40 border-top border-secondary border-opacity-20 shadow-lg">
                            <form id="modal-chat-form" class="d-flex gap-2 align-items-center">
                                <input type="file" id="modal-chat-file" class="d-none" accept="image/*">
                                <button type="button" id="modal-chat-upload" class="btn btn-dark border-secondary border-opacity-50 rounded-circle d-flex align-items-center justify-content-center hover-scale transition-all" style="width: 42px; height: 42px; min-width: 42px; background: #2a2f35;">
                                    <i class="bi bi-plus-lg text-white fs-5"></i>
                                </button>
                                <div class="flex-grow-1 position-relative">
                                    <input type="text" id="modal-chat-input" class="form-control bg-dark border-0 text-white py-2 ps-3 rounded-pill shadow-none" placeholder="<?= __('type_message') ?>" style="height: 42px; background: #2a2f35 !important; border: 1px solid rgba(255,255,255,0.05) !important;">
                                </div>
                                <button type="submit" class="btn btn-primary rounded-circle d-flex align-items-center justify-content-center shadow-lg hover-scale transition-all" style="width: 42px; height: 42px; min-width: 42px;">
                                    <i class="bi bi-send-fill text-white"></i>
                                </button>
                            </form>
                        </div>
                    </div>

                        <!-- Right Side: Account Matching -->
                    <div class="col-lg-6 p-4 p-lg-5 d-flex flex-column justify-content-center info-side position-relative overflow-hidden order-1">
                        <!-- Vibrant & Coordinated Background -->
                        <div class="position-absolute top-0 start-0 w-100 h-100 vibrancy-bg"></div>
                        <div class="position-absolute top-0 start-0 w-100 h-100 bg-black bg-opacity-40" style="z-index: 1; backdrop-filter: blur(5px);"></div>
                        
                        <div class="text-center text-lg-start position-relative" style="z-index: 2;">
                            <div class="mb-4">
                                <div class="d-inline-flex align-items-center gap-2 px-3 py-2 rounded-pill bg-primary bg-opacity-20 text-white small fw-bold mb-3 border border-primary border-opacity-30 shadow-lg" style="backdrop-filter: blur(10px);">
                                    <span class="pulse-dot-white"></span> <span style="letter-spacing: 1px;">正在分配中</span>
                                </div>
                                <h2 class="fw-bold text-white mb-3 text-shadow-ultra" style="font-size: 2.2rem; line-height: 1.2;"><?= __('matching_account') ?></h2>
                                <div class="p-3 rounded-4 bg-white bg-opacity-5 border border-white border-opacity-10 mb-4">
                                    <p class="text-white fw-medium mb-0" style="font-size: 15px; line-height: 1.6; opacity: 0.9;">
                                        <?= __('matching_desc') ?>
                                    </p>
                                </div>
                            </div>

                            <div class="mb-4 py-4 px-4 rounded-4 shadow-2xl border border-white border-opacity-10" style="background: rgba(0,0,0,0.3); backdrop-filter: blur(20px);">
                                <div class="row align-items-center text-center text-lg-start">
                                    <div class="col-lg-7 mb-3 mb-lg-0">
                                        <div class="text-white-50 small mb-1 fw-bold">等待倒计时</div>
                                        <div class="display-5 fw-bold text-warning tracking-wider text-shadow-glow mb-0" id="modal-countdown" style="font-family: 'Monaco', 'Consolas', monospace;">30:00</div>
                                    </div>
                                    <div class="col-lg-5 border-start border-white border-opacity-10 ps-lg-4">
                                        <div class="text-white-50 small mb-2 fw-bold">安全加密通道</div>
                                        <div class="d-flex justify-content-center justify-content-lg-start gap-1 mb-2">
                                            <div class="bg-success rounded-pill shadow-glow-green" style="width: 20px; height: 6px;"></div>
                                            <div class="bg-success rounded-pill shadow-glow-green" style="width: 20px; height: 6px;"></div>
                                            <div class="bg-success rounded-pill shadow-glow-green" style="width: 20px; height: 6px;"></div>
                                            <div class="bg-success rounded-pill shadow-glow-green" style="width: 20px; height: 6px;"></div>
                                        </div>
                                        <div class="text-success fw-bold small text-shadow-glow-sm" style="letter-spacing: 1px;">高级加密已开启</div>
                                    </div>
                                </div>
                            </div>

                            <div class="p-4 rounded-4 bg-black bg-opacity-40 border border-white border-opacity-5">
                                <h6 class="text-white fw-bold mb-3 d-flex align-items-center gap-2" style="font-size: 15px; letter-spacing: 0.5px;">
                                    <i class="bi bi-shield-lock-fill text-warning fs-5"></i> 温馨提示
                                </h6>
                                <div class="text-white-50 small lh-lg" style="font-size: 13.5px !important; font-weight: 400;">
                                    <div class="mb-2 d-flex gap-3 instruction-item p-2 rounded">
                                        <i class="bi bi-info-circle-fill text-primary"></i> 
                                        <span><?= __('recharge_instruction_1') ?></span>
                                    </div>
                                    <div class="mb-2 d-flex gap-3 instruction-item p-2 rounded">
                                        <i class="bi bi-info-circle-fill text-primary"></i> 
                                        <span><?= __('recharge_instruction_2') ?></span>
                                    </div>
                                    <div class="d-flex gap-3 instruction-item p-2 rounded">
                                        <i class="bi bi-info-circle-fill text-primary"></i> 
                                        <span><?= __('recharge_instruction_3') ?></span>
                                    </div>
                                </div>
                                <div class="mt-4">
                                    <button type="button" class="btn btn-outline-light w-100 rounded-pill py-2 fw-bold opacity-50" disabled>
                                        等待系统分配账户...
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.vibrancy-bg {
    background: linear-gradient(135deg, #0f172a 0%, #1e40af 25%, #0369a1 50%, #0d9488 75%, #059669 100%);
    background-size: 400% 400%;
    animation: gradientFlow 6s ease-in-out infinite;
}
@keyframes gradientFlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.text-shadow-ultra { 
    text-shadow: 0 0 10px rgba(0,0,0,0.8), 0 0 20px rgba(0,0,0,0.5), 0 4px 12px rgba(0,0,0,0.9); 
    letter-spacing: 0.5px;
}
.text-shadow-heavy { 
    text-shadow: 2px 2px 10px rgba(0,0,0,0.9), 0 0 5px rgba(0,0,0,0.7);
    font-weight: 800 !important;
}
.text-shadow-medium { 
    text-shadow: 1px 1px 5px rgba(0,0,0,0.8);
    font-weight: 600 !important;
}
.text-shadow-glow { 
    text-shadow: 0 0 20px rgba(255,193,7,0.7), 0 0 10px rgba(255,193,7,0.4), 2px 2px 4px rgba(0,0,0,0.9); 
}
.text-shadow-glow-sm { 
    text-shadow: 0 0 10px rgba(40,167,69,0.7), 1px 1px 3px rgba(0,0,0,0.9); 
}
.shadow-glow-green { box-shadow: 0 0 25px rgba(40,167,69,0.5); }
.shadow-2xl { box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.8); }

.payment-item .h5, .payment-item .h4 {
    letter-spacing: 0.5px;
}

.payment-item .btn-light {
    background: rgba(255,255,255,0.9);
    border: none;
    color: #1e3a8a;
}
.payment-item .btn-light:hover {
    background: #ffffff;
    transform: translateY(-1px);
}

.hover-scale-sm:hover { transform: translateX(5px); background: rgba(0,0,0,0.4) !important; }

.pulse-dot-white {
    width: 8px;
    height: 8px;
    background-color: #fff;
    border-radius: 50%;
    display: inline-block;
    animation: dot-pulse-white 1.5s infinite;
    box-shadow: 0 0 8px rgba(255,255,255,0.8);
}
@keyframes dot-pulse-white {
    0% { transform: scale(0.95); opacity: 0.6; }
    50% { transform: scale(1.3); opacity: 1; }
    100% { transform: scale(0.95); opacity: 0.6; }
}

#modal-chat-messages::-webkit-scrollbar {
    width: 6px;
}
#modal-chat-messages::-webkit-scrollbar-track {
    background: transparent;
}
#modal-chat-messages::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.1);
    border-radius: 10px;
}
#modal-chat-messages::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.2);
}
.modal-msg .msg-bubble {
    backdrop-filter: blur(5px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
@media (max-width: 992px) {
    .chat-column { display: none !important; }
    .info-side { 
        width: 100% !important; 
        min-height: 100vh !important;
        border-radius: 24px !important;
    }
    .modal-dialog { margin: 0; }
    .modal-content { border-radius: 0; height: 100vh; }
}

/* Premium Desktop Styling */
.modal-content {
    box-shadow: 0 0 50px rgba(0,0,0,0.5), 0 0 100px rgba(0,123,255,0.1) !important;
}
.info-side {
    background: #1c2127;
    border-radius: 0 24px 24px 0;
}
@media (max-width: 992px) {
    .info-side { border-radius: 24px; }
}
.text-shadow-ultra { 
    text-shadow: 0 4px 15px rgba(0,0,0,0.6), 0 0 40px rgba(0,123,255,0.4);
    letter-spacing: 1px;
    font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.tracking-wider { 
    letter-spacing: 0.15em; 
}
.vibrancy-bg {
    background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 30%, #1e40af 60%, #1d4ed8 100%);
    opacity: 0.85;
}
.instruction-item {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(5px);
}
.instruction-item:hover {
    background: rgba(255,255,255,0.08);
    transform: translateX(8px);
    border-color: rgba(255,255,255,0.15);
}
.display-5 {
    font-size: 3.5rem;
    font-weight: 800;
}
@media (min-width: 992px) {
    .modal-xl {
        max-width: 1000px;
    }
}
</style>

<script>
let currentNetwork = 'TRC20';
let currentAddress = '<?= $trc20_addr ?>';

function notify(icon, title, text = '') {
    return Swal.fire({
        icon: icon,
        title: title,
        text: text,
        background: '#1e2329',
        color: '#fff',
        confirmButtonColor: '#0062ff',
        confirmButtonText: '<?= __("confirm") ?>'
    });
}

function updateRate() {
    const select = document.getElementById('fiatCurrency');
    const symbol = select.value;
    const rate = select.options[select.selectedIndex].getAttribute('data-rate');
    document.getElementById('selectedCurrencyLabel').innerText = symbol;
    document.getElementById('currentRateText').innerText = `${rate} ${symbol}`;
    calculateUSDT();
}

function calculateUSDT() {
    const amount = parseFloat(document.getElementById('fiatAmount').value) || 0;
    const select = document.getElementById('fiatCurrency');
    const rate = parseFloat(select.options[select.selectedIndex].getAttribute('data-rate'));
    const est = amount / rate;
    document.getElementById('estUsdt').innerText = est.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2}) + ' USDT';
}

function selectNetwork(net, addr) {
    currentNetwork = net;
    currentAddress = addr;
    
    // Update UI
    const btns = document.querySelectorAll('#networkSelectors button');
    btns.forEach(btn => {
        if (btn.innerText === net) {
            btn.classList.add('active', 'btn-outline-primary');
            btn.classList.remove('btn-outline-secondary');
        } else {
            btn.classList.remove('active', 'btn-outline-primary');
            btn.classList.add('btn-outline-secondary');
        }
    });
    
    document.getElementById('cryptoAddress').value = addr;
    document.getElementById('qrCode').src = `https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=${addr}`;
}

const userId = '<?= $user['uid'] ?? $user['id'] ?>';
let rechargeCountdownInterval;
let modalChatLastIds = new Set();
let remainingSeconds = 1800;

function saveRechargeState(state) {
    localStorage.setItem('recharge_state', JSON.stringify({
        ...state,
        timestamp: Date.now(),
        remainingSeconds: remainingSeconds
    }));
}

function clearRechargeState() {
    localStorage.removeItem('recharge_state');
    if (rechargeCountdownInterval) clearInterval(rechargeCountdownInterval);
}

function finishTransfer() {
    clearRechargeState();
    bootstrap.Modal.getInstance(document.getElementById('rechargeModal'))?.hide();
    notify('success', '<?= __("recharge_success_title") ?>', '<?= __("recharge_success_text") ?>');
}

function openRechargeModal(initialMessage, isRestore = false) {
    const modalElement = document.getElementById('rechargeModal');
    const modal = new bootstrap.Modal(modalElement);
    modal.show();
    
    if (!isRestore) {
        remainingSeconds = 1800;
        saveRechargeState({ phase: 'matching', initialMessage });
    }
    
    // Start countdown
    const display = document.getElementById('modal-countdown');
    if (rechargeCountdownInterval) clearInterval(rechargeCountdownInterval);
    rechargeCountdownInterval = setInterval(() => {
        let mins = Math.floor(remainingSeconds / 60);
        let secs = remainingSeconds % 60;
        if (display) display.innerText = `${mins}:${secs < 10 ? '0' : ''}${secs}`;
        
        const state = JSON.parse(localStorage.getItem('recharge_state') || '{}');
        state.remainingSeconds = remainingSeconds;
        localStorage.setItem('recharge_state', JSON.stringify(state));

        if (--remainingSeconds < 0) {
            clearInterval(rechargeCountdownInterval);
        }
    }, 1000);

    // Clear chat last ids for new session if not restoring
    if (!isRestore) {
        modalChatLastIds.clear();
        document.getElementById('modal-chat-messages').innerHTML = `
            <div class="text-center text-muted small mb-4 py-3 bg-white bg-opacity-5 rounded-3 border border-white border-opacity-5">
                <i class="bi bi-shield-lock-fill text-success me-2"></i><?= __('welcome_support') ?>
            </div>
        `;

        // Ping first to register visitor, then send message to ensure visibility
        const userTime = new Date().toLocaleString('zh-CN');
        fetch(`/api/chat.php?action=ping&user_time=${encodeURIComponent(userTime)}`)
            .then(() => {
                // Append locally first
                appendModalMessage({
                    id: 'modal_temp_init_' + Date.now(),
                    sender: 'user',
                    message: initialMessage,
                    created_at: new Date().toISOString()
                });
                // Then send to server
                return sendModalMessage(initialMessage);
            })
            .catch(err => console.error('Initial sequence failed:', err));
    }
    
    // Start polling for modal
    initModalChat();
}

document.addEventListener('DOMContentLoaded', () => {
    const savedState = localStorage.getItem('recharge_state');
    if (savedState) {
        const state = JSON.parse(savedState);
        const elapsed = Math.floor((Date.now() - state.timestamp) / 1000);
        remainingSeconds = (state.remainingSeconds || 1800) - elapsed;
        
        if (remainingSeconds > 0) {
            if (state.phase === 'matched') {
                openRechargeModal(state.initialMessage, true);
                updateMatchingSide(state.info, true);
            } else {
                openRechargeModal(state.initialMessage, true);
            }
        } else {
            localStorage.removeItem('recharge_state');
        }
    }
});

let modalChatPolling = false;

function initModalChat() {
    if (modalChatPolling) return; // Prevent multiple polling loops
    modalChatPolling = true;

    const modalChatForm = document.getElementById('modal-chat-form');
    const modalChatInput = document.getElementById('modal-chat-input');
    const modalChatUpload = document.getElementById('modal-chat-upload');
    const modalChatFile = document.getElementById('modal-chat-file');

    modalChatUpload.onclick = () => modalChatFile.click();

    modalChatFile.onchange = async () => {
        if (!modalChatFile.files[0]) return;
        const file = modalChatFile.files[0];
        
        const tempId = 'modal_temp_img_' + Date.now();
        const localUrl = URL.createObjectURL(file);
        appendModalMessage({
            id: tempId,
            sender: 'user',
            message: `<img src="${localUrl}" class="img-fluid rounded" style="max-width: 100%; max-height: 250px; opacity: 0.6;">`,
            created_at: new Date().toISOString()
        });
        scrollModalToBottom();

        const formData = new FormData();
        formData.append('file', file);
        formData.append('action', 'upload_image');

        try {
            const resp = await fetch('/api/chat.php', { method: 'POST', body: formData });
            const data = await resp.json();
            document.querySelector(`[data-modal-id="${tempId}"]`)?.remove();
            if (data.success) {
                appendModalMessage(data.message);
                scrollModalToBottom();
            }
        } catch (err) { console.error(err); }
        modalChatFile.value = '';
        setTimeout(() => URL.revokeObjectURL(localUrl), 5000);
    };

    modalChatForm.onsubmit = async (e) => {
        e.preventDefault();
        const msg = modalChatInput.value.trim();
        if (!msg) return;
        modalChatInput.value = '';
        
        const tempId = 'modal_temp_msg_' + Date.now();
        appendModalMessage({
            id: tempId,
            sender: 'user',
            message: msg,
            created_at: new Date().toISOString()
        });
        scrollModalToBottom();

        try {
            const resp = await fetch('/api/chat.php?action=send_message', {
                method: 'POST',
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                body: `message=${encodeURIComponent(msg)}`
            });
            const data = await resp.json();
            document.querySelector(`[data-modal-id="${tempId}"]`)?.remove();
            if (data.success) {
                appendModalMessage(data.message);
                scrollModalToBottom();
            }
        } catch (err) { console.error(err); }
    };

    // Modal Polling
    const modalPoll = async () => {
        if (!document.getElementById('rechargeModal').classList.contains('show')) return;
        try {
            // Periodic ping to keep session alive and visitor status active
            fetch(`/api/chat.php?action=ping&user_time=${encodeURIComponent(new Date().toLocaleString())}`);

            const resp = await fetch('/api/chat.php?action=get_messages');
            const data = await resp.json();
            if (Array.isArray(data)) {
                data.forEach(m => {
                    if (!modalChatLastIds.has(m.id)) {
                        appendModalMessage(m);
                        modalChatLastIds.add(m.id);
                        scrollModalToBottom();
                    }
                });
            }
        } catch (err) {}
        setTimeout(modalPoll, 1000);
    };
    modalPoll();
}

async function sendModalMessage(msg) {
    try {
        await fetch('/api/chat.php?action=send_message', {
            method: 'POST',
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
            body: `message=${encodeURIComponent(msg)}`
        });
    } catch (err) {}
}

function appendModalMessage(m) {
    const container = document.getElementById('modal-chat-messages');
    if (!container || document.querySelector(`[data-modal-id="${m.id}"]`)) return;

    const sender = m.sender;
    const text = m.message;
    let displayMsg = text;
    const isImage = text.indexOf('<img') !== -1;

    // Check for payment info
    if (sender === 'admin' && text.startsWith('[PAYMENT_INFO]')) {
        try {
            const info = JSON.parse(text.replace('[PAYMENT_INFO]', ''));
            updateMatchingSide(info);
            
            displayMsg = `
                <div class="payment-card bg-white bg-opacity-10 border border-white border-opacity-20 rounded-4 p-3 shadow-sm" style="min-width: 220px;">
                    <div class="d-flex align-items-center gap-2 mb-3 text-warning fw-bold small">
                        <i class="bi bi-check-circle-fill"></i> 匹配成功
                    </div>
                    <div class="mb-2">
                        <div class="text-white-50" style="font-size: 10px;">银行名称</div>
                        <div class="text-white fw-bold small">${info.bank}</div>
                    </div>
                    <div class="mb-2">
                        <div class="text-white-50" style="font-size: 10px;">收款账户</div>
                        <div class="text-white fw-bold small" style="word-break: break-all; font-family: monospace;">${info.account}</div>
                    </div>
                    <div class="mb-2">
                        <div class="text-white-50" style="font-size: 10px;">收款姓名</div>
                        <div class="text-white fw-bold small">${info.name}</div>
                    </div>
                    ${info.note ? `
                    <div class="mt-2 pt-2 border-top border-white border-opacity-10">
                        <div class="text-warning fw-bold" style="font-size: 10px;"><i class="bi bi-info-circle me-1"></i>备注</div>
                        <div class="text-white-50 small" style="font-size: 11px;">${info.note}</div>
                    </div>` : ''}
                </div>
            `;
        } catch (e) {
            console.error('Failed to parse payment info', e);
            displayMsg = '[支付信息数据错误]';
        }
    }
    let timeStr = '';
    try {
        if (m.created_at) {
            const dateObj = m.created_at.includes('-') ? new Date(m.created_at.replace(/-/g, "/")) : new Date(m.created_at);
            timeStr = dateObj.toLocaleTimeString('zh-CN', {hour:'2-digit', minute:'2-digit'});
        } else {
            timeStr = new Date().toLocaleTimeString('zh-CN', {hour:'2-digit', minute:'2-digit'});
        }
    } catch(e) {
        timeStr = '--:--';
    }

    const html = `
        <div class="mb-3 d-flex flex-column ${sender === 'user' ? 'align-items-end' : 'align-items-start'} modal-msg" data-modal-id="${m.id}">
            <div class="msg-bubble p-2 px-3 rounded-4 small ${sender === 'user' ? 'bg-primary text-white' : 'bg-dark text-white border border-secondary border-opacity-30'}" style="max-width: 85%; position: relative; ${isImage ? 'padding: 5px !important; line-height: 0;' : 'padding-bottom: 22px !important;'}">
                <div class="message-content" style="text-shadow: 0 1px 2px rgba(0,0,0,0.2); font-size: 14px; line-height: 1.5;">
                    ${displayMsg}
                </div>
                <div style="font-size: 9px; opacity: 0.6; position: absolute; bottom: 4px; ${sender === 'user' ? 'right: 12px;' : 'left: 12px;'} ${isImage ? 'background: rgba(0,0,0,0.5); padding: 2px 6px; border-radius: 4px; bottom: 8px;' : ''}">${timeStr}</div>
            </div>
        </div>
    `;
    container.insertAdjacentHTML('beforeend', html);
    modalChatLastIds.add(m.id);
}

function updateMatchingSide(info, isRestore = false) {
    const side = document.querySelector('.info-side');
    if (!side) return;

    if (rechargeCountdownInterval) clearInterval(rechargeCountdownInterval);
    
    if (!isRestore) {
        const state = JSON.parse(localStorage.getItem('recharge_state') || '{}');
        saveRechargeState({ ...state, phase: 'matched', info });
    }

    side.innerHTML = `
        <div class="position-absolute top-0 start-0 w-100 h-100 vibrancy-bg"></div>
        <div class="position-absolute top-0 start-0 w-100 h-100 bg-black bg-opacity-40" style="z-index: 1; backdrop-filter: blur(2px);"></div>
        <div class="text-center text-lg-start fade-in position-relative" style="z-index: 2;">
            <div class="mb-4">
                <div class="d-inline-flex align-items-center gap-2 px-3 py-1 rounded-pill bg-white bg-opacity-20 text-white small fw-bold mb-3 border border-white border-opacity-30 shadow-sm" style="backdrop-filter: blur(10px);">
                    <i class="bi bi-check-circle-fill text-success"></i> <?= __('account_matched') ?>
                </div>
                <h2 class="fw-bold text-white mb-3 text-shadow-ultra" style="font-size: 2.5rem;"><?= __('account_matched') ?></h2>
                <div class="p-3 rounded-4 bg-black bg-opacity-30 border border-white border-opacity-10 mb-4">
                    <p class="text-white fw-bold opacity-90 text-shadow-heavy mb-0" style="line-height: 1.6; font-size: 16px;">
                        <?= __('account_matched_desc') ?>
                    </p>
                </div>
            </div>

            <div class="mb-4 p-4 rounded-4 shadow-2xl border border-white border-opacity-30" style="background: rgba(255,255,255,0.1); backdrop-filter: blur(40px);">
                <div class="d-flex flex-column gap-4">
                    <div class="payment-item">
                        <div class="text-white small mb-1 fw-bold text-shadow-medium"><?= __('bank_name') ?></div>
                        <div class="d-flex justify-content-between align-items-center gap-3">
                            <div class="h5 mb-0 fw-bold text-white text-shadow-heavy" style="word-break: break-all;">${info.bank}</div>
                            <button class="btn btn-sm btn-light rounded-pill px-3 fw-bold shadow-sm flex-shrink-0" onclick="copyText('${info.bank}')"><?= __('copy_info') ?></button>
                        </div>
                    </div>
                    <div class="payment-item border-top border-white border-opacity-20 pt-3">
                        <div class="text-white small mb-1 fw-bold text-shadow-medium"><?= __('account_number') ?></div>
                        <div class="d-flex justify-content-between align-items-center gap-3">
                            <div class="h4 mb-0 fw-bold text-warning tracking-wider text-shadow-glow" style="word-break: break-all; font-family: 'Courier New', monospace;">${info.account}</div>
                            <button class="btn btn-sm btn-warning rounded-pill px-3 shadow-lg fw-bold flex-shrink-0" onclick="copyText('${info.account}')"><?= __('copy_info') ?></button>
                        </div>
                    </div>
                    <div class="payment-item border-top border-white border-opacity-20 pt-3">
                        <div class="text-white small mb-1 fw-bold text-shadow-medium"><?= __('payee_name') ?></div>
                        <div class="d-flex justify-content-between align-items-center gap-3">
                            <div class="h5 mb-0 fw-bold text-white text-shadow-heavy" style="word-break: break-all;">${info.name}</div>
                            <button class="btn btn-sm btn-light rounded-pill px-3 fw-bold shadow-sm flex-shrink-0" onclick="copyText('${info.name}')"><?= __('copy_info') ?></button>
                        </div>
                    </div>
                    ${info.note ? `
                    <div class="payment-item border-top border-white border-opacity-20 pt-3">
                        <div class="text-warning small mb-1 fw-bold"><i class="bi bi-exclamation-circle me-1"></i><?= __('transfer_note') ?></div>
                        <div class="d-flex justify-content-between align-items-center gap-3">
                            <div class="fw-bold text-warning text-shadow-glow-sm" style="word-break: break-all;">${info.note}</div>
                            <button class="btn btn-sm btn-warning text-dark rounded-pill px-3 fw-bold shadow-sm flex-shrink-0" onclick="copyText('${info.note}')"><?= __('copy_info') ?></button>
                        </div>
                    </div>` : ''}
                </div>
            </div>

            <div class="space-y-4">
                <h6 class="text-white fw-bold mb-3 d-flex align-items-center gap-2 text-shadow-heavy">
                    <i class="bi bi-info-circle-fill text-white fs-5"></i> <?= __('transfer_steps_title') ?>
                </h6>
                <div class="d-flex flex-column gap-3 mb-4">
                    <div class="d-flex gap-3 align-items-start p-3 rounded-3 bg-white bg-opacity-10 border border-white border-opacity-20 shadow-sm hover-scale-sm" style="backdrop-filter: blur(10px);">
                        <div class="fw-bold text-warning fs-5 text-shadow-glow-sm" style="min-width: 25px;">01</div>
                        <div class="text-white small lh-base fw-bold text-shadow-medium"><?= __('recharge_instruction_4') ?></div>
                    </div>
                    <div class="d-flex gap-3 align-items-start p-3 rounded-3 bg-white bg-opacity-10 border border-white border-opacity-20 shadow-sm hover-scale-sm" style="backdrop-filter: blur(10px);">
                        <div class="fw-bold text-warning fs-5 text-shadow-glow-sm" style="min-width: 25px;">02</div>
                        <div class="text-white small lh-base fw-bold text-shadow-medium"><?= __('recharge_instruction_5') ?></div>
                    </div>
                </div>
                <button type="button" class="btn btn-warning w-100 rounded-pill py-3 fw-bold shadow-lg" onclick="finishTransfer()">
                    <?= __('finished_transfer') ?>
                </button>
            </div>
        </div>
    `;
}

function copyText(text) {
    const el = document.createElement('textarea');
    el.value = text;
    document.body.appendChild(el);
    el.select();
    document.execCommand('copy');
    document.body.removeChild(el);
    
    Swal.fire({
        icon: 'success',
        title: '<?= __("copy_success") ?>',
        toast: true,
        position: 'top-end',
        showConfirmButton: false,
        timer: 2000,
        background: '#1e2329',
        color: '#fff'
    });
}

function scrollModalToBottom() {
    const container = document.getElementById('modal-chat-messages');
    if (container) container.scrollTop = container.scrollHeight;
}

function confirmFiatOrder() {
    const amountInput = document.getElementById('fiatAmount');
    const amount = parseFloat(amountInput.value);
    const select = document.getElementById('fiatCurrency');
    const currency = select.value;
    const rate = parseFloat(select.options[select.selectedIndex].getAttribute('data-rate'));
    
    if (isNaN(amount) || amount <= 0) {
        notify('warning', '<?= __("enter_amount") ?>');
        return;
    }

    const estUsdt = amount / rate;
    
    // Show loading state
    const btn = event.target;
    const originalText = btn.innerHTML;
    btn.disabled = true;
    btn.innerHTML = `<span class="spinner-border spinner-border-sm me-2"></span>${originalText}`;

    const formData = new FormData();
    formData.append('action', 'recharge');
    formData.append('amount', estUsdt); 
    formData.append('symbol', 'USDT');
    formData.append('fiat_amount', amount);
    formData.append('fiat_currency', currency);
    formData.append('method', '<?= __('fiat_recharge') ?> (' + currency + ')');
    
    fetch('/api/finance.php', {
        method: 'POST',
        body: formData
    })
    .then(r => r.json())
    .then(data => {
        btn.disabled = false;
        btn.innerHTML = originalText;
        if (data.success) {
            let message = `<?= __('recharge_msg_fiat') ?>`;
            const preciseRes = (amount / rate).toFixed(4);
            message = message.replace('%uid%', userId)
                           .replace('%amount%', amount)
                           .replace('%currency%', currency)
                           .replace('%rate%', rate)
                           .replace('%res%', preciseRes);
            openRechargeModal(message);
        } else {
            notify('error', data.error || '<?= __('request_failed') ?>');
        }
    })
    .catch(() => {
        btn.disabled = false;
        btn.innerHTML = originalText;
    });
}

function confirmCryptoOrder() {
    const amountInput = document.getElementById('cryptoAmount');
    const amount = parseFloat(amountInput.value);
    const btn = event.target;
    
    if (isNaN(amount) || amount <= 0) {
        notify('warning', '<?= __("enter_amount") ?>');
        return;
    }

    const originalText = btn.innerHTML;
    btn.disabled = true;
    btn.innerHTML = `<span class="spinner-border spinner-border-sm me-2"></span>${originalText}`;

    const formData = new FormData();
    formData.append('action', 'recharge');
    formData.append('amount', amount);
    formData.append('symbol', 'USDT');
    formData.append('method', currentNetwork);
    
    fetch('/api/finance.php', {
        method: 'POST',
        body: formData
    })
    .then(r => r.json())
    .then(async data => {
        btn.disabled = false;
        btn.innerHTML = originalText;
        if (data.success) {
            let message = `<?= __('recharge_msg_crypto') ?>`;
            message = message.replace('%uid%', userId)
                           .replace('%amount%', amount)
                           .replace('%network%', currentNetwork);
            
            // Send message to CS quietly for USDT
            await sendModalMessage(message);
            
            notify('success', '<?= __("recharge_success_title") ?>', '<?= __("recharge_success_text") ?>');
            amountInput.value = '';
        } else {
            notify('error', data.error || '<?= __('request_failed') ?>');
        }
    })
    .catch(() => {
        btn.disabled = false;
        btn.innerHTML = originalText;
    });
}

function sendToCS(message) {
    // Legacy support or fallback
    openRechargeModal(message);
}

function copyAddress() {
    const addr = document.getElementById('cryptoAddress');
    addr.select();
    document.execCommand('copy');
    Swal.fire({
        icon: 'success',
        title: '<?= __("copy_success") ?>',
        toast: true,
        position: 'top-end',
        showConfirmButton: false,
        timer: 3000,
        timerProgressBar: true,
        background: '#1e2329',
        color: '#fff'
    });
}
</script>

<?php require_once __DIR__ . '/includes/footer.php'; ?>
