class DocUploader extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.render();
        this.bindEvents();
        
        window.addEventListener('stateChanged', () => this.checkTranslateButton());
    }

    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; }
                .card {
                    background: #fffdf9;
                    border: 1px solid #f6e3bb;
                    border-radius: 0.75rem;
                    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
                    padding: 1.5rem;
                }

                .header {
                    margin-bottom: 1rem;
                    display: flex;
                    align-items: center;
                    gap: 0.5rem;
                }

                .header h3 {
                    font-size: 1.125rem;
                    font-weight: 600;
                    color: #7c5836;
                }
                .drop-zone {
                    border: 2px dashed #f6e3bb;
                    border-radius: 0.5rem;
                    padding: 2rem;
                    text-align: center;
                    cursor: pointer;
                    transition: all 0.2s ease;
                    background: #fdf6e9;
                }

                .drop-zone:hover, .drop-zone.drag-active {
                    border-color: #c7a24d;
                    background: #faedd2;
                }

                .drop-zone-content {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    gap: 0.5rem;
                    color: #7c5836;
                }

                .drop-zone-content svg {
                    color: #7c5836;
                }
                .file-info {
                    display: none; /* Hidden by default */
                    margin-top: 1rem;
                    padding: 1rem;
                    background: #fdf6e9;
                    border-radius: 0.5rem;
                }
.file-info.active {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                }

                .file-details {
                    display: flex;
                    align-items: center;
                    gap: 0.75rem;
                }
                .file-icon {
                    color: #c7a24d;
                }

                .file-text h4 {
                    font-size: 0.875rem;
                    font-weight: 600;
                    color: #5e4229;
                }

                .file-text p {
                    font-size: 0.75rem;
                    color: #7c5836;
                }
.btn-remove {
                    color: #ef4444;
                    background: white;
                    border: 1px solid #fee2e2;
                    padding: 0.25rem 0.5rem;
                    border-radius: 0.25rem;
                    font-size: 0.75rem;
                    cursor: pointer;
                }

                .btn-remove:hover {
                    background: #fef2f2;
                }
                .progress-container {
                    margin-top: 0.75rem;
                    height: 0.5rem;
                    background: #f6e3bb;
                    border-radius: 9999px;
                    overflow: hidden;
                    display: none;
                }

                .progress-bar {
                    height: 100%;
                    background: #c7a24d;
                    width: 0%;
                    transition: width 0.3s ease;
                }
.download-area {
                    margin-top: 1rem;
                    display: none;
                    text-align: right;
                }
                
                .download-area.active {
                    display: block;
                }
                .btn-download {
                    display: inline-flex;
                    align-items: center;
                    gap: 0.5rem;
                    background: #c7a24d;
                    color: white;
                    padding: 0.5rem 1rem;
                    border-radius: 0.375rem;
                    text-decoration: none;
                    font-size: 0.875rem;
                    font-weight: 500;
                    border: none;
                    cursor: pointer;
                }

                .btn-download:hover {
                    background: #b89144;
                }
</style>
            <div class="card">
                <div class="header">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
                    <h3>Document Translation</h3>
                </div>

                <div class="drop-zone" id="drop-zone">
                    <div class="drop-zone-content">
                        <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="17 8 12 3 7 8"></polyline><line x1="12" y1="3" x2="12" y2="15"></line></svg>
                        <p><strong>Click to upload</strong> or drag and drop</p>
                        <p style="font-size:0.75rem">PDF, DOCX, TXT, MD, RTF (Max 10MB)</p>
                    </div>
                    <input type="file" id="file-input" accept=".pdf,.docx,.txt,.md,.rtf" style="display:none">
                </div>

                <div class="file-info" id="file-info">
                    <div class="file-details">
                        <div class="file-icon">
                            <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="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path><polyline points="13 2 13 9 20 9"></polyline></svg>
                        </div>
                        <div class="file-text">
                            <h4 id="file-name">document.pdf</h4>
                            <p id="file-size">2.4 MB</p>
                        </div>
                    </div>
                    <button class="btn-remove" id="btn-remove-file">Remove</button>
                </div>

                <div class="progress-container" id="progress-container">
                    <div class="progress-bar" id="progress-bar"></div>
                </div>

                <div class="download-area" id="download-area">
                    <button class="btn-download" id="btn-download">
                        <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="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>
                        Download Translated Document
                    </button>
                </div>
            </div>
        `;
    }

    bindEvents() {
        const dropZone = this.shadowRoot.getElementById('drop-zone');
        const fileInput = this.shadowRoot.getElementById('file-input');
        const btnRemove = this.shadowRoot.getElementById('btn-remove-file');
        const btnDownload = this.shadowRoot.getElementById('btn-download');

        // Click to upload
        dropZone.addEventListener('click', () => fileInput.click());

        // File selection
        fileInput.addEventListener('change', (e) => {
            if (e.target.files.length > 0) {
                this.handleFile(e.target.files[0]);
            }
        });

        // Drag and drop
        dropZone.addEventListener('dragover', (e) => {
            e.preventDefault();
            dropZone.classList.add('drag-active');
        });

        dropZone.addEventListener('dragleave', () => {
            dropZone.classList.remove('drag-active');
        });

        dropZone.addEventListener('drop', (e) => {
            e.preventDefault();
            dropZone.classList.remove('drag-active');
            if (e.dataTransfer.files.length > 0) {
                this.handleFile(e.dataTransfer.files[0]);
            }
        });

        // Remove file
        btnRemove.addEventListener('click', () => {
            window.appState.file = null;
            window.appState.fileStatus = 'idle';
            this.resetUI();
        });
        
        // Mock Download
        btnDownload.addEventListener('click', () => {
             window.showToast('Download started!', 'success');
        });
    }

    async handleFile(file) {
        // Validate
        const validTypes = ['.pdf', '.docx', '.txt', '.md', '.rtf'];
        const ext = '.' + file.name.split('.').pop().toLowerCase();
        
        if (!validTypes.includes(ext)) {
            window.showToast('Invalid file type. Please upload PDF, DOCX, TXT, MD, or RTF.', 'error');
            return;
        }

        window.appState.file = file;
        window.appState.fileStatus = 'uploading';

        // Update UI to show file
        this.shadowRoot.getElementById('file-name').textContent = file.name;
        this.shadowRoot.getElementById('file-size').textContent = (file.size / 1024 / 1024).toFixed(2) + ' MB';
        this.shadowRoot.getElementById('file-info').classList.add('active');
        this.shadowRoot.getElementById('progress-container').style.display = 'block';
        
        // Trigger global state update (to enable translate button)
        window.dispatchEvent(new CustomEvent('stateChanged', { detail: window.appState }));

        // Simulate Upload & Process
        await this.simulateProgress();
    }

    async simulateProgress() {
        const progressBar = this.shadowRoot.getElementById('progress-bar');
        
        // Upload Phase
        for(let i=0; i<=50; i+=5) {
            progressBar.style.width = i + '%';
            await new Promise(r => setTimeout(r, 100));
        }

        // Process Phase (Mock API)
        try {
            await window.mockApi.uploadFile(window.appState.file);
            
            // Process Phase Simulation
            for(let i=50; i<=100; i+=5) {
                progressBar.style.width = i + '%';
                await new Promise(r => setTimeout(r, 100));
            }

            window.appState.fileStatus = 'done';
            window.showToast('Document processed successfully', 'success');
            
            // Show Download
            this.shadowRoot.getElementById('drop-zone').style.display = 'none';
            this.shadowRoot.getElementById('progress-container').style.display = 'none';
            this.shadowRoot.getElementById('download-area').classList.add('active');
            
        } catch (e) {
            window.showToast('Upload failed', 'error');
            this.resetUI();
        }
    }

    resetUI() {
        this.shadowRoot.getElementById('file-info').classList.remove('active');
        this.shadowRoot.getElementById('progress-container').style.display = 'none';
        this.shadowRoot.getElementById('progress-bar').style.width = '0%';
        this.shadowRoot.getElementById('drop-zone').style.display = 'block';
        this.shadowRoot.getElementById('download-area').classList.remove('active');
        this.shadowRoot.getElementById('file-input').value = '';
        window.dispatchEvent(new CustomEvent('stateChanged', { detail: window.appState }));
    }
    
    checkTranslateButton() {
        // Workspace component handles the button disable logic based on file existence
        // This is just a placeholder if we needed specific logic here
    }
}

customElements.define('doc-uploader', DocUploader);