@php
    $user         = auth()->user();
    $subscription = $user->subscription()?->latest()->first();
    $plan         = $subscription?->plan;
    $creditLimit  = $user->effective_limit;
    $creditsUsed  = $user->effective_usage;
    $usagePercent = $user->usage_percent;
    $initial      = strtoupper(substr($user->name ?? 'U', 0, 1));
@endphp

<div class="flex flex-col h-full w-full bg-white border-r border-gray-100">

    {{-- LOGO --}}
    <div class="h-16 flex items-center px-5 border-b border-gray-50 shrink-0">
        <x-logo class="h-8 w-auto"/>
    </div>


    {{-- NAVIGATION --}}
    <div class="flex-1 px-3 py-4 overflow-y-auto space-y-6">

        {{-- HAUPT-NAV --}}
        <nav class="space-y-0.5">
            @foreach(config('sidebar.main') as $item)
                @php
                    $active = request()->routeIs($item['route']);
                    $icon   = $active ? 'heroicon-s-' . $item['icon'] : 'heroicon-o-' . $item['icon'];
                @endphp

                <x-sidebar.link
                    :href="route($item['route'])"
                    :active="$active"
                >
                    <x-dynamic-component :component="$icon"
                        class="w-[18px] h-[18px] shrink-0 {{ $active ? 'text-indigo-600' : 'text-gray-400' }}"/>
                    <span>{{ t($item['label']) }}</span>
                </x-sidebar.link>
            @endforeach
        </nav>


        {{-- TOOLS --}}
        <div>
            <p class="px-3 mb-1.5 text-[10px] font-semibold text-gray-400 uppercase tracking-wider">
                {{ t('nav.config') }}
            </p>
            <nav class="space-y-0.5">
                @foreach(config('sidebar.tools') as $item)
                    @php
                        $active = request()->routeIs($item['route']);
                        $icon   = $active ? 'heroicon-s-' . $item['icon'] : 'heroicon-o-' . $item['icon'];
                    @endphp

                    @if($item['route'] === 'settings.affiliate' && $user->isInternalUser())
                        @continue
                    @endif

                    <x-sidebar.link
                        :href="route($item['route'])"
                        :active="$active"
                    >
                        <x-dynamic-component :component="$icon"
                            class="w-[18px] h-[18px] shrink-0 {{ $active ? 'text-indigo-600' : 'text-gray-400' }}"/>
                        <span>{{ t($item['label']) }}</span>
                    </x-sidebar.link>
                @endforeach
            </nav>
        </div>


        {{-- ADMIN (Support+) --}}
        @if($user->hasAtLeastRole('support'))
            <div>
                <p class="px-3 mb-1.5 text-[10px] font-semibold text-purple-400 uppercase tracking-wider flex items-center gap-1.5">
                    <x-heroicon-s-shield-check class="w-3 h-3"/>
                    Admin
                </p>
                <nav class="space-y-0.5">
                    @foreach(config('sidebar.admin') as $item)
                        @php
                            $active = request()->routeIs($item['route']);
                            $icon   = $active ? 'heroicon-s-' . $item['icon'] : 'heroicon-o-' . $item['icon'];
                        @endphp

                        <x-sidebar.link
                            :href="route($item['route'])"
                            :active="$active"
                        >
                            <x-dynamic-component :component="$icon"
                                class="w-[18px] h-[18px] shrink-0 {{ $active ? 'text-purple-600' : 'text-gray-400' }}"/>
                            <span>{{ t($item['label']) }}</span>
                        </x-sidebar.link>
                    @endforeach
                </nav>
            </div>
        @endif

    </div>


    {{-- FOOTER --}}
    <div class="shrink-0 border-t border-gray-100 p-3 space-y-2">

        {{-- Plan + Credits --}}
        @if($plan)
            <div class="bg-gray-50 border border-gray-100 rounded-xl px-3.5 py-3 space-y-2">
                @php
                    $sidebarCreditBadge = match(true) {
                        $usagePercent >= 100 => [
                            'label' => t('nav.full'),
                            'bg'    => '#FEF2F2',
                            'color' => '#991B1B',
                            'dot'   => '#EF4444',
                        ],
                        $usagePercent >= 80 => [
                            'label' => number_format($creditsUsed) . ' / ' . number_format($creditLimit),
                            'bg'    => '#FFFBEB',
                            'color' => '#92400E',
                            'dot'   => '#F59E0B',
                        ],
                        $usagePercent >= 60 => [
                            'label' => number_format($creditsUsed) . ' / ' . number_format($creditLimit),
                            'bg'    => '#FFF7ED',
                            'color' => '#9A3412',
                            'dot'   => '#FB923C',
                        ],
                        default => [
                            'label' => number_format($creditsUsed) . ' / ' . number_format($creditLimit),
                            'bg'    => '#EEF2FF',
                            'color' => '#3730A3',
                            'dot'   => '#4F46E5',
                        ],
                    };
                @endphp
                <div class="flex items-center justify-between">
                    <span class="text-xs font-semibold text-gray-700">{{ $plan->name }}</span>
                    @if($creditLimit > 0)
                        <span style="
                            display: inline-flex;
                            align-items: center;
                            gap: 5px;
                            padding: 3px 10px;
                            border-radius: 20px;
                            font-size: 10px;
                            font-weight: 500;
                            background: {{ $sidebarCreditBadge['bg'] }};
                            color: {{ $sidebarCreditBadge['color'] }};
                            border: 1px solid {{ $sidebarCreditBadge['color'] }}22;
                        ">
                            <span style="
                                width: 5px;
                                height: 5px;
                                border-radius: 50%;
                                background: {{ $sidebarCreditBadge['dot'] }};
                                display: inline-block;
                                flex-shrink: 0;
                            "></span>
                            {{ $sidebarCreditBadge['label'] }}
                        </span>
                    @else
                        <span style="
                            display: inline-flex;
                            align-items: center;
                            gap: 5px;
                            padding: 3px 10px;
                            border-radius: 20px;
                            font-size: 10px;
                            font-weight: 500;
                            background: #F0FDF4;
                            color: #065F46;
                            border: 1px solid #065F4622;
                        ">
                            <span style="
                                width: 5px;
                                height: 5px;
                                border-radius: 50%;
                                background: #10B981;
                                display: inline-block;
                                flex-shrink: 0;
                            "></span>
                            {{ t('nav.unlimited') }}
                        </span>
                    @endif
                </div>

                @if($creditLimit > 0)
                    <div class="w-full bg-gray-200 rounded-full h-1">
                        <div class="h-1 rounded-full transition-all
                            {{ $usagePercent >= 90 ? 'bg-red-500' : ($usagePercent >= 70 ? 'bg-amber-400' : 'bg-indigo-500') }}"
                             style="width: {{ $usagePercent }}%"></div>
                    </div>
                @endif

                @if(!($plan->is_internal ?? false))
                <a href="{{ route('plans.index') }}"
                   class="block text-center text-[10px] font-medium text-indigo-600 hover:text-indigo-700 transition-colors">
                    {{ t('nav.manage_plan') }}
                </a>
                @endif
            </div>
        @endif


        {{-- User + Logout --}}
        <div class="flex items-center gap-2.5 px-2 py-2 rounded-xl hover:bg-gray-50 transition-colors group">

            {{-- Avatar --}}
            <div class="w-8 h-8 rounded-full bg-indigo-100 text-indigo-700 flex items-center justify-center text-sm font-bold shrink-0">
                {{ $initial }}
            </div>

            {{-- Name + Email --}}
            <div class="flex-1 min-w-0">
                <p class="text-xs font-semibold text-gray-800 truncate">{{ $user->name }}</p>
                <p class="text-[10px] text-gray-400 truncate">{{ $user->email }}</p>
            </div>

            {{-- Settings + Logout --}}
            <div class="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
                <a href="{{ route('settings.index') }}" wire:navigate
                   class="p-1 text-gray-400 hover:text-gray-600 rounded transition-colors"
                   title="{{ t('nav.settings') }}">
                    <x-heroicon-o-cog-6-tooth class="w-4 h-4"/>
                </a>
                <form method="POST" action="{{ route('logout') }}">
                    @csrf
                    <button type="submit"
                            class="p-1 text-gray-400 hover:text-red-500 rounded transition-colors"
                            title="{{ t('nav.logout') }}">
                        <x-heroicon-o-arrow-right-on-rectangle class="w-4 h-4"/>
                    </button>
                </form>
            </div>

        </div>

    </div>

</div>
