{{--
    Aurora shell — horizontal top nav with the wallet balance always visible in
    the header. Skinned entirely by the base :root/.dark tokens (Aurora is the
    default identity). Consumes $nav / $navActive / $user / $balance / $slot from
    the client layout wrapper.
--}}
{{-- ============================ TOP NAV ============================ --}}
{{-- `overflow-x:clip` (NOT `overflow:hidden`) contains the nav row sideways while
     letting the dropdowns below — language, user menu, the nav submenus — hang
     out of the bar. `hidden` clipped them on BOTH axes, so an opened menu showed
     only the 3px of its rounded top edge that fitted inside the 56px header.
     `clip` on one axis is the one value that keeps `visible` legal on the other. --}}
<header class="sticky top-0 z-40" style="overflow-x:clip; overflow-y:visible; background:color-mix(in oklab, var(--color-surface) 88%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--color-border);">
    <div class="mx-auto flex h-14 max-w-[1400px] items-center gap-2 px-4 lg:px-6" style="min-width:0;">
        {{-- Brand: logo or initial + name. logo_dark shown in light mode, logo_light in dark.
             Falls back to the gradient initial + text when no logo is uploaded. --}}
        @php
            $_tb = panel_branding();
            $_tbLogoDark  = $_tb['logo_dark'] ?? $_tb['logo'] ?? null;
            $_tbLogoLight = $_tb['logo_light'] ?? null;
            $_tbFavicon   = panel_favicon_url();
        @endphp
        <a href="{{ route('app.dashboard') }}" class="flex shrink-0 items-center gap-2">
            @if ($_tbLogoDark)
                <img src="{{ asset($_tbLogoDark) }}" alt="{{ \App\Support\Brand::name() }}"
                     class="dark:hidden" style="height:28px;max-width:140px;object-fit:contain;">
                @if ($_tbLogoLight)
                    <img src="{{ asset($_tbLogoLight) }}" alt="{{ \App\Support\Brand::name() }}"
                         class="hidden dark:block" style="height:28px;max-width:140px;object-fit:contain;">
                @else
                    <img src="{{ asset($_tbLogoDark) }}" alt="{{ \App\Support\Brand::name() }}"
                         class="hidden dark:block" style="height:28px;max-width:140px;object-fit:contain;filter:brightness(0) invert(1);">
                @endif
            @else
                @if ($_tbFavicon)
                    <img src="{{ $_tbFavicon }}" alt="{{ \App\Support\Brand::name() }}"
                         style="height:28px;width:28px;object-fit:contain;border-radius:6px;">
                @else
                    <span class="flex h-7 w-7 items-center justify-center rounded-lg text-white text-sm font-extrabold"
                          style="background:linear-gradient(135deg,var(--color-primary-500),var(--color-primary-300));">{{ mb_strtoupper(mb_substr(\App\Support\Brand::name(), 0, 1)) }}</span>
                @endif
                <span class="hidden max-w-[140px] truncate text-[15px] font-bold tracking-tight xl:block">{{ \Illuminate\Support\Str::limit(\App\Support\Brand::name(), 18) }}</span>
            @endif
        </a>

        {{-- Desktop nav --}}
        <nav class="ml-1 hidden min-w-0 items-center gap-0.5 lg:flex">
            @foreach ($nav as $item)
                @if (! empty($item['children']))
                    <div x-data="{ open: false }" class="relative" @mouseenter="open = true" @mouseleave="open = false">
                        <button class="rf-topnav-item {{ $navActive($item) ? 'rf-topnav-item-active' : '' }}">
                            <i data-lucide="{{ $item['icon'] }}" style="width:16px;height:16px;"></i>
                            {{ $item['label'] }}
                            @if (!empty($item['badge']) && $item['badge'] > 0)
                                <span class="rf-badge rf-badge-primary text-xs" style="padding:1px 5px;min-width:16px;text-align:center;">{{ $item['badge'] }}</span>
                            @endif
                            <i data-lucide="chevron-down" style="width:13px;height:13px;opacity:.6;"></i>
                        </button>
                        <div x-show="open" x-cloak x-transition
                             class="rf-menu absolute left-0 mt-0.5" style="min-width:190px;">
                            @foreach ($item['children'] as $child)
                                <a href="{{ route($child['route']) }}"
                                   class="rf-menu-item {{ request()->routeIs($child['route']) ? 'font-semibold' : '' }}"
                                   @if (request()->routeIs($child['route'])) style="color:var(--color-primary-600);" @endif>
                                    <i data-lucide="{{ $child['icon'] }}" style="width:15px;height:15px;"></i>
                                    {{ $child['label'] }}
                                    @if (!empty($child['badge']) && $child['badge'] > 0)
                                        <span class="rf-badge rf-badge-primary text-xs ml-auto" style="padding:1px 5px;min-width:16px;text-align:center;">{{ $child['badge'] }}</span>
                                    @endif
                                </a>
                            @endforeach
                        </div>
                    </div>
                @else
                    <a href="{{ route($item['route']) }}" class="rf-topnav-item {{ $navActive($item) ? 'rf-topnav-item-active' : '' }}">
                        <i data-lucide="{{ $item['icon'] }}" style="width:16px;height:16px;"></i>
                        {{ $item['label'] }}
                        @if (!empty($item['badge']) && $item['badge'] > 0)
                            <span class="rf-badge rf-badge-primary text-xs" style="padding:1px 6px;min-width:18px;text-align:center;">{{ $item['badge'] }}</span>
                        @endif
                    </a>
                @endif
            @endforeach
        </nav>

        <div class="flex-1"></div>

        {{-- Balance widget: wallet icon + balance (shrink-0 so right side never gets squished) --}}
        <div class="hidden shrink-0 items-center gap-2 rounded-full px-3 py-1.5 md:flex" style="background:var(--color-surface-2);">
            <i data-lucide="wallet" style="width:16px;height:16px;color:var(--color-text-muted);"></i>
            <span class="rf-mono text-sm font-semibold tabular" style="color:var(--color-primary-600);"
                  x-data="rfBalance('{{ route('app.balance') }}')"
                  x-text="bal"
                  @rf:balance-changed.window="refresh()">{{ $balance }}</span>
        </div>

        {{-- Language switcher --}}
        <div x-data="{ open: false }" class="relative shrink-0">
            <button @click="open = !open" class="rf-icon-btn" title="{{ __('Language') }}">
                <i data-lucide="languages" style="width:18px;height:18px;"></i>
            </button>
            <div x-show="open" x-cloak @click.outside="open = false" x-transition
                 class="absolute right-0 mt-2 w-36 rounded-xl p-1 z-50"
                 style="background:var(--color-surface); border:1px solid var(--color-border); box-shadow:var(--shadow-3); width:max-content; min-width:9rem; max-width:16rem;">
                @foreach (active_locales() as $code => $label)
                    <a href="{{ route('locale.switch', $code) }}" class="block rounded-lg px-3 py-2 text-sm"
                       style="white-space:nowrap;{{ app()->getLocale() === $code ? 'background:var(--color-primary-soft);color:var(--color-primary-700);' : 'color:var(--color-text-muted);' }}">{{ $label }}</a>
                @endforeach
            </div>
        </div>

        {{-- Theme toggle --}}
        <button @click="toggleTheme()" class="rf-icon-btn shrink-0" title="{{ __('Toggle theme') }}">
            <i data-lucide="moon" x-show="theme === 'light'" style="width:18px;height:18px;"></i>
            <i data-lucide="sun" x-show="theme === 'dark'" style="width:18px;height:18px;"></i>
        </button>

        {{-- Fullscreen --}}
        <button class="rf-icon-btn shrink-0 hidden md:inline-flex" title="{{ __('Fullscreen') }}"
                @click="document.fullscreenElement ? document.exitFullscreen() : document.documentElement.requestFullscreen()">
            <i data-lucide="maximize" style="width:18px;height:18px;"></i>
        </button>

        {{-- User menu --}}
        <div x-data="{ open: false }" class="relative shrink-0">
            <button @click="open = !open" class="flex items-center gap-2 rounded-full py-1 pl-1 pr-2" style="background:var(--color-surface-2);">
                <img src="{{ \App\Support\Avatar::dataUri($user->display_name ?? $user->name) }}" alt="" class="h-7 w-7 rounded-full" style="object-fit:cover;">
                <i data-lucide="chevron-down" class="hidden sm:block" style="width:14px;height:14px;color:var(--color-text-muted);"></i>
            </button>
            <div x-show="open" x-cloak @click.outside="open = false" x-transition
                 class="absolute right-0 mt-2 w-52 rounded-xl p-1 z-50"
                 style="background:var(--color-surface); border:1px solid var(--color-border); box-shadow:var(--shadow-3);">
                <div class="px-3 py-2">
                    <div class="text-sm font-medium" style="color:var(--color-text);">{{ $user->display_name ?? $user->name }}</div>
                    <div class="text-xs" style="color:var(--color-text-subtle);">{{ $user->email }}</div>
                </div>
                <div class="rf-menu-sep"></div>
                <a href="{{ route('app.profile') }}" class="rf-menu-item"><i data-lucide="user" style="width:15px;height:15px;"></i>{{ __('Profile') }}</a>
                @if (api_enabled())
                    <a href="{{ route('app.api') }}" class="rf-menu-item"><i data-lucide="key" style="width:15px;height:15px;"></i>{{ __('API key') }}</a>
                @endif
                <div class="rf-menu-sep"></div>
                <form method="POST" action="{{ route('logout') }}">
                    @csrf
                    <button type="submit" class="rf-menu-item rf-menu-item-danger w-full"><i data-lucide="log-out" style="width:15px;height:15px;"></i>{{ __('Sign out') }}</button>
                </form>
            </div>
        </div>

        {{-- Mobile menu toggle --}}
        <button @click="mobileNav = !mobileNav" class="rf-icon-btn shrink-0 lg:hidden">
            <i data-lucide="menu" style="width:20px;height:20px;"></i>
        </button>
    </div>

    {{-- Mobile nav panel --}}
    <div x-show="mobileNav" x-cloak x-transition @click.outside="mobileNav = false"
         class="border-t px-3 py-3 lg:hidden" style="border-color:var(--color-border);background:var(--color-surface);">
        <div class="mb-3 flex items-center justify-between rounded-full px-3 py-1.5" style="background:var(--color-surface-2);">
            <span class="text-sm" style="color:var(--color-text-muted);">{{ __('Balance') }}</span>
            <span class="rf-mono text-sm font-semibold" style="color:var(--color-primary-600);"
                  x-data="rfBalance('{{ route('app.balance') }}')"
                  x-text="bal"
                  @rf:balance-changed.window="refresh()">{{ $balance }}</span>
        </div>
        <nav class="flex flex-col gap-0.5">
            @foreach ($nav as $item)
                @if (! empty($item['children']))
                    <p class="rf-nav-section">{{ $item['label'] }}</p>
                    @foreach ($item['children'] as $child)
                        <a href="{{ route($child['route']) }}" class="rf-nav-item {{ request()->routeIs($child['route']) ? 'rf-nav-item-active' : '' }}">
                            <i data-lucide="{{ $child['icon'] }}" style="width:18px;height:18px;"></i>{{ $child['label'] }}
                        </a>
                    @endforeach
                @else
                    <a href="{{ route($item['route']) }}" class="rf-nav-item {{ $navActive($item) ? 'rf-nav-item-active' : '' }}">
                        <i data-lucide="{{ $item['icon'] }}" style="width:18px;height:18px;"></i>
                        {{ $item['label'] }}
                        @if (!empty($item['badge']) && $item['badge'] > 0)
                            <span class="rf-badge rf-badge-primary text-xs ml-auto" style="padding:1px 6px;min-width:18px;text-align:center;">{{ $item['badge'] }}</span>
                        @endif
                    </a>
                @endif
            @endforeach
        </nav>
    </div>
</header>

{{-- ============================ MAIN ============================ --}}
<main class="mx-auto max-w-[1400px] px-4 py-6 lg:px-6">
    {{ $slot }}
</main>

@include('partials.client-footer')