@props(['currentPage' => 'dashboard', 'breadcrumbs' => []])

<header class="fixed top-0 left-0 right-0 z-50 glass border-b border-white/20">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <!-- Main Header Row -->
        <div class="flex items-center justify-between h-16">
            <!-- Logo and Brand -->
            <div class="flex items-center">
                <a href="{{ route('admin.dashboard') }}" class="flex items-center">
                    <img src="{{ asset('esmt-logo.png') }}" 
                         alt="ESMT Berlin" class="h-8 w-auto">
                    <div class="ml-3">
                        <h1 class="text-lg font-bold text-gray-800">Activity Hub</h1>
                    </div>
                </a>
            </div>

            <!-- Center Navigation -->
            <div class="hidden lg:flex items-center space-x-1">
                <a href="{{ route('admin.dashboard') }}" 
                   class="px-4 py-2 rounded-lg text-sm font-medium transition-all duration-300 {{ $currentPage === 'dashboard' ? 'bg-blue-100 text-blue-800 shadow-sm' : 'text-gray-600 hover:bg-gray-100 hover:text-gray-800' }}">
                    <i class="fas fa-tachometer-alt mr-2"></i>
                    Dashboard
                </a>
                <a href="{{ route('admin.programs') }}" data-no-pjax
                   class="px-4 py-2 rounded-lg text-sm font-medium transition-all duration-300 {{ $currentPage === 'programs' ? 'bg-blue-100 text-blue-800 shadow-sm' : 'text-gray-600 hover:bg-gray-100 hover:text-gray-800' }}">
                    <i class="fas fa-graduation-cap mr-2"></i>
                    Programs
                </a>
                <a href="{{ route('admin.activities') }}" data-no-pjax
                   class="px-4 py-2 rounded-lg text-sm font-medium transition-all duration-300 {{ $currentPage === 'activities' ? 'bg-blue-100 text-blue-800 shadow-sm' : 'text-gray-600 hover:bg-gray-100 hover:text-gray-800' }}">
                    <i class="fas fa-puzzle-piece mr-2"></i>
                    Activities
                </a>
                <a href="{{ route('admin.embed-generator') }}" data-no-pjax
                   class="px-4 py-2 rounded-lg text-sm font-medium transition-all duration-300 {{ $currentPage === 'embed-generator' ? 'bg-blue-100 text-blue-800 shadow-sm' : 'text-gray-600 hover:bg-gray-100 hover:text-gray-800' }}">
                    <i class="fas fa-code mr-2"></i>
                    Embed Tools
                </a>
            </div>

            <!-- Right Side Actions -->
            <div class="flex items-center space-x-3">
                <!-- Global Search -->
                <div class="hidden md:block relative">
                    <div class="relative">
                        <input type="text" 
                               placeholder="Search programs, courses, activities..." 
                               class="w-64 pl-10 pr-4 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-300"
                               oninput="handleGlobalSearch(this.value)">
                        <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                        <div id="search-results" class="hidden absolute top-full left-0 right-0 mt-1 bg-white rounded-lg shadow-lg border border-gray-200 z-50 max-h-64 overflow-y-auto"></div>
                    </div>
                </div>

                <!-- Quick Create Dropdown -->
                <div class="relative">
                    <button onclick="toggleQuickCreate()" class="bg-gradient-to-r from-blue-600 to-blue-800 text-white px-4 py-2 rounded-lg text-sm font-medium hover:from-blue-700 hover:to-blue-900 transition-all duration-300 flex items-center">
                        <i class="fas fa-plus mr-2"></i>
                        <span class="hidden sm:inline">Create</span>
                        <i class="fas fa-chevron-down ml-2 text-xs"></i>
                    </button>
                    
                    <div id="quick-create-menu" class="hidden absolute right-0 top-full mt-2 w-56 bg-white rounded-lg shadow-lg border border-gray-200 z-50">
                        <div class="py-1">
                            <a href="#" onclick="openCreateModal('survey');return false;" class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition-colors">
                                <i class="fas fa-poll mr-3 text-blue-600"></i>
                                New Survey
                            </a>
                            <a href="#" onclick="openCreateModal('poll');return false;" class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition-colors">
                                <i class="fas fa-vote-yea mr-3 text-purple-600"></i>
                                New Poll
                            </a>
                            <a href="#" onclick="openCreateModal('readings');return false;" class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition-colors">
                                <i class="fas fa-book mr-3 text-green-600"></i>
                                New Reading Library
                            </a>
                            <a href="#" onclick="openCreateModal('board');return false;" class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition-colors">
                                <i class="fas fa-th mr-3 text-pink-600"></i>
                                New Board
                            </a>
                            <a href="#" onclick="openCreateModal('forum');return false;" class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition-colors">
                                <i class="fas fa-comments mr-3 text-indigo-600"></i>
                                New Forum
                            </a>
                            <div class="border-t border-gray-200 my-1"></div>
                            <a href="{{ route('admin.programs') }}" class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition-colors">
                                <i class="fas fa-graduation-cap mr-3 text-orange-600"></i>
                                New Program
                            </a>
                        </div>
                    </div>
                </div>

                <!-- Notifications -->
                <div class="relative">
                    <button onclick="toggleNotifications()" class="relative p-2 text-gray-600 hover:text-gray-800 hover:bg-gray-100 rounded-lg transition-all duration-300">
                        <i class="fas fa-bell"></i>
                        <span id="notifBadge" class="hidden absolute -top-1 -right-1 min-w-[16px] h-4 px-1 bg-red-500 rounded-full text-[10px] leading-4 text-white text-center"></span>
                    </button>
                    
                    <div id="notifications-menu" class="hidden absolute right-0 top-full mt-2 w-80 bg-white rounded-lg shadow-lg border border-gray-200 z-50">
                        <div class="p-4 border-b border-gray-200">
                            <h3 class="font-semibold text-gray-800">Notifications</h3>
                        </div>
                        <div id="header-notifs" class="max-h-64 overflow-y-auto">
                            <div class="p-3 text-sm text-gray-500">Loading…</div>
                        </div>
                        <div class="p-3 border-t border-gray-200 flex items-center justify-between">
                            <a href="{{ route('admin.notifications') }}" onclick="document.getElementById('notifications-menu').classList.add('hidden')" class="text-sm text-blue-600 hover:text-blue-800">View all notifications</a>
                            <button onclick="clearHeaderNotifications()" class="text-xs text-gray-500 hover:text-gray-700">Clear</button>
                        </div>
                    </div>
                </div>

                <!-- User Menu -->
                <div class="relative">
                    <button onclick="toggleUserMenu()" class="flex items-center space-x-2 glass px-3 py-2 rounded-lg text-gray-700 hover:bg-white/80 transition-all duration-300">
                        <img id="headerAvatar" class="w-8 h-8 rounded-full bg-gradient-to-r from-blue-600 to-blue-800" alt="">
                        <!-- Name removed for a cleaner look -->
                        <i class="fas fa-chevron-down text-xs"></i>
                    </button>
                    
                    <div id="user-menu" class="hidden absolute right-0 top-full mt-2 w-48 bg-white rounded-lg shadow-lg border border-gray-200 z-50">
                        <div class="py-1">
                            <div class="px-4 py-2 text-xs text-gray-500 border-b border-gray-200">
                                Signed in as {{ auth()->user()->name ?? 'Admin' }}
                            </div>
                            <a href="{{ route('admin.profile') }}" class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition-colors">
                                <i class="fas fa-user mr-3 text-blue-600"></i>
                                Profile
                            </a>
                            <a href="#" class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition-colors">
                                <i class="fas fa-cog mr-3 text-gray-600"></i>
                                Settings
                            </a>
                            <a href="{{ route('admin.analytics') }}" class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition-colors">
                                <i class="fas fa-chart-bar mr-3 text-green-600"></i>
                                Analytics
                            </a>
                            <div class="border-t border-gray-200 my-1"></div>
                            <a href="#" class="flex items-center px-4 py-2 text-sm text-red-600 hover:bg-red-50 transition-colors">
                                <i class="fas fa-sign-out-alt mr-3"></i>
                                Sign Out
                            </a>
                        </div>
                    </div>
                </div>

                <!-- Mobile Menu Button -->
                <div class="lg:hidden">
                    <button onclick="toggleMobileMenu()" class="glass p-2 rounded-lg text-gray-700 hover:bg-white/80 transition-all duration-300">
                        <i class="fas fa-bars"></i>
                    </button>
                </div>
            </div>
        </div>

        <!-- Breadcrumbs Row (render only if there is at least one link) -->
        @php
            $hasLinkedBreadcrumb = false;
            foreach ($breadcrumbs as $b) { if (isset($b['url']) && $b['url']) { $hasLinkedBreadcrumb = true; break; } }
        @endphp
        @if($hasLinkedBreadcrumb)
        <div class="flex items-center py-2 border-t border-gray-200">
            <nav class="flex items-center space-x-2 text-sm">
                <a href="{{ route('admin.dashboard') }}" class="text-gray-500 hover:text-gray-700">
                    <i class="fas fa-home"></i>
                </a>
                @foreach($breadcrumbs as $breadcrumb)
                    <i class="fas fa-chevron-right text-gray-400 text-xs"></i>
                    @if(isset($breadcrumb['url']))
                        <a href="{{ $breadcrumb['url'] }}" class="text-gray-500 hover:text-gray-700">{{ $breadcrumb['title'] }}</a>
                    @else
                        <span class="text-gray-800 font-medium">{{ $breadcrumb['title'] }}</span>
                    @endif
                @endforeach
            </nav>
        </div>
        @endif
    </div>

    <!-- Create Activity Modal -->
    <div id="create-activity-modal" class="hidden fixed inset-0 z-[60] bg-black/50 flex items-start justify-center p-4 pt-24 sm:pt-28">
        <div class="bg-white rounded-2xl shadow-2xl w-full max-w-lg">
            <div class="flex items-center justify-between p-4 border-b">
                <h3 class="text-lg font-semibold text-gray-800">Select course</h3>
                <button onclick="closeCreateModal()" class="text-gray-500 hover:text-gray-700">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="p-4 space-y-3">
                <div class="relative">
                    <input id="course-search" type="text" placeholder="Search courses..." class="w-full pl-10 pr-3 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500" oninput="filterCourseList(this.value)">
                    <i class="fas fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
                </div>
                <div id="course-list" class="max-h-72 overflow-y-auto border rounded-lg divide-y"></div>
            </div>
            <div class="p-4 border-t flex justify-end space-x-2">
                <button onclick="closeCreateModal()" class="px-4 py-2 border rounded-lg text-gray-700 hover:bg-gray-50">Cancel</button>
            </div>
        </div>
    </div>

    <!-- Mobile Navigation -->
    <div id="mobile-menu" class="hidden lg:hidden border-t border-gray-200 bg-white">
        <div class="px-4 py-4 space-y-1">
            <a href="{{ route('admin.dashboard') }}" 
               class="block px-4 py-2 rounded-lg text-sm font-medium {{ $currentPage === 'dashboard' ? 'bg-blue-100 text-blue-800' : 'text-gray-600 hover:bg-gray-100' }}">
                <i class="fas fa-tachometer-alt mr-2"></i>
                Dashboard
            </a>
            <a href="{{ route('admin.programs') }}" 
               class="block px-4 py-2 rounded-lg text-sm font-medium {{ $currentPage === 'programs' ? 'bg-blue-100 text-blue-800' : 'text-gray-600 hover:bg-gray-100' }}">
                <i class="fas fa-graduation-cap mr-2"></i>
                Programs
            </a>
            <a href="{{ route('admin.activities') }}" 
               class="block px-4 py-2 rounded-lg text-sm font-medium {{ $currentPage === 'activities' ? 'bg-blue-100 text-blue-800' : 'text-gray-600 hover:bg-gray-100' }}">
                <i class="fas fa-puzzle-piece mr-2"></i>
                Activities
            </a>
            <a href="{{ route('admin.embed-generator') }}" 
               class="block px-4 py-2 rounded-lg text-sm font-medium {{ $currentPage === 'embed-generator' ? 'bg-blue-100 text-blue-800' : 'text-gray-600 hover:bg-gray-100' }}">
                <i class="fas fa-code mr-2"></i>
                Embed Tools
            </a>
        </div>
    </div>
</header>

<!-- Spacer for fixed header -->
<div class="h-16"></div>
@if(!empty($breadcrumbs))
<div class="h-10"></div>
@endif

<!-- Disable initial page-load animations globally, keep hover interactions -->
<style>
.animate-slide-up, .animate-bounce-in { animation: none !important; }
.floating-element { animation: none !important; }
</style>

<script>
    // Global search functionality
    let searchTimeout;
    let cachedCourses = null;
    async function fetchCoursesOnce() {
        if (cachedCourses) return cachedCourses;
        try {
            const r = await fetch('/admin/api/courses');
            cachedCourses = await r.json();
        } catch (e) { cachedCourses = []; }
        return cachedCourses;
    }

    async function handleGlobalSearch(query) {
        clearTimeout(searchTimeout);
        const resultsEl = document.getElementById('search-results');
        if (query.trim().length < 2) {
            resultsEl.classList.add('hidden');
            return;
        }
        searchTimeout = setTimeout(async () => {
            const courses = await fetchCoursesOnce();
            const q = query.toLowerCase();
            const filtered = courses.filter(c => (c.name || '').toLowerCase().includes(q));
            if (filtered.length) {
                resultsEl.innerHTML = filtered.slice(0, 10).map(c => `
                    <a href="/admin/course/${c.id}" class="block p-3 hover:bg-gray-50 border-b border-gray-100 last:border-b-0" onclick="document.getElementById('search-results').classList.add('hidden')">
                        <div class="font-medium text-gray-800">${c.name}</div>
                        <div class="text-xs text-gray-500">${(c.cohort?.program?.name || 'Program')} → ${(c.cohort?.name || 'Cohort')}</div>
                    </a>
                `).join('');
                resultsEl.classList.remove('hidden');
            } else {
                resultsEl.innerHTML = '<div class="p-3 text-gray-500 text-sm">No matching courses</div>';
                resultsEl.classList.remove('hidden');
            }
        }, 250);
    }

    // Dropdown management
    function toggleQuickCreate() {
        closeAllDropdowns();
        document.getElementById('quick-create-menu').classList.toggle('hidden');
    }

    function toggleNotifications() {
        closeAllDropdowns();
        document.getElementById('notifications-menu').classList.toggle('hidden');
    }

    function toggleUserMenu() {
        closeAllDropdowns();
        document.getElementById('user-menu').classList.toggle('hidden');
    }

    function toggleMobileMenu() {
        closeAllDropdowns();
        document.getElementById('mobile-menu').classList.toggle('hidden');
    }

    function closeAllDropdowns() {
        document.getElementById('quick-create-menu').classList.add('hidden');
        document.getElementById('notifications-menu').classList.add('hidden');
        document.getElementById('user-menu').classList.add('hidden');
        document.getElementById('mobile-menu').classList.add('hidden');
        document.getElementById('search-results').classList.add('hidden');
    }

    let createModalType = null;
    async function openCreateModal(type) {
        closeAllDropdowns();
        createModalType = type;
        try {
            const r = await fetch('/admin/api/courses');
            const courses = await r.json();
            if (!Array.isArray(courses) || courses.length === 0) {
                alert('No courses available. Create a course first.');
                return;
            }
            const list = document.getElementById('course-list');
            list.innerHTML = courses.map(c => `
                <button class="w-full text-left px-3 py-2 hover:bg-gray-50 flex items-center justify-between" data-course-id="${c.id}" onclick="handleCoursePick(${c.id})">
                    <span class="font-medium text-gray-800">${c.name}</span>
                    <span class="text-xs text-gray-500">${(c.cohort?.program?.name || 'Program')} → ${(c.cohort?.name || 'Cohort')}</span>
                </button>
            `).join('');
            document.getElementById('create-activity-modal').classList.remove('hidden');
        } catch(e) {
            alert('Unable to load courses for creation.');
        }
    }

    function closeCreateModal(){
        document.getElementById('create-activity-modal').classList.add('hidden');
        createModalType = null;
        document.getElementById('course-search').value = '';
    }

    function filterCourseList(query){
        query = (query || '').toLowerCase();
        const items = Array.from(document.querySelectorAll('#course-list [data-course-id]'));
        items.forEach(el => {
            const text = el.textContent.toLowerCase();
            el.style.display = text.includes(query) ? '' : 'none';
        });
    }

    async function handleCoursePick(courseId){
        if (!createModalType || !courseId) return;
        closeCreateModal();
        // If an activity instance needs to be created first, call admin API then redirect
        const typeMap = {
            survey: { createInstance: false, path: `/admin/course/${courseId}/create-survey` },
            readings: { createInstance: false, path: `/readings/${courseId}/create-library` },
            poll: { createInstance: true, path: (instanceId) => `/polls/${instanceId}/create` },
            board: { createInstance: true, path: (instanceId) => `/boards/${instanceId}/create` },
            forum: { createInstance: true, path: (instanceId) => `/forum/${instanceId}/create` },
        };
        const cfg = typeMap[createModalType] || typeMap.survey;
        try {
            if (cfg.createInstance) {
                const res = await fetch(`/admin/api/course/${courseId}/create-activity`, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ activity_type_id: createModalType })
                });
                const data = await res.json();
                const instanceId = data.activity_instance_id || data.id || courseId;
                const path = typeof cfg.path === 'function' ? cfg.path(instanceId) : cfg.path;
                window.location.href = path;
            } else {
                window.location.href = cfg.path;
            }
        } catch (e) {
            alert('Could not start creation flow.');
        }
    }

    // Close create-activity modal with ESC
    document.addEventListener('keydown', function(e){
        if (e.key === 'Escape') {
            const m = document.getElementById('create-activity-modal');
            if (m && !m.classList.contains('hidden')) closeCreateModal();
        }
    });

    // Close dropdowns when clicking outside
    document.addEventListener('click', function(e) {
        if (!e.target.closest('[onclick^="toggle"]') && !e.target.closest('[id$="-menu"]') && !e.target.closest('#search-results')) {
            closeAllDropdowns();
        }
    });

    // Keyboard shortcuts
    document.addEventListener('keydown', function(e) {
        if (e.ctrlKey || e.metaKey) {
            switch(e.key) {
                case 'k':
                    e.preventDefault();
                    document.querySelector('input[placeholder*="Search"]').focus();
                    break;
                case 'n':
                    e.preventDefault();
                    toggleQuickCreate();
                    break;
            }
        }
    });

    // Load profile into header (Canvas-backed if configured)
    (async function loadHeaderProfile(){
        try {
            const r = await fetch('/admin/api/profile', { credentials: 'same-origin' });
            const p = await r.json();
            const img = document.getElementById('headerAvatar');
            const nameEl = document.getElementById('headerName');
            if (p.avatar) img.src = p.avatar; else img.removeAttribute('src');
            if (p.name && nameEl) nameEl.textContent = p.name;
        } catch(_) {}
    })();

    // Load recent notifications into header dropdown
    (async function loadHeaderNotifications(){
        try {
            const res = await fetch('/admin/api/notifications', { credentials:'same-origin' });
            const items = await res.json();
            const box = document.getElementById('header-notifs');
            if (!box) return;
            if (!Array.isArray(items) || !items.length) { box.innerHTML = '<div class="p-3 text-sm text-gray-500">No notifications</div>'; return; }
            box.innerHTML = items.slice(0,8).map(it=>`
                <a href="${it.url || '#'}" class="block p-3 hover:bg-gray-50 border-b last:border-b-0">
                    <div class="font-medium text-gray-800 text-sm">${it.title}</div>
                    <div class="text-xs text-gray-500">${(it.course||'')}</div>
                </a>
            `).join('');
        } catch(_) {}
        try {
            const st = await fetch('/admin/api/notifications/state', { credentials:'same-origin' }).then(r=>r.json());
            const unread = (Array.isArray(items) ? items.map(i=>i.id) : []).filter(id => !(st.read||[]).includes(id) && !(st.archived||[]).includes(id)).length;
            const badge = document.getElementById('notifBadge');
            if (badge) { if (unread > 0) { badge.textContent = unread; badge.classList.remove('hidden'); } else { badge.classList.add('hidden'); } }
        } catch(_) {}
    })();

    function clearHeaderNotifications(){
        const box = document.getElementById('header-notifs');
        if (box) box.innerHTML = '<div class="p-3 text-sm text-gray-500">No notifications</div>';
        const badge = document.getElementById('notifBadge');
        if (badge) badge.classList.add('hidden');
    }
</script>