@php
    $workspace = current_workspace();
    $workspaces = auth()->check() ? auth()->user()->workspaces()->orderBy('name')->get() : collect();

    $wsUlid = $workspace?->ulid;

    $nav = $workspace ? [
        [
            'label' => 'Dashboard',
            'route' => 'w.dashboard',
            'params' => [$wsUlid],
            'match' => 'w.dashboard',
            'icon' => 'dashboard',
        ],
        [
            'label' => 'Links',
            'route' => 'w.links.index',
            'params' => [$wsUlid],
            'match' => 'w.links.*',
            'icon' => 'links',
        ],
        [
            'label' => 'QR Codes',
            'route' => 'w.qr.index',
            'params' => [$wsUlid],
            'match' => 'w.qr.*',
            'icon' => 'qr',
        ],
        [
            'label' => 'Link-in-Bio',
            'route' => 'w.bio.index',
            'params' => [$wsUlid],
            'match' => 'w.bio.*',
            'icon' => 'bio',
        ],
        [
            'label' => 'Analytics',
            'route' => 'w.analytics.index',
            'params' => [$wsUlid],
            'match' => 'w.analytics.*',
            'icon' => 'analytics',
        ],
        [
            'label' => 'Domains',
            'route' => 'w.domains.index',
            'params' => [$wsUlid],
            'match' => 'w.domains.*',
            'icon' => 'domains',
        ],
        [
            'label' => 'Settings',
            'route' => 'w.settings.index',
            'params' => [$wsUlid],
            'match' => 'w.settings.*',
            'icon' => 'settings',
        ],
        [
            'label' => 'Billing',
            'route' => 'w.billing.index',
            'params' => [$wsUlid],
            'match' => 'w.billing.*',
            'icon' => 'billing',
        ],
        [
            'label' => 'Team',
            'route' => 'w.team.index',
            'params' => [$wsUlid],
            'match' => 'w.team.*',
            'icon' => 'team',
        ],
        [
            'label' => 'AI',
            'route' => 'w.ai.insights',
            'params' => [$wsUlid],
            'match' => 'w.ai.*',
            'icon' => 'ai',
        ],
    ] : [
        [
            'label' => 'Dashboard',
            'route' => 'dashboard',
            'params' => [],
            'match' => 'dashboard',
            'icon' => 'dashboard',
        ],
    ];

    // Plan usage
    $plan = $workspace?->plan;
    $linksUsed = $workspace ? $workspace->links()->count() : 0;
    $linkLimit = $plan?->link_limit ?? 50;
    $usagePct = $linkLimit > 0 ? min(100, round(($linksUsed / $linkLimit) * 100)) : 0;

    // User initials
    $userName = auth()->user()?->name ?? '';
    $initials = collect(explode(' ', trim($userName)))->map(fn($w) => strtoupper(substr($w, 0, 1)))->take(2)->implode('');
@endphp

<aside
    x-data="{ wsOpen: false }"
    :class="$store.sidebar.collapsed ? 'w-16' : 'w-60'"
    class="fixed inset-y-0 left-0 h-screen flex flex-col bg-s1 border-r border-white/[.06] z-40 -translate-x-full md:translate-x-0 transition-[width,transform] duration-200 ease-in-out"
    :style="$store.sidebar?.mobileOpen ? 'translate: 0' : null"
>
    <!-- Header: Logo + Workspace Switcher -->
    <div class="flex-shrink-0 relative" @click.outside="wsOpen = false">
        <!-- Collapsed state: centered logo acts as expand toggle -->
        <div x-show="$store.sidebar.collapsed" class="flex items-center justify-center py-4 border-b border-white/[.06]">
            <button @click="$store.sidebar.toggle()" title="Expand sidebar" class="flex items-center justify-center w-7 h-7 hover:opacity-75 transition-opacity">
                <img src="/brand/logo-mark.svg" alt="Nimuli" class="w-7 h-7">
            </button>
        </div>

        <!-- Expanded state: full header with workspace switcher -->
        <div x-show="!$store.sidebar.collapsed">
            <button
                @click="wsOpen = !wsOpen"
                class="w-full flex items-center gap-3 px-4 py-4 hover:bg-s2 transition-colors border-b border-white/[.06]"
            >
                <img src="/brand/logo-mark.svg" alt="Nimuli" class="w-7 h-7 flex-shrink-0">
                <div class="flex-1 text-left min-w-0">
                    <div class="text-sm font-bold tracking-tight text-accent-gradient">nimuli</div>
                    @if($workspace)
                        <div class="text-xs text-t2 truncate mt-0.5">{{ $workspace->name }}</div>
                    @else
                        <div class="text-xs text-t2">Select workspace</div>
                    @endif
                </div>
                <svg class="w-4 h-4 text-t3 flex-shrink-0 transition-transform" :class="wsOpen && 'rotate-180'" fill="none" viewBox="0 0 16 16" stroke="currentColor" stroke-width="1.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M4 6l4 4 4-4"/>
                </svg>
            </button>

            <!-- Workspace Switcher Dropdown -->
            <div
                x-show="wsOpen"
                x-transition:enter="transition ease-out duration-100"
                x-transition:enter-start="opacity-0 -translate-y-1"
                x-transition:enter-end="opacity-100 translate-y-0"
                x-transition:leave="transition ease-in duration-75"
                x-transition:leave-start="opacity-100 translate-y-0"
                x-transition:leave-end="opacity-0 -translate-y-1"
                class="bg-s2 border-b border-white/[.06] py-1"
            >
                @forelse($workspaces as $ws)
                    <a
                        href="{{ route('w.links.index', $ws->ulid) }}"
                        wire:navigate
                        class="flex items-center gap-2 px-4 py-2 text-sm hover:bg-s3 transition-colors {{ $workspace?->id === $ws->id ? 'text-t1' : 'text-t2' }}"
                    >
                        <span class="flex-1 truncate">{{ $ws->name }}</span>
                        @if($workspace?->id === $ws->id)
                            <svg class="w-3.5 h-3.5 text-blue flex-shrink-0" fill="currentColor" viewBox="0 0 16 16">
                                <path d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"/>
                            </svg>
                        @endif
                    </a>
                @empty
                    <div class="px-4 py-2 text-xs text-t3">No workspaces yet</div>
                @endforelse
                <div class="border-t border-white/[.06] mt-1 pt-1">
                    <button
                        @click="$dispatch('openModal', {component: 'modals.create-workspace'})"
                        class="flex items-center gap-2 px-4 py-2 text-sm text-t2 hover:text-t1 hover:bg-s3 transition-colors w-full text-left">
                        <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 16 16" stroke="currentColor" stroke-width="1.5">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M8 3v10M3 8h10"/>
                        </svg>
                        New Workspace
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Navigation -->
    <nav class="flex-1 overflow-y-auto px-2 py-3 space-y-0.5">
        @foreach($nav as $item)
            @php
                $isActive = request()->routeIs($item['match']);
                $url = Route::has($item['route']) ? route($item['route'], $item['params']) : '#';
            @endphp
            <a
                href="{{ $url }}"
                wire:navigate
                data-nav-link="{{ $item['route'] }}"
                @if(in_array($item['route'], ['w.dashboard', 'dashboard'])) data-nav-exact="1" @endif
                :title="$store.sidebar.collapsed ? '{{ $item['label'] }}' : ''"
                :class="$store.sidebar.collapsed ? 'justify-center px-2 gap-0' : 'gap-3 px-3'"
                class="flex items-center py-2 rounded-lg text-sm transition-colors group
                       {{ $isActive
                           ? 'bg-blue/10 text-blue'
                           : 'text-t2 hover:text-t1 hover:bg-s2' }}"
            >
                <span class="w-5 h-5 flex-shrink-0 {{ $isActive ? 'text-blue' : 'text-t3 group-hover:text-t2' }}">
                    @if($item['icon'] === 'dashboard')
                        <svg fill="none" viewBox="0 0 16 16" stroke="currentColor" stroke-width="1.5">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M2 2h5v5H2zM9 2h5v5H9zM2 9h5v5H2zM9 9h5v5H9z"/>
                        </svg>
                    @elseif($item['icon'] === 'links')
                        <svg fill="none" viewBox="0 0 16 16" stroke="currentColor" stroke-width="1.5">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M9.5 6.5l-3 3M6.75 4.5A2.25 2.25 0 014.5 6.75v0A2.25 2.25 0 016.75 9H8M9.25 7H10.5a2.25 2.25 0 010 4.5v0A2.25 2.25 0 018.25 9.25"/>
                        </svg>
                    @elseif($item['icon'] === 'qr')
                        <svg fill="none" viewBox="0 0 16 16" stroke="currentColor" stroke-width="1.5">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M2 2h4v4H2zM10 2h4v4h-4zM2 10h4v4H2zM10 10h1M13 10h1M10 13h1M13 13h1M11 11h2v2h-2z"/>
                        </svg>
                    @elseif($item['icon'] === 'bio')
                        <svg fill="none" viewBox="0 0 16 16" stroke="currentColor" stroke-width="1.5">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M3 4h10M3 8h10M3 12h6"/>
                        </svg>
                    @elseif($item['icon'] === 'analytics')
                        <svg fill="none" viewBox="0 0 16 16" stroke="currentColor" stroke-width="1.5">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M2 13l3-4 3 2 3-5 3 3"/>
                        </svg>
                    @elseif($item['icon'] === 'domains')
                        <svg fill="none" viewBox="0 0 16 16" stroke="currentColor" stroke-width="1.5">
                            <circle cx="8" cy="8" r="6"/><path stroke-linecap="round" stroke-linejoin="round" d="M2 8h12M8 2c-1.5 2-2.5 3.7-2.5 6S6.5 12 8 14M8 2c1.5 2 2.5 3.7 2.5 6S9.5 12 8 14"/>
                        </svg>
                    @elseif($item['icon'] === 'settings')
                        <svg fill="none" viewBox="0 0 16 16" stroke="currentColor" stroke-width="1.5">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M8 10a2 2 0 100-4 2 2 0 000 4z"/><path stroke-linecap="round" stroke-linejoin="round" d="M13.3 7a5.5 5.5 0 00-.3-1.1l1.4-1.4-1.9-1.9-1.4 1.4A5.5 5.5 0 009 3.3V1.5h-2v1.8a5.5 5.5 0 00-1.1.3L4.5 2.2 2.6 4.1 4 5.5A5.5 5.5 0 003.3 7H1.5v2h1.8a5.5 5.5 0 00.3 1.1L2.2 11.5l1.9 1.9 1.4-1.4c.35.12.71.22 1.1.3v1.8h2v-1.8a5.5 5.5 0 001.1-.3l1.4 1.4 1.9-1.9-1.4-1.4c.12-.35.22-.71.3-1.1h1.8V7h-1.8z"/>
                        </svg>
                    @elseif($item['icon'] === 'billing')
                        <svg fill="none" viewBox="0 0 16 16" stroke="currentColor" stroke-width="1.5">
                            <rect x="1.5" y="3.5" width="13" height="9" rx="1.5"/><path stroke-linecap="round" d="M1.5 6.5h13"/>
                        </svg>
                    @elseif($item['icon'] === 'team')
                        <svg fill="none" viewBox="0 0 16 16" stroke="currentColor" stroke-width="1.5">
                            <circle cx="6" cy="5" r="2"/><path stroke-linecap="round" stroke-linejoin="round" d="M1.5 14c0-2.5 2-4 4.5-4s4.5 1.5 4.5 4"/><circle cx="11.5" cy="5" r="1.5"/><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 13c0-1.8-1-3-2.5-3.5"/>
                        </svg>
                    @elseif($item['icon'] === 'ai')
                        <svg fill="none" viewBox="0 0 16 16" stroke="currentColor" stroke-width="1.5">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M8 1.5l1.5 3 3.5.5-2.5 2.5.5 3.5L8 9.5 5 11l.5-3.5L3 5l3.5-.5L8 1.5z"/>
                        </svg>
                    @endif
                </span>
                <span x-show="!$store.sidebar.collapsed" class="truncate">{{ $item['label'] }}</span>
            </a>
        @endforeach
    </nav>

    <!-- Collapse Toggle -->
    <div class="flex-shrink-0 border-t border-white/[.06] px-2 py-2">
        <button
            @click="$store.sidebar.toggle()"
            :title="$store.sidebar.collapsed ? 'Expand sidebar' : 'Collapse sidebar'"
            class="flex items-center gap-3 w-full px-3 py-2 rounded-lg text-t3 hover:text-t1 hover:bg-s2 transition-colors"
        >
            <span class="w-4 h-4 flex-shrink-0">
                <svg x-show="!$store.sidebar.collapsed" fill="none" viewBox="0 0 16 16" stroke="currentColor" stroke-width="1.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M10 3L5 8l5 5"/>
                </svg>
                <svg x-show="$store.sidebar.collapsed" x-cloak fill="none" viewBox="0 0 16 16" stroke="currentColor" stroke-width="1.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 3l5 5-5 5"/>
                </svg>
            </span>
            <span x-show="!$store.sidebar.collapsed" class="text-xs">Collapse</span>
        </button>
    </div>

    <!-- Plan Usage Box -->
    @if($workspace && $plan)
        <div x-show="!$store.sidebar.collapsed" class="mx-3 mb-3 p-3 bg-s2 border border-white/[.06] rounded-lg">
            <div class="flex items-center justify-between mb-1.5">
                <span class="text-xs font-medium text-t2">{{ ucfirst($plan->name) }} Plan</span>
                @if(str_contains(strtolower($plan->name), 'free'))
                    <a href="{{ Route::has('w.billing.index') ? route('w.billing.index', $wsUlid) : '#' }}" wire:navigate class="text-xs text-blue hover:underline">Upgrade</a>
                @endif
            </div>
            <div class="flex items-center justify-between mb-1">
                <span class="text-xs text-t3">Links</span>
                <span class="text-xs text-t2">{{ number_format($linksUsed) }} / {{ number_format($linkLimit) }}</span>
            </div>
            <div class="w-full bg-s3 rounded-full h-1">
                <div class="bg-blue h-1 rounded-full transition-all" style="width: {{ $usagePct }}%"></div>
            </div>
        </div>
    @endif

    <!-- User Footer -->
    @auth
        <div class="flex-shrink-0 border-t border-white/[.06] p-3 flex items-center gap-3 min-w-0">
            <div class="w-8 h-8 rounded-full bg-blue flex items-center justify-center text-white text-xs font-semibold flex-shrink-0">
                {{ $initials ?: strtoupper(substr(auth()->user()->email, 0, 2)) }}
            </div>
            <div x-show="!$store.sidebar.collapsed" class="flex-1 min-w-0">
                <div class="text-xs font-medium text-t1 truncate">{{ auth()->user()->name }}</div>
                <div class="text-xs text-t3 truncate">{{ auth()->user()->email }}</div>
            </div>
            <form x-show="!$store.sidebar.collapsed" method="POST" action="{{ route('logout') }}">
                @csrf
                <button
                    type="submit"
                    title="Logout"
                    class="text-t3 hover:text-t1 transition-colors"
                >
                    <svg class="w-4 h-4" fill="none" viewBox="0 0 16 16" stroke="currentColor" stroke-width="1.5">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 11.5l3-3.5-3-3.5M13.5 8H6M6 2.5H3a1 1 0 00-1 1v9a1 1 0 001 1h3"/>
                    </svg>
                </button>
            </form>
        </div>
    @endauth
</aside>
