class CustomAdminSidebar extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .sidebar {
                    transition: transform 0.3s ease;
                }
                .sidebar-link {
                    transition: background-color 0.3s ease, color 0.3s ease;
                }
                .sidebar-link:hover, .sidebar-link.active {
                    background-color: #f3f4ff;
                    color: #6366f1;
                }
                @media (max-width: 768px) {
                    .sidebar {
                        transform: translateX(-100%);
                        position: fixed;
                        z-index: 30;
                        height: calc(100vh - 4rem);
                        top: 4rem;
                    }
                    .sidebar.open {
                        transform: translateX(0);
                    }
                }
            </style>
            <aside class="sidebar w-64 bg-white shadow-md md:shadow-none md:relative md:transform-none">
                <div class="p-4">
                    <nav class="mt-8">
                        <div class="space-y-1">
                            <a href="#" class="sidebar-link flex items-center px-4 py-3 text-gray-700 rounded-lg" data-section="dashboard">
                                <i data-feather="home" class="mr-3"></i>
                                <span>Dashboard</span>
                            </a>
                            <a href="#" class="sidebar-link flex items-center px-4 py-3 text-gray-700 rounded-lg" data-section="projects">
                                <i data-feather="grid" class="mr-3"></i>
                                <span>Projects</span>
                            </a>
                            <a href="#" class="sidebar-link flex items-center px-4 py-3 text-gray-700 rounded-lg" data-section="clients">
                                <i data-feather="users" class="mr-3"></i>
                                <span>Clients</span>
                            </a>
                            <a href="#" class="sidebar-link flex items-center px-4 py-3 text-gray-700 rounded-lg" data-section="contacts">
                                <i data-feather="mail" class="mr-3"></i>
                                <span>Contact Responses</span>
                            </a>
                            <a href="#" class="sidebar-link flex items-center px-4 py-3 text-gray-700 rounded-lg" data-section="subscribers">
                                <i data-feather="bell" class="mr-3"></i>
                                <span>Subscribers</span>
                            </a>
                        </div>
                    </nav>
                </div>
            </aside>
        `;

        // Mobile sidebar toggle
        const sidebarToggle = document.querySelector('custom-admin-navbar').shadowRoot.getElementById('sidebar-toggle');
        const sidebar = this.shadowRoot.querySelector('.sidebar');
        
        sidebarToggle?.addEventListener('click', () => {
            sidebar.classList.toggle('open');
        });

        // Navigation links
        const navLinks = this.shadowRoot.querySelectorAll('.sidebar-link');
        navLinks.forEach(link => {
            link.addEventListener('click', (e) => {
                e.preventDefault();
                const section = link.getAttribute('data-section');
                
                // Remove active class from all links
                navLinks.forEach(l => l.classList.remove('active'));
                
                // Add active class to clicked link
                link.classList.add('active');
                
                // Load the appropriate content
                switch(section) {
                    case 'projects':
                        loadProjectsManagement();
                        break;
                    case 'clients':
                        loadClientsManagement();
                        break;
                    case 'contacts':
                        loadContactResponses();
                        break;
                    case 'subscribers':
                        loadSubscribers();
                        break;
                    default:
                        adminContent.innerHTML = `
                            <div class="text-center py-20">
                                <h1 class="text-3xl font-bold text-gray-800 mb-4">Welcome to Admin Panel</h1>
                                <p class="text-gray-600">Select a section from the sidebar to manage content.</p>
                            </div>
                        `;
                        break;
                }
                
                // Close mobile sidebar if open
                if (sidebar.classList.contains('open')) {
                    sidebar.classList.remove('open');
                }
            });
        });
    }
}

customElements.define('custom-admin-sidebar', CustomAdminSidebar);