class HeaderComponent extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                :host {
                    display: block;
                    background-color: white;
                    border-bottom: 1px solid #e5e7eb;
                    padding: 1.5rem;
                    position: sticky;
                    top: 0;
                    z-index: 20;
                }

                .header-container {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                }

                .mobile-menu-button {
                    display: none;
                    padding: 0.5rem;
                    border-radius: 0.375rem;
                    background-color: #f3f4f6;
                }

                .mobile-menu-button:hover {
                    background-color: #e5e7eb;
                }

                .header-title {
                    font-size: 1.25rem;
                    font-weight: 600;
                    color: #111827;
                }

                .header-actions {
                    display: flex;
                    align-items: center;
                    gap: 1rem;
                }

                .action-button {
                    padding: 0.5rem;
                    border-radius: 0.375rem;
                    color: #4b5563;
                    transition: all 0.2s;
                }

                .action-button:hover {
                    background-color: #f3f4f6;
                    color: #111827;
                }

                .user-avatar {
                    width: 2.5rem;
                    height: 2.5rem;
                    border-radius: 50%;
                    background-color: #e5e7eb;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: #4b5563;
                    font-weight: 600;
                    cursor: pointer;
                }

                @media (max-width: 768px) {
                    .mobile-menu-button {
                        display: block;
                    }

                    .header-title {
                        font-size: 1rem;
                    }
                }
            </style>

            <div class="header-container">
                <button class="mobile-menu-button" id="mobile-menu-button">
                    <i data-feather="menu"></i>
                </button>
                <h1 class="header-title" id="header-title">Accueil</h1>
                <div class="header-actions">
                    <button class="action-button">
                        <i data-feather="share-2"></i>
                    </button>
                    <button class="action-button">
                        <i data-feather="bell"></i>
                    </button>
                    <div class="user-avatar">JD</div>
                </div>
            </div>
        `;

        // Initialize feather icons
        const featherScript = document.createElement('script');
        featherScript.src = 'https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js';
        this.shadowRoot.appendChild(featherScript);
        
        featherScript.onload = () => {
            feather.replace();
        };

        // Mobile menu toggle
        this.shadowRoot.getElementById('mobile-menu-button').addEventListener('click', () => {
            document.querySelector('sidebar-component').classList.add('open');
            document.body.classList.add('overflow-hidden');
        });

        // Update title based on view
        document.addEventListener('navigate', (e) => {
            const titles = {
                'home': 'Accueil',
                'chat': 'Chat Rosalinda',
                'projects': 'Mes Projets',
                'code': 'Code Généré',
                'library': 'Bibliothèque'
            };
            this.shadowRoot.getElementById('header-title').textContent = titles[e.detail] || 'Accueil';
        });
    }
}

customElements.define('header-component', HeaderComponent);