{{--
    brafa Systems — admin sidebar.
    Mirror of prototype/admin/shell.jsx → Sidebar component.

    Hard constraints kept from the previous implementation:
      • id="sidenav-main" — Material Dashboard's mobile toggle in
        navs/auth.blade.php targets this id to slide the sidebar in.
      • role_id == 1 gating on admin-only items.
      • All href values use the existing named routes.
--}}

@php
    use Illuminate\Support\Facades\Auth;
    use Illuminate\Support\Facades\Route;

    $routeName = Route::currentRouteName();
    $isSuperAdmin = Auth::check() && Auth::user()->role_id == 1;

    /* Map current route → nav item id so we can flag the active item. */
    $brafaActiveNav = match (true) {
        in_array($routeName, ['dashboard']) => 'dashboard',
        in_array($routeName, ['lock-overview']) => 'locks',
        in_array($routeName, ['user-management']) => 'users',
        in_array($routeName, ['lock-records']) => 'records',
        in_array($routeName, ['staff.management']) => 'staff',
        in_array($routeName, ['ajax.dashboard']) => 'ajax',
        in_array($routeName, ['locks-by-month']) => 'stats',
        in_array($routeName, ['rooms.index']) => 'rooms',
        in_array($routeName, ['port.map']) => 'portmap',
        in_array($routeName, ['notes-kanban']) => 'notes',
        in_array($routeName, ['superadmin.parka-tokens']) => 'parka',
        in_array($routeName, ['user-profile']) => 'profile',
        in_array($routeName, ['set-api-key']) || str_starts_with((string) $routeName, 'properties.') => 'properties',
        default => null,
    };

    /* If the user landed on one of the four MORE items, expand the group
       on first paint so the active row isn't hidden under a collapsed header. */
    $brafaMoreOpen = in_array($brafaActiveNav, ['ajax', 'portmap', 'notes', 'parka'], true);

    $authUserName = Auth::check() ? Auth::user()->name : 'Guest';
    $authUserPicture = Auth::check() && Auth::user()->picture
        ? asset('storage/' . Auth::user()->picture)
        : null;
    $authUserInitials = collect(explode(' ', trim((string) $authUserName)))
        ->filter()
        ->take(2)
        ->map(fn ($p) => strtoupper(mb_substr($p, 0, 1)))
        ->implode('');
    $authUserRoleLabel = match (Auth::check() ? (int) Auth::user()->role_id : 0) {
        1 => 'Superadmin',
        2 => 'Admin',
        default => 'Staff',
    };
@endphp

<aside id="sidenav-main" class="brafa-sidebar" aria-label="Primary">
    {{-- Brand — the brafa Systems lockup. The artwork ships white; on this
         white surface we render it black via filter (.brafa-brand-logo). --}}
    <a href="{{ route('set-api-key') }}" class="brafa-brand">
        <img src="{{ asset('assets/img/brafa-Systems-white.png') }}"
             alt="brafa Systems"
             class="brafa-brand-logo">
    </a>

    {{-- MANAGE ---------------------------------------------------- --}}
    <nav class="brafa-nav-group" aria-label="Manage">
        <div class="brafa-nav-eyebrow">Manage</div>

        <a href="{{ route('dashboard') }}"
           class="brafa-nav-item {{ $brafaActiveNav === 'dashboard' ? 'is-active' : '' }}">
            <x-lucide name="layout" size="16" />
            <span class="brafa-nav-item__label">Dashboard</span>
        </a>

        <a href="{{ route('set-api-key') }}"
           class="brafa-nav-item {{ $brafaActiveNav === 'properties' ? 'is-active' : '' }}">
            <x-lucide name="building" size="16" />
            <span class="brafa-nav-item__label">Properties</span>
        </a>

        @if ($isSuperAdmin)
            <a href="{{ route('lock-overview') }}"
               class="brafa-nav-item {{ $brafaActiveNav === 'locks' ? 'is-active' : '' }}">
                <x-lucide name="lock" size="16" />
                <span class="brafa-nav-item__label">Locks</span>
            </a>

            <a href="{{ route('user-management') }}"
               class="brafa-nav-item {{ $brafaActiveNav === 'users' ? 'is-active' : '' }}">
                <x-lucide name="users" size="16" />
                <span class="brafa-nav-item__label">Users</span>
            </a>

            <a href="{{ route('rooms.index') }}"
               class="brafa-nav-item {{ $brafaActiveNav === 'rooms' ? 'is-active' : '' }}">
                <x-lucide name="bed" size="16" />
                <span class="brafa-nav-item__label">Rooms</span>
            </a>

            <a href="{{ route('lock-records') }}"
               class="brafa-nav-item {{ $brafaActiveNav === 'records' ? 'is-active' : '' }}">
                <x-lucide name="file" size="16" />
                <span class="brafa-nav-item__label">Lock Records</span>
            </a>

            <a href="{{ route('locks-by-month') }}"
               class="brafa-nav-item {{ $brafaActiveNav === 'stats' ? 'is-active' : '' }}">
                <x-lucide name="chart" size="16" />
                <span class="brafa-nav-item__label">Lock Stats</span>
            </a>

            <a href="{{ route('staff.management') }}"
               class="brafa-nav-item {{ $brafaActiveNav === 'staff' ? 'is-active' : '' }}">
                <x-lucide name="briefcase" size="16" />
                <span class="brafa-nav-item__label">Staff Management</span>
            </a>
        @endif
    </nav>

    {{-- MORE (collapsible, superadmin-only items) ----------------- --}}
    @if ($isSuperAdmin)
        <nav class="brafa-nav-group" aria-label="More">
            <button type="button"
                    class="brafa-nav-more-toggle"
                    data-brafa-collapse="brafa-nav-more"
                    aria-expanded="{{ $brafaMoreOpen ? 'true' : 'false' }}"
                    aria-controls="brafa-nav-more">
                <span>More</span>
                <x-lucide name="chevron-down" size="12" />
            </button>
            <div id="brafa-nav-more"
                 class="brafa-nav-group"
                 style="{{ $brafaMoreOpen ? '' : 'display:none;' }}">
                <a href="{{ route('ajax.dashboard') }}"
                   class="brafa-nav-item {{ $brafaActiveNav === 'ajax' ? 'is-active' : '' }}">
                    <x-lucide name="shield" size="16" />
                    <span class="brafa-nav-item__label">Ajax Dashboard</span>
                </a>
                <a href="{{ route('port.map') }}"
                   class="brafa-nav-item {{ $brafaActiveNav === 'portmap' ? 'is-active' : '' }}">
                    <x-lucide name="map" size="16" />
                    <span class="brafa-nav-item__label">Port Map</span>
                </a>
                <a href="{{ route('notes-kanban') }}"
                   class="brafa-nav-item {{ $brafaActiveNav === 'notes' ? 'is-active' : '' }}">
                    <x-lucide name="note" size="16" />
                    <span class="brafa-nav-item__label">Notes</span>
                </a>
                <a href="{{ route('superadmin.parka-tokens') }}"
                   class="brafa-nav-item {{ $brafaActiveNav === 'parka' ? 'is-active' : '' }}">
                    <x-lucide name="key" size="16" />
                    <span class="brafa-nav-item__label">Parka Tokens</span>
                </a>
            </div>
        </nav>
    @endif

    <div class="brafa-nav-spacer"></div>

    {{-- ACCOUNT ---------------------------------------------------- --}}
    <nav class="brafa-nav-group" aria-label="Account">
        <div class="brafa-nav-eyebrow">Account</div>
        <a href="{{ route('user-profile') }}"
           class="brafa-nav-item {{ $brafaActiveNav === 'profile' ? 'is-active' : '' }}">
            <x-lucide name="user" size="16" />
            <span class="brafa-nav-item__label">My Profile</span>
        </a>
    </nav>

    {{-- User card --}}
    @auth
        <div class="brafa-user-card">
            @if ($authUserPicture)
                <img src="{{ $authUserPicture }}"
                     alt="{{ $authUserName }}"
                     class="brafa-avatar"
                     style="width:32px;height:32px;font-size:11.5px;">
            @else
                <div class="brafa-avatar" style="width:32px;height:32px;font-size:11.5px;">
                    {{ $authUserInitials ?: '?' }}
                </div>
            @endif
            <div class="brafa-user-card__meta">
                <span class="brafa-user-card__name">{{ $authUserName }}</span>
                <span class="brafa-user-card__role">{{ $authUserRoleLabel }}</span>
            </div>
            <form method="get" action="{{ route('logout') }}" class="m-0">
                @csrf
                <button type="submit" class="brafa-user-card__action" title="Sign out">
                    <x-lucide name="log-out" size="15" />
                </button>
            </form>
        </div>
    @endauth
</aside>

@once
    @push('js')
        <script>
            /* brafa sidebar — tiny progressive-enhancement collapse for the MORE group.
               Toggles aria-expanded + hides/reveals the target element. */
            (function () {
                document.addEventListener('click', function (event) {
                    var trigger = event.target.closest('[data-brafa-collapse]');
                    if (!trigger) return;
                    var targetId = trigger.getAttribute('data-brafa-collapse');
                    var target = document.getElementById(targetId);
                    if (!target) return;
                    var expanded = trigger.getAttribute('aria-expanded') === 'true';
                    trigger.setAttribute('aria-expanded', expanded ? 'false' : 'true');
                    target.style.display = expanded ? 'none' : '';
                });
            })();
        </script>
    @endpush
@endonce