<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= $pageTitle ?? 'Admin Panel' ?> - <?= htmlspecialchars($settings['site_title'] ?? 'Admin Panel') ?></title>
    <?php if (isset($settings['favicon_path']) && !empty($settings['favicon_path'])): ?>
    <link rel="icon" href="<?= htmlspecialchars($settings['favicon_path']) ?>" type="image/x-icon">
    <link rel="shortcut icon" href="<?= htmlspecialchars($settings['favicon_path']) ?>" type="image/x-icon">
    <?php endif; ?>

    <!-- Locally built Tailwind CSS -->
    <link rel="stylesheet" href="/public/css/styles.css">
    <link rel="stylesheet" href="/public/css/admin.css">
    <link rel="stylesheet" href="/public/css/mobile-nav.css">

    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap" rel="stylesheet">

    <!-- QuillJS -->
    <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
    <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>

    <style>
        body {
            font-family: 'Manrope', sans-serif;
        }

        /* View Transitions API Support */
        @view-transition {
            navigation: auto;
        }

        /* Custom animations for view transitions */
        ::view-transition-group(root) {
            animation-duration: 0.5s;
        }

        ::view-transition-old(root) {
            animation: 0.5s cubic-bezier(0.4, 0, 0.2, 1) both fade-out;
        }

        ::view-transition-new(root) {
            animation: 0.5s cubic-bezier(0.4, 0, 0.2, 1) both fade-in;
        }

        @keyframes fade-in {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        @keyframes fade-out {
            from { opacity: 1; }
            to { opacity: 0; }
        }
    </style>
</head>
<body class="bg-darker text-white min-h-screen flex flex-col">
    <div class="flex min-h-screen">
        <!-- Admin Sidebar -->
        <aside class="hidden lg:block w-64 bg-sidebar-bg border-r border-gray-800 fixed h-full overflow-y-auto">
            <div class="p-4">
                <a href="/admin/dashboard" class="flex items-center justify-center mb-8">
                    <?php if (isset($settings['logo_path']) && !empty($settings['logo_path'])): ?>
                        <img src="<?= htmlspecialchars($settings['logo_path']) ?>" alt="<?= htmlspecialchars($settings['site_title'] ?? 'Site Logo') ?>" class="h-12" onerror="this.src='https://placehold.co/200x80/0F172A/2C7BE5?text=Admin+Panel&font=Manrope'">
                    <?php else: ?>
                        <div class="text-xl font-bold">Admin Panel</div>
                    <?php endif; ?>
                </a>

                <nav class="space-y-1">
                    <a href="/admin/dashboard" class="sidebar-link <?= strpos($_SERVER['REQUEST_URI'], '/admin/dashboard') === 0 ? 'active' : '' ?>">
                        <i class="fas fa-tachometer-alt text-xl"></i>
                        <span>Dashboard</span>
                    </a>
                    <a href="/admin/games" class="sidebar-link <?= strpos($_SERVER['REQUEST_URI'], '/admin/games') === 0 ? 'active' : '' ?>">
                        <i class="fas fa-gamepad text-xl"></i>
                        <span>Games</span>
                    </a>
                    <a href="/admin/categories" class="sidebar-link <?= strpos($_SERVER['REQUEST_URI'], '/admin/categories') === 0 ? 'active' : '' ?>">
                        <i class="fas fa-tags text-xl"></i>
                        <span>Categories</span>
                    </a>
                    <a href="/admin/blog-posts" class="sidebar-link <?= strpos($_SERVER['REQUEST_URI'], '/admin/blog-posts') === 0 ? 'active' : '' ?>">
                        <i class="fas fa-blog text-xl"></i>
                        <span>Blog</span>
                    </a>
                    <a href="/admin/pages" class="sidebar-link <?= strpos($_SERVER['REQUEST_URI'], '/admin/pages') === 0 ? 'active' : '' ?>">
                        <i class="fas fa-file-alt text-xl"></i>
                        <span>Pages</span>
                    </a>
                    <a href="/admin/menus" class="sidebar-link <?= strpos($_SERVER['REQUEST_URI'], '/admin/menus') === 0 ? 'active' : '' ?>">
                        <i class="fas fa-bars text-xl"></i>
                        <span>Menus</span>
                    </a>
                    <a href="/admin/settings" class="sidebar-link <?= strpos($_SERVER['REQUEST_URI'], '/admin/settings') === 0 ? 'active' : '' ?>">
                        <i class="fas fa-cog text-xl"></i>
                        <span>Site Settings</span>
                    </a>
                    <a href="/admin/code-and-ads" class="sidebar-link <?= strpos($_SERVER['REQUEST_URI'], '/admin/code-and-ads') === 0 ? 'active' : '' ?>">
                        <i class="fas fa-code text-xl"></i>
                        <span>Code & Ads</span>
                    </a>
                    <a href="/admin/users" class="sidebar-link <?= strpos($_SERVER['REQUEST_URI'], '/admin/users') === 0 ? 'active' : '' ?>">
                        <i class="fas fa-users text-xl"></i>
                        <span>Users</span>
                    </a>
                    <a href="/admin/points-system" class="sidebar-link <?= strpos($_SERVER['REQUEST_URI'], '/admin/points-system') === 0 ? 'active' : '' ?>">
                        <i class="fas fa-coins text-xl"></i>
                        <span>Points System</span>
                    </a>
                    <a href="/admin/withdrawal-requests" class="sidebar-link <?= strpos($_SERVER['REQUEST_URI'], '/admin/withdrawal-requests') === 0 ? 'active' : '' ?>">
                        <i class="fas fa-money-bill-wave text-xl"></i>
                        <span>Withdrawals</span>
                    </a>
                    <a href="/admin/credentials" class="sidebar-link <?= strpos($_SERVER['REQUEST_URI'], '/admin/credentials') === 0 ? 'active' : '' ?>">
                        <i class="fas fa-user-lock text-xl"></i>
                        <span>Credentials</span>
                    </a>
                    <a href="/admin/import-games" class="sidebar-link <?= strpos($_SERVER['REQUEST_URI'], '/admin/import-games') === 0 ? 'active' : '' ?>">
                        <i class="fas fa-file-import text-xl"></i>
                        <span>Import Games</span>
                    </a>
                    <a href="/admin/logout" class="sidebar-link">
                        <i class="fas fa-sign-out-alt text-xl"></i>
                        <span>Logout</span>
                    </a>
                </nav>
            </div>
        </aside>

        <!-- Main Content -->
        <div class="lg:ml-64 flex-1">
            <!-- Top Navigation -->
            <header class="bg-dark border-b border-gray-800 sticky top-0 z-50">
                <div class="container mx-auto px-4 py-3">
                    <!-- Top Row: Logo and User Actions -->
                    <div class="flex justify-between items-center">
                        <!-- Mobile Logo -->
                        <a href="/admin/dashboard" class="lg:hidden text-2xl font-bold text-white flex items-center">
                            <?php if (isset($settings['logo_path']) && !empty($settings['logo_path'])): ?>
                                <img src="<?= htmlspecialchars($settings['logo_path']) ?>" alt="<?= htmlspecialchars($settings['site_title'] ?? 'Site Logo') ?>" class="h-10" onerror="this.src='https://placehold.co/40x40/0F172A/2C7BE5?text=Admin&font=Manrope'">
                            <?php else: ?>
                                <div>Admin</div>
                            <?php endif; ?>
                        </a>

                        <!-- Page Title -->
                        <div class="hidden md:block">
                            <h1 class="text-xl font-semibold"><?= $pageTitle ?? 'Admin Panel' ?></h1>
                        </div>

                        <!-- User Actions -->
                        <div class="flex items-center gap-4">
                            <a href="/" target="_blank" class="nav-link" title="View Site">
                                <i class="fas fa-external-link-alt"></i>
                                <span class="hidden md:inline ml-2">View Site</span>
                            </a>
                        </div>
                    </div>
                </div>
            </header>

            <!-- Mobile Sidebar (Hidden by default) -->
            <div id="mobileSidebar" class="lg:hidden fixed inset-0 bg-darker bg-opacity-90 z-50 hidden">
                <div class="bg-sidebar-bg h-full w-64 shadow-lg overflow-y-auto">
                    <div class="p-4">
                        <div class="flex items-center justify-between mb-6">
                            <a href="/admin/dashboard" class="text-2xl font-bold text-white">
                                <?php if (isset($settings['logo_path']) && !empty($settings['logo_path'])): ?>
                                    <img src="<?= htmlspecialchars($settings['logo_path']) ?>" alt="<?= htmlspecialchars($settings['site_title'] ?? 'Site Logo') ?>" class="h-10" onerror="this.src='https://placehold.co/200x80/0F172A/2C7BE5?text=Admin+Panel&font=Manrope'">
                                <?php else: ?>
                                    <div>Admin Panel</div>
                                <?php endif; ?>
                            </a>
                            <button id="closeMobileMenu" class="text-gray-400 hover:text-white">
                                <i class="fas fa-times text-xl"></i>
                            </button>
                        </div>

                        <nav class="space-y-1">
                            <a href="/admin/dashboard" class="sidebar-link <?= strpos($_SERVER['REQUEST_URI'], '/admin/dashboard') === 0 ? 'active' : '' ?>">
                                <i class="fas fa-tachometer-alt text-xl"></i>
                                <span>Dashboard</span>
                            </a>
                            <a href="/admin/games" class="sidebar-link <?= strpos($_SERVER['REQUEST_URI'], '/admin/games') === 0 ? 'active' : '' ?>">
                                <i class="fas fa-gamepad text-xl"></i>
                                <span>Games</span>
                            </a>
                            <a href="/admin/categories" class="sidebar-link <?= strpos($_SERVER['REQUEST_URI'], '/admin/categories') === 0 ? 'active' : '' ?>">
                                <i class="fas fa-tags text-xl"></i>
                                <span>Categories</span>
                            </a>
                            <a href="/admin/blog-posts" class="sidebar-link <?= strpos($_SERVER['REQUEST_URI'], '/admin/blog-posts') === 0 ? 'active' : '' ?>">
                                <i class="fas fa-blog text-xl"></i>
                                <span>Blog</span>
                            </a>
                            <a href="/admin/pages" class="sidebar-link <?= strpos($_SERVER['REQUEST_URI'], '/admin/pages') === 0 ? 'active' : '' ?>">
                                <i class="fas fa-file-alt text-xl"></i>
                                <span>Pages</span>
                            </a>
                            <a href="/admin/menus" class="sidebar-link <?= strpos($_SERVER['REQUEST_URI'], '/admin/menus') === 0 ? 'active' : '' ?>">
                                <i class="fas fa-bars text-xl"></i>
                                <span>Menus</span>
                            </a>
                            <a href="/admin/settings" class="sidebar-link <?= strpos($_SERVER['REQUEST_URI'], '/admin/settings') === 0 ? 'active' : '' ?>">
                                <i class="fas fa-cog text-xl"></i>
                                <span>Site Settings</span>
                            </a>
                            <a href="/admin/code-and-ads" class="sidebar-link <?= strpos($_SERVER['REQUEST_URI'], '/admin/code-and-ads') === 0 ? 'active' : '' ?>">
                                <i class="fas fa-code text-xl"></i>
                                <span>Code & Ads</span>
                            </a>
                            <a href="/admin/users" class="sidebar-link <?= strpos($_SERVER['REQUEST_URI'], '/admin/users') === 0 ? 'active' : '' ?>">
                                <i class="fas fa-users text-xl"></i>
                                <span>Users</span>
                            </a>
                            <a href="/admin/points-system" class="sidebar-link <?= strpos($_SERVER['REQUEST_URI'], '/admin/points-system') === 0 ? 'active' : '' ?>">
                                <i class="fas fa-coins text-xl"></i>
                                <span>Points System</span>
                            </a>
                            <a href="/admin/withdrawal-requests" class="sidebar-link <?= strpos($_SERVER['REQUEST_URI'], '/admin/withdrawal-requests') === 0 ? 'active' : '' ?>">
                                <i class="fas fa-money-bill-wave text-xl"></i>
                                <span>Withdrawals</span>
                            </a>
                            <a href="/admin/credentials" class="sidebar-link <?= strpos($_SERVER['REQUEST_URI'], '/admin/credentials') === 0 ? 'active' : '' ?>">
                                <i class="fas fa-user-lock text-xl"></i>
                                <span>Admin Credentials</span>
                            </a>
                            <a href="/admin/import-games" class="sidebar-link <?= strpos($_SERVER['REQUEST_URI'], '/admin/import-games') === 0 ? 'active' : '' ?>">
                                <i class="fas fa-file-import text-xl"></i>
                                <span>Import Games</span>
                            </a>
                            <a href="/admin/logout" class="sidebar-link">
                                <i class="fas fa-sign-out-alt text-xl"></i>
                                <span>Logout</span>
                            </a>
                        </nav>
                    </div>
                </div>
            </div>

            <main class="flex-1 p-4">
                <!-- Mobile Bottom Navigation Bar -->
                <nav class="mobile-bottom-nav">
                    <?php
                    // Determine active page
                    $currentPath = $_SERVER['REQUEST_URI'];
                    $isDashboard = strpos($currentPath, '/admin/dashboard') === 0 || $currentPath === '/admin';
                    $isGames = strpos($currentPath, '/admin/games') === 0;
                    $isSettings = strpos($currentPath, '/admin/settings') === 0;
                    $isMenu = false; // Will be toggled by JS when menu is open
                    ?>

                    <a href="/admin/dashboard" class="mobile-nav-item <?= $isDashboard ? 'active' : '' ?>">
                        <i class="fas fa-tachometer-alt"></i>
                        <span>Dashboard</span>
                    </a>

                    <a href="/admin/games" class="mobile-nav-item <?= $isGames ? 'active' : '' ?>">
                        <i class="fas fa-gamepad"></i>
                        <span>Games</span>
                    </a>

                    <a href="/admin/settings" class="mobile-nav-item <?= $isSettings ? 'active' : '' ?>">
                        <i class="fas fa-cog"></i>
                        <span>Settings</span>
                    </a>

                    <a href="/" class="mobile-nav-item">
                        <i class="fas fa-external-link-alt"></i>
                        <span>View Site</span>
                    </a>

                    <button id="mobileNavMenuBtn" class="mobile-nav-item <?= $isMenu ? 'active' : '' ?>">
                        <i class="fas fa-bars"></i>
                        <span>Menu</span>
                    </button>
                </nav>
                <?php if (isset($success) && $success): ?>
                    <div class="bg-green-800 text-white p-4 rounded-md mb-6">
                        <i class="fas fa-check-circle mr-2"></i> Settings saved successfully!
                    </div>
                <?php endif; ?>

                <?= $content ?? '' ?>
            </main>

            <!-- Footer -->
            <footer class="bg-dark border-t border-gray-800 py-4 mt-auto">
                <div class="container mx-auto px-4 text-center text-gray-400">
                    <p class="text-sm">&copy; <?= date('Y') ?> <?= htmlspecialchars($settings['site_title'] ?? 'Admin Panel') ?>. All Rights Reserved.</p>
                </div>
            </footer>
        </div>
    </div>

    <script>
        // Mobile sidebar functionality
        const mobileSidebar = document.getElementById('mobileSidebar');
        const closeMobileMenu = document.getElementById('closeMobileMenu');
        const mobileNavMenuBtn = document.getElementById('mobileNavMenuBtn');

        // Function to toggle mobile sidebar
        function toggleMobileSidebar() {
            mobileSidebar.classList.toggle('hidden');
            document.body.classList.toggle('overflow-hidden');

            // Toggle active class on the bottom nav menu button
            if (mobileNavMenuBtn) {
                mobileNavMenuBtn.classList.toggle('active');
            }
        }

        // Bottom nav menu button
        if (mobileNavMenuBtn) {
            mobileNavMenuBtn.addEventListener('click', toggleMobileSidebar);
        }

        // Close button
        if (closeMobileMenu) {
            closeMobileMenu.addEventListener('click', () => {
                mobileSidebar.classList.add('hidden');
                document.body.classList.remove('overflow-hidden');

                // Remove active class from bottom nav menu button
                if (mobileNavMenuBtn) {
                    mobileNavMenuBtn.classList.remove('active');
                }
            });
        }
    </script>

    <!-- View Transitions API Support -->
    <script src="/public/js/view-transitions.js"></script>
</body>
</html>