<?php

function expense_sidebar_items(string $active = 'home'): array
{
    return [
        ['icon' => 'fa-solid fa-house', 'label' => 'Home', 'href' => page_url('dashboard'), 'key' => 'home'],
        ['icon' => 'fa-solid fa-compass', 'label' => 'Trips', 'href' => page_url('trips'), 'key' => 'trips'],
        ['icon' => 'fa-regular fa-credit-card', 'label' => 'Expenses', 'href' => route_url('expenses/new/'), 'key' => 'expenses'],
        ['icon' => 'fa-regular fa-file-lines', 'label' => 'Reports', 'href' => route_url('reports/new/'), 'key' => 'reports'],
        ['icon' => 'fa-solid fa-folder-open', 'label' => 'Advances', 'href' => page_url('advances'), 'key' => 'advances'],
        ['icon' => 'fa-regular fa-credit-card', 'label' => 'Cards', 'href' => page_url('cards'), 'key' => 'cards'],
        ['icon' => 'fa-solid fa-circle-check', 'label' => 'Approvals', 'href' => page_url('approvals'), 'key' => 'approvals'],
        ['icon' => 'fa-solid fa-chart-column', 'label' => 'Analytics', 'href' => page_url('analytics'), 'key' => 'analytics'],
        ['icon' => 'fa-solid fa-gear', 'label' => 'My Settings', 'href' => page_url('my_settings'), 'key' => 'settings'],
    ];
}

function render_expense_shell_start(string $title, string $bodyClass, string $activeSidebar): void
{
    render_header($title, $bodyClass);
    $sidebarItems = expense_sidebar_items($activeSidebar);
    ?>
    <div class="dashboard-shell">
        <aside class="dashboard-sidebar">
            <div class="sidebar-brand">
                <span class="brand-mark">
                    <span class="brand-ring"></span>
                </span>
                <span class="brand-text">Expense</span>
            </div>

            <nav class="sidebar-nav" aria-label="Primary">
                <?php foreach ($sidebarItems as $item): ?>
                    <?php if (($item['label'] ?? '') === 'Reports'): ?>
                        <div class="sidebar-link-group">
                            <a class="sidebar-link<?= $activeSidebar === $item['key'] ? ' is-active' : '' ?>" href="<?= e($item['href']) ?>">
                                <i class="<?= e($item['icon']) ?>" aria-hidden="true"></i>
                                <span><?= e($item['label']) ?></span>
                            </a>
                            <a class="sidebar-inline-action" href="<?= e(route_url('reports/new/')) ?>" aria-label="Create report">+</a>
                        </div>
                    <?php else: ?>
                        <a class="sidebar-link<?= $activeSidebar === $item['key'] ? ' is-active' : '' ?>" href="<?= e($item['href']) ?>">
                            <i class="<?= e($item['icon']) ?>" aria-hidden="true"></i>
                            <span><?= e($item['label']) ?></span>
                        </a>
                    <?php endif; ?>
                <?php endforeach; ?>
            </nav>

            <button type="button" class="sidebar-admin-switch">
                <i class="fa-solid fa-shield-halved"></i>
                <span>Switch to Admin View</span>
            </button>

            <button type="button" class="sidebar-collapse" aria-label="Collapse sidebar">
                <i class="fa-solid fa-arrow-left-long"></i>
            </button>
        </aside>

        <div class="dashboard-main">
            <header class="dashboard-topbar">
                <label class="dashboard-search">
                    <i class="fa-solid fa-magnifying-glass" aria-hidden="true"></i>
                    <input type="search" placeholder="Search in Expenses ( / )" aria-label="Search in Expenses">
                </label>

                <div class="topbar-right">
                    <div class="trial-pill">
                        <span>Trial expires in 12 days.</span>
                        <a href="#">Upgrade Now</a>
                    </div>

                    <button type="button" class="view-pill">
                        <span class="view-stack">
                            <span class="view-mini">demo</span>
                            <strong>My View</strong>
                        </span>
                        <i class="fa-solid fa-chevron-down" aria-hidden="true"></i>
                    </button>

                    <div class="topbar-quick-add" data-quick-add>
                        <button type="button" class="topbar-square primary" data-quick-add-toggle aria-haspopup="true" aria-expanded="false" aria-label="Quick add">
                            <i class="fa-solid fa-plus" aria-hidden="true"></i>
                        </button>
                        <div class="quick-add-menu" data-quick-add-menu aria-hidden="true">
                            <div class="quick-add-menu-header">QUICK ADD</div>
                            <a class="quick-add-menu-item" href="<?= e(route_url('trips/new/')) ?>">
                                <span class="quick-add-menu-icon"><i class="fa-solid fa-suitcase" aria-hidden="true"></i></span>
                                <span>Trip</span>
                            </a>
                            <a class="quick-add-menu-item" href="<?= e(route_url('expenses/new/')) ?>">
                                <span class="quick-add-menu-icon"><i class="fa-regular fa-credit-card" aria-hidden="true"></i></span>
                                <span>Expense</span>
                            </a>
                            <a class="quick-add-menu-item" href="<?= e(route_url('reports/new/')) ?>">
                                <span class="quick-add-menu-icon"><i class="fa-regular fa-file-lines" aria-hidden="true"></i></span>
                                <span>Report</span>
                            </a>
                            <a class="quick-add-menu-item" href="<?= e(route_url('advances/new/')) ?>">
                                <span class="quick-add-menu-icon"><i class="fa-solid fa-folder-open" aria-hidden="true"></i></span>
                                <span>Advance</span>
                            </a>
                        </div>
                    </div>

                    <button type="button" class="topbar-icon" data-topbar-drawer-open="users" aria-expanded="false" aria-label="Delegates">
                        <i class="fa-solid fa-users" aria-hidden="true"></i>
                    </button>

                    <button type="button" class="topbar-icon" data-topbar-drawer-open="notifications" aria-expanded="false" aria-label="Notifications">
                        <i class="fa-solid fa-bell" aria-hidden="true"></i>
                    </button>

                    <a class="topbar-icon topbar-icon-link" href="<?= e(page_url('my_settings')) ?>" aria-label="Settings">
                        <i class="fa-solid fa-gear" aria-hidden="true"></i>
                    </a>

                    <button type="button" class="avatar-button" data-topbar-drawer-open="profile" aria-expanded="false" aria-label="Open profile menu">
                        <img src="<?= e(asset_url('images/img1.jpg')) ?>" alt="" class="avatar-image">
                    </button>

                    <button type="button" class="topbar-icon topbar-icon--launcher" data-topbar-drawer-open="apps" aria-expanded="false" aria-label="All Zoho apps">
                        <span class="topbar-launcher" aria-hidden="true">
                            <span></span><span></span><span></span>
                            <span></span><span></span><span></span>
                            <span></span><span></span><span></span>
                        </span>
                    </button>
                </div>
            </header>

            <div class="topbar-drawer topbar-drawer--users" data-topbar-drawer="users" aria-hidden="true">
                <button type="button" class="topbar-drawer-backdrop" data-topbar-drawer-close aria-label="Close delegates panel"></button>
                <aside class="topbar-drawer-panel" role="dialog" aria-modal="true" aria-label="Delegates">
                    <button type="button" class="topbar-drawer-close" data-topbar-drawer-close aria-label="Close">
                        <i class="fa-solid fa-xmark" aria-hidden="true"></i>
                    </button>
                    <div class="topbar-drawer-header">
                        <h2>Delegated To Me</h2>
                    </div>
                    <div class="topbar-drawer-empty" style="min-height: 180px;">
                        <div class="topbar-drawer-empty-icon">
                            <i class="fa-regular fa-circle-user" aria-hidden="true"></i>
                        </div>
                        <p>0 users</p>
                    </div>
                </aside>
            </div>

            <div class="topbar-drawer topbar-drawer--notifications" data-topbar-drawer="notifications" aria-hidden="true">
                <button type="button" class="topbar-drawer-backdrop" data-topbar-drawer-close aria-label="Close notifications panel"></button>
                <aside class="topbar-drawer-panel" role="dialog" aria-modal="true" aria-label="Notifications">
                    <button type="button" class="topbar-drawer-close" data-topbar-drawer-close aria-label="Close">
                        <i class="fa-solid fa-xmark" aria-hidden="true"></i>
                    </button>
                    <div class="topbar-drawer-header">
                        <h2>Notifications</h2>
                        <button type="button" class="topbar-drawer-filter">
                            Unread
                            <i class="fa-solid fa-caret-down" aria-hidden="true"></i>
                        </button>
                    </div>
                    <div class="topbar-drawer-note-row">
                        <div>
                            <strong>Desktop Notifications</strong>
                            <span>Stay up to date while you work.</span>
                        </div>
                        <a href="#">Enable</a>
                    </div>
                    <div class="topbar-drawer-empty">
                        <div class="topbar-drawer-empty-icon">
                            <i class="fa-regular fa-bell" aria-hidden="true"></i>
                        </div>
                        <p>Uhh... You don't have any notifications at the moment.</p>
                    </div>
                </aside>
            </div>

            <div class="topbar-drawer topbar-drawer--profile" data-topbar-drawer="profile" aria-hidden="true">
                <button type="button" class="topbar-drawer-backdrop" data-topbar-drawer-close aria-label="Close profile panel"></button>
                <aside class="topbar-drawer-panel" role="dialog" aria-modal="true" aria-label="Profile menu">
                    <button type="button" class="topbar-drawer-close" data-topbar-drawer-close aria-label="Close">
                        <i class="fa-solid fa-xmark" aria-hidden="true"></i>
                    </button>

                    <div class="topbar-drawer-card">
                        <img src="<?= e(asset_url('images/img1.jpg')) ?>" alt="" class="topbar-drawer-avatar">
                        <div>
                            <strong><?= e(trim((string) ($_SESSION['user_company'] ?? $_SESSION['user'] ?? 'Expense user'))) ?></strong>
                            <span><?= e(trim((string) ($_SESSION['user_email'] ?? ''))) ?></span>
                            <div class="topbar-drawer-account-links">
                                <a href="<?= e(page_url('my_settings')) ?>">My Account</a>
                                <span aria-hidden="true">•</span>
                                <a href="<?= e(page_url('logout')) ?>">Sign Out</a>
                            </div>
                        </div>
                    </div>

                    <div class="topbar-drawer-section">
                        <div class="topbar-drawer-note-row">
                            <div>
                                <strong>Delegated To Me</strong>
                                <span>0 users</span>
                            </div>
                            <a href="#">Open</a>
                        </div>
                    </div>

                    <div class="topbar-drawer-section">
                        <div class="topbar-drawer-links">
                            <a href="#"><i class="fa-regular fa-circle-question" aria-hidden="true"></i><span>Help &amp; Support</span></a>
                            <a href="#"><i class="fa-regular fa-compass" aria-hidden="true"></i><span>Take a Tour</span></a>
                            <a href="#"><i class="fa-regular fa-comment-dots" aria-hidden="true"></i><span>Share Feedback</span></a>
                            <a href="#"><i class="fa-regular fa-keyboard" aria-hidden="true"></i><span>View Keyboard Shortcuts</span> <span class="topbar-drawer-badge">New</span></a>
                            <a href="#"><i class="fa-regular fa-calendar" aria-hidden="true"></i><span>Webinar</span></a>
                        </div>
                    </div>

                    <div class="topbar-drawer-section">
                        <div class="topbar-drawer-links">
                            <a href="#"><i class="fa-regular fa-lightbulb" aria-hidden="true"></i><span>Request a Feature</span></a>
                            <a href="#"><i class="fa-regular fa-file-lines" aria-hidden="true"></i><span>Request a Demo</span></a>
                            <a href="#"><i class="fa-regular fa-phone" aria-hidden="true"></i><span>Request a Call</span></a>
                            <a href="#"><i class="fa-solid fa-headphones-simple" aria-hidden="true"></i><span>Contact Support</span></a>
                        </div>
                    </div>

                    <div class="topbar-drawer-divider"></div>

                    <div class="topbar-drawer-section">
                        <div class="topbar-drawer-section-title">
                            <i class="fa-solid fa-sparkles" aria-hidden="true"></i>
                            <h3>What's New?</h3>
                        </div>
                        <div class="topbar-drawer-callout">
                            You can directly talk to us every Monday to Friday
                            <strong>18005692747 - 9.00 AM to 7:00 PM</strong>
                        </div>
                        <div class="topbar-drawer-qr">
                            <div class="topbar-drawer-qr-code" aria-hidden="true"></div>
                            <div class="topbar-drawer-qr-copy">
                                Scan the QR code to download the Zoho Expense mobile app.
                                <strong>Available in</strong>
                                <div class="topbar-drawer-qr-apps" aria-label="Available platforms">
                                    <i class="fa-brands fa-apple" aria-hidden="true"></i>
                                    <i class="fa-brands fa-google-play" aria-hidden="true"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </aside>
            </div>

            <div class="topbar-drawer topbar-drawer--apps" data-topbar-drawer="apps" aria-hidden="true">
                <button type="button" class="topbar-drawer-backdrop" data-topbar-drawer-close aria-label="Close apps panel"></button>
                <aside class="topbar-drawer-panel topbar-drawer-panel--apps" role="dialog" aria-modal="true" aria-label="All Zoho apps">
                    <button type="button" class="topbar-drawer-close" data-topbar-drawer-close aria-label="Close">
                        <i class="fa-solid fa-xmark" aria-hidden="true"></i>
                    </button>
                    <div class="topbar-drawer-header topbar-drawer-header--apps">
                        <h2>All Zoho Apps</h2>
                        <button type="button" class="topbar-drawer-search-toggle" aria-label="Search apps">
                            <i class="fa-solid fa-magnifying-glass" aria-hidden="true"></i>
                        </button>
                    </div>
                    <label class="topbar-drawer-search">
                        <i class="fa-solid fa-magnifying-glass" aria-hidden="true"></i>
                        <input type="search" data-app-search placeholder="Search apps" aria-label="Search apps">
                    </label>

                    <section class="topbar-drawer-section" data-app-section>
                        <div class="topbar-drawer-section-label">Finance Apps</div>
                        <div class="topbar-drawer-app-grid">
                            <a href="#" class="topbar-app-item" data-app-item>
                                <i class="fa-solid fa-book-bookmark" aria-hidden="true"></i>
                                <span class="topbar-app-item-text">
                                    <strong>Zoho Books</strong>
                                    <small>Online Accounting Software</small>
                                </span>
                            </a>
                            <a href="#" class="topbar-app-item" data-app-item>
                                <i class="fa-solid fa-receipt" aria-hidden="true"></i>
                                <span class="topbar-app-item-text">
                                    <strong>Zoho Billing</strong>
                                    <small>End-to-end Billing Solution</small>
                                </span>
                            </a>
                            <a href="#" class="topbar-app-item" data-app-item>
                                <i class="fa-solid fa-boxes-stacked" aria-hidden="true"></i>
                                <span class="topbar-app-item-text">
                                    <strong>Zoho Inventory</strong>
                                    <small>Order &amp; Inventory Management Software</small>
                                </span>
                            </a>
                            <a href="#" class="topbar-app-item" data-app-item>
                                <i class="fa-solid fa-wallet" aria-hidden="true"></i>
                                <span class="topbar-app-item-text">
                                    <strong>Zoho Checkout</strong>
                                    <small>One-time and recurring payments software</small>
                                </span>
                            </a>
                            <a href="#" class="topbar-app-item" data-app-item>
                                <i class="fa-solid fa-cart-shopping" aria-hidden="true"></i>
                                <span class="topbar-app-item-text">
                                    <strong>Zoho Commerce</strong>
                                    <small>Ecommerce software</small>
                                </span>
                            </a>
                            <a href="#" class="topbar-app-item" data-app-item>
                                <i class="fa-solid fa-file-invoice-dollar" aria-hidden="true"></i>
                                <span class="topbar-app-item-text">
                                    <strong>Zoho Payroll</strong>
                                    <small>Simplified Payroll Management Software</small>
                                </span>
                            </a>
                        </div>
                    </section>

                    <section class="topbar-drawer-section" data-app-section>
                        <div class="topbar-drawer-section-label">Email and Collaboration</div>
                        <div class="topbar-drawer-app-grid topbar-drawer-app-grid--compact">
                            <a href="#" class="topbar-app-item topbar-app-item--compact" data-app-item><i class="fa-solid fa-book"></i><span class="topbar-app-item-text"><strong>Notebook</strong></span></a>
                            <a href="#" class="topbar-app-item topbar-app-item--compact" data-app-item><i class="fa-solid fa-circle-play"></i><span class="topbar-app-item-text"><strong>Meeting</strong></span></a>
                            <a href="#" class="topbar-app-item topbar-app-item--compact" data-app-item><i class="fa-solid fa-diagram-project"></i><span class="topbar-app-item-text"><strong>Projects</strong></span></a>
                            <a href="#" class="topbar-app-item topbar-app-item--compact" data-app-item><i class="fa-solid fa-pen-nib"></i><span class="topbar-app-item-text"><strong>Sign</strong></span></a>
                            <a href="#" class="topbar-app-item topbar-app-item--compact" data-app-item><i class="fa-solid fa-jet-fighter-up"></i><span class="topbar-app-item-text"><strong>Sprints</strong></span></a>
                            <a href="#" class="topbar-app-item topbar-app-item--compact" data-app-item><i class="fa-solid fa-inbox"></i><span class="topbar-app-item-text"><strong>TeamInbox</strong></span></a>
                            <a href="#" class="topbar-app-item topbar-app-item--compact" data-app-item><i class="fa-solid fa-envelope"></i><span class="topbar-app-item-text"><strong>Mail</strong></span></a>
                            <a href="#" class="topbar-app-item topbar-app-item--compact" data-app-item><i class="fa-solid fa-comment-dots"></i><span class="topbar-app-item-text"><strong>Cliq</strong></span></a>
                            <a href="#" class="topbar-app-item topbar-app-item--compact" data-app-item><i class="fa-solid fa-table"></i><span class="topbar-app-item-text"><strong>Sheet</strong></span></a>
                            <a href="#" class="topbar-app-item topbar-app-item--compact" data-app-item><i class="fa-solid fa-clapperboard"></i><span class="topbar-app-item-text"><strong>Show</strong></span></a>
                            <a href="#" class="topbar-app-item topbar-app-item--compact" data-app-item><i class="fa-solid fa-file-lines"></i><span class="topbar-app-item-text"><strong>Writer</strong></span></a>
                            <a href="#" class="topbar-app-item topbar-app-item--compact" data-app-item><i class="fa-solid fa-circle-nodes"></i><span class="topbar-app-item-text"><strong>Connect</strong></span></a>
                            <a href="#" class="topbar-app-item topbar-app-item--compact" data-app-item><i class="fa-solid fa-vault"></i><span class="topbar-app-item-text"><strong>Vault</strong></span></a>
                            <a href="#" class="topbar-app-item topbar-app-item--compact" data-app-item><i class="fa-solid fa-folder-open"></i><span class="topbar-app-item-text"><strong>WorkDrive</strong></span></a>
                            <a href="#" class="topbar-app-item topbar-app-item--compact" data-app-item><i class="fa-solid fa-graduation-cap"></i><span class="topbar-app-item-text"><strong>Learn</strong></span></a>
                        </div>
                    </section>

                    <section class="topbar-drawer-section" data-app-section>
                        <div class="topbar-drawer-section-label">Help Desk and Customer Support</div>
                        <div class="topbar-drawer-app-grid topbar-drawer-app-grid--compact">
                            <a href="#" class="topbar-app-item topbar-app-item--compact" data-app-item><i class="fa-solid fa-headset"></i><span class="topbar-app-item-text"><strong>Desk</strong></span></a>
                            <a href="#" class="topbar-app-item topbar-app-item--compact" data-app-item><i class="fa-solid fa-camera-retro"></i><span class="topbar-app-item-text"><strong>Lens</strong></span></a>
                            <a href="#" class="topbar-app-item topbar-app-item--compact" data-app-item><i class="fa-solid fa-user-shield"></i><span class="topbar-app-item-text"><strong>Assist</strong></span></a>
                        </div>
                    </section>

                    <section class="topbar-drawer-section" data-app-section>
                        <div class="topbar-drawer-section-label">Human Resources</div>
                        <div class="topbar-drawer-app-grid topbar-drawer-app-grid--compact">
                            <a href="#" class="topbar-app-item topbar-app-item--compact" data-app-item><i class="fa-solid fa-users"></i><span class="topbar-app-item-text"><strong>People</strong></span></a>
                            <a href="#" class="topbar-app-item topbar-app-item--compact" data-app-item><i class="fa-solid fa-user-plus"></i><span class="topbar-app-item-text"><strong>Recruit</strong></span></a>
                        </div>
                    </section>

                    <section class="topbar-drawer-section" data-app-section>
                        <div class="topbar-drawer-section-label">Business Process</div>
                        <div class="topbar-drawer-app-grid topbar-drawer-app-grid--compact">
                            <a href="#" class="topbar-app-item topbar-app-item--compact" data-app-item><i class="fa-solid fa-chart-line"></i><span class="topbar-app-item-text"><strong>Analytics</strong></span></a>
                            <a href="#" class="topbar-app-item topbar-app-item--compact" data-app-item><i class="fa-solid fa-cube"></i><span class="topbar-app-item-text"><strong>Creator</strong></span></a>
                            <a href="#" class="topbar-app-item topbar-app-item--compact" data-app-item><i class="fa-solid fa-code-branch"></i><span class="topbar-app-item-text"><strong>Flow</strong></span></a>
                            <a href="#" class="topbar-app-item topbar-app-item--compact" data-app-item><i class="fa-solid fa-circle-half-stroke"></i><span class="topbar-app-item-text"><strong>Qntrl</strong></span></a>
                            <a href="#" class="topbar-app-item topbar-app-item--compact" data-app-item><i class="fa-solid fa-wand-magic-sparkles"></i><span class="topbar-app-item-text"><strong>DataPrep</strong></span></a>
                        </div>
                    </section>
                </aside>
            </div>

            <main class="dashboard-content">
    <?php
}

function render_expense_shell_end(): void
{
    ?>
            </main>
        </div>
    </div>
    <?php render_footer(); ?>
    <?php
}
