<?php
ob_start();
require_once 'config.php';
requireEncryptLogin();

$user = getEncryptUser();
$has_permission = hasEncryptPermission($user);

// ========== 处理邮件通知开关 ==========
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['email_notify_action'])) {
    $notify = isset($_POST['email_notify']) ? 1 : 0;
    $db->query("UPDATE users SET email_notify = $notify WHERE id = {$user['id']}");
    $user = getEncryptUser();
    header('Location: /encrypt/user.php');
    exit;
}

// 获取加密历史
$history = $db->fetchAll("SELECT * FROM encrypt_history WHERE user_id = {$user['id']} ORDER BY id DESC LIMIT 20");

// 获取服务购买记录
$service = getUserEncryptService($user);
$remaining = getServiceRemainingDays($service);
?>
<?php include 'header.php'; ?>

<div class="encrypt-user-container">
    <!-- 页面头部 -->
    <div class="page-header">
        <h2>
            <img src="https://api.iconify.design/mdi:account-circle.svg?color=%23667eea" width="28" height="28" style="vertical-align: middle; margin-right: 10px;" alt="">
            用户中心
        </h2>
        <p class="page-desc">管理您的加密服务和账户信息</p>
    </div>

    <!-- 卡片网格 -->
    <div class="cards-grid">
        <!-- 账户信息卡片 -->
        <div class="info-card">
            <div class="card-header">
                <img src="https://api.iconify.design/mdi:account.svg?color=%23667eea" width="22" height="22" alt="">
                <h3>账户信息</h3>
            </div>
            <div class="card-body">
                <div class="info-row">
                    <span class="info-label">
                        <img src="https://api.iconify.design/mdi:account.svg?color=%236b7280" width="16" height="16" alt="">
                        用户名
                    </span>
                    <span class="info-value"><?php echo htmlspecialchars($user['username']); ?></span>
                </div>
                <div class="info-row">
                    <span class="info-label">
                        <img src="https://api.iconify.design/mdi:email.svg?color=%236b7280" width="16" height="16" alt="">
                        邮箱
                    </span>
                    <span class="info-value"><?php echo htmlspecialchars($user['email']); ?></span>
                </div>
                <div class="info-row">
                    <span class="info-label">
                        <img src="https://api.iconify.design/mdi:wallet.svg?color=%236b7280" width="16" height="16" alt="">
                        余额
                    </span>
                    <span class="info-value balance">¥<?php echo number_format($user['balance'], 2); ?></span>
                </div>
                <div class="info-row">
                    <span class="info-label">
                        <img src="https://api.iconify.design/mdi:shield-account.svg?color=%236b7280" width="16" height="16" alt="">
                        会员类型
                    </span>
                    <span class="info-value">
                        <?php if ($user['role'] == 'admin'): ?>
                            <span class="badge-admin">
                                <img src="https://api.iconify.design/mdi:shield.svg?color=white" width="12" height="12" alt="">
                                管理员
                            </span>
                        <?php elseif ($user['is_agent'] == 1): ?>
                            <span class="badge-agent">
                                <img src="https://api.iconify.design/mdi:handshake.svg?color=white" width="12" height="12" alt="">
                                代理商
                            </span>
                        <?php elseif ($has_permission): ?>
                            <span class="badge-vip">
                                <img src="https://api.iconify.design/mdi:crown.svg?color=white" width="12" height="12" alt="">
                                VIP会员
                            </span>
                        <?php else: ?>
                            <span class="badge-normal">
                                <img src="https://api.iconify.design/mdi:account.svg?color=%236b7280" width="12" height="12" alt="">
                                普通用户
                            </span>
                        <?php endif; ?>
                    </span>
                </div>
            </div>
            <div class="card-footer">
                <a href="/encrypt/buy.php" class="btn btn-primary btn-sm">
                    <img src="https://api.iconify.design/mdi:cart.svg?color=white" width="16" height="16" alt="">
                    购买服务
                </a>
                <a href="/admin.php?page=recharge" class="btn btn-secondary btn-sm">
                    <img src="https://api.iconify.design/mdi:wallet-plus.svg?color=currentColor" width="16" height="16" alt="">
                    充值
                </a>
            </div>
        </div>

        <!-- 加密服务状态卡片 -->
        <div class="service-card <?php echo $has_permission ? 'active' : 'inactive'; ?>">
            <div class="card-header">
                <img src="https://api.iconify.design/mdi:shield-lock.svg?color=<?php echo $has_permission ? '%2310b981' : '%23ef4444'; ?>" width="22" height="22" alt="">
                <h3>加密服务状态</h3>
            </div>
            <div class="card-body">
                <?php if ($has_permission): ?>
                    <div class="status-badge status-active">
                        <img src="https://api.iconify.design/mdi:check-circle.svg?color=%2310b981" width="20" height="20" alt="">
                        <span>已激活</span>
                    </div>
                    <?php if ($service && $service['expire_date']): ?>
                        <div class="info-row">
                            <span class="info-label">
                                <img src="https://api.iconify.design/mdi:calendar.svg?color=%236b7280" width="16" height="16" alt="">
                                到期时间
                            </span>
                            <span class="info-value"><?php echo date('Y-m-d H:i', strtotime($service['expire_date'])); ?></span>
                        </div>
                        <div class="info-row">
                            <span class="info-label">
                                <img src="https://api.iconify.design/mdi:clock-outline.svg?color=%236b7280" width="16" height="16" alt="">
                                剩余天数
                            </span>
                            <span class="info-value" style="color: <?php echo $remaining <= 7 ? '#ef4444' : '#10b981'; ?>;">
                                <strong><?php echo $remaining; ?> 天</strong>
                            </span>
                        </div>
                        <?php if ($remaining <= 7 && $remaining > 0): ?>
                            <div class="warning-tip">
                                <img src="https://api.iconify.design/mdi:alert-circle.svg?color=%23f59e0b" width="16" height="16" alt="">
                                即将到期，请及时续费
                            </div>
                        <?php elseif ($remaining <= 0): ?>
                            <div class="error-tip">
                                <img src="https://api.iconify.design/mdi:alert-circle.svg?color=%23ef4444" width="16" height="16" alt="">
                                服务已过期，请续费
                            </div>
                        <?php endif; ?>
                    <?php else: ?>
                        <div class="info-row">
                            <span class="info-label">
                                <img src="https://api.iconify.design/mdi:infinity.svg?color=%2310b981" width="16" height="16" alt="">
                                有效期
                            </span>
                            <span class="info-value" style="color: #10b981;">永久有效</span>
                        </div>
                    <?php endif; ?>
                <?php else: ?>
                    <div class="status-badge status-inactive">
                        <img src="https://api.iconify.design/mdi:close-circle.svg?color=%23ef4444" width="20" height="20" alt="">
                        <span>未激活</span>
                    </div>
                    <p class="inactive-tip">请购买加密服务后使用</p>
                <?php endif; ?>
            </div>
            <div class="card-footer">
                <?php if ($has_permission): ?>
                    <a href="/encrypt/encrypt.php" class="btn btn-primary">
                        <img src="https://api.iconify.design/mdi:shield-lock.svg?color=white" width="18" height="18" alt="">
                        开始加密
                    </a>
                    <a href="/encrypt/buy.php" class="btn btn-secondary">
                        <img src="https://api.iconify.design/mdi:refresh.svg?color=currentColor" width="18" height="18" alt="">
                        续费/升级
                    </a>
                <?php else: ?>
                    <a href="/encrypt/buy.php" class="btn btn-primary btn-block">
                        <img src="https://api.iconify.design/mdi:cart.svg?color=white" width="18" height="18" alt="">
                        立即购买
                    </a>
                <?php endif; ?>
            </div>
        </div>
    </div>

    <!-- 通知设置 -->
    <div class="notify-card">
        <div class="card-header">
            <img src="https://api.iconify.design/mdi:bell.svg?color=%23667eea" width="22" height="22" alt="">
            <h3>通知设置</h3>
        </div>
        <div class="card-body">
            <form method="POST" action="" id="notifyForm">
                <input type="hidden" name="email_notify_action" value="1">
                <label class="checkbox-label">
                    <input type="checkbox" name="email_notify" value="1" <?php echo ($user['email_notify'] ?? 1) ? 'checked' : ''; ?> onchange="document.getElementById('notifyForm').submit();">
                    <span class="checkbox-custom"></span>
                    <span class="checkbox-text">
                        <img src="https://api.iconify.design/mdi:email.svg?color=%23667eea" width="16" height="16" alt="">
                        接收邮件通知
                    </span>
                    <span class="checkbox-hint">（购买成功、服务到期提醒等）</span>
                </label>
            </form>
            <?php if (empty($user['email'])): ?>
                <div class="warning-tip">
                    <img src="https://api.iconify.design/mdi:alert-circle.svg?color=%23f59e0b" width="16" height="16" alt="">
                    您尚未绑定邮箱，无法接收邮件通知
                </div>
            <?php endif; ?>
        </div>
    </div>

    <!-- 加密历史记录 -->
    <?php if (!empty($history)): ?>
    <div class="history-section">
        <div class="section-header">
            <h3>
                <img src="https://api.iconify.design/mdi:history.svg?color=%23667eea" width="22" height="22" style="margin-right: 8px;" alt="">
                加密历史记录
            </h3>
        </div>
        <div class="table-wrapper">
            <table class="data-table">
                <thead>
                    <tr>
                        <th>
                            <img src="https://api.iconify.design/mdi:file.svg?color=%236b7280" width="14" height="14" alt="">
                            文件名
                        </th>
                        <th>
                            <img src="https://api.iconify.design/mdi:harddisk.svg?color=%236b7280" width="14" height="14" alt="">
                            原始大小
                        </th>
                        <th>
                            <img src="https://api.iconify.design/mdi:archive.svg?color=%236b7280" width="14" height="14" alt="">
                            加密后大小
                        </th>
                        <th>
                            <img src="https://api.iconify.design/mdi:calendar.svg?color=%236b7280" width="14" height="14" alt="">
                            时间
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <?php foreach ($history as $item): ?>
                        <tr>
                            <td><?php echo htmlspecialchars($item['original_name']); ?></td>
                            <td><?php echo $item['file_size'] ? round($item['file_size']/1024,2).' KB' : '-'; ?></td>
                            <td><?php echo $item['encrypted_size'] ? round($item['encrypted_size']/1024,2).' KB' : '-'; ?></td>
                            <td><?php echo $item['created_at']; ?></td>
                        </tr>
                    <?php endforeach; ?>
                </tbody>
            </table>
        </div>
    </div>
    <?php endif; ?>
</div>

<style>
/* 基础变量 - 确保明暗主题都有定义 */
:root,
[data-theme="light"] {
    --primary-color: #667eea;
    --primary-hover: #5a67d8;
    --danger-color: #ef4444;
    --success-color: #10b981;
    --warning-color: #f59e0b;
    --bg-primary: #ffffff;
    --bg-secondary: #f9fafb;
    --text-primary: #1f2937;
    --text-secondary: #6b7280;
    --text-muted: #9ca3af;
    --border-color: #e5e7eb;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
}

/* 深色主题变量 */
[data-theme="dark"] {
    --primary-color: #667eea;
    --primary-hover: #7b8cf5;
    --danger-color: #ef4444;
    --success-color: #10b981;
    --warning-color: #f59e0b;
    --bg-primary: #1f2937;
    --bg-secondary: #374151;
    --text-primary: #f9fafb;
    --text-secondary: #d1d5db;
    --text-muted: #9ca3af;
    --border-color: #4b5563;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
}

.encrypt-user-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
    background: var(--bg-primary);
    color: var(--text-primary);
}

.page-header {
    text-align: center;
    margin-bottom: 32px;
}
.page-header h2 {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
}
.page-desc {
    color: var(--text-secondary);
    margin-top: 8px;
}

/* 卡片网格 */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-bottom: 24px;
}

/* 通用卡片样式 */
.info-card, .service-card, .notify-card {
    background: var(--bg-primary);
    border-radius: 20px;
    padding: 24px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}
.card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
}
.card-header h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}
.card-body {
    margin-bottom: 20px;
}
.card-footer {
    display: flex;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

/* 信息行 */
.info-row {
    display: flex;
    align-items: center;
    margin-bottom: 14px;
}
.info-label {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 90px;
    font-size: 14px;
    color: var(--text-secondary);
}
.info-value {
    flex: 1;
    font-weight: 500;
    color: var(--text-primary);
}
.info-value.balance {
    color: var(--success-color);
    font-size: 18px;
    font-weight: 700;
}

/* 徽章 */
.badge-admin, .badge-agent, .badge-vip, .badge-normal {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 500;
}
.badge-admin {
    background: #667eea;
    color: white;
}
.badge-agent {
    background: #f59e0b;
    color: white;
}
.badge-vip {
    background: linear-gradient(135deg, #fbbf24, #d97706);
    color: white;
}
.badge-normal {
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

/* 状态徽章 */
.status-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
}
.status-active {
    background: #d1fae5;
    color: #065f46;
}
.status-inactive {
    background: #fee2e2;
    color: #991b1b;
}
.inactive-tip {
    color: var(--text-muted);
    margin: 12px 0;
}

/* 提示 */
.warning-tip, .error-tip {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 13px;
}
.warning-tip {
    background: #fef3c7;
    color: #92400e;
}
.error-tip {
    background: #fee2e2;
    color: #991b1b;
}
/* 深色模式下提示背景调整 */
[data-theme="dark"] .warning-tip {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
}
[data-theme="dark"] .error-tip {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
}
[data-theme="dark"] .status-active {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
}
[data-theme="dark"] .status-inactive {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
}

/* 按钮 */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 10px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s;
    cursor: pointer;
    border: none;
}
.btn-primary {
    background: var(--primary-color);
    color: white;
}
.btn-primary:hover {
    background: var(--primary-hover);
    transform: translateY(-1px);
}
.btn-secondary {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}
.btn-secondary:hover {
    background: var(--border-color);
}
.btn-sm {
    padding: 8px 16px;
    font-size: 13px;
    flex: 1;
}
.btn-block {
    width: 100%;
}
.card-footer .btn {
    flex: 1;
}

/* 通知卡片 */
.notify-card {
    margin-bottom: 32px;
}
.checkbox-label {
    display: flex;
    align-items: center;
    cursor: pointer;
}
.checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-right: 10px;
    cursor: pointer;
    accent-color: var(--primary-color);
}
.checkbox-text {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    color: var(--text-primary);
}
.checkbox-hint {
    margin-left: 8px;
    font-size: 12px;
    color: var(--text-muted);
}

/* 历史记录 */
.history-section {
    margin-top: 32px;
}
.section-header {
    margin-bottom: 20px;
}
.section-header h3 {
    display: flex;
    align-items: center;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}
.table-wrapper {
    overflow-x: auto;
    background: var(--bg-primary);
    border-radius: 16px;
    border: 1px solid var(--border-color);
}
.data-table {
    width: 100%;
    border-collapse: collapse;
}
.data-table th {
    padding: 14px 16px;
    text-align: left;
    font-weight: 600;
    font-size: 13px;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}
.data-table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-color);
    font-size: 14px;
    color: var(--text-primary);
}
.data-table tbody tr:hover {
    background: var(--bg-secondary);
}
.data-table tbody tr:last-child td {
    border-bottom: none;
}

/* 响应式 */
@media (max-width: 768px) {
    .cards-grid {
        grid-template-columns: 1fr;
    }
    .card-footer {
        flex-direction: column;
    }
    .card-footer .btn {
        width: 100%;
    }
}
</style>

<?php include 'footer.php'; ?>