@php
    $user = auth()->user();

    // Aktuelle Seite aus Sidebar-Config ermitteln
    $allItems = array_merge(
        config('sidebar.main', []),
        config('sidebar.tools', []),
        config('sidebar.admin', []),
    );
    $currentLabel = null;
    foreach ($allItems as $item) {
        if (!empty($item['route']) && request()->routeIs($item['route'])) {
            $currentLabel = $item['label'];
            break;
        }
    }
    // Fallback für Unterseiten
    if (!$currentLabel) {
        $currentLabel = match(true) {
            request()->routeIs('agent.logs')          => t('header.agent_history'),
            request()->routeIs('subscription.index')  => t('header.subscription'),
            request()->routeIs('admin.users.detail')   => t('header.user_details'),
            request()->routeIs('admin.users.calendar') => t('header.user_calendar'),
            default => null,
        };
    }

@endphp

<header class="h-14 bg-white border-b border-gray-100 px-4 flex items-center justify-between sticky top-0 z-30 shrink-0">

    {{-- LINKS: Toggle + Seitenname --}}
    <div class="flex items-center gap-3">

        {{-- Mobile: öffnet Overlay | Desktop: collapsed/expanded --}}
        <button
            @click="sidebarOpen = !sidebarOpen"
            class="lg:hidden p-2 rounded-lg text-gray-400 hover:text-gray-600 hover:bg-gray-50 transition-colors"
            aria-label="{{ t('header.open_menu') }}">
            <x-heroicon-o-bars-3 class="w-5 h-5"/>
        </button>

        <button
            @click="sidebarCollapsed = !sidebarCollapsed"
            class="hidden lg:flex p-2 rounded-lg text-gray-400 hover:text-gray-600 hover:bg-gray-50 transition-colors"
            aria-label="{{ t('header.toggle_sidebar') }}">
            <x-heroicon-o-bars-3 class="w-5 h-5"/>
        </button>

        @if($currentLabel)
            <span class="text-sm font-semibold text-gray-700">{{ t($currentLabel) }}</span>
        @endif

    </div>


    {{-- RECHTS: Notifications + User --}}
    <div class="flex items-center gap-1">

        {{-- Benachrichtigungen --}}
        <livewire:notifications.bell />


        {{-- User-Dropdown --}}
        <div x-data="{ open: false }" class="relative">
            <button @click="open = !open"
                    class="flex items-center gap-2 pl-2 pr-3 py-1.5 rounded-lg hover:bg-gray-50 transition-colors ml-1">
                <div class="w-7 h-7 rounded-full bg-indigo-100 text-indigo-700 flex items-center justify-center text-xs font-bold shrink-0">
                    {{ strtoupper(substr($user->name ?? 'U', 0, 1)) }}
                </div>
                <span class="hidden sm:block text-sm font-medium text-gray-700">{{ $user->name }}</span>
                <x-heroicon-o-chevron-down class="w-3.5 h-3.5 text-gray-400"/>
            </button>

            <div x-show="open"
                 x-cloak
                 @click.outside="open = false"
                 x-transition:enter="transition ease-out duration-100"
                 x-transition:enter-start="opacity-0 scale-95"
                 x-transition:enter-end="opacity-100 scale-100"
                 x-transition:leave="transition ease-in duration-75"
                 x-transition:leave-start="opacity-100 scale-100"
                 x-transition:leave-end="opacity-0 scale-95"
                 class="absolute right-0 mt-1 w-52 bg-white border border-gray-100 rounded-xl shadow-lg z-50 overflow-hidden">

                <div class="px-4 py-3 border-b border-gray-50">
                    <p class="text-xs font-semibold text-gray-800 truncate">{{ $user->name }}</p>
                    <p class="text-[10px] text-gray-400 truncate">{{ $user->email }}</p>
                </div>

                <div class="py-1">
                    <a href="{{ route('settings.index') }}" wire:navigate @click="open = false"
                       class="flex items-center gap-2.5 px-4 py-2 text-sm text-gray-600 hover:bg-gray-50 transition-colors">
                        <x-heroicon-o-cog-6-tooth class="w-4 h-4 text-gray-400"/>
                        {{ t('nav.settings') }}
                    </a>
                    <a href="{{ route('plans.index') }}" wire:navigate @click="open = false"
                       class="flex items-center gap-2.5 px-4 py-2 text-sm text-gray-600 hover:bg-gray-50 transition-colors">
                        <x-heroicon-o-credit-card class="w-4 h-4 text-gray-400"/>
                        {{ t('header.plan_billing') }}
                    </a>
                    <a href="{{ route('agent.logs') }}" wire:navigate @click="open = false"
                       class="flex items-center gap-2.5 px-4 py-2 text-sm text-gray-600 hover:bg-gray-50 transition-colors">
                        <x-heroicon-o-clock class="w-4 h-4 text-gray-400"/>
                        {{ t('header.agent_history') }}
                    </a>
                </div>

                <div class="py-1 border-t border-gray-50">
                    <form method="POST" action="{{ route('logout') }}">
                        @csrf
                        <button type="submit"
                                class="w-full flex items-center gap-2.5 px-4 py-2 text-sm text-red-500 hover:bg-red-50 transition-colors">
                            <x-heroicon-o-arrow-right-on-rectangle class="w-4 h-4"/>
                            {{ t('nav.logout') }}
                        </button>
                    </form>
                </div>

            </div>
        </div>

    </div>

</header>
