<!-- app/templates/admin/partials/header.html -->
<!-- Top header bar with search, theme toggle, notifications, profile -->
<header class="z-10 py-4 bg-white shadow-md dark:bg-gray-800">
    <div class="container flex items-center justify-between h-full px-6 mx-auto text-purple-600 dark:text-purple-300">
        <!-- Mobile hamburger -->
        <button class="p-1 mr-5 -ml-1 rounded-md md:hidden focus:outline-none focus:shadow-outline-purple"
                @click="toggleSideMenu" aria-label="Menu">
            <span x-html="$icon('menu', 'w-6 h-6')"></span>
        </button>

        <!-- Search input -->
        <div class="flex justify-center flex-1 lg:mr-32">
            <div class="relative w-full max-w-xl mr-6 focus-within:text-purple-500">
                <div class="absolute inset-y-0 flex items-center pl-2">
                    <span x-html="$icon('search', 'w-4 h-4')"></span>
                </div>
                <input class="w-full pl-8 pr-2 text-sm text-gray-700 placeholder-gray-600 bg-gray-100 border-0 rounded-md dark:placeholder-gray-500 dark:focus:shadow-outline-gray dark:focus:placeholder-gray-600 dark:bg-gray-700 dark:text-gray-200 focus:placeholder-gray-500 focus:bg-white focus:border-purple-300 focus:outline-none focus:shadow-outline-purple form-input"
                       type="text" placeholder="Search for projects" aria-label="Search"/>
            </div>
        </div>

        <ul class="flex items-center flex-shrink-0 space-x-6">
            <!-- Theme toggler -->
            <li class="flex">
                <button class="rounded-md focus:outline-none focus:shadow-outline-purple"
                        @click="toggleTheme" aria-label="Toggle color mode">
                    <span x-show="!dark" x-html="$icon('moon', 'w-5 h-5')"></span>
                    <span x-show="dark" x-html="$icon('sun', 'w-5 h-5')"></span>
                </button>
            </li>

            <!-- Notifications menu -->
            <li class="relative" x-data="{ notifOpen: false }">
                <button class="relative align-middle rounded-md focus:outline-none focus:shadow-outline-purple"
                        @click="notifOpen = !notifOpen" 
                        @keydown.escape="notifOpen = false"
                        aria-label="Notifications" aria-haspopup="true">
                    <span x-html="$icon('bell', 'w-5 h-5')"></span>
                    <span aria-hidden="true" class="absolute top-0 right-0 inline-block w-3 h-3 transform translate-x-1 -translate-y-1 bg-red-600 border-2 border-white rounded-full dark:border-gray-800"></span>
                </button>

                <ul x-show="notifOpen"
                    x-cloak
                    x-transition:leave="transition ease-in duration-150"
                    x-transition:leave-start="opacity-100"
                    x-transition:leave-end="opacity-0"
                    @click.away="notifOpen = false"
                    @keydown.escape="notifOpen = false"
                    class="absolute right-0 w-56 p-2 mt-2 space-y-2 text-gray-600 bg-white border border-gray-100 rounded-md shadow-md dark:text-gray-300 dark:border-gray-700 dark:bg-gray-700">
                    <li class="flex">
                        <a class="inline-flex items-center justify-between w-full px-2 py-1 text-sm font-semibold transition-colors duration-150 rounded-md hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-gray-800 dark:hover:text-gray-200" href="#">
                            <span>Messages</span>
                            <span class="inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-red-600 bg-red-100 rounded-full dark:text-red-100 dark:bg-red-600">13</span>
                        </a>
                    </li>
                    <li class="flex">
                        <a class="inline-flex items-center justify-between w-full px-2 py-1 text-sm font-semibold transition-colors duration-150 rounded-md hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-gray-800 dark:hover:text-gray-200" href="#">
                            <span>Sales</span>
                            <span class="inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-red-600 bg-red-100 rounded-full dark:text-red-100 dark:bg-red-600">2</span>
                        </a>
                    </li>
                    <li class="flex">
                        <a class="inline-flex items-center justify-between w-full px-2 py-1 text-sm font-semibold transition-colors duration-150 rounded-md hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-gray-800 dark:hover:text-gray-200" href="#">
                            <span>Alerts</span>
                        </a>
                    </li>
                </ul>
            </li>

            <!-- Profile menu - âœ… FIXED with self-contained Alpine data -->
            <li class="relative" x-data="{ profileOpen: false }">
                <button class="align-middle rounded-full focus:shadow-outline-purple focus:outline-none"
                        @click="profileOpen = !profileOpen" 
                        @keydown.escape="profileOpen = false"
                        aria-label="Account" 
                        aria-haspopup="true">
                    <img class="object-cover w-8 h-8 rounded-full"
                         src="https://images.unsplash.com/photo-1502378735452-bc7d86632805?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=aa3a807e1bbdfd4364d1f449eaa96d82"
                         alt="" aria-hidden="true"/>
                </button>

                <!-- Use x-show instead of x-if for reliability -->
                <ul x-show="profileOpen"
                    x-cloak
                    x-transition:leave="transition ease-in duration-150"
                    x-transition:leave-start="opacity-100"
                    x-transition:leave-end="opacity-0"
                    @click.away="profileOpen = false"
                    @keydown.escape="profileOpen = false"
                    class="absolute right-0 w-56 p-2 mt-2 space-y-2 text-gray-600 bg-white border border-gray-100 rounded-md shadow-md dark:border-gray-700 dark:text-gray-300 dark:bg-gray-700 z-50"
                    style="display: none;"
                    aria-label="submenu">
                    <li class="flex">
                        <a class="inline-flex items-center w-full px-2 py-1 text-sm font-semibold transition-colors duration-150 rounded-md hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-gray-800 dark:hover:text-gray-200" href="#">
                            <span x-html="$icon('user', 'w-4 h-4 mr-3')"></span>
                            <span>Profile</span>
                        </a>
                    </li>
                    <li class="flex">
                        <a class="inline-flex items-center w-full px-2 py-1 text-sm font-semibold transition-colors duration-150 rounded-md hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-gray-800 dark:hover:text-gray-200" href="#">
                            <span x-html="$icon('cog', 'w-4 h-4 mr-3')"></span>
                            <span>Settings</span>
                        </a>
                    </li>
                    <li class="flex">
                        <button 
                            @click="handleLogout()"
                            class="inline-flex items-center w-full px-2 py-1 text-sm font-semibold transition-colors duration-150 rounded-md hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-gray-800 dark:hover:text-gray-200 text-left">
                            <span x-html="$icon('logout', 'w-4 h-4 mr-3')"></span>
                            <span>Log out</span>
                        </button>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</header>

<!-- Logout handler script -->
<script>
// Add handleLogout function to Alpine data
document.addEventListener('alpine:init', () => {
    // Extend the data() function to include logout
    const originalData = window.data;
    window.data = function() {
        const baseData = originalData();
        return {
            ...baseData,
            handleLogout() {
                console.log('ðŸšª Logging out...');
                
                // Call logout API
                fetch('/api/v1/admin/auth/logout', {
                    method: 'POST',
                    headers: {
                        'Authorization': `Bearer ${localStorage.getItem('admin_token')}`
                    }
                })
                .then(() => {
                    console.log('âœ… Logout API called successfully');
                })
                .catch((error) => {
                    console.error('âš ï¸ Logout API error (continuing anyway):', error);
                })
                .finally(() => {
                    // Clear all tokens
                    console.log('ðŸ§¹ Clearing tokens...');
                    localStorage.clear();
                    
                    console.log('🔄 Redirecting to login...');
                    window.location.href = '/admin/login';
                });
            }
        };
    };
});
</script>
