@php
    $path = '/'.ltrim(request()->path(), '/');
    if ($path === '') {
        $path = '/';
    }
@endphp

<aside
    x-bind:class="collapsed ? 'w-[68px]' : 'w-[240px]'"
    class="fixed left-0 top-0 hidden h-screen border-r border-border/60 bg-background/95 flex-col ios-transition z-40 lg:flex"
>
    <div class="h-14 flex items-center px-4 gap-3 border-b border-border/60 shrink-0">
        <div class="w-8 h-8 rounded-lg bg-primary flex items-center justify-center shrink-0">
            <i data-lucide="wallet" class="w-4 h-4 text-primary-foreground"></i>
        </div>
        <span x-show="!collapsed" x-cloak class="font-bold text-foreground text-lg tracking-tight">{{ $brandName }}</span>
    </div>

    <nav class="flex-1 py-3 overflow-y-auto" aria-label="{{ __('budgets.mobile.nav_primary_aria') }}">
        <div class="mb-2">
            <p x-show="!collapsed" x-cloak class="px-3 mb-1.5 text-[10px] font-semibold text-sidebar-foreground/50 uppercase tracking-widest">{{ __('budgets.nav.finance') }}</p>
            @foreach ([
                ['label' => __('budgets.nav.dashboard'), 'icon' => 'layout-dashboard', 'href' => '/dashboard'],
                ['label' => __('budgets.nav.transactions'), 'icon' => 'arrow-left-right', 'href' => '/transactions'],
                ['label' => __('budgets.nav.budgets'), 'icon' => 'piggy-bank', 'href' => '/budgets'],
                ['label' => __('budgets.nav.goals'), 'icon' => 'target', 'href' => '/goals'],
                ['label' => __('budgets.nav.subscriptions'), 'icon' => 'repeat', 'href' => '/subscriptions'],
                ['label' => __('budgets.nav.debts'), 'icon' => 'credit-card', 'href' => '/debts'],
            ] as $item)
                @php
                    $active = $path === $item['href'] || ($item['href'] !== '/dashboard' && str_starts_with($path, $item['href']));
                @endphp
                <a
                    href="{{ url($item['href']) }}"
                    wire:navigate
                    class="ios-transition-fast ios-press flex items-center gap-3 px-3 py-2.5 rounded-2xl text-sm font-medium mx-1 {{ $active ? 'bg-primary/10 text-foreground border border-border/40' : 'text-sidebar-foreground/80 hover:bg-surface-hover hover:text-foreground' }}"
                >
                    <i data-lucide="{{ $item['icon'] }}" class="w-[18px] h-[18px] shrink-0 {{ $active ? 'text-primary' : '' }}"></i>
                    <span x-show="!collapsed" x-cloak>{{ $item['label'] }}</span>
                </a>
            @endforeach
        </div>

        <div class="mb-2">
            <p x-show="!collapsed" x-cloak class="px-3 mb-1.5 text-[10px] font-semibold text-sidebar-foreground/50 uppercase tracking-widest">{{ __('budgets.nav.intelligence') }}</p>
            @foreach ([
                ['label' => __('budgets.nav.insights'), 'icon' => 'lightbulb', 'href' => '/insights'],
                ['label' => __('budgets.nav.ai_advisor'), 'icon' => 'brain', 'href' => '/ai-advisor'],
            ] as $item)
                @php
                    $active = $path === $item['href'] || str_starts_with($path, $item['href']);
                @endphp
                <a href="{{ url($item['href']) }}" wire:navigate class="ios-transition-fast ios-press flex items-center gap-3 px-3 py-2.5 rounded-2xl text-sm font-medium mx-1 {{ $active ? 'bg-primary/10 text-foreground border border-border/40' : 'text-sidebar-foreground/80 hover:bg-surface-hover hover:text-foreground' }}">
                    <i data-lucide="{{ $item['icon'] }}" class="w-[18px] h-[18px] shrink-0 {{ $active ? 'text-primary' : '' }}"></i>
                    <span x-show="!collapsed" x-cloak>{{ $item['label'] }}</span>
                </a>
            @endforeach
        </div>

        <div class="mb-2">
            <p x-show="!collapsed" x-cloak class="px-3 mb-1.5 text-[10px] font-semibold text-sidebar-foreground/50 uppercase tracking-widest">{{ __('budgets.nav.admin') }}</p>
            @foreach ([
                ['label' => __('budgets.nav.admin'), 'icon' => 'shield', 'href' => '/admin'],
                ['label' => 'Users', 'icon' => 'users', 'href' => '/admin/users'],
                ['label' => __('budgets.nav.analytics'), 'icon' => 'bar-chart-3', 'href' => '/admin/analytics'],
                ['label' => __('budgets.admin_console.plans_tab'), 'icon' => 'package', 'href' => '/admin/plans'],
                ['label' => __('budgets.admin_console.pricing_tab'), 'icon' => 'badge-euro', 'href' => '/admin/pricing'],
                ['label' => __('budgets.admin_console.system_tab'), 'icon' => 'sliders-horizontal', 'href' => '/admin/system-settings'],
            ] as $item)
                @php
                    $active = $path === $item['href'] || ($item['href'] !== '/admin' && str_starts_with($path, $item['href']));
                @endphp
                <a href="{{ url($item['href']) }}" wire:navigate class="ios-transition-fast ios-press flex items-center gap-3 px-3 py-2.5 rounded-2xl text-sm font-medium mx-1 {{ $active ? 'bg-primary/10 text-foreground border border-border/40' : 'text-sidebar-foreground/80 hover:bg-surface-hover hover:text-foreground' }}">
                    <i data-lucide="{{ $item['icon'] }}" class="w-[18px] h-[18px] shrink-0 {{ $active ? 'text-primary' : '' }}"></i>
                    <span x-show="!collapsed" x-cloak>{{ $item['label'] }}</span>
                </a>
            @endforeach
        </div>
    </nav>

    <div class="border-t border-border/60">
        <a href="{{ url('/settings') }}" wire:navigate class="ios-transition-fast ios-press flex items-center gap-3 px-4 py-3 text-sm font-medium {{ $path === '/settings' ? 'text-primary' : 'text-sidebar-foreground/80 hover:text-foreground' }}">
            <i data-lucide="settings" class="w-[18px] h-[18px] shrink-0"></i>
            <span x-show="!collapsed" x-cloak>{{ __('budgets.nav.settings') }}</span>
        </a>
        <button
            type="button"
            @click="collapsed = !collapsed"
            class="ios-transition-fast w-full h-10 flex items-center justify-center border-t border-border/60 text-sidebar-foreground/50 hover:text-foreground"
            :aria-expanded="!collapsed"
            :aria-label="collapsed ? @js(__('budgets.sidebar.expand_aria')) : @js(__('budgets.sidebar.collapse_aria'))"
        >
            <i data-lucide="chevron-left" class="w-4 h-4" x-show="!collapsed" x-cloak></i>
            <i data-lucide="chevron-right" class="w-4 h-4" x-show="collapsed" x-cloak></i>
        </button>
    </div>
</aside>