@php
    $authUser = auth()->user();
    $mobileDrawer = $mobileDrawer ?? false;
@endphp

@if ($mobileDrawer)
    <button
        type="button"
        data-sidebar-overlay
        aria-label="Close sidebar"
        class="pointer-events-none fixed inset-0 z-40 bg-black/40 opacity-0 transition-opacity lg:hidden"
    ></button>
@endif

<aside
    data-sidebar
    @if ($mobileDrawer) data-mobile-drawer @endif
    class="{{ $mobileDrawer
        ? 'pointer-events-none fixed inset-y-3 left-3 z-50 flex w-56 shrink-0 -translate-x-[calc(100%+0.75rem)] flex-col rounded-2xl border border-border bg-[oklch(0.205_0_0)] text-white/90 shadow-sm transition-[width,transform] duration-200 lg:pointer-events-auto lg:static lg:z-auto lg:translate-x-0 lg:w-56'
        : 'hidden w-56 shrink-0 flex-col rounded-2xl border border-border bg-[oklch(0.205_0_0)] text-white/90 shadow-sm transition-[width] duration-200 lg:flex'
    }}"
>
    <div data-sidebar-brand class="flex h-12 shrink-0 items-center gap-2 px-4">
        <div class="flex size-6 shrink-0 items-center justify-center rounded-full bg-white/15">
            <svg class="size-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M8 10h.01M12 10h.01M16 10h.01M21 12c0 4.418-4.03 8-9 8a9.86 9.86 0 0 1-4-.8L3 20l.8-3.2A7.5 7.5 0 0 1 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8Z" />
            </svg>
        </div>
        <span data-sidebar-label class="font-heading text-sm font-semibold tracking-tight">SuperGame</span>
    </div>

    <nav class="flex flex-col gap-0.5 p-2">
        <p data-sidebar-label class="px-2.5 pt-2 pb-1 text-[11px] font-medium tracking-wide text-white/40">Pages</p>

        @if ($authUser?->isAdmin())
            <a
                href="{{ route('domain') }}"
                class="flex h-8 w-full items-center gap-2 rounded-lg px-2.5 text-xs font-medium hover:bg-white/10 hover:text-white {{ $active === 'domain' ? 'text-white/80' : 'text-white/40' }}"
            >
                <svg class="size-3.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <circle cx="12" cy="12" r="9" />
                    <path stroke-linecap="round" d="M3 12h18M12 3a15 15 0 0 1 0 18M12 3a15 15 0 0 0 0 18" />
                </svg>
                <span data-sidebar-label>Domain</span>
            </a>

            <a
                href="{{ route('quick-reply') }}"
                class="flex h-8 w-full items-center gap-2 rounded-lg px-2.5 text-xs font-medium hover:bg-white/10 hover:text-white {{ $active === 'quick-reply' ? 'text-white/80' : 'text-white/40' }}"
            >
                <svg class="size-3.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M8 10h.01M12 10h.01M16 10h.01M21 12c0 4.418-4.03 8-9 8a9.86 9.86 0 0 1-4-.8L3 20l.8-3.2A7.5 7.5 0 0 1 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8Z" />
                    <path stroke-linecap="round" d="M8 14h8" />
                </svg>
                <span data-sidebar-label>Quick Reply</span>
            </a>

            <a
                href="{{ route('users') }}"
                class="flex h-8 w-full items-center gap-2 rounded-lg px-2.5 text-xs font-medium hover:bg-white/10 hover:text-white {{ $active === 'users' ? 'text-white/80' : 'text-white/40' }}"
            >
                <svg class="size-3.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8ZM23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75" />
                </svg>
                <span data-sidebar-label>Users</span>
            </a>
        @else
            @php
                $inboxSearch = trim((string) ($inboxSearch ?? ''));
                $openQuery = ['status' => 'open', ...($inboxSearch !== '' ? ['search' => $inboxSearch] : [])];
                $closedQuery = ['status' => 'closed', ...($inboxSearch !== '' ? ['search' => $inboxSearch] : [])];
                $archivedQuery = ['status' => 'archived', ...($inboxSearch !== '' ? ['search' => $inboxSearch] : [])];
            @endphp
            <a
                href="{{ route('inbox', $openQuery) }}"
                class="flex h-8 w-full items-center gap-2 rounded-lg px-2.5 text-xs font-medium hover:bg-white/10 hover:text-white {{ ($inboxStatus ?? 'open') === 'open' ? 'text-white/80' : 'text-white/40' }}"
            >
                <svg class="size-3.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M8 10h.01M12 10h.01M16 10h.01M21 12c0 4.418-4.03 8-9 8a9.86 9.86 0 0 1-4-.8L3 20l.8-3.2A7.5 7.5 0 0 1 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8Z" />
                </svg>
                <span data-sidebar-label>Open chats</span>
            </a>

            <a
                href="{{ route('inbox', $closedQuery) }}"
                class="flex h-8 w-full items-center gap-2 rounded-lg px-2.5 text-xs font-medium hover:bg-white/10 hover:text-white {{ ($inboxStatus ?? 'open') === 'closed' ? 'text-white/80' : 'text-white/40' }}"
            >
                <svg class="size-3.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13 9 17l10-10" />
                    <circle cx="12" cy="12" r="9" />
                </svg>
                <span data-sidebar-label>Closed chats</span>
            </a>

            <a
                href="{{ route('inbox', $archivedQuery) }}"
                class="flex h-8 w-full items-center gap-2 rounded-lg px-2.5 text-xs font-medium hover:bg-white/10 hover:text-white {{ ($inboxStatus ?? 'open') === 'archived' ? 'text-white/80' : 'text-white/40' }}"
            >
                <svg class="size-3.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M4 8h16M4 8l2 11h12l2-11M9 8V5h6v3" />
                </svg>
                <span data-sidebar-label>Archived chats</span>
            </a>
        @endif
    </nav>

    <div class="mt-auto p-2">
        <div data-sidebar-user class="flex items-center gap-2 rounded-lg px-2.5 py-2">
            <div class="flex size-6 shrink-0 items-center justify-center rounded-full bg-white/15 text-[11px] font-semibold">
                {{ strtoupper(substr($authUser->first_name, 0, 1)) }}
            </div>
            <div data-sidebar-label class="min-w-0">
                <p class="truncate text-xs font-medium text-white">{{ $authUser->first_name }} {{ $authUser->last_name }}</p>
                <p class="truncate text-[11px] text-white/40">{{ $authUser->email }}</p>
            </div>
        </div>
    </div>
</aside>