@php
    $user = auth()->user();
    $isAdmin = $user->hasAnyRole(['super_admin', 'faculty_admin']);
    $isTeacher = $user->hasRole('teacher');
    $isStudent = $user->hasRole('student');

    // Profile completion calculation
    $completionFields = ['name', 'email', 'bio', 'profile_photo'];
    if ($isStudent) {
        $profile = $user->profile;
        $extraFields = ['matricule', 'faculty_id', 'department_id', 'level'];
    } elseif ($isTeacher) {
        $profile = $user->profile;
        $extraFields = ['phone', 'office'];
    } else {
        $profile = $user->profile;
        $extraFields = [];
    }
    $totalFields = count($completionFields) + count($extraFields);
    $filledUser = collect($completionFields)->filter(fn($f) => !empty($user->$f))->count();
    $filledProfile = isset($profile) ? collect($extraFields)->filter(fn($f) => !empty($profile->$f))->count() : 0;
    $completionPercent = $totalFields > 0 ? round((($filledUser + $filledProfile) / $totalFields) * 100) : 0;
@endphp

<aside class="w-72 bg-white border-r border-gray-100 flex flex-col fixed h-full z-50 shadow-lg">
    <!-- Logo & Brand -->
    <div class="p-8 border-b border-gray-100">
        <a href="{{ $isAdmin ? route('dashboard.admin') : ($isTeacher ? route('dashboard.teacher') : route('dashboard')) }}" class="flex items-center gap-4">
            <div class="w-12 h-12 royal-gradient rounded-2xl flex items-center justify-center shadow-lg">
                @if($isAdmin)
                    <i class="fa-solid fa-crown text-white text-lg"></i>
                @elseif($isTeacher)
                    <i class="fa-solid fa-chalkboard-teacher text-white text-lg"></i>
                @else
                    <i class="fa-solid fa-graduation-cap text-white text-lg"></i>
                @endif
            </div>
            <div>
                <span class="block font-display font-bold text-xl text-gray-900 tracking-tight">Sciences Afrique</span>
                <span class="block text-[10px] text-gray-400 uppercase font-bold tracking-[0.3em]">
                    @if($isAdmin)
                        Administration
                    @elseif($isTeacher)
                        Espace Enseignant
                    @else
                        Espace Étudiant
                    @endif
                </span>
            </div>
        </a>
    </div>

    <!-- Navigation -->
    <nav class="flex-1 px-4 py-6 space-y-2 overflow-y-auto">
        @if($isAdmin)
            <!-- Admin Navigation: Tableau de Bord -->
            <x-sidebar-item :href="route('admin.dashboard')" icon="fa-solid fa-chart-line" label="Vue d'ensemble" :active="request()->routeIs('admin.dashboard')" />
            
            <!-- Pôle 1: Académique -->
            <div class="pt-4 pb-2"><span class="px-4 text-[10px] font-bold uppercase tracking-[0.25em] text-gray-400">Académique</span></div>
            <x-sidebar-item :href="route('admin.faculties.index')" icon="fa-solid fa-university" label="Facultés" :active="request()->routeIs('admin.faculties.*')" />
            <x-sidebar-item :href="route('admin.departments.index')" icon="fa-solid fa-building" label="Départements" :active="request()->routeIs('admin.departments.*')" />
            <x-sidebar-item :href="route('admin.courses.index')" icon="fa-solid fa-book" label="Catalogue Cours" :active="request()->routeIs('admin.courses.index')" />
            <x-sidebar-item :href="route('admin.course_categories.index')" icon="fa-solid fa-tags" label="Catégories" :active="request()->routeIs('admin.course_categories.*')" />
            <x-sidebar-item :href="route('admin.assessments.index')" icon="fa-solid fa-clipboard-check" label="Évaluations" :active="request()->routeIs('admin.assessments.*')" />
            <x-sidebar-item :href="route('admin.live-sessions.index')" icon="fa-solid fa-video" label="Sessions Live" :active="request()->routeIs('admin.live-sessions.*')" />

            <!-- Communication Admin -->
            <div class="pt-4 pb-2"><span class="px-4 text-[10px] font-bold uppercase tracking-[0.25em] text-gray-400">Communication</span></div>
            <x-sidebar-item :href="route('communication.chat.index')" icon="fa-solid fa-comments" label="Messagerie Interne" :active="request()->routeIs('communication.chat.*')" />
            <x-sidebar-item :href="route('communication.jitsi.index')" icon="fa-solid fa-video-camera" label="Salons de Réunion" :active="request()->routeIs('communication.jitsi.*')" />

            <!-- Pôle 2: Utilisateurs -->
            <div class="pt-4 pb-2"><span class="px-4 text-[10px] font-bold uppercase tracking-[0.25em] text-gray-400">Utilisateurs</span></div>
            <x-sidebar-item :href="route('admin.students.index')" icon="fa-solid fa-user-graduate" label="Étudiants" :active="request()->routeIs('admin.students.*')" />
            <x-sidebar-item :href="route('admin.teachers.index')" icon="fa-solid fa-chalkboard-teacher" label="Enseignants" :active="request()->routeIs('admin.teachers.index')" />
            <x-sidebar-item :href="route('admin.teachers.payments')" icon="fa-solid fa-wallet" label="Rémunération Profs" :active="request()->routeIs('admin.teachers.payments')" />
            <x-sidebar-item :href="route('admin.staff.index')" icon="fa-solid fa-user-tie" label="Personnel" :active="request()->routeIs('admin.staff.*')" />
            <x-sidebar-item :href="route('admin.enrollments.index')" icon="fa-solid fa-clipboard-list" label="Inscriptions" :active="request()->routeIs('admin.enrollments.*')" />

            <!-- Pôle 3: Admission & Scolarité -->
            <div class="pt-4 pb-2"><span class="px-4 text-[10px] font-bold uppercase tracking-[0.25em] text-gray-400">Scolarité</span></div>
            <x-sidebar-item :href="route('admin.admissions.index')" icon="fa-solid fa-file-signature" label="Admissions" :active="request()->routeIs('admin.admissions.*')" />
            <x-sidebar-item :href="route('admin.fees.index')" icon="fa-solid fa-coins" label="Frais Scolaires" :active="request()->routeIs('admin.fees.index')" />
            <x-sidebar-item :href="route('admin.fees.receipts')" icon="fa-solid fa-file-invoice-dollar" label="Reçus & Paiements" :active="request()->routeIs('admin.fees.receipts')" />

            <!-- Pôle 4: Bibliothèque -->
            <div class="pt-4 pb-2"><span class="px-4 text-[10px] font-bold uppercase tracking-[0.25em] text-gray-400">Bibliothèque</span></div>
            <x-sidebar-item :href="route('admin.library.books.index')" icon="fa-solid fa-book-atlas" label="Tous les livres" :active="request()->routeIs('admin.library.books.index')" />
            <x-sidebar-item :href="route('admin.library.books.create')" icon="fa-solid fa-plus-circle" label="Ajouter un livre" :active="request()->routeIs('admin.library.books.create')" />
            <x-sidebar-item :href="route('admin.library.issues.index')" icon="fa-solid fa-hand-holding-heart" label="Emprunts en cours" :active="request()->routeIs('admin.library.issues.*')" />

            <!-- Pôle 5: Finances & Abonnements -->
            <div class="pt-4 pb-2"><span class="px-4 text-[10px] font-bold uppercase tracking-[0.25em] text-gray-400">Finances</span></div>
            <x-sidebar-item :href="route('admin.payments.index')" icon="fa-solid fa-credit-card" label="Transactions" :active="request()->is('admin/payments*') && !request()->is('admin/payments/issues*') && !request()->is('admin/payments/refunds*')" />
            <x-sidebar-item :href="route('admin.payments.issues')" icon="fa-solid fa-exclamation-triangle" label="Échecs / Litiges" :active="request()->routeIs('admin.payments.issues')" />
            <x-sidebar-item :href="route('admin.payments.refunds')" icon="fa-solid fa-undo" label="Remboursements" :active="request()->routeIs('admin.payments.refunds')" />
            <x-sidebar-item :href="route('admin.subscriptions.plans')" icon="fa-solid fa-layer-group" label="Plans & Offres" :active="request()->routeIs('admin.subscriptions.plans')" />
            <x-sidebar-item :href="route('admin.subscriptions.coupons')" icon="fa-solid fa-ticket-alt" label="Coupons" :active="request()->routeIs('admin.subscriptions.coupons')" />

            <!-- Pôle 6: Rapports & Audit -->
            <div class="pt-4 pb-2"><span class="px-4 text-[10px] font-bold uppercase tracking-[0.25em] text-gray-400">Rapports & Audit</span></div>
            <x-sidebar-item :href="route('admin.analytics.index')" icon="fa-solid fa-chart-bar" label="Statistiques" :active="request()->routeIs('admin.analytics.index')" />
            <x-sidebar-item :href="route('admin.reports.financial')" icon="fa-solid fa-file-contract" label="Rapports Financiers" :active="request()->routeIs('admin.reports.financial')" />
            <x-sidebar-item :href="route('admin.audit.index')" icon="fa-solid fa-history" label="Journal d'audit" :active="request()->routeIs('admin.audit.index')" />
            <x-sidebar-item :href="route('admin.system.logs')" icon="fa-solid fa-terminal" label="Logs Système" :active="request()->routeIs('admin.system.logs')" />

            <!-- Pôle 7: Sécurité & Accès -->
            <div class="pt-4 pb-2"><span class="px-4 text-[10px] font-bold uppercase tracking-[0.25em] text-gray-400">Sécurité</span></div>
            <x-sidebar-item :href="route('admin.security.roles.index')" icon="fa-solid fa-user-shield" label="Rôles" :active="request()->routeIs('admin.security.roles.*')" />
            <x-sidebar-item :href="route('admin.security.permissions.index')" icon="fa-solid fa-key" label="Permissions" :active="request()->routeIs('admin.security.permissions.*')" />
            <x-sidebar-item :href="route('admin.security.assignments')" icon="fa-solid fa-user-check" label="Attributions" :active="request()->routeIs('admin.security.assignments')" />
            <x-sidebar-item :href="route('admin.security.sessions')" icon="fa-solid fa-fingerprint" label="Sessions Actives" :active="request()->routeIs('admin.security.sessions')" />

            <!-- Pôle 8: Paramètres Système -->
            <div class="pt-4 pb-2"><span class="px-4 text-[10px] font-bold uppercase tracking-[0.25em] text-gray-400">Configuration</span></div>
            <x-sidebar-item :href="route('admin.homepage.index')" icon="fa-solid fa-house-chimney-window" label="Gestion Homepage" :active="request()->routeIs('admin.homepage.*')" />
            <x-sidebar-item :href="route('admin.settings.general')" icon="fa-solid fa-cog" label="Réglages Généraux" :active="request()->routeIs('admin.settings.general')" />
            <x-sidebar-item :href="route('admin.settings.notifications')" icon="fa-solid fa-bell-concierge" label="Notifications" :active="request()->routeIs('admin.settings.notifications')" />
            <x-sidebar-item :href="route('admin.settings.branding')" icon="fa-solid fa-palette" label="Image & Branding" :active="request()->routeIs('admin.settings.branding')" />
            <x-sidebar-item :href="route('admin.settings.integrations')" icon="fa-solid fa-plug" label="Intégrations (API)" :active="request()->routeIs('admin.settings.integrations')" />
            <x-sidebar-item :href="route('admin.settings.maintenance')" icon="fa-solid fa-tools" label="Maintenance" :active="request()->routeIs('admin.settings.maintenance')" />
            <x-sidebar-item :href="route('admin.platform.health')" icon="fa-solid fa-heartbeat" label="Santé Système" :active="request()->routeIs('admin.platform.health')" />
            <x-sidebar-item :href="route('admin.users.index')" icon="fa-solid fa-users-cog" label="Comptes Utilisateurs" :active="request()->routeIs('admin.users.*')" />
            
        @elseif($isTeacher)
            <!-- Teacher Navigation -->
            <x-sidebar-item 
                :href="route('dashboard.teacher')" 
                icon="fa-solid fa-home" 
                label="Tableau de Bord"
                :active="request()->routeIs('dashboard.teacher')"
            />
            <x-sidebar-item 
                :href="route('teacher.courses.index')" 
                icon="fa-solid fa-book" 
                label="Mes Cours"
                :active="request()->routeIs('teacher.courses.*')"
            />
            
            <div class="pt-4 pb-2">
                <span class="px-4 text-[10px] font-bold uppercase tracking-[0.25em] text-gray-400">Gestion</span>
            </div>
            
            <x-sidebar-item 
                :href="route('teacher.students.index')" 
                icon="fa-solid fa-users" 
                label="Mes Étudiants"
                :active="request()->routeIs('teacher.students.*')"
            />
            <x-sidebar-item 
                :href="route('teacher.assessments.index')" 
                icon="fa-solid fa-tasks" 
                label="Évaluations"
                :active="request()->routeIs('teacher.assessments.*')"
            />
            <x-sidebar-item 
                :href="route('teacher.statistics')" 
                icon="fa-solid fa-chart-bar" 
                label="Statistiques"
                :active="request()->routeIs('teacher.statistics')"
            />

            <div class="pt-4 pb-2">
                <span class="px-4 text-[10px] font-bold uppercase tracking-[0.25em] text-gray-400">Finances</span>
            </div>

            <x-sidebar-item 
                :href="route('teacher.payouts.index')" 
                icon="fa-solid fa-wallet" 
                label="Mes Revenus"
                :active="request()->routeIs('teacher.payouts.index')"
            />
            <x-sidebar-item 
                :href="route('teacher.payouts.request')" 
                icon="fa-solid fa-hand-holding-dollar" 
                label="Demande de Paiement"
                :active="request()->routeIs('teacher.payouts.request')"
            />
            <x-sidebar-item 
                :href="route('teacher.payouts.accounts')" 
                icon="fa-solid fa-credit-card" 
                label="Compte de Paiement"
                :active="request()->routeIs('teacher.payouts.accounts')"
            />

            <div class="pt-4 pb-2">
                <span class="px-4 text-[10px] font-bold uppercase tracking-[0.25em] text-gray-400">Communication</span>
            </div>

            <x-sidebar-item 
                :href="route('communication.chat.index')" 
                icon="fa-solid fa-comments" 
                label="Messagerie Interne"
                :active="request()->routeIs('communication.chat.*')"
            />
            <x-sidebar-item 
                :href="route('communication.jitsi.index')" 
                icon="fa-solid fa-video-camera" 
                label="Salons Live (Jitsi)"
                :active="request()->routeIs('communication.jitsi.*')"
            />

            <div class="pt-4 pb-2">
                <span class="px-4 text-[10px] font-bold uppercase tracking-[0.25em] text-gray-400">Compte</span>
            </div>

            <x-sidebar-item 
                :href="route('profile.index')" 
                icon="fa-solid fa-user-circle" 
                label="Mon Profil"
                :active="request()->routeIs('profile.*')"
            />
            
        @else
            <!-- Student Navigation -->
            <x-sidebar-item 
                :href="route('dashboard')" 
                icon="fa-solid fa-home" 
                label="Tableau de Bord"
                :active="request()->routeIs('dashboard')"
            />
            <x-sidebar-item 
                :href="route('courses.catalog')" 
                icon="fa-solid fa-book-open" 
                label="Catalogue Cours"
                :active="request()->routeIs('courses.catalog')"
            />
            
            <div class="pt-4 pb-2">
                <span class="px-4 text-[10px] font-bold uppercase tracking-[0.25em] text-gray-400">Gamification</span>
            </div>
            
            <x-sidebar-item 
                :href="route('gamification.badges')" 
                icon="fa-solid fa-trophy" 
                label="Badges"
                :active="request()->routeIs('gamification.badges')"
            />
            <x-sidebar-item 
                :href="route('gamification.leaderboard')" 
                icon="fa-solid fa-medal" 
                label="Classement"
                :active="request()->routeIs('gamification.leaderboard')"
            />
            <x-sidebar-item 
                :href="route('gamification.points')" 
                icon="fa-solid fa-star" 
                label="Points XP"
                :active="request()->routeIs('gamification.points')"
            />
            
            <div class="pt-4 pb-2">
                <span class="px-4 text-[10px] font-bold uppercase tracking-[0.25em] text-gray-400">Communication</span>
            </div>

            <x-sidebar-item 
                :href="route('communication.chat.index')" 
                icon="fa-solid fa-comments" 
                label="Discuter avec Profs"
                :active="request()->routeIs('communication.chat.*')"
            />
            <x-sidebar-item 
                :href="route('communication.jitsi.index')" 
                icon="fa-solid fa-headset" 
                label="Salons de classe"
                :active="request()->routeIs('communication.jitsi.*')"
            />

            <div class="pt-4 pb-2">
                <span class="px-4 text-[10px] font-bold uppercase tracking-[0.25em] text-gray-400">Compte</span>
            </div>
            
            <x-sidebar-item 
                :href="route('payments.history')" 
                icon="fa-solid fa-receipt" 
                label="Historique Paiements"
                :active="request()->routeIs('payments.*')"
            />
            <x-sidebar-item 
                :href="route('profile.index')" 
                icon="fa-solid fa-user-circle" 
                label="Mon Profil"
                :active="request()->routeIs('profile.*')"
            />
        @endif
    </nav>

    <!-- User Profile Footer -->
    <div class="p-4 border-t border-gray-100 bg-gray-50/50">
        <a href="{{ route('profile.index') }}" class="flex items-center gap-3 mb-3 p-2 rounded-xl hover:bg-white hover:shadow-sm transition-all group">
            <div class="relative shrink-0">
                @if($user->profile_photo)
                    <img src="{{ asset('storage/' . $user->profile_photo) }}" 
                         alt="{{ $user->name }}"
                         class="w-11 h-11 rounded-full object-cover ring-2 ring-white shadow">
                @else
                    <div class="w-11 h-11 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-full flex items-center justify-center ring-2 ring-white shadow">
                        <span class="font-bold text-white text-base">{{ strtoupper(substr($user->name, 0, 1)) }}</span>
                    </div>
                @endif
                <span class="absolute bottom-0 right-0 w-3 h-3 bg-green-400 border-2 border-white rounded-full"></span>
            </div>
            <div class="flex-1 min-w-0">
                <span class="block font-bold text-gray-900 truncate text-sm group-hover:text-blue-600 transition-colors">{{ $user->name }}</span>
                <span class="block text-[11px] text-gray-500">
                    @if($isAdmin) Administrateur
                    @elseif($isTeacher) Enseignant
                    @else Étudiant
                    @endif
                </span>
            </div>
            <i class="fa-solid fa-chevron-right text-gray-300 text-xs group-hover:text-blue-400 transition-colors"></i>
        </a>

        @if(!$isAdmin)
        <!-- Profile completion bar -->
        <div class="mb-3 px-1">
            <div class="flex justify-between items-center mb-1">
                <span class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Profil complété</span>
                <span class="text-[10px] font-bold {{ $completionPercent >= 80 ? 'text-green-500' : ($completionPercent >= 50 ? 'text-amber-500' : 'text-red-400') }}">{{ $completionPercent }}%</span>
            </div>
            <div class="w-full bg-gray-200 rounded-full h-1.5">
                <div class="h-1.5 rounded-full transition-all duration-700 {{ $completionPercent >= 80 ? 'bg-green-500' : ($completionPercent >= 50 ? 'bg-amber-400' : 'bg-red-400') }}" 
                     style="width: {{ $completionPercent }}%"></div>
            </div>
        </div>
        @endif
        
        <form action="{{ route('logout') }}" method="POST">
            @csrf
            <button type="submit" class="w-full flex items-center justify-center gap-2 px-4 py-2.5 text-red-500 hover:bg-red-50 rounded-xl transition-all font-semibold text-sm">
                <i class="fa-solid fa-right-from-bracket"></i>
                <span>Déconnexion</span>
            </button>
        </form>
    </div>
</aside>