{{--
    brafa Systems — topbar.
    Mirror of prototype/admin/shell.jsx → Topbar component.

    Hard constraints kept from the previous implementation:
      • Mobile sidenav toggle preserves id="iconNavbarSidenav" so Material
        Dashboard's bundled JS can still pin/unpin the body sidenav class.
      • livewire:notification-dropdown is still rendered. Its Blade markup
        was restructured to fit the new bell pill — every wire:click and
        property reference is preserved.
      • Logout form keeps its existing GET → route('logout') behavior.
--}}

@if (Auth::check())
    @php
        $routeName = Route::currentRouteName();
        $brafaTitle = $routeName ? str_replace(['.', '-'], ' ', $routeName) : '';

        /* Short eyebrow above the title — gives the section context. */
        $brafaSection = match (true) {
            in_array($routeName, ['user-profile']) => 'Account',
            in_array($routeName, ['ajax.dashboard', 'port.map', 'notes-kanban', 'superadmin.parka-tokens']) => 'More',
            default => 'Manage',
        };

        $authUserName = Auth::user()->name;
        $authUserPicture = 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('');
    @endphp

    {{-- No id="navbarBlur" / data-scroll: those make Material Dashboard's
         blur-on-scroll JS hook and mutate the topbar on scroll (and on the
         page jumps that tab clicks cause). The per-page scroll scripts that
         referenced #navbarBlur are null-guarded, so the topbar stays put. --}}
    <header class="brafa-topbar">
        {{-- Mobile sidenav toggle — id MUST stay "iconNavbarSidenav" so the
             bundled material-dashboard.min.js continues to toggle the body class. --}}
        <a href="javascript:;"
           id="iconNavbarSidenav"
           class="brafa-topbar__toggle"
           role="button"
           aria-label="Toggle navigation">
            <x-lucide name="layout" size="16" />
        </a>

        {{-- Back arrow --}}
        <button type="button"
                onclick="history.back();"
                class="brafa-topbar__back"
                aria-label="Back">
            <x-lucide name="arrow-left" size="16" />
        </button>

        {{-- Eyebrow + title --}}
        <div class="brafa-topbar__title-wrap">
            <span class="brafa-topbar__eyebrow">{{ $brafaSection }}</span>
            <h1 class="brafa-topbar__title">{{ $brafaTitle }}</h1>
        </div>

        {{-- Right cluster: notifications + user pill --}}
        <div class="brafa-topbar__right">
            <livewire:notification-dropdown />

            <a href="{{ route('user-profile') }}"
               class="brafa-topbar__user"
               title="{{ $authUserName }}">
                @if ($authUserPicture)
                    <img src="{{ $authUserPicture }}"
                         alt="{{ $authUserName }}"
                         class="brafa-avatar"
                         style="width:28px;height:28px;font-size:10px;">
                @else
                    <div class="brafa-avatar" style="width:28px;height:28px;font-size:10px;">
                        {{ $authUserInitials ?: '?' }}
                    </div>
                @endif
                <span class="brafa-topbar__user-name">{{ $authUserName }}</span>
            </a>

            <form method="get" action="{{ route('logout') }}" class="m-0">
                @csrf
                <button type="submit" class="brafa-topbar__logout" title="Sign out">
                    <x-lucide name="log-out" size="16" />
                </button>
            </form>
        </div>
    </header>
@endif