class CustomNavbar extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .navbar {
                    backdrop-filter: blur(10px);
                    -webkit-backdrop-filter: blur(10px);
                }
                @media (max-width: 768px) {
                    .nav-links {
                        display: none;
                    }
                    .mobile-menu {
                        display: block;
                    }
                }
            </style>
            <nav class="navbar bg-white/80 dark:bg-gray-800/80 border-b border-gray-200 dark:border-gray-700 fixed w-full z-10">
                <div class="container mx-auto px-4">
                    <div class="flex items-center justify-between h-16">
                        <!-- Logo -->
                        <div class="flex-shrink-0 flex items-center">
                            <a href="/" class="flex items-center">
                                <i data-feather="box" class="text-primary-500 w-6 h-6"></i>
                                <span class="ml-2 text-xl font-bold text-gray-800 dark:text-white">NodeNest</span>
                            </a>
                        </div>
                        
                        <!-- Desktop Navigation -->
                        <div class="hidden md:block">
                            <div class="nav-links flex items-center space-x-8">
                                <a href="/" class="text-gray-800 dark:text-white hover:text-primary-500 dark:hover:text-primary-400 font-medium">Dashboard</a>
                                <a href="/projects" class="text-gray-800 dark:text-white hover:text-primary-500 dark:hover:text-primary-400 font-medium">Projects</a>
                                <a href="/domains" class="text-gray-800 dark:text-white hover:text-primary-500 dark:hover:text-primary-400 font-medium">Domains</a>
                                <a href="/settings" class="text-gray-800 dark:text-white hover:text-primary-500 dark:hover:text-primary-400 font-medium">Settings</a>
                            </div>
                        </div>
                        
                        <!-- Right Side (Theme Toggle, User) -->
                        <div class="flex items-center space-x-4">
                            <button id="theme-toggle" class="p-2 rounded-full text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
                                <i data-feather="moon" class="w-5 h-5"></i>
                            </button>
                            
                            <div class="relative">
                                <button class="flex items-center space-x-2 focus:outline-none">
                                    <div class="w-8 h-8 rounded-full bg-primary-500 text-white flex items-center justify-center">
                                        <i data-feather="user" class="w-4 h-4"></i>
                                    </div>
                                    <span class="hidden md:inline text-gray-700 dark:text-gray-300">Admin</span>
                                    <i data-feather="chevron-down" class="hidden md:inline w-4 h-4 text-gray-500"></i>
                                </button>
<!-- Dropdown Menu -->
                                <div class="absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-md shadow-lg py-1 z-20 hidden">
                                    <a href="#" class="block px-4 py-2 text-gray-800 dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700">Profile</a>
                                    <a href="#" class="block px-4 py-2 text-gray-800 dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700">Settings</a>
                                    <a href="#" class="block px-4 py-2 text-gray-800 dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700">Logout</a>
                                </div>
                            </div>
                            <!-- Mobile menu button -->
                            <button class="md:hidden p-2 rounded-full text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 mobile-menu">
                                <i data-feather="menu" class="w-5 h-5"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </nav>
        `;
        // Add event listener for dropdown
        const profileButton = this.shadowRoot.querySelector('.relative button');
        const dropdownMenu = this.shadowRoot.querySelector('.relative .hidden');
        
        if (profileButton && dropdownMenu) {
            profileButton.addEventListener('click', () => {
                dropdownMenu.classList.toggle('hidden');
            });
            // Close dropdown when clicking outside
            document.addEventListener('click', (e) => {
                if (!profileButton.contains(e.target) && !dropdownMenu.contains(e.target)) {
                    dropdownMenu.classList.add('hidden');
                }
            });
        }
        // Mobile menu toggle
        const mobileMenuButton = this.shadowRoot.querySelector('.mobile-menu');
        const navLinks = this.shadowRoot.querySelector('.nav-links');
        
        if (mobileMenuButton && navLinks) {
            mobileMenuButton.addEventListener('click', () => {
                navLinks.classList.toggle('hidden');
                navLinks.classList.toggle('flex');
                navLinks.classList.toggle('flex-col');
                navLinks.classList.toggle('absolute');
                navLinks.classList.toggle('top-16');
                navLinks.classList.toggle('left-0');
                navLinks.classList.toggle('right-0');
                navLinks.classList.toggle('bg-white');
                navLinks.classList.toggle('dark:bg-gray-800');
                navLinks.classList.toggle('p-4');
                navLinks.classList.toggle('space-y-4');
                navLinks.classList.toggle('space-x-8');
                navLinks.classList.toggle('border-b');
                navLinks.classList.toggle('border-gray-200');
                navLinks.classList.toggle('dark:border-gray-700');
            });
        }
    }
}

customElements.define('custom-navbar', CustomNavbar);