<!DOCTYPE html>
<?php
if (!isset($baseUrl)) $baseUrl = '';
if (!isset($assetsUrl)) $assetsUrl = rtrim($baseUrl, '/') . '/assets';
if (!isset($project)) $project = [];
if (!isset($user)) $user = [];
if (!isset($navItems)) $navItems = [];

use PpPhp\Core\Assets\SpaAssetManager;
?>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= htmlspecialchars($project['name'] ?? 'Project') ?> · PPPHP</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'; ?>

    <?= SpaAssetManager::renderIconCss($baseUrl) ?>

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

        body {
            background-color: #f5f6fa;
        }

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

        .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;
            overflow-x: hidden;
            z-index: 1020;
        }

        .sidebar.collapsed {
            width: 0;
        }

        .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, #172033);
        }

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

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

        @media (max-width: 991.98px) {
            .sidebar {
                display: none;
            }

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

        .nav-item i {
            width: 24px;
            text-align: center;
        }
    </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">
            <button class="btn btn-dark d-lg-none me-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#sidebarOffcanvas">
                <i class="bi bi-list fs-4"></i>
            </button>
            <a class="navbar-brand d-flex align-items-center" href="<?= $baseUrl ?>/projects">
                <?= \PpPhp\Core\Brand::mark(34) ?>
                <span class="d-none d-sm-inline ms-2"><?= htmlspecialchars($project['name'] ?? 'Project') ?></span>
            </a>
            <span class="text-white-50 ms-3 d-none d-md-inline"><?= htmlspecialchars($project['description'] ?? '') ?></span>
        </div>
        <div class="d-flex align-items-center gap-2">
            <?php include constant('BASE_PATH') . '/core/views/theme-toggle.php'; ?>
            <div class="dropdown">
            <a href="#" onclick="return false;" class="d-flex align-items-center text-white text-decoration-none dropdown-toggle" data-bs-toggle="dropdown">
                <i class="bi bi-person-circle me-2"></i><?= htmlspecialchars($user['username'] ?? 'Admin') ?>
            </a>
            <ul class="dropdown-menu dropdown-menu-dark dropdown-menu-end">
                <?php if (\PpPhp\Core\Security::IsAdmin()): /* superadmin + owner */ ?>
                    <li><a class="dropdown-item" href="<?= $baseUrl ?>/users"><i class="bi bi-people me-2"></i>Manage Users</a></li>
                    <li><a class="dropdown-item" href="<?= $baseUrl ?>/platform/updates"><i class="bi bi-arrow-repeat me-2"></i>Updates</a></li>
                    <?php include constant('BASE_PATH') . '/core/views/license-menu.php'; ?>
                    <li>
                        <hr class="dropdown-divider">
                    </li>
                <?php endif; ?>
                <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 Desktop -->
    <nav id="sidebarDesktop" class="sidebar d-none d-lg-flex flex-column py-3">
        <ul class="nav nav-pills flex-column mb-auto">
            <li class="nav-item">
                <a href="<?= $baseUrl ?>/projects" class="nav-link">
                    <i class="bi bi-arrow-left me-2"></i> Back to Projects
                </a>
            </li>
            <li>
                <hr class="text-secondary my-2">
            </li>
            <?php foreach ($navItems as $item): ?>
                <li class="nav-item">
                    <a href="<?= htmlspecialchars($item['uri'] ?? '#') ?>"
                        class="nav-link">
                        <i class="bi bi-<?= $item['icon'] ?? 'circle' ?> me-2"></i>
                        <?= htmlspecialchars($item['label']) ?>
                    </a>
                </li>
            <?php endforeach; ?>
        </ul>
        <div class="mt-auto px-3 pb-1"><?php include constant('BASE_PATH') . '/core/views/sidebar-version.php'; ?></div>
    </nav>

    <!-- Mobile Offcanvas -->
    <div class="offcanvas offcanvas-start bg-dark text-white d-lg-none" id="sidebarOffcanvas">
        <div class="offcanvas-header">
            <h5 class="offcanvas-title"><?= htmlspecialchars($project['name'] ?? 'Project') ?></h5>
            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas"></button>
        </div>
        <div class="offcanvas-body">
            <a href="<?= $baseUrl ?>/projects" class="btn btn-outline-light w-100 mb-3"><i class="bi bi-arrow-left me-2"></i> Back to Projects</a>
            <ul class="nav nav-pills flex-column">
                <?php foreach ($navItems as $item): ?>
                    <li class="nav-item">
                        <a href="<?= htmlspecialchars($item['uri'] ?? '#') ?>" class="nav-link text-white">
                            <i class="bi bi-<?= $item['icon'] ?? 'circle' ?> me-2"></i><?= htmlspecialchars($item['label']) ?>
                        </a>
                    </li>
                <?php endforeach; ?>
            </ul>
        </div>
    </div>

    <!-- Main Content -->
    <main id="mainContent" class="main-content">
        <!-- Toggle sidebar -->
        <div class="d-flex align-items-center mb-4">
            <span class="sidebar-toggle d-none d-lg-block me-3" id="sidebarToggle" title="Toggle Sidebar">
                <i class="bi bi-layout-sidebar-inset fs-4"></i>
            </span>
            <h2 class="mb-0"><?= htmlspecialchars($project['name'] ?? 'Project') ?> Workspace</h2>
        </div>

        <div class="row">
            <div class="col-12">
                <div class="card shadow-sm">
                    <div class="card-body text-center py-5">
                        <i class="bi bi-wrench display-1 text-muted mb-3"></i>
                        <h5>Welcome to the Project Workspace</h5>
                        <p class="text-muted">Select a tool from the sidebar to start building your application.</p>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <script src="<?= $assetsUrl ?>/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script>
        // Sidebar toggle
        document.addEventListener('DOMContentLoaded', function() {
            const toggleBtn = document.getElementById('sidebarToggle');
            const sidebar = document.getElementById('sidebarDesktop');
            const main = document.getElementById('mainContent');
            if (toggleBtn && sidebar && main) {
                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>

    <?= SpaAssetManager::renderSharedIconManagerJs($baseUrl) ?>
    <?= SpaAssetManager::renderIconJs($baseUrl) ?>

</body>

</html>
