<?php
ob_start();
// 修复包含路径
require_once __DIR__ . '/../lib/config.php';
require_once __DIR__ . '/../lib/db_connect.php';
require_once __DIR__ . '/../includes/header.php';
require_once __DIR__ . '/../lib/point_functions.php';

// 验证用户登录
if (!isset($_SESSION['user_id'])) {
    header('Location: login.php');
    exit;
}

// 处理充值请求
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['recharge'])) {
    $card_number = trim($_POST['card_number']);
    $card_password = trim($_POST['card_password']);
    
    if (empty($card_number) || empty($card_password)) {
        $_SESSION['error'] = "请输入卡号和密码";
    } else {
        $recharge_result = use_point_card($card_number, $card_password, $_SESSION['user_id']);
        if ($recharge_result['success']) {
            $_SESSION['success'] = "卡密充值成功";
            
            // 记录积分变动 - 充值
            $points_added = $recharge_result['points'];
            $transaction_desc = "卡密充值 - 卡号: " . substr($card_number, -4);
            
            $stmt = $conn->prepare("INSERT INTO point_transactions 
                                  (user_id, amount, type, description, status, created_at) 
                                  VALUES (?, ?, 'recharge', ?, 'completed', NOW())");
            $stmt->bind_param("iis", $_SESSION['user_id'], $points_added, $transaction_desc);
            $stmt->execute();
            $stmt->close();
            
        } else {
            $_SESSION['error'] = "卡密无效或已被使用";
        }
    }
    header("Location: recharge.php");
    exit;
}

// 获取用户当前积分
$stmt = $conn->prepare("SELECT points FROM users WHERE id = ?");
$stmt->bind_param("i", $_SESSION['user_id']);
$stmt->execute();
$result = $stmt->get_result();
$user = $result->fetch_assoc();
?>
<div class="main-content">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h4 class="mb-0">积分充值</h4>
        <div class="d-flex align-items-center">
            <span class="me-2">当前积分: <strong><?= $user['points'] ?></strong></span>
            <a href="withdraw.php" class="btn btn-outline-primary btn-sm">
                <i class="fas fa-wallet me-1"></i> 提现
            </a>
        </div>
    </div>
    
    <?php if (isset($_SESSION['success'])): ?>
        <div class="alert alert-success animate__animated animate__fadeInDown"><?= $_SESSION['success'] ?></div>
        <?php unset($_SESSION['success']); ?>
    <?php endif; ?>
    
    <?php if (isset($_SESSION['error'])): ?>
        <div class="alert alert-danger animate__animated animate__headShake"><?= $_SESSION['error'] ?></div>
        <?php unset($_SESSION['error']); ?>
    <?php endif; ?>
    
    <div class="row">
        <div class="col-lg-8">
            <div class="card mb-4 glass-panel">
                <div class="card-header bg-gradient-primary text-white">
                    <div class="d-flex justify-content-between align-items-center">
                        <span><i class="fas fa-credit-card me-2"></i> 使用卡密充值</span>
                        <a href="https://www.baidu.com" target="_blank" class="btn btn-sm btn-light">
                            <i class="fas fa-question-circle me-1"></i> 如何获取卡密?
                        </a>
                    </div>
                </div>
                <div class="card-body">
                    <form method="POST" class="needs-validation" novalidate>
                        <div class="mb-4">
                            <label class="form-label fw-bold text-primary">
                                <i class="fas fa-id-card me-1"></i> 卡号
                            </label>
                            <input type="text" name="card_number" class="form-control form-control-lg" 
                                   placeholder="请输入16位卡号" required>
                            <div class="invalid-feedback">
                                请输入卡号
                            </div>
                        </div>
                        
                        <div class="mb-4">
                            <label class="form-label fw-bold text-primary">
                                <i class="fas fa-lock me-1"></i> 密码
                            </label>
                            <input type="text" name="card_password" class="form-control form-control-lg" 
                                   placeholder="请输入8位密码" required>
                            <div class="invalid-feedback">
                                请输入密码
                            </div>
                        </div>
                        
                        <div class="d-flex gap-3">
                            <button type="submit" name="recharge" class="btn btn-primary btn-lg flex-grow-1">
                                <i class="fas fa-bolt me-2"></i> 立即充值
                            </button>
                            
                            <a href="https://68n.cn/sTruE" target="_blank" 
                               class="btn btn-success btn-lg flex-grow-1">
                                <i class="fas fa-shopping-cart me-2"></i> 购买卡密
                            </a>
                        </div>
                    </form>
                </div>
            </div>
            
            <div class="card glass-panel">
                <div class="card-header bg-gradient-info text-white">
                    <i class="fas fa-history me-2"></i> 充值记录
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover align-middle">
                            <thead class="table-light">
                                <tr>
                                    <th><i class="fas fa-clock me-1"></i> 时间</th>
                                    <th>类型</th>
                                    <th>积分</th>
                                    <th>状态</th>
                                    <th>描述</th>
                                </tr>
                            </thead>
                            <tbody>
                                <?php
                                $stmt = $conn->prepare("SELECT * FROM point_transactions 
                                                      WHERE user_id = ? AND type = 'recharge' 
                                                      ORDER BY created_at DESC");
                                $stmt->bind_param("i", $_SESSION['user_id']);
                                $stmt->execute();
                                $result = $stmt->get_result();
                                
                                if ($result->num_rows > 0): 
                                    while($row = $result->fetch_assoc()): 
                                ?>
                                <tr>
                                    <td><?= date('Y-m-d H:i', strtotime($row['created_at'])) ?></td>
                                    <td>充值</td>
                                    <td class="fw-bold text-success">+<?= $row['amount'] ?></td>
                                    <td><span class="badge bg-success rounded-pill p-2">已完成</span></td>
                                    <td><?= htmlspecialchars($row['description'] ?? '卡密充值') ?></td>
                                </tr>
                                <?php 
                                    endwhile; 
                                else: 
                                ?>
                                <tr>
                                    <td colspan="5" class="text-center py-5">
                                        <i class="fas fa-inbox fa-3x text-muted mb-3"></i>
                                        <p class="text-muted">暂无充值记录</p>
                                    </td>
                                </tr>
                                <?php endif; ?>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-lg-4">
            <div class="card glass-panel mb-4">
                <div class="card-header bg-gradient-success text-white">
                    <i class="fas fa-wallet me-2"></i> 我的积分
                </div>
                <div class="card-body text-center py-5">
                    <div class="display-3 fw-bold text-success mb-3">
                        <?= $user['points'] ?>
                    </div>
                    <div class="fs-5 text-muted mb-4">
                        <i class="fas fa-coins me-1"></i> 当前积分余额
                    </div>
                    <div class="bg-light p-4 rounded-3 mb-4">
                        <div class="d-flex justify-content-between mb-2">
                            <span class="text-muted">≈ 人民币价值</span>
                            <span class="fw-bold">¥<?= number_format($user['points'] * POINT_TO_RMB_RATE, 2) ?></span>
                        </div>
                        <div class="progress" style="height: 10px;">
                            <div class="progress-bar bg-success" 
                                 style="width: <?= min(100, $user['points'] / 1000 * 100) ?>%"></div>
                        </div>
                        <small class="text-muted mt-2 d-block">充值越多，积分价值越高</small>
                    </div>
                    
                    <div class="d-grid gap-3">
                        <a href="product_list.php" class="btn btn-primary btn-lg">
                            <i class="fas fa-shopping-basket me-2"></i> 购买商品
                        </a>
                        <a href="tasks.php" class="btn btn-info btn-lg">
                            <i class="fas fa-tasks me-2"></i> 查看任务
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
// 表单验证增强
document.addEventListener('DOMContentLoaded', function() {
    // 启用 Bootstrap 表单验证
    const forms = document.querySelectorAll('.needs-validation');
    
    Array.prototype.slice.call(forms).forEach(function(form) {
        form.addEventListener('submit', function(event) {
            if (!form.checkValidity()) {
                event.preventDefault();
                event.stopPropagation();
            }
            
            form.classList.add('was-validated');
        }, false);
    });
    
    // 添加输入框交互效果
    const inputs = document.querySelectorAll('.form-control');
    inputs.forEach(input => {
        input.addEventListener('focus', function() {
            this.parentElement.classList.add('input-focused');
        });
        
        input.addEventListener('blur', function() {
            this.parentElement.classList.remove('input-focused');
        });
    });
});
</script>

<style>
/* 增强充值页面样式 */
.main-content h4 {
    font-weight: 700;
    letter-spacing: 0.5px;
    position: relative;
    padding-left: 15px;
}

.main-content h4::before {
    content: '';
    position: absolute;
    left: 0;
    top: 5px;
    bottom: 5px;
    width: 4px;
    background: linear-gradient(to bottom, var(--primary-color), var(--info-color));
    border-radius: 10px;
}

.card-header {
    font-weight: 600;
    font-size: 1.1rem;
}

.form-control-lg {
    border-radius: 14px;
    padding: 15px 20px;
    font-size: 1.05rem;
    border: 2px solid #e2e8f0;
    transition: all 0.3s ease;
}

.form-control-lg:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.25rem rgba(99, 102, 241, 0.25);
    transform: translateY(-2px);
}

.input-focused {
    transform: translateY(-3px);
    transition: transform 0.3s ease;
}

.btn-lg {
    border-radius: 14px;
    padding: 15px 25px;
    font-size: 1.1rem;
    font-weight: 600;
    box-shadow: 0 6px 12px rgba(99, 102, 241, 0.2);
}

.btn-success {
    background: linear-gradient(120deg, var(--success-color), #059669);
    border: none;
}

.table th {
    font-weight: 600;
    color: var(--dark-color);
}

.table-hover > tbody > tr:hover {
    background-color: rgba(248, 250, 252, 0.9);
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(78, 115, 223, 0.15);
}

.bg-gradient-primary {
    background: linear-gradient(120deg, var(--primary-color), #4f46e5) !important;
}

.bg-gradient-success {
    background: linear-gradient(120deg, var(--success-color), #059669) !important;
}

.bg-gradient-info {
    background: linear-gradient(120deg, var(--info-color), #0c75c8) !important;
}

.bg-gradient-warning {
    background: linear-gradient(120deg, var(--warning-color), #d97706) !important;
}

.glass-panel {
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.glass-panel:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(31, 38, 135, 0.2);
}

.progress {
    border-radius: 10px;
    overflow: visible;
}

.progress-bar {
    border-radius: 10px;
    position: relative;
    overflow: visible;
}

.progress-bar::after {
    content: '';
    position: absolute;
    right: -8px;
    top: -3px;
    width: 16px;
    height: 16px;
    background: white;
    border: 2px solid var(--success-color);
    border-radius: 50%;
}

.text-success {
    color: var(--success-color) !important;
}
</style>

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