<?php
$user = getEncryptUser();
$current_page = basename($_SERVER['PHP_SELF'], '.php');
$is_admin = $user && ($user['role'] == 'admin' || $user['is_agent'] == 1);
?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
    <title><?php echo ENCRYPT_SITE_NAME; ?> - <?php echo $current_page == 'index' ? '首页' : ($current_page == 'encrypt' ? '加密工具' : ($current_page == 'user' ? '用户中心' : ($current_page == 'admin' ? '管理后台' : '登录'))); ?></title>
    <link rel="stylesheet" href="/assets/css/encrypt-style.css">
    <link rel="icon" type="image/png" href="../assets/uploads/favicon.ico">
    <style>
        /* 导航栏管理员标识 */
        .admin-badge {
            background: linear-gradient(135deg, #f59e0b, #ef4444);
            color: white;
            padding: 2px 8px;
            border-radius: 20px;
            font-size: 11px;
            font-weight: 600;
            margin-left: 6px;
        }
        .agent-badge {
            background: linear-gradient(135deg, #10b981, #059669);
            color: white;
            padding: 2px 8px;
            border-radius: 20px;
            font-size: 11px;
            font-weight: 600;
            margin-left: 6px;
        }
        
        /* ========== 移动端响应式样式 ========== */
        .encrypt-nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 30px;
            background: var(--bg-primary);
            border-bottom: 1px solid var(--border-color);
            position: relative;
            flex-wrap: wrap;
        }
        
        .logo {
            height: 45px;
            width: auto;
        }
        
        .nav-links {
            display: flex;
            gap: 20px;
            align-items: center;
        }
        
        .nav-links a {
            text-decoration: none;
            color: var(--text-secondary);
            transition: color 0.2s;
        }
        
        .nav-links a:hover,
        .nav-links a.active {
            color: var(--primary-color);
        }
        
        .user-menu {
            display: flex;
            align-items: center;
            gap: 15px;
        }
        
        .mobile-menu-toggle {
            display: none;
            background: none;
            border: none;
            font-size: 28px;
            cursor: pointer;
            color: var(--text-primary);
            padding: 5px 10px;
        }
        
        /* PC端默认显示 */
        @media (min-width: 769px) {
            .nav-links {
                display: flex !important;
            }
        }
        
        /* 移动端样式 */
        @media (max-width: 768px) {
            .encrypt-nav {
                padding: 10px 15px;
            }
            
            .mobile-menu-toggle {
                display: block;
                order: 2;
            }
            
            .logo {
                order: 1;
            }
            
            .user-menu {
                order: 3;
                margin-left: auto;
            }
            
            .nav-links {
                display: none !important;
                width: 100%;
                flex-direction: column;
                gap: 0;
                margin-top: 15px;
                padding-top: 10px;
                border-top: 1px solid var(--border-color);
                order: 4;
            }
            
            .nav-links.show {
                display: flex !important;
            }
            
            .nav-links a {
                padding: 12px 0;
                width: 100%;
                text-align: center;
                border-bottom: 1px solid var(--border-color);
            }
            
            .nav-links a:last-child {
                border-bottom: none;
            }
            
            .user-menu {
                gap: 8px;
            }
            
            .user-menu .badge,
            .user-menu .admin-badge,
            .user-menu .agent-badge {
                font-size: 10px;
                padding: 2px 6px;
            }
            
            .user-menu span {
                font-size: 13px;
            }
            
            .btn-sm {
                padding: 4px 10px;
                font-size: 12px;
            }
        }
        
        @media (max-width: 480px) {
            .encrypt-nav {
                padding: 8px 12px;
            }
            
            .logo {
                height: 35px;
            }
            
            .mobile-menu-toggle {
                font-size: 24px;
            }
            
            .user-menu {
                gap: 5px;
            }
            
            .user-menu .badge,
            .user-menu .admin-badge,
            .user-menu .agent-badge {
                font-size: 9px;
                padding: 1px 4px;
            }
            
            .user-menu span {
                font-size: 11px;
            }
            
            .btn-sm {
                padding: 3px 8px;
                font-size: 10px;
            }
        }
    </style>
</head>
<body>
<nav class="encrypt-nav">
    <img src="../assets/uploads/logo_1775640674.png" class="logo">
    
    <button class="mobile-menu-toggle" id="mobileMenuToggle">☰</button>
    
    <div class="user-menu">
        <?php if (isEncryptLoggedIn() && $user): ?>
            <span class="badge badge-primary">💰 ¥<?php echo number_format($user['balance'], 2); ?></span>
            <?php if ($user['role'] == 'admin'): ?>
                <span class="admin-badge">👑 管理员</span>
            <?php elseif ($user['is_agent'] == 1): ?>
                <span class="agent-badge">🤝 代理商</span>
            <?php endif; ?>
            <span>👋 <?php echo htmlspecialchars($user['username']); ?></span>
            <a href="/encrypt/logout.php" class="btn btn-outline btn-sm">退出</a>
        <?php else: ?>
            <a href="/encrypt/login.php" class="btn btn-primary btn-sm">登录</a>
            <a href="/modules/home/register.php" class="btn btn-outline btn-sm">注册</a>
        <?php endif; ?>
    </div>
    
    <div class="nav-links" id="navLinks">
        <a href="/encrypt" class="<?php echo $current_page == 'index' ? 'active' : ''; ?>">首页</a>
        <a href="/" class="">返回首页</a>
        <?php if (isEncryptLoggedIn()): ?>
            <a href="/encrypt/encrypt.php" class="<?php echo $current_page == 'encrypt' ? 'active' : ''; ?>">加密工具</a>
            <a href="/encrypt/user.php" class="<?php echo $current_page == 'user' ? 'active' : ''; ?>">用户中心</a>
            <?php if ($is_admin): ?>
                <a href="/encrypt/admin.php" class="<?php echo $current_page == 'admin' ? 'active' : ''; ?>">⚙️ 管理</a>
            <?php endif; ?>
        <?php endif; ?>
    </div>
</nav>

<script>
// 移动端菜单切换
document.addEventListener('DOMContentLoaded', function() {
    const mobileToggle = document.getElementById('mobileMenuToggle');
    const navLinks = document.getElementById('navLinks');
    
    if (mobileToggle && navLinks) {
        // 点击按钮切换菜单
        mobileToggle.addEventListener('click', function(e) {
            e.preventDefault();
            e.stopPropagation();
            navLinks.classList.toggle('show');
            console.log('菜单点击, 状态:', navLinks.classList.contains('show'));
        });
        
        // 点击页面其他地方关闭菜单
        document.addEventListener('click', function(e) {
            if (navLinks.classList.contains('show')) {
                if (!navLinks.contains(e.target) && e.target !== mobileToggle) {
                    navLinks.classList.remove('show');
                }
            }
        });
    }
});
</script>