$role = 'student';
    if ($user->hasRole('admin') || $user->hasRole('super-admin')) $role = 'admin';
    elseif ($user->hasRole('teacher')) $role = 'teacher';
    elseif ($user->hasRole('parent')) $role = 'parent';

    $dashboardRoute = match($role) {
        'admin'   => '/admin/dashboard',
        'teacher' => '/teacher/dashboard',
        'parent'  => '/parent/dashboard',
        default   => '/student/dashboard',
    };

    $typeIcons = [
        'academic'  => ['icon' => '📚', 'color' => 'blue'],
        'finance'   => ['icon' => '💳', 'color' => 'emerald'],
        'session'   => ['icon' => '🎥', 'color' => 'purple'],
        'goal'      => ['icon' => '🎯', 'color' => 'amber'],
        'community' => ['icon' => '👥', 'color' => 'rose'],
        'system'    => ['icon' => '⚙️', 'color' => 'slate'],
        'message'   => ['icon' => '💬', 'color' => 'indigo'],
        'ops'       => ['icon' => '🏆', 'color' => 'yellow'],
    ];

    $unreadCount = $notifications->where('is_read', false)->count();
@endphp

<x-rp-page-shell role="{{ $role }}" :title="__('Notification Center')" :breadcrumbs="[['label' => __('Dashboard'), 'url' => $dashboardRoute], ['label' => __('Notifications')]]">

    <div class="flex items-center justify-between mb-6">
        <div>
            <h1 class="text-xl font-bold text-slate-900 dark:text-slate-100 flex items-center gap-2">
                🔔 {{ __('Notification Center') }}
                @if($unreadCount > 0)
                    <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-bold bg-primary-600 text-white">{{ $unreadCount }}</span>
                @endif
            </h1>
            <p class="text-sm text-slate-500 dark:text-slate-400 mt-0.5">{{ __('Your notifications and alerts') }}</p>
        </div>
        <button
            onclick="fetch('{{ route('notifications.read-all') }}', {method:'POST', headers:{'X-CSRF-TOKEN':'{{ csrf_token() }}','Content-Type':'application/json'}}).then(()=>location.reload())"
            class="px-4 py-2 bg-slate-100 dark:bg-slate-700 hover:bg-slate-200 dark:hover:bg-slate-600 text-slate-700 dark:text-slate-300 text-sm font-semibold rounded-lg transition">
            ✓ {{ __('Mark All Read') }}
        </button>
    </div>

    {{-- Notifications List --}}
    <div class="space-y-2">
        @forelse($notifications as $notif)
            @php
                $meta = $typeIcons[$notif->type] ?? ['icon' => '🔔', 'color' => 'primary'];
            @endphp
            <div class="flex items-start gap-4 p-4 rounded-xl border transition-colors
                {{ $notif->is_read
                    ? 'border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800'
                    : 'border-primary-200 dark:border-primary-800 bg-primary-50/50 dark:bg-primary-900/10' }}">

                <div class="h-10 w-10 rounded-full bg-{{ $meta['color'] }}-100 dark:bg-{{ $meta['color'] }}-900/30 flex items-center justify-center shrink-0 text-lg">
                    {{ $meta['icon'] }}
                </div>

                <div class="flex-1 min-w-0">
                    <p class="text-sm font-semibold text-slate-900 dark:text-slate-100">{{ $notif->title }}</p>
                    <p class="text-xs text-slate-500 dark:text-slate-400 mt-0.5">{{ $notif->body }}</p>
                    <div class="flex items-center gap-3 mt-1.5">
                        <span class="text-xs text-slate-400">{{ $notif->created_at->diffForHumans() }}</span>
                        @if($notif->action_url)
                            <a href="{{ $notif->action_url }}"
                               onclick="fetch('{{ route('notifications.read', $notif->id) }}', {method:'POST', headers:{'X-CSRF-TOKEN':'{{ csrf_token() }}'}})"
                               class="text-xs text-primary-600 dark:text-primary-400 hover:underline font-medium">
                                View →
                            </a>
                        @endif
                    </div>
                </div>

                <div class="flex items-center gap-2 shrink-0">
                    @unless($notif->is_read)
                        <button
                            onclick="fetch('{{ route('notifications.read', $notif->id) }}', {method:'POST', headers:{'X-CSRF-TOKEN':'{{ csrf_token() }}'}}).then(()=>this.closest('div.flex').classList.add('opacity-60'))"
                            class="text-xs text-slate-400 hover:text-primary-600 dark:hover:text-primary-400 transition-colors"
                            title="Mark as read">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                        </button>
                        <span class="h-2 w-2 bg-primary-600 rounded-full"></span>
                    @endunless
                </div>
            </div>
        @empty
            <div class="text-center py-16">
                <div class="text-5xl mb-4">🔔</div>
                <h3 class="text-lg font-semibold text-slate-700 dark:text-slate-300">{{ __('No notifications') }}</h3>
                <p class="text-sm text-slate-500 dark:text-slate-400 mt-1">{{ __("You're all caught up!") }}</p>
            </div>
        @endforelse
    </div>

    {{-- Pagination --}}
    @if($notifications->hasPages())
        <div class="mt-6">
            {{ $notifications->links() }}
        </div>
    @endif

</x-rp-page-shell>