class CustomTopbar extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .topbar {
                    background: white;
                    border-bottom: 1px solid #e5e7eb;
                    padding: 1rem 1.5rem;
                }
                .tab {
                    padding-bottom: 0.5rem;
                    transition: all 0.2s;
                }
                .tab.active {
                    border-bottom: 2px solid #3b82f6;
                    color: #3b82f6;
                }
                .tab:not(.active) {
                    color: #4b5563;
                }
                .tab:not(.active):hover {
                    color: #1f2937;
                }
            </style>
            <div class="topbar flex items-center justify-between">
                <div class="flex gap-6">
                    <button class="tab active">
                        <span>💬 Chat</span>
                    </button>
                    <button class="tab">
                        <span>📝 Code</span>
                    </button>
                    <button class="tab">
                        <span>📊 JSON</span>
                    </button>
                </div>
                <div class="flex gap-3">
                    <button class="px-4 py-2 bg-green-500 text-white rounded-lg text-sm font-medium hover:bg-green-600">
                        ● Prêt
                    </button>
                    <button class="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700">
                        ⬆ Recharger
                    </button>
                </div>
            </div>
        `;
    }

    connectedCallback() {
        // Tab switching functionality
        this.shadowRoot.querySelectorAll('.tab').forEach(tab => {
            tab.addEventListener('click', () => {
                this.shadowRoot.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
                tab.classList.add('active');
            });
        });
    }
}

customElements.define('custom-topbar', CustomTopbar);