@php
    $user = auth()->user();
    $panel = current_panel();
    // The reseller's prepaid balance lives in the OWNER panel (they pay the owner
    // at cost); resolve it by user identity so it is never blocked by PanelScope.
    $prepaid = app(\App\Services\Wallet\WalletService::class)->balanceOf($user);
    $currency = $panel?->base_currency ?: 'USD';
@endphp

<header class="rf-topbar">
    {{-- Mobile sidebar toggle --}}
    <button @click="mobileSidebarOpen = true" class="rf-icon-btn lg:hidden">
        <i data-lucide="menu" style="width:20px;height:20px;"></i>
    </button>

    <div class="hidden items-center gap-2 sm:flex">
        <span class="text-sm font-medium" style="color:var(--color-text-muted);">{{ $panel?->name }}</span>
    </div>

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

    {{-- Prepaid balance widget (reseller -> owner) --}}
    <div class="flex items-center gap-2 rounded-full py-1 pl-3 pr-1" 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" title="{{ __('Your prepaid balance with the owner') }}">{{ money($prepaid, $currency) }}</span>
        <a href="{{ route('panel.funds') }}" class="rf-btn rf-btn-primary rf-btn-sm" style="padding:4px 10px;">
            <i data-lucide="plus" style="width:14px;height:14px;"></i>{{ __('Add funds') }}
        </a>
    </div>

    {{-- Direct link to THEIR store. Not url('/'), which is the owner's: the panel
         is administered under the owner's domain, so the link has to come from
         the panel's own host. With no domain verified there is nowhere to go,
         and the button says so instead of leading to a 404. --}}
    @php $storeUrl = $panel?->publicUrl(); @endphp
    @if ($storeUrl)
        <a href="{{ $storeUrl }}" target="_blank" rel="noopener"
           class="rf-btn rf-btn-secondary rf-btn-sm" title="{{ __('Open your public store in a new tab') }}">
            <i data-lucide="external-link" style="width:15px;height:15px;"></i>
            <span class="hidden sm:inline">{{ __('View my store') }}</span>
        </a>
    @else
        <span class="rf-icon-btn" style="opacity:.45;cursor:not-allowed;"
              title="{{ __('No domain assigned yet — add one under Domains.') }}">
            <i data-lucide="external-link" style="width:18px;height:18px;"></i>
        </span>
    @endif

    {{-- Language switcher — rows come from the `languages` table (active only),
         the same list Admin → Languages manages. --}}
    <div x-data="{ open: false }" class="relative">
        <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" 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 toggle --}}
    <button @click="document.fullscreenElement ? document.exitFullscreen() : document.documentElement.requestFullscreen()"
            class="rf-icon-btn hidden sm:inline-flex" title="{{ __('Fullscreen') }}">
        <i data-lucide="maximize" style="width:18px;height:18px;"></i>
    </button>

    {{-- User menu --}}
    <div x-data="{ open: false }" class="relative">
        <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="{{ $user->avatarUrl() }}"
                 alt="" class="h-7 w-7 rounded-full" style="object-fit:cover;">
            <span class="hidden text-sm font-medium sm:inline" style="color:var(--color-text);">{{ \Illuminate\Support\Str::limit($user->name, 14) }}</span>
        </button>
        <div x-show="open" x-cloak @click.outside="open = false" x-transition
             class="absolute right-0 mt-2 w-48 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 text-xs" style="color:var(--color-text-subtle);">{{ $user->email }}</div>
            <a href="{{ route('panel.profile') }}" class="rf-menu-item">
                <i data-lucide="user" style="width:15px;height:15px;"></i>{{ __('Profile') }}
            </a>
            <a href="{{ route('panel.settings') }}" class="rf-menu-item">
                <i data-lucide="settings" style="width:15px;height:15px;"></i>{{ __('Settings') }}
            </a>
            <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>
</header>