<?php
$current_user = currentUser();
$site_name = getSiteConfig('site_name') ?? '麟泓授权系统';
$site_logo = getSiteConfig('site_logo') ?? '/assets/uploads/logo.png';
$user = currentUser();
$page = $_GET['page'] ?? 'dashboard';
$nav_menus = getNavMenus($db);
?>
<!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">
    <link rel="icon" href="/assets/uploads/favicon.ico"> 
    <link rel="stylesheet" href="/assets/css/style.css">
    <link rel="stylesheet" href="/assets/css/encrypt-style.css">
    <link rel="stylesheet" href="/assets/css/dark.css" id="dark-theme" disabled>
    <script src="/assets/js/main.js" defer></script>
    <script src="/assets/js/qrcode.min.js"></script>
    <style>
    /* ========== 强制导航栏最顶层 ========== */
.front-header {
    position: relative;
    z-index: 99999 !important;
}

.nav {
    z-index: 99999 !important;
}

.nav-item {
    z-index: 99999 !important;
    position: relative;
}

.dropdown-menu {
    z-index: 999999 !important;
    position: absolute;
}

/* 确保用户菜单也在上层 */
.user-menu {
    position: relative;
    z-index: 99999 !important;
}

/* 移动端菜单 */
.mobile-menu {
    z-index: 999999 !important;
}
        /* ========== 导航栏样式 ========== */
        .front-header {
            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-area .logo {
            height: 45px;
            width: auto;
        }
        
        .nav {
            display: flex;
            gap: 5px;
            align-items: center;
        }
        
        /* ========== 下拉菜单样式 ========== */
        .nav-item {
            position: relative;
            display: inline-block;
        }
        
        .nav-link {
            display: block;
            padding: 10px 16px;
            text-decoration: none;
            color: var(--text-secondary);
            border-radius: 8px;
            transition: all 0.2s;
            font-weight: 500;
        }
        
        .nav-link:hover {
            background: var(--bg-secondary);
            color: var(--primary-color);
        }
        
        .nav-link.active {
            color: var(--primary-color);
        }
        
        /* 下拉指示箭头 */
        .nav-item.has-dropdown > .nav-link::after {
            content: '▼';
            font-size: 10px;
            margin-left: 6px;
            opacity: 0.5;
        }
        
        .nav-item.has-dropdown:hover > .nav-link::after {
            opacity: 1;
        }
        
        /* 下拉菜单 */
        .dropdown-menu {
            position: absolute;
            top: 100%;
            left: 0;
            min-width: 180px;
            background: var(--bg-primary);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.15);
            opacity: 0;
            visibility: hidden;
            transform: translateY(-10px);
            transition: all 0.25s ease;
            z-index: 9999;
            padding: 8px 0;
        }
        
        .nav-item:hover .dropdown-menu {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }
        
        .dropdown-menu a {
            display: block;
            padding: 10px 20px;
            text-decoration: none;
            color: var(--text-secondary);
            font-size: 14px;
            transition: all 0.2s;
        }
        
        .dropdown-menu a:hover {
            background: var(--bg-secondary);
            color: var(--primary-color);
            padding-left: 25px;
        }
        
        /* 用户菜单样式 */
        .user-menu {
            display: flex;
            align-items: center;
            gap: 15px;
        }
        
        .user-info {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        .user-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .balance {
            font-weight: 600;
            color: var(--primary-color);
        }
        
        /* 按钮样式 */
        .btn {
            display: inline-block;
            padding: 6px 16px;
            border-radius: 8px;
            text-decoration: none;
            font-size: 13px;
            transition: all 0.2s;
        }
        
        .btn-primary {
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
            border: none;
        }
        
        .btn-outline {
            background: transparent;
            border: 1px solid var(--border-color);
            color: var(--text-primary);
        }
        
        .btn-sm {
            padding: 4px 12px;
            font-size: 12px;
        }
        
        /* 移动端菜单按钮 */
        .mobile-menu-btn {
            display: none;
            background: none;
            border: none;
            font-size: 28px;
            cursor: pointer;
            color: var(--text-primary);
            padding: 5px 10px;
        }
        
        /* 移动端菜单 */
        .mobile-menu {
            display: none;
            position: fixed;
            top: 70px;
            left: 0;
            right: 0;
            background: var(--bg-primary);
            border-top: 1px solid var(--border-color);
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
            z-index: 1000;
            flex-direction: column;
            padding: 10px 0;
            max-height: calc(100vh - 70px);
            overflow-y: auto;
        }
        
        .mobile-menu.show {
            display: flex;
        }
        
        .mobile-nav-link {
            padding: 14px 20px;
            display: block;
            text-decoration: none;
            color: var(--text-primary);
            border-bottom: 1px solid var(--border-color);
        }
        
        /* 移动端下拉 */
        .mobile-has-dropdown > .mobile-nav-link::after {
            content: '▼';
            font-size: 10px;
            margin-left: 8px;
            float: right;
        }
        
        .mobile-dropdown {
            display: none;
            background: var(--bg-secondary);
            padding-left: 20px;
        }
        
        .mobile-dropdown.show {
            display: block;
        }
        
        .mobile-dropdown a {
            padding: 12px 20px;
            display: block;
            text-decoration: none;
            color: var(--text-secondary);
            font-size: 14px;
            border-bottom: 1px solid var(--border-color);
        }
        
        .mobile-dropdown a:last-child {
            border-bottom: none;
        }
        
        /* 响应式 */
        @media (min-width: 769px) {
            .nav {
                display: flex !important;
            }
            .mobile-menu-btn {
                display: none;
            }
            .mobile-menu {
                display: none !important;
            }
        }
        
        @media (max-width: 768px) {
            .front-header {
                padding: 10px 15px;
            }
            
            .mobile-menu-btn {
                display: block;
                order: 2;
            }
            
            .logo-area {
                order: 1;
            }
            
            .user-menu {
                order: 3;
                margin-left: auto;
            }
            
            .nav {
                display: none !important;
            }
            
            .user-menu {
                gap: 8px;
            }
            
            .user-menu .user-info {
                flex-wrap: wrap;
                justify-content: flex-end;
            }
            
            .balance {
                font-size: 12px;
            }
        }
        
        @media (max-width: 480px) {
            .front-header {
                padding: 8px 12px;
            }
            
            .logo-area .logo {
                height: 35px;
            }
            
            .user-avatar {
                width: 30px;
                height: 30px;
            }
            
            .user-info span {
                font-size: 12px;
            }
            
            .btn-sm {
                padding: 4px 10px;
                font-size: 11px;
            }
        }
        
        /* 二维码弹窗 */
        .qrcode-modal {
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0, 0, 0, 0.6);
            backdrop-filter: blur(5px);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 9999;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        .modal-content {
            background: #ffffff;
            color: #333;
            padding: 30px;
            border-radius: 20px;
            text-align: center;
            max-width: 380px;
            width: 90%;
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
            transform: scale(0.9);
            transition: transform 0.3s ease;
        }
        .qrcode-modal.active {
            display: flex;
            opacity: 1;
        }
        .qrcode-modal.active .modal-content {
            transform: scale(1);
        }
        .qrcode-img {
            width: 250px;
            height: 250px;
            margin: 20px auto;
            border: 1px solid #eee;
            padding: 5px;
            border-radius: 10px;
        }
        .close-btn {
            margin-top: 20px;
            padding: 10px 25px;
            background: #f5f5f5;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-weight: 600;
            transition: 0.2s;
        }
        .close-btn:hover {
            background: #e0e0e0;
        }
        
        /* 确保下拉菜单在最上层 */
.dropdown-menu {
    z-index: 9999 !important;
}

.nav-item {
    z-index: 9999;
}
    </style>
</head>
<body>

<header class="front-header">
    <div class="logo-area">
        <a href="/">
            <img src="<?php echo htmlspecialchars($site_logo);?>" alt="Logo" class="logo">
        </a>
    </div>
    
    <!-- PC端导航（带下拉菜单） -->
    <nav class="nav" id="navLinks">
        <?php foreach ($nav_menus as $menu):?>
            <?php if (!empty($menu['children'])):?>
                <div class="nav-item has-dropdown">
                    <a href="<?php echo htmlspecialchars($menu['url']);?>" class="nav-link">
                        <?php echo htmlspecialchars($menu['name']);?>
                    </a>
                    <div class="dropdown-menu">
                        <?php foreach ($menu['children'] as $child): ?>
                            <a href="<?php echo htmlspecialchars($child['url']);?>">
                                <?php echo htmlspecialchars($child['name']);?>
                            </a>
                        <?php endforeach;?>
                    </div>
                </div>
            <?php else:?>
                <div class="nav-item">
                    <a href="<?php echo htmlspecialchars($menu['url']);?>" class="nav-link">
                        <?php echo htmlspecialchars($menu['name']);?>
                    </a>
                </div>
            <?php endif;?>
        <?php endforeach;?>
        
        <?php if ($current_user):?>
            <div class="nav-item">
                <a href="/admin.php" class="nav-link">用户中心</a>
            </div>
        <?php endif;?>
    </nav>
    
    <!-- 用户菜单 -->
    <div class="user-menu">
        <?php if ($current_user):?>
            <div class="user-info">
                <img src="<?php echo htmlspecialchars($current_user['avatar']??'/assets/uploads/default_avatar.png');?>" class="user-avatar">
                <span><?php echo htmlspecialchars($current_user['username']);?></span>
                <span class="balance">余额: ¥<?php echo number_format($current_user['balance'],2);?></span>
                <a href="/modules/home/logout.php" class="btn btn-outline btn-sm">退出</a>
            </div>
        <?php else:?>
            <a href="/modules/home/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>
    
    <button class="mobile-menu-btn" id="mobileMenuBtn">☰</button>
</header>

<!-- 移动端菜单 -->
<div class="mobile-menu" id="mobileMenu">
    <?php foreach ($nav_menus as $menu):?>
        <?php if (!empty($menu['children'])):?>
            <div class="mobile-has-dropdown">
                <span class="mobile-nav-link" onclick="toggleMobileDropdown(this)">
                    <?php echo htmlspecialchars($menu['name']);?>
                </span>
                <div class="mobile-dropdown">
                    <?php foreach ($menu['children'] as $child):?>
                        <a href="<?php echo htmlspecialchars($child['url']);?>">
                            <?php echo htmlspecialchars($child['name']);?>
                        </a>
                    <?php endforeach;?>
                </div>
            </div>
        <?php else:?>
            <a href="<?php echo htmlspecialchars($menu['url']);?>" class="mobile-nav-link">
                <?php echo htmlspecialchars($menu['name']);?>
            </a>
        <?php endif;?>
    <?php endforeach;?>
    
    <?php if ($current_user):?>
        <a href="/admin.php" class="mobile-nav-link">用户中心</a>
        <a href="/modules/home/logout.php" class="mobile-nav-link">退出登录</a>
    <?php else:?>
        <a href="/modules/home/login.php" class="mobile-nav-link">登录</a>
        <a href="/modules/home/register.php" class="mobile-nav-link">注册</a>
    <?php endif;?>
    
    <button id="theme-toggle-mobile" class="mobile-nav-link" style="background: none; border: none; width: 100%; text-align: left;">🌓 切换主题</button>
</div>
<script>
// 主题切换
document.addEventListener('DOMContentLoaded', function() {
    const themeToggleMobile = document.getElementById('theme-toggle-mobile');
    const darkThemeLink = document.getElementById('dark-theme');
    
    const darkMode = localStorage.getItem('darkMode') === 'true';
    if (darkMode) {
        document.documentElement.classList.add('dark');
        if (darkThemeLink) darkThemeLink.disabled = false;
    } else {
        document.documentElement.classList.remove('dark');
        if (darkThemeLink) darkThemeLink.disabled = true;
    }
    
    function toggleTheme() {
        const isDark = document.documentElement.classList.toggle('dark');
        localStorage.setItem('darkMode', isDark);
        if (darkThemeLink) darkThemeLink.disabled = !isDark;
    }
    
    if (themeToggleMobile) themeToggleMobile.addEventListener('click', toggleTheme);
    
    // 移动端菜单
    const menuToggle = document.getElementById('mobileMenuBtn');
    const mobileMenu = document.getElementById('mobileMenu');
    
    if (menuToggle && mobileMenu) {
        menuToggle.addEventListener('click', function(e) {
            e.preventDefault();
            e.stopPropagation();
            mobileMenu.classList.toggle('show');
        });
        
        document.addEventListener('click', function(e) {
            if (mobileMenu && mobileMenu.classList.contains('show')) {
                if (!mobileMenu.contains(e.target) && e.target !== menuToggle) {
                    mobileMenu.classList.remove('show');
                }
            }
        });
    }
});

// 移动端下拉切换
function toggleMobileDropdown(element) {
    const dropdown = element.nextElementSibling;
    if (dropdown) {
        dropdown.classList.toggle('show');
    }
}

// 二维码弹窗
const modal = document.getElementById('qrcodeModal');

function showQrcodeModal() {
    if (modal) {
        modal.classList.add('active');
        document.body.style.overflow = 'hidden';
    }
}

function hideQrcodeModal() {
    if (modal) {
        modal.classList.remove('active');
        document.body.style.overflow = 'auto';
    }
}

if (modal) {
    modal.addEventListener('click', function(e) {
        if (e.target === modal) hideQrcodeModal();
    });
}
</script>
</body>
</html>