<?php
ob_start();
$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 {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            background: linear-gradient(135deg, #f59e0b, #ef4444);
            color: white;
            padding: 3px 10px;
            border-radius: 30px;
            font-size: 11px;
            font-weight: 600;
            margin-left: 6px;
        }
        .agent-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            background: linear-gradient(135deg, #10b981, #059669);
            color: white;
            padding: 3px 10px;
            border-radius: 30px;
            font-size: 11px;
            font-weight: 600;
            margin-left: 6px;
        }
        .balance-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
            padding: 4px 12px;
            border-radius: 30px;
            font-size: 12px;
            font-weight: 600;
        }
        
        /* ========== 导航栏样式 ========== */
        .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: 24px;
            align-items: center;
        }
        
        .nav-links a {
            display: flex;
            align-items: center;
            gap: 6px;
            text-decoration: none;
            color: var(--text-secondary);
            transition: color 0.2s;
            font-weight: 500;
            font-size: 14px;
        }
        
        .nav-links a:hover,
        .nav-links a.active {
            color: var(--primary-color);
        }
        
        .nav-links a img {
            opacity: 0.7;
        }
        
        .nav-links a:hover img,
        .nav-links a.active img {
            opacity: 1;
        }
        
        .user-menu {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        .username {
            display: flex;
            align-items: center;
            gap: 6px;
            font-weight: 500;
            color: var(--text-primary);
        }
        
        .mobile-menu-toggle {
            display: none;
            background: none;
            border: none;
            cursor: pointer;
            color: var(--text-primary);
            padding: 8px;
            border-radius: 8px;
            transition: background 0.2s;
        }
        
        .mobile-menu-toggle:hover {
            background: var(--bg-secondary);
        }
        
        .mobile-menu-toggle img {
            width: 24px;
            height: 24px;
        }
        
        /* 按钮 */
        .btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 8px 16px;
            border-radius: 8px;
            font-weight: 500;
            text-decoration: none;
            transition: all 0.2s;
            cursor: pointer;
            font-size: 13px;
        }
        .btn-primary {
            background: var(--primary-color);
            color: white;
        }
        .btn-primary:hover {
            background: var(--primary-hover);
        }
        .btn-outline {
            background: transparent;
            border: 1.5px solid var(--border-color);
            color: var(--text-primary);
        }
        .btn-outline:hover {
            border-color: var(--primary-color);
            background: var(--bg-secondary);
        }
        .btn-sm {
            padding: 6px 14px;
            font-size: 12px;
        }
        
        /* PC端默认显示 */
        @media (min-width: 769px) {
            .nav-links {
                display: flex !important;
            }
        }
        
        /* 移动端样式 */
        @media (max-width: 768px) {
            .encrypt-nav {
                padding: 10px 16px;
            }
            
            .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: 14px 0;
                width: 100%;
                justify-content: center;
                border-bottom: 1px solid var(--border-color);
            }
            
            .nav-links a:last-child {
                border-bottom: none;
            }
            
            .user-menu {
                gap: 8px;
            }
            
            .balance-badge {
                padding: 3px 8px;
                font-size: 11px;
            }
            
            .admin-badge, .agent-badge {
                padding: 2px 6px;
                font-size: 10px;
            }
            
            .username {
                font-size: 13px;
            }
            
            .btn-sm {
                padding: 4px 10px;
                font-size: 11px;
            }
        }
        
        @media (max-width: 480px) {
            .encrypt-nav {
                padding: 8px 12px;
            }
            
            .logo {
                height: 35px;
            }
            
            .balance-badge span {
                max-width: 80px;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            
            .username {
                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" alt="Logo">
    
    <button class="mobile-menu-toggle" id="mobileMenuToggle">
        <img src="https://api.iconify.design/mdi:menu.svg?color=currentColor" alt="菜单">
    </button>
    
    <div class="user-menu">
        <?php if (isEncryptLoggedIn() && $user): ?>
            <span class="balance-badge">
                <img src="https://api.iconify.design/mdi:wallet.svg?color=white" width="14" height="14" alt="">
                ¥<?php echo number_format($user['balance'], 2); ?>
            </span>
            <?php if ($user['role'] == 'admin'): ?>
                <span class="admin-badge">
                    <img src="https://api.iconify.design/mdi:crown.svg?color=white" width="12" height="12" alt="">
                    管理员
                </span>
            <?php elseif ($user['is_agent'] == 1): ?>
                <span class="agent-badge">
                    <img src="https://api.iconify.design/mdi:handshake.svg?color=white" width="12" height="12" alt="">
                    代理商
                </span>
            <?php endif; ?>
            <span class="username">
                <img src="https://api.iconify.design/mdi:account.svg?color=%236b7280" width="14" height="14" alt="">
                <?php echo htmlspecialchars($user['username']); ?>
            </span>
            <a href="/encrypt/logout.php" class="btn btn-outline btn-sm">
                <img src="https://api.iconify.design/mdi:logout.svg?color=currentColor" width="14" height="14" alt="">
                退出
            </a>
        <?php else: ?>
            <a href="/encrypt/login.php" class="btn btn-primary btn-sm">
                <img src="https://api.iconify.design/mdi:login.svg?color=white" width="14" height="14" alt="">
                登录
            </a>
            <a href="/modules/home/register.php" class="btn btn-outline btn-sm">
                <img src="https://api.iconify.design/mdi:account-plus.svg?color=currentColor" width="14" height="14" alt="">
                注册
            </a>
        <?php endif; ?>
    </div>
    
    <div class="nav-links" id="navLinks">
        <a href="/encrypt" class="<?php echo $current_page == 'index' ? 'active' : ''; ?>">
            <img src="https://api.iconify.design/mdi:home.svg?color=currentColor" width="18" height="18" alt="">
            首页
        </a>
        <a href="/" class="">
            <img src="https://api.iconify.design/mdi:arrow-left.svg?color=currentColor" width="18" height="18" alt="">
            返回首页
        </a>
        <?php if (isEncryptLoggedIn()): ?>
            <a href="/encrypt/encrypt.php" class="<?php echo $current_page == 'encrypt' ? 'active' : ''; ?>">
                <img src="https://api.iconify.design/mdi:shield-lock.svg?color=currentColor" width="18" height="18" alt="">
                加密工具
            </a>
            <a href="/encrypt/user.php" class="<?php echo $current_page == 'user' ? 'active' : ''; ?>">
                <img src="https://api.iconify.design/mdi:account-circle.svg?color=currentColor" width="18" height="18" alt="">
                用户中心
            </a>
            <?php if ($is_admin): ?>
                <a href="/encrypt/admin.php" class="<?php echo $current_page == 'admin' ? 'active' : ''; ?>">
                    <img src="https://api.iconify.design/mdi:cog.svg?color=currentColor" width="18" height="18" alt="">
                    管理
                </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');
            const img = this.querySelector('img');
            if (navLinks.classList.contains('show')) {
                img.src = 'https://api.iconify.design/mdi:close.svg?color=currentColor';
            } else {
                img.src = 'https://api.iconify.design/mdi:menu.svg?color=currentColor';
            }
        });
        
        document.addEventListener('click', function(e) {
            if (navLinks.classList.contains('show')) {
                if (!navLinks.contains(e.target) && e.target !== mobileToggle) {
                    navLinks.classList.remove('show');
                    const img = mobileToggle.querySelector('img');
                    img.src = 'https://api.iconify.design/mdi:menu.svg?color=currentColor';
                }
            }
        });
    }
});
</script>