<!DOCTYPE html>
<?php
// Ensure variables are set
if (!isset($baseUrl)) {
    $baseUrl = '';
}
if (!isset($assetsUrl)) {
    $assetsUrl = rtrim($baseUrl, '/') . '/assets';
}
if (!isset($menu) || !is_array($menu)) {
    $menu = [];
}
if (!isset($user)) {
    $user = [];
}
if (!isset($flash)) {
    $flash = [];
}
?>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
    <title><?= htmlspecialchars(\PpPhp\Core\Brand::name()) ?> · Admin</title>
    <?php include constant('BASE_PATH') . '/core/views/favicon.php'; ?>
    <link href="<?= $assetsUrl ?>/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="<?= $assetsUrl ?>/icons/bootstrap-icons.css" rel="stylesheet">
    <?php include constant('BASE_PATH') . '/core/views/theme-head.php'; ?>
    <!-- SweetAlert2 -->
    <link href="<?= $assetsUrl ?>/sweetalert2/sweetalert2.min.css" rel="stylesheet">
    <script src="<?= $assetsUrl ?>/sweetalert2/sweetalert2.min.js"></script>

    <style>
        :root {
            --sidebar-width: 250px;
            --sidebar-collapsed-width: 0px;
            --topbar-height: 56px;
        }

        body {
            background-color: var(--pp-app-bg, #f5f6fa);
            color: var(--pp-text, #172033);
        }

        /* Top navbar */
        .navbar-top {
            height: var(--topbar-height);
            z-index: 1030;
        }

        .navbar-top .navbar-brand {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-weight: 600;
        }

        /* Sidebar */
        .sidebar {
            position: fixed;
            top: var(--topbar-height);
            left: 0;
            bottom: 0;
            width: var(--sidebar-width);
            background: var(--pp-surface, #1e293b);
            color: var(--pp-text-muted, #cbd5e1);
            border-right: 1px solid var(--pp-border, #26303f);
            transition: width 0.3s ease;
            overflow-x: hidden;
            z-index: 1020;
        }

        .sidebar.collapsed {
            width: var(--sidebar-collapsed-width);
        }

        .sidebar .nav-link {
            color: var(--pp-text-muted, #cbd5e1);
            padding: 0.6rem 1.5rem;
            white-space: nowrap;
        }

        .sidebar .nav-link:hover,
        .sidebar .nav-link.active {
            background-color: color-mix(in srgb, var(--pp-accent, #4f46e5) 12%, transparent);
            color: var(--pp-text, #fff);
        }

        .sidebar .nav-link i {
            font-size: 1.2rem;
            width: 24px;
            text-align: center;
        }

        /* Main content */
        .main-content {
            margin-left: var(--sidebar-width);
            margin-top: var(--topbar-height);
            padding: 1.5rem;
            transition: margin-left 0.3s ease;
        }

        .main-content.expanded {
            margin-left: var(--sidebar-collapsed-width);
        }

        /* Toggle button inside main */
        .sidebar-toggle {
            cursor: pointer;
            font-size: 1.4rem;
        }

        /* Offcanvas on mobile (Bootstrap handles) */
        @media (max-width: 991.98px) {
            .sidebar {
                /* On mobile, we hide the fixed sidebar and use offcanvas instead */
                display: none;
            }

            .main-content,
            .main-content.expanded {
                margin-left: 0;
            }
        }

        /* Logo SVG */
        .logo-svg {
            width: 36px;
            height: 36px;
        }

        /* Flash messages container */
        .flash-container {
            margin-bottom: 1rem;
        }
    </style>
</head>

<body>

    <!-- Top Navbar -->
    <nav class="navbar navbar-top navbar-dark bg-dark px-3 fixed-top shadow-sm">
        <div class="d-flex align-items-center">
            <!-- Hamburger for mobile offcanvas -->
            <button class="btn btn-dark d-lg-none me-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#sidebarOffcanvas" aria-controls="sidebarOffcanvas">
                <i class="bi bi-list fs-4"></i>
            </button>
            <!-- Brand Logo -->
            <a class="navbar-brand d-flex align-items-center gap-2" href="<?= $baseUrl ?>/">
                <?= \PpPhp\Core\Brand::lockup(34) ?>
            </a>
        </div>
        <!-- Right side: notifications + theme + user dropdown -->
        <div class="d-flex align-items-center gap-2">
            <?php include constant('BASE_PATH') . '/core/views/command-palette.php'; ?>
            <?php include constant('BASE_PATH') . '/core/views/keyboard-shortcuts.php'; ?>
            <?php include constant('BASE_PATH') . '/core/views/notification-bell.php'; ?>
            <?php include constant('BASE_PATH') . '/core/views/theme-toggle.php'; ?>
            <div class="dropdown">
            <a href="#" class="d-flex align-items-center text-white text-decoration-none dropdown-toggle" id="userMenu" data-bs-toggle="dropdown">
                <i class="bi bi-person-circle me-2"></i>
                <span class="nav-username"><?= htmlspecialchars($user['username'] ?? 'Admin') ?></span>
            </a>
            <ul class="dropdown-menu dropdown-menu-dark dropdown-menu-end shadow" aria-labelledby="userMenu">
                <li><a class="dropdown-item" href="<?= $baseUrl ?>/profile"><i class="bi bi-person me-2"></i>Profile</a></li>
                <li><a class="dropdown-item" href="<?= $baseUrl ?>/change-password"><i class="bi bi-key me-2"></i>Change Password</a></li>
                <li>
                    <hr class="dropdown-divider">
                </li>
                <li><a class="dropdown-item" href="<?= $baseUrl ?>/logout"><i class="bi bi-box-arrow-right me-2"></i>Sign out</a></li>
            </ul>
            </div>
        </div>
    </nav>

    <!-- Sidebar for Desktop (visible on lg+) -->
    <nav id="sidebarDesktop" class="sidebar d-none d-lg-flex flex-column py-3">
        <ul class="nav nav-pills flex-column mb-auto">
            <?php foreach ($menu as $item): ?>
                <li class="nav-item">
                    <a href="<?= htmlspecialchars($baseUrl . ($item['uri'] ?? '#')) ?>"
                        class="nav-link <?= ($item['active'] ?? false) ? 'active' : '' ?>">
                        <i class="bi bi-<?= $item['icon'] ?? 'circle' ?>"></i>
                        <span class="sidebar-text"><?= htmlspecialchars($item['label']) ?></span>
                    </a>
                    <?php if (!empty($item['children'])): ?>
                        <ul class="nav flex-column ms-3">
                            <?php foreach ($item['children'] as $child): ?>
                                <li class="nav-item">
                                    <a href="<?= htmlspecialchars($baseUrl . ($child['uri'] ?? '#')) ?>"
                                        class="nav-link">
                                        <i class="bi bi-<?= $child['icon'] ?? 'dot' ?>"></i>
                                        <span class="sidebar-text"><?= htmlspecialchars($child['label']) ?></span>
                                    </a>
                                </li>
                            <?php endforeach; ?>
                        </ul>
                    <?php endif; ?>
                </li>
            <?php endforeach; ?>
        </ul>
        <div class="mt-auto px-3 pb-3">
            <?php include constant('BASE_PATH') . '/core/views/sidebar-version.php'; ?>
        </div>
    </nav>

    <!-- Offcanvas Sidebar for Mobile -->
    <div class="offcanvas offcanvas-start bg-dark text-white d-lg-none" tabindex="-1" id="sidebarOffcanvas" aria-labelledby="sidebarOffcanvasLabel">
        <div class="offcanvas-header">
            <h5 class="offcanvas-title d-flex align-items-center gap-2" id="sidebarOffcanvasLabel">
                <?= \PpPhp\Core\Brand::lockup(30) ?>
            </h5>
            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">
            <ul class="nav nav-pills flex-column">
                <?php foreach ($menu as $item): ?>
                    <li class="nav-item">
                        <a href="<?= htmlspecialchars($baseUrl . ($item['uri'] ?? '#')) ?>"
                            class="nav-link text-white <?= ($item['active'] ?? false) ? 'active' : '' ?>">
                            <i class="bi bi-<?= $item['icon'] ?? 'circle' ?> me-2"></i>
                            <?= htmlspecialchars($item['label']) ?>
                        </a>
                        <?php if (!empty($item['children'])): ?>
                            <ul class="nav flex-column ms-3">
                                <?php foreach ($item['children'] as $child): ?>
                                    <li class="nav-item">
                                        <a href="<?= htmlspecialchars($baseUrl . ($child['uri'] ?? '#')) ?>"
                                            class="nav-link text-white">
                                            <i class="bi bi-<?= $child['icon'] ?? 'dot' ?> me-2"></i>
                                            <?= htmlspecialchars($child['label']) ?>
                                        </a>
                                    </li>
                                <?php endforeach; ?>
                            </ul>
                        <?php endif; ?>
                    </li>
                <?php endforeach; ?>
            </ul>
        </div>
    </div>

    <!-- Main Content -->
    <main id="mainContent" class="main-content">
        <!-- Flash Messages -->
        <?php if (!empty($flash)): ?>
            <div class="flash-container">
                <?php foreach ($flash as $key => $message): ?>
                    <?php $type = str_contains($key, 'error') ? 'danger' : 'success'; ?>
                    <div class="alert alert-<?= $type ?> alert-dismissible fade show" role="alert">
                        <?= htmlspecialchars($message) ?>
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                <?php endforeach; ?>
            </div>
        <?php endif; ?>

        <!-- Dashboard header with sidebar toggle -->
        <div class="d-flex justify-content-between align-items-center mb-4">
            <div class="d-flex align-items-center gap-3">
                <!-- Toggle sidebar on desktop -->
                <span class="sidebar-toggle d-none d-lg-block" id="sidebarToggle" title="Toggle Sidebar">
                    <i class="bi bi-layout-sidebar-inset"></i>
                </span>
                <h2 class="mb-0">Dashboard</h2>
            </div>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-0">
                    <li class="breadcrumb-item active">Home</li>
                </ol>
            </nav>
        </div>

        <!-- Workspace where modules will be loaded -->
        <div id="workspace">
            <div class="row">
                <div class="col-md-6 mb-4">
                    <div class="card shadow-sm">
                        <div class="card-body">
                            <h5 class="card-title">Welcome to <?= htmlspecialchars(\PpPhp\Core\Brand::name()) ?></h5>
                            <p class="card-text">Your rapid development framework is running. Build your first module!</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <script src="<?= $assetsUrl ?>/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script>
        // Desktop sidebar collapse toggle
        document.addEventListener('DOMContentLoaded', function() {
            const toggleBtn = document.getElementById('sidebarToggle');
            const sidebar = document.getElementById('sidebarDesktop');
            const main = document.getElementById('mainContent');

            if (toggleBtn && sidebar && main) {
                // Retrieve saved state from localStorage
                const collapsed = localStorage.getItem('sidebarCollapsed') === 'true';
                if (collapsed) {
                    sidebar.classList.add('collapsed');
                    main.classList.add('expanded');
                    toggleBtn.querySelector('i').classList.replace('bi-layout-sidebar-inset', 'bi-layout-sidebar');
                }

                toggleBtn.addEventListener('click', function() {
                    const isCollapsed = sidebar.classList.contains('collapsed');
                    if (isCollapsed) {
                        sidebar.classList.remove('collapsed');
                        main.classList.remove('expanded');
                        toggleBtn.querySelector('i').classList.replace('bi-layout-sidebar', 'bi-layout-sidebar-inset');
                        localStorage.setItem('sidebarCollapsed', 'false');
                    } else {
                        sidebar.classList.add('collapsed');
                        main.classList.add('expanded');
                        toggleBtn.querySelector('i').classList.replace('bi-layout-sidebar-inset', 'bi-layout-sidebar');
                        localStorage.setItem('sidebarCollapsed', 'true');
                    }
                });
            }
        });
    </script>
</body>

</html>
