class CustomNavbar extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                :host {
                    display: block;
                    background: white;
                    border-bottom: 1px solid #e5e7eb;
                    padding: 1.5rem;
                    position: sticky;
                    top: 0;
                    z-index: 10;
                }
                
                .container {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    max-width: 100%;
                }
                
                h2 {
                    font-size: 1.5rem;
                    font-weight: 700;
                    color: #111827;
                }
                
                .buttons {
                    display: flex;
                    gap: 0.5rem;
                }
                
                button {
                    display: flex;
                    align-items: center;
                    gap: 0.5rem;
                    padding: 0.5rem 1rem;
                    border-radius: 0.5rem;
                    font-size: 0.875rem;
                    font-weight: 600;
                    transition: all 0.2s;
                }
                
                .copy-btn {
                    background: #2563eb;
                    color: white;
                }
                
                .copy-btn:hover {
                    background: #1d4ed8;
                }
                
                .download-btn {
                    background: #059669;
                    color: white;
                }
                
                .download-btn:hover {
                    background: #047857;
                }
            </style>
            <div class="container">
                <div>
                    <h2 id="view-title">🚀 Bienvenue dans Rosalinda</h2>
                </div>
                <div class="buttons" id="action-buttons"></div>
            </div>
        `;
        
        // Observe attribute changes
        const observer = new MutationObserver(() => this.updateTitle());
        observer.observe(this, { attributes: true });
    }
    
    static get observedAttributes() {
        return ['current-view'];
    }
    
    attributeChangedCallback(name, oldValue, newValue) {
        if (name === 'current-view') {
            this.updateTitle();
        }
    }
    
    updateTitle() {
        const view = this.getAttribute('current-view') || 'home';
        const titleMap = {
            'home': '🚀 Bienvenue dans Rosalinda',
            'chat': '💬 Chat avec Rosalinda',
            'projects': '📁 Mes Projets',
            'code': '💻 Code Généré',
            'library': '📚 Bibliothèque'
        };
        
        const title = this.shadowRoot.getElementById('view-title');
        if (title) title.textContent = titleMap[view];
        
        const buttons = this.shadowRoot.getElementById('action-buttons');
        if (buttons) {
            buttons.innerHTML = '';
            if (view === 'code') {
                buttons.innerHTML = `
                    <button class="copy-btn">
                        <i data-feather="copy"></i> Copier
                    </button>
                    <button class="download-btn">
                        <i data-feather="download"></i> Télécharger
                    </button>
                `;
                feather.replace();
            }
        }
    }
}

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