{{--
    Sidebar shell — shared by Vibrant (brand-filled sidebar, full-colour network
    tiles) and Midnight (dark sidebar, brand glow). The markup is identical; the
    --rf-sidebar-* / --rf-topbar-* tokens (set per data-template in app.css) do
    all the skinning, so this file stays one source of truth (§1.4). Consumes
    $nav / $navActive / $user / $balance / $showNetRow / $slot from the wrapper.
--}}
<div class="flex h-screen overflow-hidden">

    {{-- Mobile backdrop --}}
    <div x-show="sideOpen" x-cloak @click="sideOpen = false" class="rf-cside-backdrop lg:hidden" x-transition.opacity></div>

    {{-- ============================ SIDEBAR ============================ --}}
    <aside class="rf-cside" :data-open="sideOpen ? '1' : '0'">
        <div class="rf-cside-brand">
            @php
                $_b = panel_branding();
                $_logoDark  = $_b['logo_dark'] ?? $_b['logo'] ?? null;
                $_logoLight = $_b['logo_light'] ?? null;
                $_favicon   = panel_favicon_url();
            @endphp
            @if ($_logoDark)
                <img src="{{ asset($_logoDark) }}" alt="{{ \App\Support\Brand::name() }}"
                     class="dark:hidden" style="max-height:38px;max-width:200px;width:auto;height:auto;object-fit:contain;">
                @if ($_logoLight)
                    <img src="{{ asset($_logoLight) }}" alt="{{ \App\Support\Brand::name() }}"
                         class="hidden dark:block" style="max-height:38px;max-width:200px;width:auto;height:auto;object-fit:contain;">
                @else
                    <img src="{{ asset($_logoDark) }}" alt="{{ \App\Support\Brand::name() }}"
                         class="hidden dark:block" style="max-height:38px;max-width:200px;width:auto;height:auto;object-fit:contain;filter:brightness(0) invert(1);">
                @endif
            @else
                @if ($_favicon)
                    <img src="{{ $_favicon }}" alt="{{ \App\Support\Brand::name() }}"
                         style="max-height:36px;max-width:40px;width:auto;height:auto;object-fit:contain;border-radius:6px;">
                @else
                    <span class="rf-cside-logo">{{ mb_strtoupper(mb_substr(\App\Support\Brand::name(), 0, 1)) }}</span>
                @endif
                <span>{{ \App\Support\Brand::name() }}</span>
            @endif
        </div>

        <nav id="rf-client-sidenav" class="flex-1 overflow-y-auto pb-3">
            @foreach ($nav as $item)
                @if (! empty($item['children']))
                    <p class="rf-cside-section">{{ $item['label'] }}</p>
                    @foreach ($item['children'] as $child)
                        <a href="{{ route($child['route']) }}"
                           class="rf-cside-item rf-cside-subitem {{ request()->routeIs($child['route']) ? 'rf-cside-item-active' : '' }}">
                            <i data-lucide="{{ $child['icon'] }}" style="width:17px;height:17px;flex-shrink:0;"></i>{{ $child['label'] }}
                        </a>
                    @endforeach
                @else
                    <a href="{{ route($item['route']) }}"
                       class="rf-cside-item {{ $navActive($item) ? 'rf-cside-item-active' : '' }}">
                        <i data-lucide="{{ $item['icon'] }}" style="width:19px;height:19px;flex-shrink:0;"></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>

        @include('partials.nav-autoscroll', [
            'navId' => 'rf-client-sidenav', 'shell' => 'client', 'activeClass' => 'rf-cside-item-active',
        ])
    </aside>

    {{-- ============================ CONTENT COLUMN ============================ --}}
    <div class="flex flex-1 flex-col overflow-hidden">

        {{-- Topbar: search · actions · language · theme · balance · user --}}
        <header class="rf-ctopbar">
            <button @click="sideOpen = !sideOpen" class="rf-icon-btn lg:hidden">
                <i data-lucide="menu" style="width:20px;height:20px;"></i>
            </button>

            <label class="rf-csearch hidden sm:flex">
                <i data-lucide="search" style="width:16px;height:16px;flex-shrink:0;"></i>
                <input type="search" placeholder="{{ __('Search services…') }}"
                       @keydown.enter="window.location='{{ route('app.services') }}'">
            </label>

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

            {{-- Language switcher --}}
            <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>

            {{-- Balance pill --}}
            <div class="rf-cbalance">
                <i data-lucide="wallet" style="width:16px;height:16px;color:var(--color-primary-600);"></i>
                <span class="rf-cbalance-amount"
                      x-data="rfBalance('{{ route('app.balance') }}')"
                      x-text="bal"
                      @rf:balance-changed.window="refresh()">{{ $balance }}</span>
                <a href="{{ route('app.funds') }}" class="rf-btn rf-btn-primary rf-btn-sm" style="border-radius:var(--radius-pill);width:30px;height:30px;padding:0;" title="{{ __('Add Funds') }}">
                    <i data-lucide="plus" style="width:15px;height:15px;"></i>
                </a>
            </div>

            {{-- 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 x-ref="shellAvatar"
                         src="{{ $user->avatarUrl() }}"
                         alt=""
                         class="h-7 w-7 rounded-full"
                         style="object-fit:cover;"
                         @avatar-updated.window="$refs.shellAvatar.src = $event.detail.url">
                    <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>
        </header>

        {{-- ============================ MAIN ============================ --}}
        <main class="flex-1 overflow-y-auto px-4 py-6 lg:px-8">
            @if ($showNetRow)
                <div class="mb-6">
                    <p class="rf-panel-heading mb-3">{{ __('Choose a network') }}</p>
                    @include('components.client.network-tiles')
                </div>
            @endif

            {{ $slot }}

            @include('partials.client-footer')
        </main>
    </div>
</div>