class TopBar extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        
        // Initial Render
        this.render();

        // Bind Events
        this.bindEvents();
    }

    render() {
        const isIndic = window.appState.model === 'indictrans2-en-indic-1B';
        const isM2M = window.appState.model === 'm2m100-1.2b';

        // Generate Options for M2M
        const m2mOptions = window.LANGUAGES_M2M100.map(l => 
            `<option value="${l.code}" ${l.code === window.appState.sourceLang ? 'selected' : ''}>${l.label}</option>`
        ).join('');

        // Generate Options for Indic Target
        const indicOptions = window.LANGUAGES_INDIC.map(l => 
            `<option value="${l.code}" ${l.code === window.appState.targetLang ? 'selected' : ''}>${l.label}</option>`
        ).join('');

        // Generate Options for M2M Target
        const m2mTargetOptions = window.LANGUAGES_M2M100.map(l => 
            `<option value="${l.code}" ${l.code === window.appState.targetLang ? 'selected' : ''}>${l.label}</option>`
        ).join('');

        this.shadowRoot.innerHTML = `
            <style>
                @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
                
                * { box-sizing: border-box; font-family: 'Inter', sans-serif; }
                .container {
                    display: flex;
                    flex-direction: column;
                    gap: 1rem;
                    background: #fffdf9;
                    padding: 1rem;
                    border-radius: 0.75rem;
                    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
                }
.header-top {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    flex-wrap: wrap;
                    gap: 1rem;
                }
                .app-name {
                    font-size: 1.25rem;
                    font-weight: 700;
                    color: #7c5836;
                    display: flex;
                    align-items: center;
                    gap: 0.5rem;
                }

                .model-selector {
                    display: inline-flex;
                    background: #faedd2;
                    padding: 0.25rem;
                    border-radius: 0.5rem;
                    position: relative;
                }
.radio-input {
                    position: absolute;
                    opacity: 0;
                    cursor: pointer;
                    height: 100%;
                    width: 100%;
                    z-index: 10;
                }
                .radio-label {
                    display: inline-flex;
                    align-items: center;
                    padding: 0.5rem 1rem;
                    border-radius: 0.375rem;
                    font-size: 0.875rem;
                    font-weight: 500;
                    color: #7c5836;
                    cursor: pointer;
                    transition: all 0.2s ease;
                }

                .radio-input:checked + .radio-label {
                    background: #fffdf9;
                    color: #5e4229;
                    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
                }
                .lang-controls {
                    display: flex;
                    align-items: center;
                    gap: 1rem;
                    flex-wrap: wrap;
                    padding-top: 0.5rem;
                    border-top: 1px solid #f6e3bb;
                }
.control-group {
                    display: flex;
                    flex-direction: column;
                    gap: 0.25rem;
                }
                label {
                    font-size: 0.75rem;
                    font-weight: 600;
                    text-transform: uppercase;
                    letter-spacing: 0.05em;
                    color: #7c5836;
                }
                select {
                    appearance: none;
                    background-color: white;
                    border: 1px solid #f6e3bb;
                    border-radius: 0.375rem;
                    padding: 0.5rem 2rem 0.5rem 0.75rem;
                    font-size: 0.875rem;
                    color: #5e4229;
                    cursor: pointer;
                    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%237c5836' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
                    background-position: right 0.5rem center;
                    background-repeat: no-repeat;
                    background-size: 1.5em 1.5em;
                    min-width: 180px;
                }

                select:focus {
                    outline: 2px solid #c7a24d;
                    outline-offset: 1px;
                }
.hidden { display: none !important; }

                @media (min-width: 768px) {
                    .container { flex-direction: row; align-items: center; justify-content: space-between; }
                    .header-top { gap: 2rem; }
                }
            </style>

            <div class="container">
                <div class="header-top">
                    <div class="app-name">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 8l6 6"></path><path d="M4 14l6-6 2-3"></path><path d="M2 5h12"></path><path d="M7 2h1"></path><path d="M22 22l-5-10-5 10"></path><path d="M14 18h6"></path></svg>
                        Bhaasha - AI Translator
                    </div>
<div class="model-selector">
                        <label>
                            <input type="radio" name="model" value="indictrans2-en-indic-1B" class="radio-input" ${window.appState.model === 'indictrans2-en-indic-1B' ? 'checked' : ''}>
                            <span class="radio-label">IndicTrans2</span>
                        </label>
                        <label>
                            <input type="radio" name="model" value="m2m100-1.2b" class="radio-input" ${window.appState.model === 'm2m100-1.2b' ? 'checked' : ''}>
                            <span class="radio-label">M2M100</span>
                        </label>
                    </div>
                </div>

                <div class="lang-controls">
                    <!-- Source Language -->
                    <div class="control-group" id="source-group">
                        <label for="source-lang">Source</label>
                        <div id="source-indic" class="${!isIndic ? 'hidden' : ''} bg-[#fdf6e9] border border-[#f6e3bb] rounded px-3 py-2 text-sm text-[#7c5836] flex items-center h-[38px]">
                            English (Hardcoded)
                        </div>
<select id="source-m2m" class="${!isM2M ? 'hidden' : ''}">
                            ${m2mOptions}
                        </select>
                    </div>
                    <!-- Swap Button (Only visible for M2M) -->
                    <button id="swap-btn" class="${!isM2M ? 'hidden' : ''} mt-4 p-2 text-[#7c5836] hover:text-[#5e4229] hover:bg-[#faedd2] rounded-full transition-colors" aria-label="Swap Languages">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 3 21 3 21 8"></polyline><line x1="4" y1="20" x2="21" y2="3"></line><polyline points="21 16 21 21 16 21"></polyline><line x1="15" y1="15" x2="21" y2="21"></line><line x1="4" y1="4" x2="9" y2="9"></line></svg>
                    </button>

                    <!-- Target Language -->
                    <div class="control-group">
                        <label for="target-lang">Target</label>
                        <select id="target-lang">
                            ${isIndic ? indicOptions : m2mTargetOptions}
                        </select>
                    </div>
                </div>
            </div>
        `;

        this.replaceIcons();
    }

    bindEvents() {
        const radios = this.shadowRoot.querySelectorAll('input[name="model"]');
        const sourceSelect = this.shadowRoot.getElementById('source-m2m');
        const targetSelect = this.shadowRoot.getElementById('target-lang');
        const swapBtn = this.shadowRoot.getElementById('swap-btn');

        radios.forEach(radio => {
            radio.addEventListener('change', (e) => {
                window.appState.model = e.target.value;
                
                // Reset langs based on model
                if (window.appState.model === 'indictrans2-en-indic-1B') {
                    window.appState.sourceLang = 'en';
                    window.appState.targetLang = 'hin_Deva';
                } else {
                    window.appState.sourceLang = 'en';
                    window.appState.targetLang = window.appState.targetLang || 'es'; // Keep or default
                }

                this.render(); // Re-render to show/hide dropdowns
                this.bindEvents(); // Re-bind events
                window.dispatchEvent(new CustomEvent('stateChanged', { detail: window.appState }));
            });
        });

        if(sourceSelect) {
            sourceSelect.addEventListener('change', (e) => {
                window.appState.sourceLang = e.target.value;
                window.dispatchEvent(new CustomEvent('stateChanged', { detail: window.appState }));
            });
        }

        if(targetSelect) {
            targetSelect.addEventListener('change', (e) => {
                window.appState.targetLang = e.target.value;
                window.dispatchEvent(new CustomEvent('stateChanged', { detail: window.appState }));
            });
        }

        if(swapBtn) {
            swapBtn.addEventListener('click', () => {
                // Swap values
                const temp = window.appState.sourceLang;
                window.appState.sourceLang = window.appState.targetLang;
                window.appState.targetLang = temp;
                
                this.render();
                this.bindEvents();
                window.dispatchEvent(new CustomEvent('stateChanged', { detail: window.appState }));
                window.dispatchEvent(new CustomEvent('swapLanguages'));
            });
        }
    }

    replaceIcons() {
        const icons = this.shadowRoot.querySelectorAll('[data-feather]');
        icons.forEach(icon => {
            const name = icon.getAttribute('data-feather');
            // Simple SVG replacement for shadow DOM context
            // Using feather's internal replace logic if available or manually rendering
            // Feather.replace() doesn't scope to shadow DOM automatically.
            // We'll rely on inline SVGs in innerHTML for this component to be safe and simple,
            // or assume we can run feather.replace() on the root if we include the script.
            // Since innerHTML has raw SVGs now for the logo and swap button, we are good.
        });
    }
}

customElements.define('top-bar', TopBar);