@props(['collapsed' => false])

<aside class="bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700 transition-all duration-300"
       :class="{ 'w-64': !sidebarCollapsed, 'w-20': sidebarCollapsed }"
       x-data="{ sidebarCollapsed: {{ $collapsed ? 'true' : 'false' }} }">
    
    <!-- Toggle Button -->
    <button @click="sidebarCollapsed = !sidebarCollapsed" 
            class="absolute -right-3 top-20 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-full p-1 shadow-md hover:shadow-lg transition-shadow z-10">
        <i class="fas fa-chevron-left text-gray-500" 
           :class="{ 'rotate-180': sidebarCollapsed }"></i>
    </button>

    <!-- Sidebar Content -->
    <div class="h-full py-6 overflow-y-auto">
        <!-- Navigation Items -->
        <nav class="px-3 space-y-1">
            <!-- Dashboard -->
            <x-sidebar-link href="{{ route('dashboard') }}" 
                           :active="request()->routeIs('dashboard')"
                           :collapsed="sidebarCollapsed">
                <x-slot name="icon">
                    <i class="fas fa-chart-pie"></i>
                </x-slot>
                Dashboard
            </x-sidebar-link>

            <!-- Analysis Section -->
            <div class="pt-4">
                <p class="px-3 text-xs font-semibold text-gray-500 uppercase tracking-wider"
                   x-show="!sidebarCollapsed">
                    Analisis
                </p>
                
                <x-sidebar-link href="{{ route('analysis.step1') }}" 
                               :active="request()->routeIs('analysis.step1')"
                               :collapsed="sidebarCollapsed">
                    <x-slot name="icon">
                        <i class="fas fa-plus-circle"></i>
                    </x-slot>
                    Analisis Baru
                </x-sidebar-link>

                <x-sidebar-link href="{{ route('history.index') }}" 
                               :active="request()->routeIs('history.*')"
                               :collapsed="sidebarCollapsed">
                    <x-slot name="icon">
                        <i class="fas fa-history"></i>
                    </x-slot>
                    Riwayat
                </x-sidebar-link>
            </div>

            <!-- Reports Section -->
            <div class="pt-4">
                <p class="px-3 text-xs font-semibold text-gray-500 uppercase tracking-wider"
                   x-show="!sidebarCollapsed">
                    Laporan
                </p>
                
                <x-sidebar-link href="{{ route('report.templates') }}" 
                               :active="request()->routeIs('report.templates')"
                               :collapsed="sidebarCollapsed">
                    <x-slot name="icon">
                        <i class="fas fa-file-pdf"></i>
                    </x-slot>
                    Template Laporan
                </x-sidebar-link>

                <x-sidebar-link href="{{ route('report.batch') }}" 
                               :active="request()->routeIs('report.batch')"
                               :collapsed="sidebarCollapsed">
                    <x-slot name="icon">
                        <i class="fas fa-layer-group"></i>
                    </x-slot>
                    Batch Report
                </x-sidebar-link>
            </div>

            <!-- Companies Section -->
            <div class="pt-4">
                <p class="px-3 text-xs font-semibold text-gray-500 uppercase tracking-wider"
                   x-show="!sidebarCollapsed">
                    Perusahaan
                </p>
                
                <x-sidebar-link href="{{ route('companies.index') }}" 
                               :active="request()->routeIs('companies.*')"
                               :collapsed="sidebarCollapsed">
                    <x-slot name="icon">
                        <i class="fas fa-building"></i>
                    </x-slot>
                    Daftar Perusahaan
                </x-sidebar-link>
            </div>

            <!-- Settings Section -->
            <div class="pt-4">
                <p class="px-3 text-xs font-semibold text-gray-500 uppercase tracking-wider"
                   x-show="!sidebarCollapsed">
                    Pengaturan
                </p>
                
                <x-sidebar-link href="{{ route('profile.edit') }}" 
                               :active="request()->routeIs('profile.edit')"
                               :collapsed="sidebarCollapsed">
                    <x-slot name="icon">
                        <i class="fas fa-user"></i>
                    </x-slot>
                    Profil
                </x-sidebar-link>

                <x-sidebar-link href="{{ route('settings') }}" 
                               :active="request()->routeIs('settings')"
                               :collapsed="sidebarCollapsed">
                    <x-slot name="icon">
                        <i class="fas fa-cog"></i>
                    </x-slot>
                    Pengaturan
                </x-sidebar-link>
            </div>
        </nav>

        <!-- Recent Analyses (Collapsible) -->
        <div class="mt-8 px-3" x-show="!sidebarCollapsed" x-cloak>
            <p class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">
                Analisis Terbaru
            </p>
            
            <div class="space-y-2">
                @auth
                    @php
                        $recentAnalyses = \App\Models\AnalysisResult::where('user_id', auth()->id())
                            ->latest()
                            ->take(5)
                            ->get();
                    @endphp
                    
                    @forelse($recentAnalyses as $analysis)
                        <a href="{{ route('history.show', $analysis->id) }}" 
                           class="block p-2 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
                            <p class="text-sm font-medium text-gray-900 dark:text-white truncate">
                                {{ $analysis->company_name }}
                            </p>
                            <p class="text-xs text-gray-500 dark:text-gray-400">
                                {{ $analysis->formatted_date }}
                            </p>
                        </a>
                    @empty
                        <p class="text-sm text-gray-500 dark:text-gray-400 italic">
                            Belum ada analisis
                        </p>
                    @endforelse
                @endauth
            </div>
        </div>
    </div>
</aside>

@push('styles')
<style>
/* Custom scrollbar for sidebar */
.overflow-y-auto::-webkit-scrollbar {
    width: 4px;
}

.overflow-y-auto::-webkit-scrollbar-track {
    background: transparent;
}

.overflow-y-auto::-webkit-scrollbar-thumb {
    background: #cbd5e0;
    border-radius: 4px;
}

.dark .overflow-y-auto::-webkit-scrollbar-thumb {
    background: #4a5568;
}
</style>
@endpush