@php
    use App\Services\RolePermissionRegistry;

    $navItems = RolePermissionRegistry::navItems();
@endphp

<aside class="fixed inset-y-0 left-0 z-50 flex w-72 flex-col border-r border-white/5 bg-slate-950/95 backdrop-blur-xl p-5 transition-transform duration-300 ease-out safe-top safe-bottom
              -translate-x-full lg:translate-x-0 lg:static lg:z-auto lg:w-64 lg:bg-slate-900/60"
       :class="{ 'translate-x-0': sidebarOpen }"
       x-cloak>
    <div class="flex items-center justify-between mb-8">
        <div class="flex items-center gap-3 min-w-0">
            <x-branding-logo class="animate-fade-in" />
            <div class="min-w-0 lg:hidden">
                <h1 class="text-lg font-bold gradient-text truncate">{{ $appName }}</h1>
                <p class="text-[11px] text-themed-muted uppercase tracking-widest">SMS Monitoring</p>
            </div>
            <div class="min-w-0 hidden lg:block">
                <p class="text-[11px] text-themed-muted uppercase tracking-widest">SMS Monitoring</p>
            </div>
        </div>
        <button type="button"
                @click="sidebarOpen = false"
                class="lg:hidden flex h-9 w-9 items-center justify-center rounded-lg text-themed-muted hover:bg-themed-hover hover:text-themed"
                aria-label="Close menu">
            <x-icon name="close" class="w-5 h-5" />
        </button>
    </div>

    <nav class="space-y-1 flex-1 overflow-y-auto -mx-1 px-1">
        @foreach ($navItems as $item)
            @php
                $showItem = auth()->user()->hasPage($item['page']);
                // Sub-companies nav is only for non-super-admin company admins who are not themselves inside a sub-company.
                if ($item['page'] === 'sub_companies' && $showItem) {
                    $showItem = ! auth()->user()->isSuperAdmin()
                        && auth()->user()->company
                        && ! auth()->user()->company->isSubCompany();
                }
            @endphp
            @if ($showItem)
                @php
                    $isActive = request()->routeIs(str_replace('.index', '*', $item['route'])) || request()->routeIs($item['route']);
                @endphp
                <a href="{{ route($item['route']) }}"
                   @click="sidebarOpen = false"
                   class="nav-link {{ $isActive ? 'nav-link-active' : 'nav-link-inactive' }}">
                    <x-icon :name="$item['icon']" class="w-5 h-5 shrink-0 {{ $isActive ? 'animate-icon-pulse' : '' }}" />
                    <span class="truncate">{{ $item['label'] }}</span>
                    @if ($item['route'] === 'alerts.index' && ($unreadAlerts ?? 0) > 0)
                        <span class="ml-auto inline-flex min-w-[1.25rem] items-center justify-center rounded-full bg-gradient-to-r from-red-500 to-rose-500 px-1.5 py-0.5 text-[10px] font-bold text-white animate-icon-pulse">
                            {{ $unreadAlerts }}
                        </span>
                    @endif
                </a>
            @endif
        @endforeach
        <a href="{{ route('download') }}"
           @click="sidebarOpen = false"
           class="nav-link {{ request()->routeIs('download*') ? 'nav-link-active' : 'nav-link-inactive' }}">
            <x-icon name="download" class="w-5 h-5 shrink-0 {{ request()->routeIs('download*') ? 'animate-icon-pulse' : '' }}" />
            <span class="truncate">Apps</span>
        </a>
    </nav>

    <div class="border-t border-white/5 pt-4 mt-4">
        <div class="flex items-center gap-3 mb-3">
            <div class="icon-box-violet !h-9 !w-9 shrink-0">
                <x-icon name="user" class="w-4 h-4" />
            </div>
            <div class="min-w-0">
                <p class="text-sm font-medium text-themed truncate">{{ auth()->user()->name }}</p>
                <p class="text-xs text-themed-muted truncate">{{ auth()->user()->roleModel?->name ?? 'User' }}</p>
                @if (auth()->user()?->company?->company_number)
                    <p class="text-[11px] text-themed-muted font-mono tracking-wide mt-0.5">#{{ auth()->user()->company->formattedCompanyNumber() }}</p>
                @endif
                @if (auth()->user()?->company?->subscriptionPlan)
                    @php $__plan = auth()->user()->company->subscriptionPlan; @endphp
                    <p class="text-[10px] mt-0.5">
                        <span class="inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 {{ $__plan->is_perpetual ? 'bg-violet-500/20 text-violet-300' : 'bg-teal-500/20 text-teal-300' }}">
                            {{ $__plan->name }}
                            @if ($__plan->is_perpetual)
                                ∞
                            @endif
                        </span>
                    </p>
                @elseif (auth()->user()?->company?->plan === 'trial')
                    <p class="text-[10px] mt-0.5">
                        <span class="inline-flex items-center rounded-md px-1.5 py-0.5 bg-amber-500/20 text-amber-300">Trial</span>
                    </p>
                @endif
            </div>
        </div>
        @if (auth()->user()?->company_id && auth()->user()?->isAdmin())
            <a href="{{ route('billing.index') }}"
               class="nav-link nav-link-inactive w-full mb-2 {{ request()->routeIs('billing.*') ? 'nav-link-active' : '' }}">
                <x-icon name="bolt" class="w-5 h-5 shrink-0" />
                <span class="truncate">Billing</span>
            </a>
        @endif
        <a href="{{ route('account.security') }}"
           class="nav-link nav-link-inactive w-full mb-2 {{ request()->routeIs('account.security*') ? 'nav-link-active' : '' }}">
            <x-icon name="shield" class="w-5 h-5 shrink-0" />
            <span>Account security</span>
        </a>
        <form method="POST" action="{{ route('logout') }}">
            @csrf
            <button type="submit" class="nav-link nav-link-inactive w-full">
                <x-icon name="logout" class="w-5 h-5 shrink-0" />
                <span>Logout</span>
            </button>
        </form>
    </div>
</aside>