class TranslatorWorkspace extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.render();
        this.bindEvents();
        
        // Listen for state changes
        window.addEventListener('stateChanged', (e) => this.updateUI(e.detail));
        window.addEventListener('swapLanguages', () => this.swapTextContent());
    }

    render() {
        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; }
                
                .workspace {
                    display: flex;
                    flex-direction: column;
                    gap: 1rem;
                }

                @media (min-width: 1024px) {
                    .workspace { flex-direction: row; }
                }
                .pane {
                    flex: 1;
                    background: #fffdf9;
                    border-radius: 0.75rem;
                    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
                    border: 1px solid #f6e3bb;
                    display: flex;
                    flex-direction: column;
                    overflow: hidden;
                    transition: box-shadow 0.2s ease;
                }

                .pane:focus-within {
                    border-color: #c7a24d;
                    box-shadow: 0 0 0 2px rgba(199, 162, 77, 0.2);
                }

                .pane-header {
                    padding: 0.75rem 1rem;
                    border-bottom: 1px solid #f6e3bb;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    background: #fdf6e9;
                }

                .pane-title {
                    font-weight: 600;
                    color: #7c5836;
                    font-size: 0.875rem;
                    text-transform: uppercase;
                }
.actions {
                    display: flex;
                    gap: 0.5rem;
                }
                .icon-btn {
                    background: none;
                    border: none;
                    color: #7c5836;
                    cursor: pointer;
                    padding: 0.25rem;
                    border-radius: 0.25rem;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    transition: color 0.2s, background 0.2s;
                }

                .icon-btn:hover {
                    color: #5e4229;
                    background: #f6e3bb;
                }
.textarea-wrapper {
                    flex-grow: 1;
                    position: relative;
                }
                textarea {
                    width: 100%;
                    height: 100%;
                    border: none;
                    resize: none;
                    padding: 1rem;
                    font-size: 1rem;
                    line-height: 1.6;
                    color: #5e4229;
                    background: transparent;
                    outline: none;
                    min-height: 250px;
                }

                .char-count {
                    position: absolute;
                    bottom: 0.75rem;
                    right: 0.75rem;
                    font-size: 0.75rem;
                    color: #7c5836;
                    pointer-events: none;
                    background: rgba(255,253,249,0.8);
                    padding: 0.125rem 0.25rem;
                    border-radius: 0.25rem;
                }
                .empty-state {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    height: 100%;
                    color: #7c5836;
                    text-align: center;
                    padding: 2rem;
                }

                .output-area {
                    background-color: #fdf6e9;
                    color: #5e4229;
                }
/* Action Bar */
                .action-bar {
                    position: sticky;
                    bottom: 0;
                    background: #fffdf9;
                    padding: 1rem;
                    border-top: 1px solid #f6e3bb;
                    display: flex;
                    justify-content: flex-end;
                    align-items: center;
                    gap: 1rem;
                    border-radius: 0 0 0.75rem 0.75rem;
                    z-index: 10;
                }
.btn {
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                    padding: 0.5rem 1rem;
                    font-size: 0.875rem;
                    font-weight: 500;
                    border-radius: 0.375rem;
                    transition: all 0.2s;
                    cursor: pointer;
                    border: 1px solid transparent;
                }
                .btn-secondary {
                    background: white;
                    border-color: #f6e3bb;
                    color: #7c5836;
                }
                .btn-secondary:hover {
                    background: #fdf6e9;
                }
                .btn-secondary:disabled {
                    opacity: 0.5;
                    cursor: not-allowed;
                }

                .btn-primary {
                    background: #c7a24d;
                    color: white;
                    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
                }
                .btn-primary:hover:not(:disabled) {
                    background: #b89144;
                }
                .btn-primary:disabled {
                    background: #f6e3bb;
                    color: #7c5836;
                    cursor: not-allowed;
                }
.loading-spinner {
                    animation: spin 1s linear infinite;
                }
                
                @keyframes spin {
                    100% { transform: rotate(360deg); }
                }
                .skeleton {
                    height: 1rem;
                    background: #f6e3bb;
                    border-radius: 0.25rem;
                    margin-bottom: 0.5rem;
                    width: 100%;
                }
.skeleton.short { width: 60%; }
                .skeleton.long { width: 90%; }

            </style>
            <div class="workspace">
                <!-- Left Pane: Input -->
                <div class="pane">
                    <div class="pane-header">
                        <span class="pane-title">Input</span>
                        <div class="actions">
                            <button class="icon-btn" id="btn-paste" title="Paste">
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>
                            </button>
                            <button class="icon-btn" id="btn-clear" title="Clear">
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
                            </button>
                        </div>
                    </div>
                    <div class="textarea-wrapper">
                        <textarea id="input-text" placeholder="Type or paste text here..."></textarea>
                        <div class="char-count" id="char-count">0 chars</div>
                    </div>
                    
                    <!-- Action Bar inside Input Pane for layout coherence -->
                    <div class="action-bar">
                        <button class="btn btn-secondary" id="swap-workspace">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right:0.5rem"><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>
                            Swap
                        </button>
                        <button class="btn btn-primary" id="btn-translate" disabled>
                            <span class="btn-text">Translate</span>
                        </button>
                    </div>
                </div>

                <!-- Right Pane: Output -->
                <div class="pane">
                    <div class="pane-header">
                        <span class="pane-title">Translation</span>
                        <div class="actions">
                            <button class="icon-btn" id="btn-copy" title="Copy">
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
                            </button>
                        </div>
                    </div>
                    <div class="textarea-wrapper output-area" id="output-wrapper">
                        <!-- Content handled by JS -->
                        <div class="empty-state">
                            <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#cbd5e1" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="margin-bottom:1rem"><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>
                            <p>Translation will appear here</p>
                        </div>
                    </div>
                </div>
            </div>
        `;
    }

    bindEvents() {
        const input = this.shadowRoot.getElementById('input-text');
        const charCount = this.shadowRoot.getElementById('char-count');
        const btnTranslate = this.shadowRoot.getElementById('btn-translate');
        const btnClear = this.shadowRoot.getElementById('btn-clear');
        const btnPaste = this.shadowRoot.getElementById('btn-paste');
        const btnCopy = this.shadowRoot.getElementById('btn-copy');
        const btnSwap = this.shadowRoot.getElementById('swap-workspace');

        input.addEventListener('input', (e) => {
            window.appState.inputText = e.target.value;
            charCount.textContent = `${e.target.value.length} chars`;
            this.updateTranslateBtn();
        });

        btnClear.addEventListener('click', () => {
            input.value = '';
            window.appState.inputText = '';
            window.appState.outputText = '';
            charCount.textContent = '0 chars';
            this.updateTranslateBtn();
            this.renderOutputEmpty();
        });

        btnPaste.addEventListener('click', async () => {
            try {
                const text = await navigator.clipboard.readText();
                input.value = text;
                window.appState.inputText = text;
                charCount.textContent = `${text.length} chars`;
                this.updateTranslateBtn();
                window.showToast('Pasted from clipboard', 'success');
            } catch (err) {
                window.showToast('Failed to read clipboard', 'error');
            }
        });

        btnCopy.addEventListener('click', () => {
            if (!window.appState.outputText) return;
            navigator.clipboard.writeText(window.appState.outputText);
            window.showToast('Translation copied', 'success');
        });

        btnTranslate.addEventListener('click', async () => {
            if (window.appState.isTranslating) return;
            
            // Set Loading
            window.appState.isTranslating = true;
            btnTranslate.disabled = true;
            const originalText = btnTranslate.innerHTML;
            btnTranslate.innerHTML = `<svg class="loading-spinner" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-6.219-8.56"></path></svg> Translating...`;

            this.renderOutputLoading();

            // Call Mock API
            try {
                const result = await window.mockApi.translateText({
                    model: window.appState.model,
                    sourceLang: window.appState.sourceLang,
                    targetLang: window.appState.targetLang,
                    text: window.appState.inputText
                });

                window.appState.outputText = result.translation;
                this.renderOutputText(result.translation);
            } catch (error) {
                window.showToast('Translation failed', 'error');
                this.renderOutputEmpty();
            } finally {
                window.appState.isTranslating = false;
                btnTranslate.disabled = false;
                btnTranslate.innerHTML = originalText;
                this.updateTranslateBtn();
            }
        });

        btnSwap.addEventListener('click', () => {
            // Dispatch global swap event (handled by TopBar mostly, but we need to move text if M2M)
             window.dispatchEvent(new CustomEvent('swapLanguages'));
        });
    }

    updateTranslateBtn() {
        const btn = this.shadowRoot.getElementById('btn-translate');
        const hasInput = window.appState.inputText.trim().length > 0;
        const hasFile = window.appState.file !== null;
        
        if ((hasInput || hasFile) && !window.appState.isTranslating) {
            btn.disabled = false;
        } else {
            btn.disabled = true;
        }
    }
    
    updateUI(state) {
        this.updateTranslateBtn();
    }

    swapTextContent() {
        // Only swap text content if model allows (M2M). Indictrans has fixed source (En).
        if(window.appState.model !== 'm2m100-1.2b') return;

        const input = this.shadowRoot.getElementById('input-text');
        if (!input) return;

        const temp = window.appState.inputText;
        window.appState.inputText = window.appState.outputText;
        window.appState.outputText = temp;

        input.value = window.appState.inputText;
        this.shadowRoot.getElementById('char-count').textContent = `${window.appState.inputText.length} chars`;

        if(window.appState.outputText) {
            this.renderOutputText(window.appState.outputText);
        } else {
            this.renderOutputEmpty();
        }
    }

    renderOutputEmpty() {
        const wrapper = this.shadowRoot.getElementById('output-wrapper');
        wrapper.innerHTML = `
            <div class="empty-state">
                <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#cbd5e1" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="margin-bottom:1rem"><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>
                <p>Translation will appear here</p>
            </div>
        `;
    }

    renderOutputLoading() {
        const wrapper = this.shadowRoot.getElementById('output-wrapper');
            wrapper.innerHTML = `
            <div style="padding: 1.5rem; display:flex; flex-direction:column; gap:0.5rem; height:100%; justify-content:center;">
                <div class="skeleton long" style="background: #f6e3bb;"></div>
                <div class="skeleton short" style="background: #f6e3bb;"></div>
                <div class="skeleton long" style="background: #f6e3bb;"></div>
                <div class="skeleton short" style="background: #f6e3bb;"></div>
                <div class="skeleton medium" style="background: #f6e3bb;"></div>
            </div>
            `;
}

    renderOutputText(text) {
        const wrapper = this.shadowRoot.getElementById('output-wrapper');
        wrapper.innerHTML = `
            <textarea readonly style="cursor:text; background:transparent; color:#5e4229;">${text}</textarea>
        `;
}
}

customElements.define('translator-workspace', TranslatorWorkspace);