<?php

/**
 * Modern Super Admin Portal Layout (RC-005)
 *
 * Layout Architecture:
 * - Desktop: CSS flexbox row — sidebar is a normal flex child (no fixed positioning)
 * - Mobile: sidebar becomes a fixed overlay drawer controlled by Alpine.js
 */

$flash = $flash ?? [];
$title = isset($title) && is_string($title) ? $title . ' • INVEETAIRE' : 'Admin • INVEETAIRE';

// Fetch current user details
$db = \App\Core\Database::getConnection();
$stmt = $db->prepare('SELECT username, display_name, r.name AS role_title 
                       FROM users u 
                       JOIN roles r ON r.id = u.role_id 
                      WHERE u.id = ?');
$stmt->execute([$_SESSION['auth_user_id'] ?? 0]);
$userObj = $stmt->fetch();
$displayName = $userObj ? ($userObj['display_name'] ?: $userObj['username']) : 'Admin';
$roleName = $userObj ? $userObj['role_title'] : 'Super Admin';

$currentUri = $_SERVER['REQUEST_URI'] ?? '';

// Helper to check active state
$navActive = function (string $path) use ($currentUri): string {
    return (strpos($currentUri, $path) !== false)
        ? 'bg-[#D4A28C]/15 text-white border-l-4 border-[#D4A28C]' 
        : 'text-slate-300 hover:bg-white/5 hover:text-white border-l-4 border-transparent';
};

?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= escape_html($title) ?></title>
    <meta name="robots" content="noindex, nofollow">

    <link rel="apple-touch-icon" sizes="180x180" href="<?= asset('/assets/branding/favicon/apple-touch-icon.png') ?>">
    <link rel="icon" type="image/png" sizes="32x32" href="<?= asset('/assets/branding/favicon/favicon-32x32.png') ?>" media="(prefers-color-scheme: light)">
    <link rel="icon" type="image/png" sizes="16x16" href="<?= asset('/assets/branding/favicon/favicon-16x16.png') ?>" media="(prefers-color-scheme: light)">
    <link rel="icon" type="image/png" sizes="32x32" href="<?= asset('/assets/branding/favicon/light-bg/favicon-32x32.png') ?>" media="(prefers-color-scheme: dark)">
    <link rel="icon" type="image/png" sizes="16x16" href="<?= asset('/assets/branding/favicon/light-bg/favicon-16x16.png') ?>" media="(prefers-color-scheme: dark)">
    <link rel="manifest" href="<?= asset('/assets/branding/favicon/site.webmanifest') ?>">

    <link rel="stylesheet" href="<?= asset('/assets/css/all.min.css') ?>">
    <link rel="stylesheet" href="<?= asset('/assets/css/app.css') ?>?v=<?= time() ?>">
    <link rel="stylesheet" href="<?= asset('/assets/css/design_system.css') ?>?v=<?= time() ?>">
    <style>
        /* ── Admin Portal Layout Shell ── */
        html, body { height: 100%; margin: 0; }

        .admin-shell {
            display: flex;
            height: 100vh;
            overflow: hidden;
            background-color: #FAF8F3; /* Ivory brand background */
            font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
            color: #232323; /* Charcoal */
        }

        /* ── Sidebar: always visible on desktop as a flex child ── */
        .admin-sidebar {
            width: 256px;
            min-width: 256px;
            background-color: #232323; /* Charcoal brand sidebar */
            border-right: 1px solid #1a1a1a;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 100%;
            overflow-y: auto;
            flex-shrink: 0;
            z-index: 10;
        }

        /* ── Main content column ── */
        .admin-main {
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            height: 100%;
        }

        /* ── Top navigation bar ── */
        .admin-topbar {
            height: 64px;
            min-height: 64px;
            background: #ffffff;
            border-bottom: 1px solid #e2e8f0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 1.5rem;
            z-index: 20;
        }

        /* ── Scrollable content area ── */
        .admin-content {
            flex: 1;
            overflow-y: auto;
            padding: 2rem;
            background-color: #FAF8F3; /* Ivory */
        }

        .sidebar-nav-link {
            display: flex;
            align-items: center;
            gap: 0.625rem;
            padding: 0.5rem 0.75rem;
            border-radius: 0.375rem;
            font-size: 0.8125rem;
            font-weight: 500;
            text-decoration: none;
            transition: background-color 0.15s, color 0.15s;
            border-left: 3px solid transparent;
            color: #cbd5e1;
        }
        .sidebar-nav-link:hover {
            background-color: rgba(255, 255, 255, 0.06);
            color: #ffffff;
        }
        .sidebar-nav-link.active {
            background-color: rgba(212, 162, 140, 0.14); /* DS001: Rose Gold tint */
            color: #ffffff;
            border-left-color: #D4A28C; /* DS001: Rose Gold Accent */
        }

        /* ── Sidebar footer actions ── */
        .sidebar-footer-link {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.5rem 0.75rem;
            border-radius: 0.5rem;
            font-size: 0.75rem;
            font-weight: 600;
            text-decoration: none;
            color: #94a3b8; /* slate-400 */
            transition: background-color 0.15s, color 0.15s;
        }
        .sidebar-footer-link:hover { background-color: rgba(255, 255, 255, 0.06); color: #ffffff; }
        .sidebar-footer-btn {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            width: 100%;
            padding: 0.5rem 0.75rem;
            border-radius: 0.5rem;
            font-size: 0.75rem;
            font-weight: 600;
            background: none;
            border: none;
            color: #f87171; /* rose-400 */
            cursor: pointer;
            text-align: left;
            transition: background-color 0.15s, color 0.15s;
        }
        .sidebar-footer-btn:hover { background-color: rgba(239,68,68,0.1); }

        /* ── Profile dropdown ── */
        .profile-dropdown {
            position: absolute;
            right: 0;
            top: calc(100% + 0.5rem);
            width: 12rem;
            background: #ffffff;
            border: 1px solid #e2e8f0;
            border-radius: 0.75rem;
            box-shadow: 0 10px 25px rgba(0,0,0,0.12);
            padding: 0.5rem 0;
            z-index: 50;
        }
        .profile-dropdown a {
            display: block;
            padding: 0.5rem 1rem;
            font-size: 0.75rem;
            color: #374151;
            text-decoration: none;
            transition: background-color 0.1s;
        }
        .profile-dropdown a:hover { background-color: #f8fafc; color: #111827; }

        /* ── Mobile: sidebar overlay ── */
        @media (max-width: 1023px) {
            .admin-sidebar {
                position: fixed;
                top: 0; left: 0;
                height: 100%;
                transform: translateX(-100%);
                transition: transform 0.3s ease;
                z-index: 50;
            }
            .admin-sidebar.mobile-open {
                transform: translateX(0);
            }
            .sidebar-overlay {
                display: block;
            }
        }
        @media (min-width: 1024px) {
            .sidebar-overlay { display: none !important; }
            .mobile-hamburger { display: none; }
        }

        /* ── Animations ── */
        .fade-in { animation: fadeIn 0.2s ease-out; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
    </style>
</head>
<body>

    <div class="admin-shell" x-data="{ mobileOpen: false, profileOpen: false }">

        <!-- Mobile sidebar overlay -->
        <div class="sidebar-overlay fixed inset-0 bg-slate-900/80 backdrop-blur-sm z-40" 
             style="display:none" 
             x-show="mobileOpen"
             x-transition:enter="transition-opacity ease-linear duration-200"
             x-transition:enter-start="opacity-0"
             x-transition:enter-end="opacity-100"
             x-transition:leave="transition-opacity ease-linear duration-200"
             x-transition:leave-start="opacity-100"
             x-transition:leave-end="opacity-0"
             @click="mobileOpen = false">
        </div>

        <!-- ── Sidebar ── -->
        <aside class="admin-sidebar" :class="mobileOpen ? 'mobile-open' : ''" id="admin-sidebar">
            
            <div>
                <div style="height:86px; display:flex; align-items:center; justify-content:space-between; padding:0 1.5rem; border-bottom:1px solid #1e293b;">
                    <img src="<?= asset('/assets/branding/logo/Primary-Logo-Dark-TransparentBG.png') ?>" alt="INVEETAIRE Logo" style="height:76px; width:auto; object-fit:contain;">
                    <button @click="mobileOpen = false" style="color:#94a3b8; background:none; border:none; cursor:pointer; font-size:1rem;" class="mobile-hamburger">
                        <i class="fa-solid fa-xmark"></i>
                    </button>
                </div>

                <!-- Platform badge -->
                <div style="padding:1rem 1.5rem; border-bottom:1px solid #1e293b; background:rgba(2,6,23,0.4);">
                    <span style="display:block; font-size:0.625rem; text-transform:uppercase; letter-spacing:0.1em; color:#475569; font-weight:700;">Platform</span>
                    <span style="display:block; font-size:0.875rem; font-weight:600; color:#e2e8f0; margin-top:0.125rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">
                        Super Admin Panel
                    </span>
                </div>

                <!-- Nav Menu Links -->
                <nav style="padding:1rem; display:flex; flex-direction:column; gap:0.75rem;" role="navigation">
                    
                    <!-- WORKSPACE SECTION -->
                    <div>
                        <span style="display:block; font-size:0.55rem; font-weight:800; text-transform:uppercase; letter-spacing:0.1em; color:#475569; padding:0 0.5rem 0.25rem;">Workspace</span>
                        <div style="display:flex; flex-direction:column; gap:0.25rem;">
                            <a href="<?= url('/app/admin/dashboard') ?>" class="sidebar-nav-link <?= ($currentUri === '/app/admin/dashboard' || strpos($currentUri, '/dashboard?search=') !== false) ? 'active' : '' ?>">
                                <div class="w-4 h-4 flex items-center justify-center text-slate-400"><i class="fa-solid fa-list text-inherit"></i></div>
                                <span style="font-size:0.75rem;">Workspace List</span>
                            </a>
                            <a href="<?= url('/app/admin/workspaces/create') ?>" class="sidebar-nav-link <?= (strpos($currentUri, '/workspaces/') !== false) ? 'active' : '' ?>">
                                <div class="w-4 h-4 flex items-center justify-center text-slate-400"><i class="fa-solid fa-plus text-inherit"></i></div>
                                <span style="font-size:0.75rem;">Create Workspace</span>
                            </a>
                        </div>
                    </div>

                    <!-- WORKSPACE USERS SECTION -->
                    <div>
                        <span style="display:block; font-size:0.55rem; font-weight:800; text-transform:uppercase; letter-spacing:0.1em; color:#475569; padding:0 0.5rem 0.25rem;">Workspace Users</span>
                        <div style="display:flex; flex-direction:column; gap:0.25rem;">
                            <a href="<?= url('/app/admin/couples') ?>" class="sidebar-nav-link <?= (strpos($currentUri, '/couples') !== false) ? 'active' : '' ?>">
                                <div class="w-4 h-4 flex items-center justify-center text-slate-400"><i class="fa-solid fa-user text-inherit"></i></div>
                                <span style="font-size:0.75rem;">Couple Accounts</span>
                            </a>
                        </div>
                    </div>

                    <!-- CREW MANAGEMENT SECTION -->
                    <div>
                        <span style="display:block; font-size:0.55rem; font-weight:800; text-transform:uppercase; letter-spacing:0.1em; color:#475569; padding:0 0.5rem 0.25rem;">Crew Management</span>
                        <div style="display:flex; flex-direction:column; gap:0.25rem;">
                            <a href="<?= url('/app/admin/crews') ?>" class="sidebar-nav-link <?= ($currentUri === '/app/admin/crews') ? 'active' : '' ?>">
                                <div class="w-4 h-4 flex items-center justify-center text-slate-400"><i class="fa-solid fa-users text-inherit"></i></div>
                                <span style="font-size:0.75rem;">Crew Accounts</span>
                            </a>
                            <a href="<?= url('/app/admin/crews/assignments') ?>" class="sidebar-nav-link <?= (strpos($currentUri, '/crews/assignments') !== false) ? 'active' : '' ?>">
                                <div class="w-4 h-4 flex items-center justify-center text-slate-400"><i class="fa-solid fa-link text-inherit"></i></div>
                                <span style="font-size:0.75rem;">Workspace Assignment</span>
                            </a>
                        </div>
                    </div>

                    <!-- SYSTEM SECTION -->
                    <div>
                        <span style="display:block; font-size:0.55rem; font-weight:800; text-transform:uppercase; letter-spacing:0.1em; color:#475569; padding:0 0.5rem 0.25rem;">System</span>
                        <div style="display:flex; flex-direction:column; gap:0.25rem;">
                            <a href="<?= url('/app/admin/plans') ?>" class="sidebar-nav-link <?= (strpos($currentUri, '/plans') !== false) ? 'active' : '' ?>">
                                <div class="w-4 h-4 flex items-center justify-center text-slate-400"><i class="fa-solid fa-tags text-inherit"></i></div>
                                <span style="font-size:0.75rem;">Commercial Plans</span>
                            </a>
                            <a href="<?= url('/app/admin/themes') ?>" class="sidebar-nav-link <?= (strpos($currentUri, '/themes') !== false) ? 'active' : '' ?>">
                                <div class="w-4 h-4 flex items-center justify-center text-slate-400"><i class="fa-solid fa-palette text-inherit"></i></div>
                                <span style="font-size:0.75rem;">Theme Management</span>
                            </a>
                            <a href="<?= url('/app/admin/settings') ?>" class="sidebar-nav-link <?= ($currentUri === '/app/admin/settings') ? 'active' : '' ?>">
                                <div class="w-4 h-4 flex items-center justify-center text-slate-400"><i class="fa-solid fa-gear text-inherit"></i></div>
                                <span style="font-size:0.75rem;">Settings</span>
                            </a>
                        </div>
                    </div>

                </nav>
            </div>

            <!-- Footer / Logout area -->
            <div style="padding:1rem; border-top:1px solid #1e293b; background:rgba(2,6,23,0.2); display:flex; flex-direction:column; gap:0.5rem;">
                <a href="<?= url('/app/developer') ?>" class="sidebar-footer-link flex items-center gap-2" title="Developer Console (DX001)">
                    <i class="fa-solid fa-terminal"></i> <span>Dev Console</span>
                </a>
                <a href="<?= url('/app/admin/settings') ?>" class="sidebar-footer-link flex items-center gap-2">
                    <i class="fa-solid fa-key"></i> <span>Change Password</span>
                </a>
                <form action="<?= url('/logout') ?>" method="POST">
                    <input type="hidden" name="_csrf" value="<?= escape_html(\App\Core\Csrf::getToken()) ?>">
                    <button type="submit" class="sidebar-footer-btn flex items-center gap-2">
                        <i class="fa-solid fa-right-from-bracket"></i> <span>Logout</span>
                    </button>
                </form>
            </div>

        </aside>

        <!-- ── Main Content Area ── -->
        <div class="admin-main">
            
            <!-- Top Navigation Bar -->
            <header class="admin-topbar" role="banner">
                <!-- Hamburger for mobile -->
                <button @click="mobileOpen = true" class="mobile-hamburger" style="background:none; border:none; cursor:pointer; font-size:1.25rem; color:#64748b; padding:0.5rem; border-radius:0.5rem;">
                    <i class="fa-solid fa-bars"></i>
                </button>
                
                <!-- Platform breadcrumb -->
                <div style="font-size:0.75rem; font-weight:700; text-transform:uppercase; letter-spacing:0.075em; color:#64748b; display:flex; align-items:center; gap:0.5rem;">
                    <span>Operator Platform</span>
                    <span style="color:#cbd5e1;">/</span>
                    <span style="color:#a855f7;">Super Admin</span>
                </div>

                <!-- Right: Profile dropdown -->
                <div style="position:relative;">
                    <button @click="profileOpen = !profileOpen" 
                            style="background:none; border:none; cursor:pointer; display:flex; align-items:center; gap:0.75rem;">
                        <div style="text-align:right;">
                            <div style="font-size:0.75rem; font-weight:700; color:#1e293b;"><?= escape_html($displayName) ?></div>
                            <div style="font-size:0.625rem; color:#94a3b8; font-weight:600;">Super Admin</div>
                        </div>
                        <div style="width:2rem; height:2rem; border-radius:50%; color:#ffffff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:0.875rem;" class="brand-gradient shadow-sm">
                            <?= strtoupper(substr($displayName, 0, 1)) ?>
                        </div>
                    </button>

                    <!-- Dropdown -->
                    <div class="profile-dropdown" x-show="profileOpen" @click.away="profileOpen = false"
                         x-transition:enter="transition ease-out duration-150"
                         x-transition:enter-start="opacity-0 translate-y-1"
                         x-transition:enter-end="opacity-100 translate-y-0"
                         x-transition:leave="transition ease-in duration-100"
                         x-transition:leave-start="opacity-100"
                         x-transition:leave-end="opacity-0"
                         style="display:none;">
                        <div style="padding:0.5rem 1rem 0.5rem; border-bottom:1px solid #f1f5f9; margin-bottom:0.25rem;">
                            <p style="font-size:0.625rem; color:#94a3b8; font-weight:700; text-transform:uppercase; letter-spacing:0.075em; margin:0;">Signed in as</p>
                            <p style="font-size:0.75rem; font-weight:600; color:#1e293b; margin:0.125rem 0 0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;"><?= escape_html($displayName) ?></p>
                        </div>
                        <a href="<?= url('/app/admin/settings') ?>">Change Password</a>
                        <hr style="margin:0.25rem 0; border:none; border-top:1px solid #f1f5f9;">
                        <form action="<?= url('/logout') ?>" method="POST" style="margin:0;">
                            <input type="hidden" name="_csrf" value="<?= escape_html(\App\Core\Csrf::getToken()) ?>">
                            <button type="submit" style="display:block; width:100%; padding:0.5rem 1rem; font-size:0.75rem; color:#dc2626; font-weight:600; background:none; border:none; cursor:pointer; text-align:left; transition:background 0.1s;" onmouseover="this.style.backgroundColor='#fef2f2'" onmouseout="this.style.backgroundColor='transparent'">
                                Logout
                            </button>
                        </form>
                    </div>
                </div>
            </header>

            <!-- Scrollable page content -->
            <main class="admin-content" id="main-content" role="main">
                <?php include ROOT_PATH . '/app/views/components/flash.php'; ?>
                <div class="fade-in">
                    <?= $content ?>
                </div>
            </main>

        </div>

    </div>

    <!-- Alpine.js -->
    <script src="/assets/js/app.js" defer></script>

</body>
</html>
