@php
    $user = auth()->user();
    $wallet = $user?->wallet;
@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>

    {{-- Page title — shown for full-height screens (e.g. the CRM inbox) that
         drop their own in-page header to reclaim vertical space. --}}
    <div class="flex-1">
        @if (request()->routeIs('admin.crm.inbox*', 'panel.crm.inbox*'))
            <h1 class="rf-topbar-title">{{ __('CRM Inbox') }}</h1>
        @endif
    </div>

    {{-- Balance widget — hidden for platform staff: the admin buys nothing
         anywhere, so a wallet chip up here is noise (Jose, 2026-08-08). The
         reseller and every buyer DO prepay, so their shells keep it. --}}
    @if ($wallet && ! $user->isPlatformStaff())
        <div class="flex items-center gap-2 rounded-full px-3 py-1.5" 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">{{ money($wallet->balance, $wallet->currency) }}</span>
        </div>
    @endif

    {{-- Direct link to the public website. Comes from the panel (publicUrl),
         not url('/'), so it says the same thing as the Domains screen. --}}
    @php $siteUrl = current_panel()?->publicUrl() ?? url('/'); @endphp
    <a href="{{ $siteUrl }}" target="_blank" rel="noopener"
       class="rf-btn rf-btn-secondary rf-btn-sm" title="{{ __('Open your public website in a new tab') }}">
        <i data-lucide="external-link" style="width:15px;height:15px;"></i>
        <span class="hidden sm:inline">{{ __('View website') }}</span>
    </a>

    {{-- Language switcher — the rows come from the `languages` table (active
         only), so activating a language in Admin → Languages actually reaches
         the menu instead of leaving that screen decorative. --}}
    <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>

    {{-- User menu --}}
    <div x-data="{ open: false, avatarSrc: @js($user->avatarUrl()) }"
         @avatar-updated.window="avatarSrc = $event.detail.url"
         class="relative">
        <button @click="open = !open"
                class="flex items-center gap-2 rounded-full py-1 pl-1 pr-2 transition"
                style="background:var(--color-surface-2);">
            <img :src="avatarSrc"
                 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);white-space:nowrap;">{{ \Illuminate\Support\Str::limit($user->name, 14) }}</span>
            <svg x-show="!open" x-cloak viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                 style="width:14px;height:14px;color:var(--color-text-muted);"><polyline points="6 9 12 15 18 9"/></svg>
            <svg x-show="open" x-cloak viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                 style="width:14px;height:14px;color:var(--color-text-muted);"><polyline points="18 15 12 9 6 15"/></svg>
        </button>

        {{-- Dropdown --}}
        <div x-show="open" x-cloak @click.outside="open = false" x-transition
             class="absolute right-0 mt-2 z-50 rf-topbar-user-dropdown"
             style="min-width:220px;">

            {{-- User info header --}}
            <div class="rf-topbar-user-info">
                <img :src="avatarSrc"
                     alt="" class="rf-topbar-user-info-avatar">
                <div class="min-w-0">
                    <p class="text-sm font-semibold truncate" style="color:var(--color-text);">
                        {{ $user->display_name ?? $user->name }}
                    </p>
                    <p class="text-xs truncate" style="color:var(--color-text-muted);">{{ $user->email }}</p>
                </div>
            </div>

            <div class="rf-topbar-user-sep"></div>

            {{-- View Profile --}}
            <a href="{{ route('admin.profile') }}" @click="open = false"
               class="rf-topbar-user-item">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                     style="width:15px;height:15px;flex-shrink:0;">
                    <circle cx="12" cy="8" r="4"/><path d="M4 20c0-4 3.6-7 8-7s8 3 8 7"/>
                </svg>
                {{ __('View Profile') }}
            </a>

            <div class="rf-topbar-user-sep"></div>

            {{-- Sign out --}}
            <form method="POST" action="{{ route('logout') }}">
                @csrf
                <button type="submit" class="rf-topbar-user-item rf-topbar-user-item-danger w-full">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                         style="width:15px;height:15px;flex-shrink:0;">
                        <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/>
                    </svg>
                    {{ __('Sign out') }}
                </button>
            </form>
        </div>
    </div>
</header>