{{--
    Mockup of the signed-in app shell (sidebar + topbar) around a page's
    content, matching partials/sidebar.blade.php and partials/topbar.blade.php.
--}}
@props([
    'role' => 'admin',
    'active' => '',
    'title' => '',
    'tabs' => [],
    'activeTab' => null,
    'url' => '',
])

@php
    $nav = match ($role) {
        'principal' => [
            ['', [['Dashboard', 'grid-1x2-fill']]],
            ['Schedules', [['Grade 11', 'calendar3'], ['Grade 12', 'calendar3'], ['Teachers', 'people-fill']]],
            ['Monitoring', [['Teacher Load', 'speedometer2'], ['Subject Hours', 'clock-history'], ['Readiness', 'clipboard-check']]],
        ],
        'teacher' => [
            ['Schedules', [['My Schedule', 'person-badge-fill'], ['Grade 11', 'calendar3'], ['Grade 12', 'calendar3'], ['Teachers', 'people-fill']]],
        ],
        default => [
            ['', [['Dashboard', 'grid-1x2-fill'], ['Academic Setup', 'journal-text'], ['Teacher Management', 'people-fill'], ['Scheduling', 'calendar3'], ['Reports', 'file-earmark-bar-graph-fill']]],
        ],
    };

    $bottom = $role === 'admin' ? ['Settings', 'gear-fill'] : ['Change Password', 'key'];

    [$initials, $name, $roleLabel] = match ($role) {
        'principal' => ['ER', 'Elena Ramos', 'Principal'],
        'teacher' => ['MS', 'Maria Santos', 'Teacher'],
        default => ['AD', 'Admin', 'Administrator'],
    };

    $portal = match ($role) {
        'principal' => 'Principal Portal',
        'teacher' => 'Teacher Portal',
        default => null,
    };
@endphp

<x-guide.browser :url="$url">
    <div class="ss-shell">
        <div class="ss-side">
            <div class="ss-brand">
                <span class="ss-logo">@gi('calendar3-week', '#ffffff')</span><br>
                Class Scheduling System
                @if ($portal)<div class="ss-brand-sub">{{ $portal }}</div>@endif
            </div>

            @foreach ($nav as [$label, $items])
                @if ($label)<div class="ss-navlabel">{{ $label }}</div>@endif
                @foreach ($items as [$itemLabel, $itemIcon])
                    <div class="ss-nav {{ $itemLabel === $active ? 'active' : '' }}">@gi($itemIcon, $itemLabel === $active ? '#ffffff' : '#d1d5db') {{ $itemLabel }}</div>
                @endforeach
            @endforeach

            <div class="ss-nav-bottom">
                <div class="ss-nav {{ $bottom[0] === $active ? 'active' : '' }}">@gi($bottom[1], $bottom[0] === $active ? '#ffffff' : '#d1d5db') {{ $bottom[0] }}</div>
            </div>
        </div>

        <div class="ss-main">
            <div class="ss-top">
                <div class="ss-topgrid">
                    <div class="ss-top-left"><span class="ss-burger">@gi('list', '#111827')</span> <span class="ss-title">{{ $title }}</span></div>
                    {{-- Right side comes before the tabs in the markup so the
                         PDF's floats line up; flex order restores it on screen. --}}
                    <div class="ss-top-right">
                        <span class="ss-guide-btn">@gi('book', '#374151') <span class="ss-hide-xs">User Guide</span></span>
                        <span class="ss-account"><span class="ss-avatar">{{ $initials }}</span><span class="ss-account-name ss-hide-xs">{{ $name }}<span class="ss-account-role">{{ $roleLabel }}</span></span></span>
                    </div>
                    @if ($tabs)
                        <div class="ss-top-mid">
                            @foreach ($tabs as $tab)
                                <span class="ss-tab {{ $tab === $activeTab ? 'active' : '' }}">{{ $tab }}</span>
                            @endforeach
                        </div>
                    @endif
                </div>
            </div>

            <div class="ss-page">
                {{ $slot }}
            </div>
        </div>
        <div class="ss-clear"></div>
    </div>
</x-guide.browser>