@props(['role' => 'admin', 'title' => ''])

@php
if (empty($title)) {
    if (request()->is('admin/dashboard')) {
        $title = 'Dashboard Command Center';
    } elseif (request()->is('admin/students/create')) {
        $title = 'Onboard New Student';
    } elseif (request()->is('admin/students')) {
        $title = 'Student Directory Management';
    } else {
        $segment = request()->segment(count(request()->segments()));
        $title = $segment ? ucwords(str_replace('-', ' ', $segment)) : 'Dashboard';
    }
}
@endphp

{{-- Prevent dark mode flash --}}
<script>
if (
    localStorage.getItem('theme') === 'dark' ||
    (!('theme' in localStorage) &&
        window.matchMedia('(prefers-color-scheme: dark)').matches)
) {
    document.documentElement.classList.add('dark');
} else {
    document.documentElement.classList.remove('dark');
}
</script>

<header
    x-data="{
        showNotifications: false,
        showProfile: false,
        @auth
        unreadCount: {{ auth()->user()->unreadNotifications()->count() }},
        notifications: {{ Js::from(
            auth()->user()->notifications()->take(5)->get()->map(fn($n) => [
                'id'      => $n->id ?? '',
                'title'   => $n->data['title'] ?? $n->data['subject'] ?? 'Notification',
                'message' => $n->data['message'] ?? $n->data['body'] ?? '',
                'url'     => $n->data['url'] ?? $n->data['action_url'] ?? $n->data['link'] ?? '#',
                'time'    => $n->created_at?->diffForHumans() ?? '',
                'read'    => !is_null($n->read_at),
            ])
        ) }},
        init() {
            if (typeof Echo !== 'undefined') {
                Echo.private('App.Models.User.' + {{ auth()->id() }})
                    .notification((notification) => {
                        this.unreadCount++;
                        this.notifications.unshift({
                            title: notification.title,
                            message: notification.message
                        });
                    });
            }
        }
        @endauth
    }"
    class="sticky top-0 z-40 bg-white dark:bg-slate-800 border-b border-slate-200 dark:border-slate-700"
>
    <div class="flex items-center justify-between h-16 px-4 lg:px-6">

        {{-- LEFT SIDE --}}
        <div data-tour="topbar-left" class="flex items-center gap-4">

            {{-- HAMBURGER --}}
            <button
                data-tour="topbar-menu"
                @click="$store.sidebar.toggle()"
                class="lg:hidden p-2 text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-700 transition-colors"
                aria-label="Toggle sidebar"
            >
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="2"
                          d="M4 6h16M4 12h16M4 18h16"/>
                </svg>
            </button>

            <h1 class="text-sm font-bold text-slate-900 dark:text-slate-100 tracking-tight flex items-center gap-2">
                <span class="text-slate-400 dark:text-slate-500 font-medium">
                    Portal /
                </span>
                {{ $title }}
            </h1>
        </div>

        {{-- RIGHT SIDE --}}
        <div data-tour="topbar-actions" class="flex items-center gap-3">

            {{-- 1. Dark Mode Toggle --}}
            <button
                data-tour="topbar-theme"
                @click="
                    document.documentElement.classList.toggle('dark');
                    localStorage.setItem(
                        'theme',
                        document.documentElement.classList.contains('dark') ? 'dark' : 'light'
                    );
                "
                class="p-2 text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-700 transition-colors"
            >
                <svg xmlns="http://www.w3.org/2000/svg"
                     class="w-5 h-5 block dark:hidden"
                     fill="none"
                     stroke="currentColor"
                     viewBox="0 0 24 24">
                    <path stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="2"
                          d="M20.354 15.354A9 9 0 018.646 3.646 9 9 0 0112 3a9 9 0 019 9 9 9 0 01-9 9 9 9 0 01-9-9 9 9 0 019-9z"/>
                </svg>

                <svg xmlns="http://www.w3.org/2000/svg"
                     class="w-5 h-5 hidden dark:block"
                     fill="none"
                     stroke="currentColor"
                     viewBox="0 0 24 24">
                    <path stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="2"
                          d="M12 3v1m0 16v1m9-9h-1m-16 0H3m15.364-6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/>
                </svg>
            </button>

            {{-- 2. Notification Bell (Real-Time) --}}
            <div data-tour="topbar-alerts-wrap" class="relative">
                <button
                    data-tour="topbar-alerts"
                    @click="showNotifications = !showNotifications"
                    class="relative p-2 text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-700 transition-colors"
                    aria-label="Notifications"
                >
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="2"
                              d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/>
                    </svg>

                    <span
                        x-show="unreadCount > 0"
                        x-text="unreadCount"
                        x-transition
                        class="absolute -top-1 -right-1 h-5 w-5 bg-red-500 text-white text-xs rounded-full flex items-center justify-center"
                        style="display:none;">
                    </span>
                </button>

                <div
                    x-show="showNotifications"
                    @click.outside="showNotifications = false"
                    x-transition
                    class="absolute right-0 mt-2 w-80 bg-white dark:bg-slate-800 rounded-xl shadow-xl border border-slate-200 dark:border-slate-700 overflow-hidden z-50"
                    style="display:none;"
                >
                    <div class="px-4 py-3 border-b border-slate-100 dark:border-slate-700 flex justify-between items-center bg-slate-50 dark:bg-slate-700/50">
                        <span class="font-semibold text-xs text-slate-700 dark:text-slate-300 uppercase">
                            Alerts
                        </span>
                        <button
                            @click="unreadCount = 0"
                            class="text-xs text-primary-600 hover:text-primary-700 dark:text-primary-400">
                            Mark read
                        </button>
                    </div>

                    <div class="divide-y divide-slate-100 dark:divide-slate-700 max-h-64 overflow-y-auto">
                        <template x-for="(notif, index) in notifications" :key="index">
                            <component
                                :is="notif.url ? 'a' : 'div'"
                                :href="notif.url || undefined"
                                class="block px-4 py-3 hover:bg-slate-50 dark:hover:bg-slate-700/40 transition-colors cursor-pointer"
                                :class="{ 'bg-primary-50/40 dark:bg-primary-900/10': !notif.read }"
                            >
                                <div class="flex items-start justify-between gap-2">
                                    <p class="text-xs font-semibold text-slate-800 dark:text-slate-200 flex-1"
                                       x-text="notif.title"></p>
                                    <span x-show="!notif.read"
                                          class="flex-shrink-0 w-2 h-2 rounded-full bg-primary-500 mt-1"></span>
                                </div>
                                <p class="text-xs text-slate-500 dark:text-slate-400 mt-0.5 truncate"
                                   x-text="notif.message"></p>
                                <p class="text-[10px] text-slate-400 dark:text-slate-500 mt-1"
                                   x-text="notif.time"></p>
                            </component>
                        </template>

                        <div x-show="notifications.length === 0"
                             class="px-4 py-6 text-center text-sm text-slate-500 dark:text-slate-400">
                            No recent notifications
                        </div>
                    </div>

                    {{-- View All Footer --}}
                    <div class="px-4 py-2.5 border-t border-slate-100 dark:border-slate-700 bg-slate-50 dark:bg-slate-700/30">
                        <a href="{{ url('/' . $role . '/notifications') }}"
                           class="block text-center text-xs font-semibold text-primary-600 dark:text-primary-400 hover:text-primary-700 dark:hover:text-primary-300 transition-colors">
                            View all notifications →
                        </a>
                    </div>
                </div>
            </div>

            {{-- 3. User Avatar --}}
            <div data-tour="topbar-profile-wrap" class="relative">
                <button
                    data-tour="topbar-profile"
                    @click="showProfile = !showProfile"
                    class="flex items-center gap-2 p-1.5 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-700/60 transition-colors"
                >
                    <div class="h-8 w-8 rounded-full bg-primary-100 dark:bg-primary-900 flex items-center justify-center text-primary-700 dark:text-primary-300 text-sm font-medium">
                        {{ strtoupper(substr(auth()->user()->name ?? 'U', 0, 2)) }}
                    </div>
                    <span class="text-sm font-medium text-slate-700 dark:text-slate-300 hidden sm:block">
                        {{ auth()->user()->name ?? 'User' }}
                    </span>
                </button>

                <div
                    x-show="showProfile"
                    @click.outside="showProfile = false"
                    x-transition
                    class="absolute right-0 mt-2 w-48 bg-white dark:bg-slate-800 rounded-xl shadow-xl border border-slate-200 dark:border-slate-700 py-1 z-50"
                    style="display: none;"
                >
                    {{-- User Identity Header --}}
                    <div class="px-4 py-2 border-b border-slate-100 dark:border-slate-700 mb-1 bg-slate-50/50 dark:bg-slate-800">
                        <p class="text-sm font-semibold text-slate-900 dark:text-white truncate">{{ auth()->user()->name ?? 'User' }}</p>
                        <p class="text-xs text-slate-500 dark:text-slate-400 truncate">{{ auth()->user()->email ?? '' }}</p>
                    </div>

                    {{-- Admin, Teacher, and Parent Menu (Hidden from Student) --}}
                    @if($role !== 'student')
                        <a href="{{ url('/' . $role . '/settings') }}" class="w-full text-left block px-4 py-2 text-sm text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-700/50">👤 Profile Information</a>
                        <a href="{{ url('/' . $role . '/settings') }}" class="w-full text-left block px-4 py-2 text-sm text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-700/50">🔑 Change Password</a>
                    @endif

                    {{-- Available to Everyone --}}
                    <a href="{{ url('/' . $role . '/settings/notifications') }}" class="w-full text-left block px-4 py-2 text-sm text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-700/50">⚙️ Preferences</a>

                    <div class="border-t border-slate-100 dark:border-slate-700 my-1"></div>

                    {{-- Logout Action --}}
                    <form method="POST" action="{{ route('logout') }}">
                        @csrf
                        <button type="submit" class="w-full text-left block px-4 py-2 text-sm font-medium text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20">🚪 Sign Out</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</header>