<?php
require_once dirname(__DIR__) . '/config.php';
requireEncryptLogin();

$user = getEncryptUser();
$error = '';
$success = '';

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $amount = floatval($_POST['amount'] ?? 0);
    
    if ($amount <= 0) {
        $error = '请输入有效的充值金额';
    } elseif ($amount < 1) {
        $error = '最低充值金额为 1 元';
    } else {
        // 这里对接你的充值逻辑
        // 例如：创建充值订单、跳转到支付页面等
        
        // 示例：直接增加余额（实际应该走支付流程）
        // updateUserBalance($user['id'], $amount, "在线充值");
        // $success = '充值成功！';
        
        // 跳转到支付页面
        header('Location: /modules/user/recharge.php?amount=' . $amount);
        exit;
    }
}
?>
<?php include 'header.php'; ?>
<div class="encrypt-container">
    <div style="max-width: 500px; margin: 0 auto;">
        <div class="card" style="background: var(--bg-primary); border-radius: 20px; padding: 30px; border: 1px solid var(--border-color);">
            <h2 style="text-align: center; margin-bottom: 10px;">💰 账户充值</h2>
            <p style="text-align: center; color: var(--text-secondary); margin-bottom: 30px;">
                当前余额：<strong style="font-size: 24px; color: var(--primary-color);">¥<?php echo number_format($user['balance'], 2); ?></strong>
            </p>
            
            <?php if ($error): ?>
                <div class="alert alert-error" style="background: rgba(220,53,69,0.1); border: 1px solid #dc3545; border-radius: 12px; padding: 15px; margin-bottom: 20px; color: #dc3545;">
                    ❌ <?php echo $error; ?>
                </div>
            <?php endif; ?>
            
            <?php if ($success): ?>
                <div class="alert alert-success" style="background: rgba(40,167,69,0.1); border: 1px solid #28a745; border-radius: 12px; padding: 15px; margin-bottom: 20px; color: #28a745;">
                    ✅ <?php echo $success; ?>
                </div>
                <div style="text-align: center;">
                    <a href="/encrypt/buy.php" class="btn btn-primary">返回购买页面</a>
                </div>
            <?php else: ?>
                <form method="POST">
                    <div class="form-group" style="margin-bottom: 20px;">
                        <label style="display: block; margin-bottom: 8px; font-weight: 500;">充值金额 (元)</label>
                        <div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 15px;">
                            <button type="button" class="amount-btn" data-amount="10" style="padding: 12px; border: 1px solid var(--border-color); background: var(--bg-secondary); border-radius: 12px; cursor: pointer;">¥10</button>
                            <button type="button" class="amount-btn" data-amount="20" style="padding: 12px; border: 1px solid var(--border-color); background: var(--bg-secondary); border-radius: 12px; cursor: pointer;">¥20</button>
                            <button type="button" class="amount-btn" data-amount="50" style="padding: 12px; border: 1px solid var(--border-color); background: var(--bg-secondary); border-radius: 12px; cursor: pointer;">¥50</button>
                            <button type="button" class="amount-btn" data-amount="100" style="padding: 12px; border: 1px solid var(--border-color); background: var(--bg-secondary); border-radius: 12px; cursor: pointer;">¥100</button>
                        </div>
                        <input type="number" name="amount" id="amount" step="0.01" min="1" class="form-control" placeholder="自定义金额" style="width: 100%; padding: 12px 16px; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 12px;">
                    </div>
                    <button type="submit" class="btn btn-primary" style="width: 100%; padding: 14px; font-size: 16px; font-weight: 600;">立即充值</button>
                </form>
                
                <div style="margin-top: 20px; text-align: center;">
                    <a href="/encrypt/buy.php" class="btn btn-secondary" style="padding: 8px 20px;">← 返回购买页面</a>
                </div>
            <?php endif; ?>
        </div>
    </div>
</div>

<style>
.amount-btn {
    transition: all 0.2s;
}
.amount-btn:hover {
    background: var(--primary-color) !important;
    color: white;
    border-color: var(--primary-color) !important;
    transform: translateY(-2px);
}
.amount-btn.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}
</style>

<script>
    document.querySelectorAll('.amount-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            const amount = this.dataset.amount;
            document.getElementById('amount').value = amount;
            
            document.querySelectorAll('.amount-btn').forEach(b => {
                b.classList.remove('active');
                b.style.background = 'var(--bg-secondary)';
                b.style.color = 'var(--text-primary)';
            });
            this.classList.add('active');
            this.style.background = '#667eea';
            this.style.color = 'white';
        });
    });
</script>
<?php include 'footer.php'; ?>