class CustomAdminNavbar extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                nav {
                    transition: background-color 0.3s ease;
                }
                .user-dropdown {
                    display: none;
                }
                .user-dropdown.show {
                    display: block;
                }
            </style>
            <nav class="fixed w-full z-40 bg-white shadow-md">
                <div class="container mx-auto px-6 py-4">
                    <div class="flex justify-between items-center">
                        <div class="flex items-center">
                            <button id="sidebar-toggle" class="mr-4 text-gray-700 focus:outline-none md:hidden">
                                <i data-feather="menu"></i>
                            </button>
                            <a href="/" class="text-xl font-bold text-gray-800">
                                Pixel<span class="text-primary">Pulse</span> Admin
                            </a>
                        </div>
                        
                        <div class="flex items-center">
                            <div class="relative">
                                <button id="user-menu-button" class="flex items-center space-x-2 focus:outline-none">
                                    <img src="http://static.photos/people/200x200/10" class="w-8 h-8 rounded-full object-cover" alt="User">
                                    <span class="hidden md:inline text-gray-700">Admin</span>
                                    <i data-feather="chevron-down" class="text-gray-500"></i>
                                </button>
                                <div id="user-dropdown" class="user-dropdown absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-50">
                                    <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Profile</a>
                                    <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Settings</a>
                                    <a href="/" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Back to Main Site</a>
                                    <a href="#" class="block px-4 py-2 text-red-500 hover:bg-gray-100">Logout</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </nav>
        `;

        // User dropdown toggle
        const userMenuButton = this.shadowRoot.getElementById('user-menu-button');
        const userDropdown = this.shadowRoot.getElementById('user-dropdown');
        
        userMenuButton.addEventListener('click', () => {
            userDropdown.classList.toggle('show');
            feather.replace();
        });

        // Close dropdown when clicking outside
        document.addEventListener('click', (e) => {
            if (!e.composedPath().includes(this.shadowRoot.getElementById('user-menu-button'))) {
                userDropdown.classList.remove('show');
            }
        });
    }
}

customElements.define('custom-admin-navbar', CustomAdminNavbar);