Blame for frontend/script.js

const API_URL = "/api";
let currentFiles = [];
let pageOrder = [];
let currentToolMode = '';

function updateThemeButtonLabel(isDark) {
    const btn = document.getElementById('themeToggleBtn');
    if (btn) {
        btn.innerHTML = isDark ? '☀️ Modo Claro' : '🌙 Modo Escuro';
    }
}

function toggleTheme() {
    const isDark = document.body.classList.toggle('dark-mode');
    localStorage.setItem('sopdf_theme', isDark ? 'dark' : 'light');
    updateThemeButtonLabel(isDark);
}

(function initTheme() {
    const savedTheme = localStorage.getItem('sopdf_theme');
    if (savedTheme === 'dark') {
        document.body.classList.add('dark-mode');
        updateThemeButtonLabel(true);
    }
})();

function scrollToTools() {
    document.getElementById('ferramentas').scrollIntoView({ behavior: 'smooth' });
}

function openTool(toolType) {
    const homeView = document.getElementById('home-view');
    const toolView = document.getElementById('tool-view');
    const body = document.getElementById('tool-content');
    
    homeView.style.display = 'none';
    toolView.style.display = 'block';
    
    let content = '';
    currentFiles = [];
    pageOrder = [];
    
    switch(toolType) {
        case 'delete':
            content = `
                <h2 style="margin-bottom: 1rem; color: var(--ceara-orange-1);">🗑️ Excluir e Reordenar Páginas</h2>
                <form id="toolForm" onsubmit="handleReconstruct(event, 'modificado.pdf')">
                    <div class="upload-area" id="uploadBox" onclick="document.getElementById('fileInput').click()">
                        <span style="font-size: 2rem;">📄</span>
                        <p style="margin-top: 1rem;" id="fileName">Selecione o PDF</p>
                        <input type="file" id="fileInput" accept=".pdf" style="display: none;" onchange="loadPreviews(this, 'delete')" required>
                    </div>
                    <div id="loadingPreview" style="display: none; text-align: center; color: var(--ceara-yellow); margin-top: 10px;">Carregando visualização...</div>
                    <div id="previewContainer" class="page-grid"></div>
                    <button type="submit" class="btn-primary" style="width: 100%; margin-top: 1rem; display:none;" id="submitBtn">Salvar Alterações</button>
                    <div id="loading" style="display: none; text-align: center; margin-top: 1rem; color: var(--ceara-yellow);">Processando...</div>
                    <div id="resultArea" style="margin-top: 1rem;"></div>
                </form>
            `;
            break;
        case 'merge':
            content = `
                <h2 style="margin-bottom: 1rem; color: var(--ceara-green-1);">🔗 Mesclar e Reordenar PDFs</h2>
                <form id="toolForm" onsubmit="handleReconstruct(event, 'mesclado.pdf')">
                    <div class="upload-area" id="uploadBox" onclick="document.getElementById('fileInput').click()">
                        <span style="font-size: 2rem;">📄</span>
                        <p style="margin-top: 1rem;" id="fileName">Selecione Múltiplos PDFs</p>
                        <input type="file" id="fileInput" accept=".pdf" style="display: none;" multiple onchange="loadPreviews(this, 'merge')">
                    </div>
                    <div id="loadingPreview" style="display: none; text-align: center; color: var(--ceara-yellow); margin-top: 10px;">Carregando visualização...</div>
                    <div id="previewContainer" class="page-grid"></div>
                    <button type="submit" class="btn-primary" style="width: 100%; margin-top: 1rem; display:none;" id="submitBtn">Salvar PDF Mesclado</button>
                    <div id="loading" style="display: none; text-align: center; margin-top: 1rem; color: var(--ceara-yellow);">Processando...</div>
                    <div id="resultArea" style="margin-top: 1rem;"></div>
                </form>
            `;
            break;
        case 'compress':
            content = `
                <h2 style="margin-bottom: 1rem; color: var(--ceara-green-1);">🗜️ Comprimir PDF</h2>
                <form id="toolForm" onsubmit="handleCompress(event)">
                    <div class="upload-area" id="uploadBox" onclick="document.getElementById('fileInput').click()">
                        <span style="font-size: 2rem;">📄</span>
                        <p style="margin-top: 1rem;" id="fileName">Selecione o PDF</p>
                        <input type="file" id="fileInput" accept=".pdf" style="display: none;" onchange="updateFileName(this)" required>
                    </div>
                    <div class="input-group">
                        <label>Nível de Compressão</label>
                        <select id="compressLevel">
                            <option value="recomendada">Recomendada (Boa qualidade)</option>
                            <option value="extrema">Extrema (Menor tamanho possível)</option>
                            <option value="baixa">Baixa (Alta qualidade)</option>
                        </select>
                    </div>
                    <button type="submit" class="btn-primary" style="width: 100%;" id="submitBtn">Comprimir Arquivo</button>
                    <div id="loading" style="display: none; text-align: center; margin-top: 1rem; color: var(--ceara-yellow);">Processando... Aguarde.</div>
                    <div id="resultArea" style="margin-top: 1rem;"></div>
                </form>
            `;
            break;
        case 'split':
            content = `
                <h2 style="margin-bottom: 1rem; color: var(--ceara-orange-1);">✂️ Particionar PDF</h2>
                <p style="color: var(--text-secondary); font-size:0.8rem; margin-bottom: 1rem;">Nota: Se uma única página for maior que o limite, ela não poderá ser dividida.</p>
                <form id="toolForm" onsubmit="handleSplit(event)">
                    <div class="upload-area" id="uploadBox" onclick="document.getElementById('fileInput').click()">
                        <span style="font-size: 2rem;">📄</span>
                        <p style="margin-top: 1rem;" id="fileName">Selecione o PDF</p>
                        <input type="file" id="fileInput" accept=".pdf" style="display: none;" onchange="loadPreviews(this, 'split')" required>
                    </div>
                    <div id="loadingPreview" style="display: none; text-align: center; color: var(--ceara-yellow); margin-top: 10px;">Carregando visualização...</div>
                    <div id="previewContainer" class="page-grid"></div>

                    
                    <div class="input-group">
                        <label>Modo de Partição</label>
                        <select id="splitMode" onchange="toggleSplitMode()">
                            <option value="size">Por Tamanho Máximo</option>
                            <option value="interval">Por Intervalos de Páginas</option>
                        </select>
                    </div>
                    
                    <div id="sizeModeParams">
                        <div class="input-group">
                            <label>Tamanho máximo por arquivo (MB)</label>
                            <input type="number" id="maxMb" value="2.0" step="0.1" min="0.1">
                        </div>
                    </div>
                    
                    <div id="intervalModeParams" style="display: none;">
                        <div class="input-group">
                            <label>Intervalos para extrair (ex: 1-5, 8, 11-13)</label>
                            <input type="text" id="splitIntervals" placeholder="ex: 1-5, 8-10">
                        </div>
                        <div class="input-group" style="flex-direction: row; align-items: center; gap: 10px;">
                            <input type="checkbox" id="splitMerge" style="width: auto;">
                            <label for="splitMerge" style="margin: 0; font-weight: normal; cursor: pointer;">Mesclar todos os intervalos em um arquivo PDF</label>
                        </div>
                    </div>

                    <div class="input-group">
                        <label>Compressão Base</label>
                        <select id="splitCompress">
                            <option value="nenhuma">Nenhuma (Apenas particionar)</option>
                            <option value="recomendada">Recomendada</option>
                            <option value="extrema">Extrema</option>
                        </select>
                    </div>
                    <button type="submit" class="btn-primary" style="width: 100%;" id="submitBtn">Processar Partição</button>
                    <div id="loading" style="display: none; text-align: center; margin-top: 1rem; color: var(--ceara-yellow);">Processando partições... Aguarde.</div>
                    <div id="resultArea" style="margin-top: 1rem;"></div>
                </form>
            `;
            break;
        case 'convert':
            content = `
                <h2 style="margin-bottom: 1rem; color: var(--ceara-orange-1);">🔄 Conversões</h2>
                <form id="toolForm" onsubmit="handleConvert(event)">
                    <div class="upload-area" id="uploadBox" onclick="document.getElementById('fileInput').click()">
                        <span style="font-size: 2rem;">📄</span>
                        <p style="margin-top: 1rem;" id="fileName">Selecione o Arquivo</p>
                        <input type="file" id="fileInput" accept=".pdf,.png,.jpg,.jpeg" style="display: none;" multiple onchange="updateFileNameMultiple(this)">
                    </div>
                    <div class="input-group">
                        <label>Tipo de Conversão</label>
                        <select id="convertType">
                            <option value="word">PDF para Word (.docx)</option>
                            <option value="excel">PDF para Excel (.xlsx)</option>
                            <option value="pptx">PDF para PowerPoint (.pptx)</option>
                            <option value="images">PDF para Imagens (.zip)</option>
                            <option value="pdf-from-images">Imagens para PDF</option>
                        </select>
                    </div>
                    <button type="submit" class="btn-primary" style="width: 100%;" id="submitBtn">Converter</button>
                    <div id="loading" style="display: none; text-align: center; margin-top: 1rem; color: var(--ceara-yellow);">Convertendo...</div>
                    <div id="resultArea" style="margin-top: 1rem;"></div>
                </form>
            `;
            break;
        case 'security':
            content = `
                <h2 style="margin-bottom: 1rem; color: var(--ceara-green-1);">🛡️ Segurança AES</h2>
                <form id="toolForm" onsubmit="handleSecurity(event)">
                    <div class="upload-area" id="uploadBox" onclick="document.getElementById('fileInput').click()">
                        <span style="font-size: 2rem;">📄</span>
                        <p style="margin-top: 1rem;" id="fileName">Selecione o PDF</p>
                        <input type="file" id="fileInput" accept=".pdf" style="display: none;" onchange="updateFileName(this)" required>
                    </div>
                    <div class="input-group">
                        <label>Ação</label>
                        <select id="secAction">
                            <option value="protect">Proteger (Adicionar Senha)</option>
                            <option value="unlock">Desbloquear (Remover Senha)</option>
                        </select>
                    </div>
                    <div class="input-group">
                        <label>Senha</label>
                        <input type="password" id="secPassword" required>
                    </div>
                    <button type="submit" class="btn-primary" style="width: 100%;" id="submitBtn">Aplicar</button>
                    <div id="loading" style="display: none; text-align: center; margin-top: 1rem; color: var(--ceara-yellow);">Processando...</div>
                    <div id="resultArea" style="margin-top: 1rem;"></div>
                </form>
            `;
            break;
        case 'compare':
            content = `
                <h2 style="margin-bottom: 1rem; color: var(--ceara-orange-1);">👁️ Comparar PDFs</h2>
                <form id="toolForm" onsubmit="handleCompare(event)">
                    <div style="display:flex; gap:10px;">
                        <div class="input-group" style="flex:1;">
                            <label>PDF A (Original)</label>
                            <input type="file" id="fileA" accept=".pdf" required style="color: var(--text-primary); width:100%;">
                        </div>
                        <div class="input-group" style="flex:1;">
                            <label>PDF B (Modificado)</label>
                            <input type="file" id="fileB" accept=".pdf" required style="color: var(--text-primary); width:100%;">
                        </div>
                    </div>
                    <button type="submit" class="btn-primary" style="width: 100%;" id="submitBtn">Comparar Visualmente</button>
                    <div id="loading" style="display: none; text-align: center; margin-top: 1rem; color: var(--ceara-yellow);">Analisando diferenças...</div>
                    <div id="resultArea" style="margin-top: 1rem; display: flex; gap: 10px; flex-direction: column;"></div>
                </form>
            `;
            break;
        case 'ocr':
            content = `
                <h2 style="margin-bottom: 1rem; color: var(--ceara-orange-1);">🔍 Reconhecimento de Texto (OCR)</h2>
                <form id="toolForm" onsubmit="handleOCRSubmit(event)">
                    <div class="upload-area" id="uploadBox" onclick="document.getElementById('fileInput').click()">
                        <span style="font-size: 2rem;">📄</span>
                        <p style="margin-top: 1rem;" id="fileName">Selecione o PDF</p>
                        <input type="file" id="fileInput" accept=".pdf" style="display: none;" onchange="updateFileName(this)" required>
                    </div>
                    <div class="input-group">
                        <label>Idioma do Documento</label>
                        <select id="ocr-lang">
                            <option value="por">Português</option>
                            <option value="eng">Inglês</option>
                            <option value="por+eng">Português + Inglês</option>
                        </select>
                    </div>
                    <button type="submit" class="btn-primary" style="width: 100%;" id="submitBtn">Tornar Pesquisável</button>
                    <div id="loading" style="display: none; text-align: center; margin-top: 1rem; color: var(--ceara-yellow);">Lendo caracteres (isso pode demorar minutos)...</div>
                    <div id="resultArea" style="margin-top: 1rem;"></div>
                </form>
            `;
            break;
        case 'validate_signature':
            content = `
                <h2 style="margin-bottom: 1rem; color: var(--ceara-orange-1);">✒️ Validar Assinaturas</h2>
                <p style="margin-bottom: 1rem; color: var(--text-secondary);">Verifique a integridade de assinaturas digitais padrão ICP-Brasil ou Gov.br contidas no documento PDF.</p>
                <form id="toolForm" onsubmit="handleValidateSignatureSubmit(event)">
                    <div class="upload-area" id="uploadBox" onclick="document.getElementById('fileInput').click()">
                        <span style="font-size: 2rem;">📄</span>
                        <p style="margin-top: 1rem;" id="fileName">Selecione o PDF Assinado</p>
                        <input type="file" id="fileInput" accept=".pdf" style="display: none;" onchange="updateFileName(this)" required>
                    </div>
                    <button type="submit" class="btn-primary" style="width: 100%;" id="submitBtn">Analisar Assinaturas</button>
                    <div id="loading" style="display: none; text-align: center; margin-top: 1rem; color: var(--ceara-yellow);">Lendo chaves e cadeias do certificado...</div>
                    <div id="resultArea" style="margin-top: 1rem;"></div>
                </form>
            `;
            break;
        case 'repair':
            content = `
                <h2 style="margin-bottom: 1rem; color: var(--ceara-orange-1);">🩹 Reparar PDF</h2>
                <p style="margin-bottom: 1rem; color: var(--text-secondary);">Reconstrua PDFs corrompidos para tentar recuperar o acesso ao arquivo original.</p>
                <form id="toolForm" onsubmit="handleRepairSubmit(event)">
                    <div class="upload-area" id="uploadBox" onclick="document.getElementById('fileInput').click()">
                        <span style="font-size: 2rem;">📄</span>
                        <p style="margin-top: 1rem;" id="fileName">Selecione o PDF Corrompido</p>
                        <input type="file" id="fileInput" accept=".pdf" style="display: none;" onchange="updateFileName(this)" required>
                    </div>
                    <button type="submit" class="btn-primary" style="width: 100%;" id="submitBtn">Tentar Reparar</button>
                    <div id="loading" style="display: none; text-align: center; margin-top: 1rem; color: var(--ceara-yellow);">Analisando estrutura e reparando XREF...</div>
                    <div id="resultArea" style="margin-top: 1rem;"></div>
                </form>
            `;
            break;
        case 'ai_assistant':
            content = `
                <h2 style="margin-bottom: 1rem; color: var(--ceara-orange-1);">🤖 Inteligência Artificial</h2>
                <p style="margin-bottom: 1rem; color: var(--text-secondary);">Gere resumos ou traduza documentos inteiros de forma automática.</p>
                <div class="upload-area" id="uploadBox" onclick="document.getElementById('fileInput').click()">
                    <span style="font-size: 2rem;">📄</span>
                    <p style="margin-top: 1rem;" id="fileName">Selecione o PDF Base</p>
                    <input type="file" id="fileInput" accept=".pdf" style="display: none;" onchange="updateFileName(this)" required>
                </div>
                
                <div style="display: flex; gap: 10px; margin-top: 1rem; background: var(--bg-subtle); border: 1px solid var(--bg-glass-border); padding: 10px; border-radius: 8px; flex-wrap: wrap;">
                    <button class="btn-outline" onclick="triggerAIActions('summarize', 'curto')">Resumo Curto</button>
                    <button class="btn-outline" onclick="triggerAIActions('summarize', 'medio')">Resumo Médio</button>
                    <button class="btn-outline" onclick="triggerAIActions('summarize', 'longo')">Resumo Longo</button>
                    
                    <div style="width: 1px; background: var(--input-border); margin: 0 5px;"></div>
                    
                    <select id="translate-lang" style="padding: 5px 10px; border-radius: 6px; background: var(--input-bg); color: var(--text-primary); border: 1px solid var(--input-border);">
                        <option value="en">Inglês</option>
                        <option value="es">Espanhol</option>
                        <option value="pt" selected>Português</option>
                    </select>
                    <button class="btn-outline" onclick="triggerAIActions('translate')">Traduzir Texto</button>
                </div>
                
                <div id="loading" style="display: none; text-align: center; margin-top: 1rem; color: var(--ceara-yellow);">A IA está processando o documento, isso pode levar alguns minutos...</div>
                
                <div id="resultContainer" style="display: none; margin-top: 2rem;">
                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
                        <h3 style="color: var(--ceara-orange-1);">Pré-visualização</h3>
                        <button class="btn-primary" onclick="downloadPreviewPDF('Documento_IA.pdf')">📥 Baixar PDF</button>
                    </div>
                    <div id="previewArea" style="background: var(--bg-dark-card); color: var(--text-primary); border: 1px solid var(--bg-glass-border); border-radius: 8px; padding: 20px; max-height: 50vh; overflow-y: auto; font-family: 'Inter', sans-serif;"></div>
                </div>
            `;
            break;
        case 'editor':
            content = `
                <h2 style="margin-bottom: 1rem; color: var(--ceara-orange-1);">📝 Editar Conteúdo</h2>
                <p style="margin-bottom: 1rem; color: var(--text-secondary);">Extraia e edite o conteúdo textual do seu PDF e exporte novamente.</p>
                <form id="toolForm" onsubmit="handleEditorLoad(event)">
                    <div class="upload-area" id="uploadBox" onclick="document.getElementById('fileInput').click()">
                        <span style="font-size: 2rem;">📄</span>
                        <p style="margin-top: 1rem;" id="fileName">Selecione o PDF Base</p>
                        <input type="file" id="fileInput" accept=".pdf" style="display: none;" onchange="updateFileName(this)" required>
                    </div>
                    <button type="submit" class="btn-primary" style="width: 100%;" id="submitBtn">Carregar Texto no Editor</button>
                    <div id="loading" style="display: none; text-align: center; margin-top: 1rem; color: var(--ceara-yellow);">Extraindo conteúdo (aguarde)...</div>
                </form>
                
                <!-- Editor Container (Oculto inicialmente) -->
                <div id="editor-container" style="display: none; margin-top: 2rem;">
                    <div style="display: flex; gap: 10px; margin-bottom: 10px; background: var(--bg-subtle); border: 1px solid var(--bg-glass-border); padding: 10px; border-radius: 8px; flex-wrap: wrap;">
                        <button class="btn-primary" onclick="downloadEditorPDF()">📥 Salvar Edição em PDF</button>
                    </div>
                    
                    <div style="background: white; color: black; border-radius: 4px;">
                        <div id="quill-editor" style="height: 60vh; font-family: 'Inter', sans-serif;"></div>
                    </div>
                </div>
            `;
            // Initialize Quill only when the DOM is ready. We will initialize it inside handleEditorLoad or slightly after.
            break;
    }
    
    body.innerHTML = content;
    setupDragAndDrop();
    window.scrollTo({ top: 0, behavior: 'smooth' });
}

function setupDragAndDrop() {
    const uploadBox = document.getElementById('uploadBox');
    if (!uploadBox) return;

    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
        uploadBox.addEventListener(eventName, preventDefaults, false);
    });

    function preventDefaults(e) {
        e.preventDefault();
        e.stopPropagation();
    }

    ['dragenter', 'dragover'].forEach(eventName => {
        uploadBox.addEventListener(eventName, () => {
            uploadBox.style.borderColor = 'var(--ceara-orange-1)';
            uploadBox.style.background = 'var(--badge-orange-bg)';
        }, false);
    });

    ['dragleave', 'drop'].forEach(eventName => {
        uploadBox.addEventListener(eventName, () => {
            uploadBox.style.borderColor = '';
            uploadBox.style.background = '';
        }, false);
    });

    uploadBox.addEventListener('drop', (e) => {
        const dt = e.dataTransfer;
        const files = dt.files;
        if (files && files.length > 0) {
            const fileInput = document.getElementById('fileInput');
            if (fileInput) {
                fileInput.files = files;
                const event = new Event('change', { bubbles: true });
                fileInput.dispatchEvent(event);
            }
        }
    }, false);
}

function closeTool() {
    document.getElementById('tool-view').style.display = 'none';
    document.getElementById('home-view').style.display = 'block';
    window.scrollTo({ top: 0, behavior: 'smooth' });
}

function updateFileName(input) {
    if (input.files.length > 0) {
        document.getElementById('fileName').innerText = "Selecionado: " + input.files[0].name;
        document.getElementById('uploadBox').style.borderColor = "var(--ceara-green-1)";
        document.getElementById('uploadBox').style.background = "var(--upload-hover-bg)";
    }
}

function updateFileNameMultiple(input) {
    const newFiles = Array.from(input.files);
    if (newFiles.length === 0) return;
    
    currentFiles = currentFiles.concat(newFiles);
    
    const fileNamesHtml = currentFiles.map(f => `<div style="background: var(--badge-green-bg); color: var(--badge-green-text); padding: 4px 10px; border-radius: 6px; display: inline-block; margin: 3px; font-size: 0.85rem; font-weight: 600; border: 1px solid var(--badge-green-border);">${f.name}</div>`).join('');
    
    document.getElementById('fileName').innerHTML = `<b style="display:block; margin-bottom: 8px; color: var(--text-primary);">${currentFiles.length} arquivo(s) selecionado(s):</b><div style="max-height: 120px; overflow-y: auto; padding: 4px;">${fileNamesHtml}</div>`;
    
    document.getElementById('uploadBox').style.borderColor = "var(--ceara-green-1)";
    document.getElementById('uploadBox').style.background = "var(--upload-hover-bg)";
    
    input.value = ''; // clear so same file can be selected again
}

// Reusable function to render a download button
function renderDownloadBtn(blob, filename, extraText="") {
    const url = window.URL.createObjectURL(blob);
    const resultArea = document.getElementById('resultArea');
    resultArea.innerHTML = `
        <div style="padding: 1.2rem; background: var(--upload-hover-bg); border: 1px solid var(--badge-green-border); border-radius: 10px; text-align: center;">
            <p style="color: var(--text-primary); font-weight: 600; margin-bottom: 1rem;">Processamento concluído com sucesso!</p>
            ${extraText ? '<p style="color: var(--ceara-orange-1); margin-bottom: 1rem; font-weight: bold;">'+extraText+'</p>' : ''}
            <a href="${url}" download="${filename}" class="btn-primary" style="text-decoration: none; display: inline-block;">📥 Baixar Arquivo</a>
        </div>
    `;
}

// Previews
async function loadPreviews(input, mode) {
    currentToolMode = mode;
    
    const newFiles = Array.from(input.files);
    if(newFiles.length === 0) return;
    
    let fileOffset = 0;
    
    if(mode === 'delete' || mode === 'split') {
        currentFiles = newFiles;
        updateFileName(input);
    } else {
        fileOffset = currentFiles.length;
        currentFiles = currentFiles.concat(newFiles);
        const fileNamesHtml = currentFiles.map(f => `<div style="background: var(--badge-green-bg); color: var(--badge-green-text); padding: 4px 10px; border-radius: 6px; display: inline-block; margin: 3px; font-size: 0.85rem; font-weight: 600; border: 1px solid var(--badge-green-border);">${f.name}</div>`).join('');
        document.getElementById('fileName').innerHTML = `<b style="display:block; margin-bottom: 8px; color: var(--text-primary);">${currentFiles.length} arquivo(s) selecionado(s):</b><div style="max-height: 120px; overflow-y: auto; padding: 4px;">${fileNamesHtml}</div>`;
        document.getElementById('uploadBox').style.borderColor = "var(--ceara-green-1)";
        document.getElementById('uploadBox').style.background = "var(--upload-hover-bg)";
    }
    
    const fd = new FormData();
    newFiles.forEach(f => fd.append("files", f));
    
    document.getElementById('loadingPreview').style.display = 'block';
    if(mode === 'delete' || mode === 'split') {
        document.getElementById('previewContainer').innerHTML = '';
        pageOrder = [];
    }
    
    try {
        const response = await fetch(API_URL + '/preview', { method: 'POST', body: fd });
        if(response.ok) {
            const data = await response.json();
            data.files.forEach(file => {
                file.pages.forEach((b64, idx) => {
                    pageOrder.push({
                        id: Math.random().toString(36).substr(2, 9),
                        file_index: file.file_index + fileOffset,
                        page_index: idx,
                        b64: b64,
                        deleted: false,
                        filename: file.filename
                    });
                });
            });
            renderGrid();
            document.getElementById('submitBtn').style.display = 'block';
        } else {
            alert("Erro ao carregar pré-visualização.");
        }
    } catch (e) {
        alert("Erro de conexão.");
    } finally {
        document.getElementById('loadingPreview').style.display = 'none';
        if(mode === 'merge') input.value = '';
    }
}

function renderGrid() {
    const container = document.getElementById('previewContainer');
    container.innerHTML = '';
    
    pageOrder.forEach((page, index) => {
        const card = document.createElement('div');
        card.className = 'page-card' + (page.deleted ? ' deleted' : '');
        card.dataset.id = page.id;
        
        let htmlContent = '';
        if (currentToolMode !== 'split') {
            htmlContent += `<button type="button" class="delete-btn" onclick="toggleDelete('${page.id}')" title="Remover/Restaurar">✕</button>`;
        }
        
        htmlContent += `
            <img src="data:image/jpeg;base64,${page.b64}" onclick="toggleZoom(this.parentNode)">
            <div class="page-label">
                <div style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;" title="${page.filename}">${page.filename}</div>
                <div>Pág ${page.page_index + 1}</div>
            </div>
        `;
        card.innerHTML = htmlContent;
        container.appendChild(card);
    });
    
    // SortableJS (apenas se não for modo split)
    if (currentToolMode !== 'split') {
        new Sortable(container, {
            animation: 150,
            ghostClass: 'sortable-ghost',
            onEnd: function (evt) {
                const itemEl = evt.item;
                const movedItem = pageOrder.splice(evt.oldIndex, 1)[0];
                pageOrder.splice(evt.newIndex, 0, movedItem);
            },
        });
    }
}

window.toggleZoom = function(cardElement) {
    if (cardElement.classList.contains('zoomed')) {
        cardElement.classList.remove('zoomed');
    } else {
        document.querySelectorAll('.page-card.zoomed').forEach(el => el.classList.remove('zoomed'));
        cardElement.classList.add('zoomed');
    }
};

window.toggleDelete = function(id) {
    const page = pageOrder.find(p => p.id === id);
    if(page) {
        page.deleted = !page.deleted;
        renderGrid();
    }
};

// ==========================================
// OCR Logic
// ==========================================
async function handleSimpleSubmit(e, path, typeField, extraFields, isFile) {
    e.preventDefault();
    const fileInput = document.getElementById('fileInput');
    if (fileInput.files.length === 0) return alert("Selecione um arquivo.");
    
    const formData = new FormData();
    formData.append(isFile ? 'file' : 'files', fileInput.files[0]);
    if(typeField) formData.append('type', document.getElementById(typeField).value);
    
    await genericPost(path, formData, 'processado.pdf');
}

async function handleValidateSignatureSubmit(e) {
    e.preventDefault();
    const fileInput = document.getElementById('fileInput');
    if (!fileInput.files || fileInput.files.length === 0) return;
    
    const formData = new FormData();
    formData.append("file", fileInput.files[0]);
    
    document.getElementById('loading').style.display = 'block';
    document.getElementById('submitBtn').disabled = true;
    document.getElementById('resultArea').innerHTML = '';
    
    try {
        const response = await fetch(`${API_URL}/verify-signatures`, {
            method: 'POST',
            body: formData
        });
        
        if (!response.ok) {
            const errText = await response.text();
            throw new Error(errText);
        }
        
        const data = await response.json();
        
        let html = '';
        if (data.total_signatures === 0) {
            html = `
                <div style="padding: 1.5rem; background: var(--badge-orange-bg); border: 1px solid var(--badge-orange-border); border-radius: 8px; text-align: center;">
                    <h3 style="color: var(--badge-orange-text); margin-bottom: 0.5rem;">Nenhuma Assinatura Encontrada</h3>
                    <p style="color: var(--text-secondary);">O documento não possui assinaturas digitais embutidas detectáveis (apenas marcas de carimbo visuais não contam como assinaturas criptográficas válidas).</p>
                </div>
            `;
        } else {
            html = `<h3 style="color: var(--text-primary); margin-bottom: 1rem; border-bottom: 1px solid var(--bg-glass-border); padding-bottom: 0.5rem;">${data.total_signatures} Assinatura(s) Detectada(s)</h3>`;
            html += `<div style="display: flex; flex-direction: column; gap: 1rem;">`;
            
            data.signatures.forEach((sig, index) => {
                const isTrust = sig.trust_type && sig.trust_type !== "unknown";
                const isIntact = sig.is_intact;
                const isError = sig.signer_name === "Assinatura Desconhecida";
                
                let borderColor = isIntact && isTrust ? "var(--ceara-green-1)" : "var(--ceara-orange-1)";
                if (isError || !isIntact) borderColor = "#dc2626";
                if (isIntact && sig.trust_type === "govbr") borderColor = "#0284c7";
                if (isIntact && sig.trust_type === "suite") borderColor = "#65a30d";
                
                let badgeHtml = '';
                if (isIntact) {
                    badgeHtml += `<span style="background: var(--badge-green-bg); color: var(--badge-green-text); border: 1px solid var(--badge-green-border); padding: 2px 8px; border-radius: 4px; font-size: 0.8rem; font-weight: bold;">Documento Íntegro</span> `;
                } else {
                    badgeHtml += `<span style="background: rgba(220, 38, 38, 0.15); color: #ef4444; border: 1px solid rgba(239, 68, 68, 0.3); padding: 2px 8px; border-radius: 4px; font-size: 0.8rem; font-weight: bold;">Adulterado após assinado</span> `;
                }
                
                if (sig.trust_type === "icp") {
                    badgeHtml += `<span style="background: var(--badge-green-bg); color: var(--badge-green-text); border: 1px solid var(--badge-green-border); padding: 2px 8px; border-radius: 4px; font-size: 0.8rem; font-weight: bold;">[${sig.trust_class}] ${sig.trust_name}</span>`;
                } else if (sig.trust_type === "govbr") {
                    badgeHtml += `<span style="background: rgba(2, 132, 199, 0.15); color: #38bdf8; border: 1px solid rgba(56, 189, 248, 0.3); padding: 2px 8px; border-radius: 4px; font-size: 0.8rem; font-weight: bold;">[${sig.trust_class}] ${sig.trust_name}</span>`;
                } else if (sig.trust_type === "suite") {
                    badgeHtml += `<span style="background: rgba(101, 163, 13, 0.15); color: #84cc16; border: 1px solid rgba(132, 204, 22, 0.3); padding: 2px 8px; border-radius: 4px; font-size: 0.8rem; font-weight: bold;">[${sig.trust_class}] ${sig.trust_name}</span>`;
                } else {
                    badgeHtml += `<span style="background: var(--bg-subtle); color: var(--text-secondary); border: 1px solid var(--input-border); padding: 2px 8px; border-radius: 4px; font-size: 0.8rem;">Emissor Comum/Desconhecido</span>`;
                }

                html += `
                    <div style="padding: 1rem; background: var(--bg-subtle); border: 1px solid var(--bg-glass-border); border-left: 4px solid ${borderColor}; border-radius: 6px;">
                        <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.5rem;">
                            <h4 style="color: var(--text-primary); margin: 0; font-size: 1.1rem;">${index + 1}. ${sig.signer_name}</h4>
                        </div>
                        <div style="margin-bottom: 0.8rem;">${badgeHtml}</div>
                        <p style="color: var(--text-secondary); margin: 0 0 0.3rem 0; font-size: 0.9rem;"><strong>Data:</strong> ${sig.date}</p>
                        <p style="color: var(--text-secondary); margin: 0; font-size: 0.9rem; word-break: break-all;"><strong>Emissor/Autoridade:</strong> ${sig.issuer}</p>
                        ${isError ? `<p style="color: #ef4444; margin-top: 0.5rem; font-size: 0.9rem;">${sig.validation_message}</p>` : ''}
                    </div>
                `;
            });
            html += `</div>`;
        }
        
        document.getElementById('resultArea').innerHTML = html;
        
    } catch (err) {
        document.getElementById('resultArea').innerHTML = `
            <div style="padding: 1rem; background: #fef2f2; border: 1px solid #fecaca; border-radius: 8px;">
                <p style="color: #991b1b; font-weight: bold;">Erro ao validar:</p>
                <p style="color: #dc2626;">${err.message}</p>
            </div>
        `;
    } finally {
        document.getElementById('loading').style.display = 'none';
        document.getElementById('submitBtn').disabled = false;
    }
}

async function handleOCRSubmit(e) {
    e.preventDefault();
    const fileInput = document.getElementById('fileInput');
    if (fileInput.files.length === 0) return alert("Selecione um arquivo.");

    const lang = document.getElementById('ocr-lang').value;
    
    document.getElementById('submitBtn').disabled = true;
    document.getElementById('loading').style.display = 'block';
    document.getElementById('resultArea').innerHTML = '';

    try {
        const formData = new FormData();
        formData.append('file', fileInput.files[0]);
        formData.append('lang', lang);

        const response = await fetch(`${API_URL}/ocr`, {
            method: 'POST',
            body: formData
        });

        if (!response.ok) {
            const errText = await response.text();
            throw new Error(errText || 'Erro ao processar OCR');
        }

        const blob = await response.blob();
        const originalName = fileInput.files[0].name.replace('.pdf', '');
        renderDownloadBtn(blob, `${originalName}_pesquisavel.pdf`);
    } catch (error) {
        alert('Erro no OCR: ' + error.message);
    } finally {
        document.getElementById('submitBtn').disabled = false;
        document.getElementById('loading').style.display = 'none';
    }
}

async function handleReconstruct(e, filename) {
    e.preventDefault();
    const activePages = pageOrder.filter(p => !p.deleted);
    if(activePages.length === 0) {
        alert("Você deve deixar pelo menos 1 página ativa.");
        return;
    }
    
    const fd = new FormData();
    currentFiles.forEach(f => fd.append("files", f));
    
    const orderData = activePages.map(p => ({file_index: p.file_index, page_index: p.page_index}));
    fd.append("order", JSON.stringify(orderData));
    
    await genericPost('/reconstruct', fd, filename);
}

async function genericPost(url, formData, defaultFilename) {
    document.getElementById('submitBtn').style.display = 'none';
    document.getElementById('loading').style.display = 'block';
    document.getElementById('resultArea').innerHTML = '';

    try {
        const response = await fetch(API_URL + url, { method: 'POST', body: formData });
        if (response.ok) {
            const blob = await response.blob();
            const disposition = response.headers.get('Content-Disposition');
            let filename = defaultFilename;
            if (disposition && disposition.indexOf('filename=') !== -1) {
                filename = disposition.split('filename=')[1].replace(/"/g, '');
            }
            renderDownloadBtn(blob, filename);
        } else {
            const err = await response.json();
            alert("Erro: " + (err.detail || "Falha no processamento."));
        }
    } catch (error) {
        console.error(error);
        alert("Erro de conexão com o servidor.");
    } finally {
        if(document.getElementById('submitBtn')) document.getElementById('submitBtn').style.display = 'block';
        if(document.getElementById('loading')) document.getElementById('loading').style.display = 'none';
    }
}

async function handleCompress(e) {
    e.preventDefault();
    const fd = new FormData();
    fd.append("file", document.getElementById('fileInput').files[0]);
    fd.append("level", document.getElementById('compressLevel').value);
    
    document.getElementById('submitBtn').style.display = 'none';
    document.getElementById('loading').style.display = 'block';
    document.getElementById('resultArea').innerHTML = '';

    try {
        const response = await fetch(API_URL + '/compress', { method: 'POST', body: fd });
        if (response.ok) {
            const blob = await response.blob();
            const sizeMB = (blob.size / (1024 * 1024)).toFixed(2);
            let filename = "comprimido.pdf";
            const disposition = response.headers.get('Content-Disposition');
            if (disposition && disposition.indexOf('filename=') !== -1) {
                filename = disposition.split('filename=')[1].replace(/["']/g, '');
            }
            renderDownloadBtn(blob, filename, "Tamanho final: " + sizeMB + " MB");
        } else {
            alert("Erro ao processar.");
        }
    } catch (e) {
        alert("Erro de conexão.");
    } finally {
        if(document.getElementById('submitBtn')) document.getElementById('submitBtn').style.display = 'block';
        if(document.getElementById('loading')) document.getElementById('loading').style.display = 'none';
    }
}

async function handleSplit(e) {
    e.preventDefault();
    const fd = new FormData();
    fd.append("file", document.getElementById('fileInput').files[0]);
    fd.append("level", document.getElementById('splitCompress').value);
    
    const mode = document.getElementById('splitMode').value;
    fd.append("mode", mode);
    
    if (mode === 'size') {
        fd.append("max_size_mb", document.getElementById('maxMb').value);
    } else {
        const intervals = document.getElementById('splitIntervals').value.trim();
        if (!intervals) {
            alert("Por favor, digite os intervalos desejados.");
            return;
        }
        fd.append("intervals", intervals);
        fd.append("merge", document.getElementById('splitMerge').checked);
    }
    
    document.getElementById('submitBtn').style.display = 'none';
    document.getElementById('loading').style.display = 'block';
    const resultArea = document.getElementById('resultArea');
    resultArea.innerHTML = '';

    try {
        const response = await fetch(API_URL + '/split', { method: 'POST', body: fd });
        if (response.ok) {
            const blob = await response.blob();
            let zipFilename = "particoes.zip";
            const disposition = response.headers.get('Content-Disposition');
            if (disposition && disposition.indexOf('filename=') !== -1) {
                zipFilename = disposition.split('filename=')[1].replace(/["']/g, '');
            }
            
            // Read ZIP using JSZip
            const jszip = new JSZip();
            const zip = await jszip.loadAsync(blob);
            
            let html = '<div style="padding: 1.2rem; background: var(--upload-hover-bg); border: 1px solid var(--badge-green-border); border-radius: 10px;">';
            html += '<h4 style="color: var(--text-primary); margin-bottom:10px;">Partições Geradas</h4>';
            html += '<ul style="list-style:none; padding:0; margin-bottom: 15px;">';
            
            const zipUrl = window.URL.createObjectURL(blob);
            
            // Extract entries and sort them by name (e.g. particao_1, particao_2)
            // Need a custom sort to handle numerical sorting of "particao_N"
            let entries = [];
            zip.forEach(function (relativePath, zipEntry) {
                entries.push(zipEntry);
            });
            entries.sort((a, b) => {
                const numA = parseInt(a.name.match(/\d+/)) || 0;
                const numB = parseInt(b.name.match(/\d+/)) || 0;
                return numA - numB;
            });
            
            let filesPromises = entries.map(zipEntry => {
                return zipEntry.async("blob").then(function (fileData) {
                    const sizeMB = (fileData.size / (1024 * 1024)).toFixed(2);
                    const fileUrl = window.URL.createObjectURL(fileData);
                    return {
                        name: zipEntry.name,
                        size: sizeMB,
                        url: fileUrl
                    };
                });
            });
            
            const resolvedFiles = await Promise.all(filesPromises);
            resolvedFiles.forEach(file => {
                html += '<li style="display:flex; justify-content:space-between; align-items:center; padding: 6px 0; border-bottom: 1px solid var(--input-border);">';
                html += '<span style="color:var(--text-primary);">' + file.name + ' <strong style="color:var(--ceara-orange-1)">(' + file.size + ' MB)</strong></span>';
                html += '<a href="' + file.url + '" download="' + file.name + '" class="btn-outline" style="padding: 5px 10px; font-size:0.8rem; text-decoration:none;">Baixar Parte</a>';
                html += '</li>';
            });
            
            html += '</ul>';
            html += '<a href="' + zipUrl + '" download="' + zipFilename + '" class="btn-primary" style="text-decoration:none; display:inline-block; width:100%; text-align:center;">📥 Baixar Todas as Partições (.zip)</a>';
            html += '</div>';
            resultArea.innerHTML = html;
        } else {
            alert("Erro ao particionar.");
        }
    } catch (e) {
        console.error(e);
        alert("Erro de conexão.");
    } finally {
        if(document.getElementById('submitBtn')) document.getElementById('submitBtn').style.display = 'block';
        if(document.getElementById('loading')) document.getElementById('loading').style.display = 'none';
    }
}

async function handleConvert(e) {
    e.preventDefault();
    const fd = new FormData();
    const type = document.getElementById('convertType').value;
    
    if(type === 'pdf-from-images') {
        if(currentFiles.length === 0) return alert("Selecione pelo menos um arquivo.");
        for(let i=0; i<currentFiles.length; i++){ fd.append("files", currentFiles[i]); }
        await genericPost('/convert/pdf-from-images', fd, "imagens.pdf");
    } else {
        const fileInput = document.getElementById('fileInput');
        let singleFile = currentFiles.length > 0 ? currentFiles[0] : (fileInput.files.length > 0 ? fileInput.files[0] : null);
        if(!singleFile) return alert("Selecione um arquivo.");
        fd.append("file", singleFile);
        let ext = type === 'word' ? '.docx' : type === 'excel' ? '.xlsx' : type === 'pptx' ? '.pptx' : '.zip';
        await genericPost('/convert/' + type, fd, 'convertido' + ext);
    }
}

async function handleSecurity(e) {
    e.preventDefault();
    const fd = new FormData();
    fd.append("file", document.getElementById('fileInput').files[0]);
    fd.append("password", document.getElementById('secPassword').value);
    const action = document.getElementById('secAction').value;
    await genericPost('/security/' + action, fd, 'seguranca.pdf');
}

async function handleCompare(e) {
    e.preventDefault();
    const fd = new FormData();
    fd.append("file_a", document.getElementById('fileA').files[0]);
    fd.append("file_b", document.getElementById('fileB').files[0]);
    
    document.getElementById('submitBtn').style.display = 'none';
    document.getElementById('loading').style.display = 'block';
    const resultArea = document.getElementById('resultArea');
    resultArea.innerHTML = '';

    try {
        const response = await fetch(API_URL + '/security/compare', { method: 'POST', body: fd });
        if (response.ok) {
            const data = await response.json();
            let html = '';
            for(let i=0; i<data.images_a.length; i++) {
                html += '<div style="display:flex; width:100%; margin-bottom:20px; gap:10px;">';
                html += '<div style="flex:1; border: 1px solid #444; padding: 5px; background: white; text-align:center;">';
                html += '<p style="color:black; font-weight:bold; margin-bottom:5px;">Original - Página ' + (i+1) + '</p>';
                if(data.images_a[i]) html += '<img src="data:image/png;base64,' + data.images_a[i] + '" style="max-width: 100%; height: auto;">';
                html += '</div>';
                
                html += '<div style="flex:1; border: 1px solid #444; padding: 5px; background: white; text-align:center;">';
                html += '<p style="color:black; font-weight:bold; margin-bottom:5px;">Modificado - Página ' + (i+1) + '</p>';
                if(data.images_b[i]) html += '<img src="data:image/png;base64,' + data.images_b[i] + '" style="max-width: 100%; height: auto;">';
                html += '</div>';
                html += '</div>';
            }
            resultArea.innerHTML = html;
        } else {
            alert("Erro ao comparar PDFs.");
        }
    } catch (error) {
        console.error(error);
        alert("Erro de conexão.");
    } finally {
        if(document.getElementById('submitBtn')) document.getElementById('submitBtn').style.display = 'block';
        if(document.getElementById('loading')) document.getElementById('loading').style.display = 'none';
    }
}

function toggleSplitMode() {
    const mode = document.getElementById('splitMode').value;
    if (mode === 'size') {
        document.getElementById('sizeModeParams').style.display = 'block';
        document.getElementById('intervalModeParams').style.display = 'none';
    } else {
        document.getElementById('sizeModeParams').style.display = 'none';
        document.getElementById('intervalModeParams').style.display = 'block';
    }
}

async function handleRepairSubmit(e) {
    e.preventDefault();
    const fd = new FormData();
    fd.append("file", document.getElementById('fileInput').files[0]);
    await genericPost('/repair', fd, 'reparado.pdf');
}

let quillEditor = null;
let currentEditorFile = null;

async function handleEditorLoad(e) {
    e.preventDefault();
    const file = document.getElementById('fileInput').files[0];
    if (!file) return;
    
    currentEditorFile = file;
    const fd = new FormData();
    fd.append("file", file);
    
    document.getElementById('submitBtn').style.display = 'none';
    document.getElementById('loading').style.display = 'block';
    
    try {
        const response = await fetch(API_URL + '/extract-html', { method: 'POST', body: fd });
        if (response.ok) {
            const data = await response.json();
            document.getElementById('editor-container').style.display = 'block';
            
            if (!quillEditor) {
                quillEditor = new Quill('#quill-editor', {
                    theme: 'snow',
                    modules: {
                        toolbar: [
                            [{ 'header': [1, 2, 3, false] }],
                            ['bold', 'italic', 'underline', 'strike'],
                            [{ 'color': [] }, { 'background': [] }],
                            [{ 'list': 'ordered'}, { 'list': 'bullet' }],
                            [{ 'align': [] }],
                            ['clean']
                        ]
                    }
                });
            }
            quillEditor.clipboard.dangerouslyPasteHTML(data.html || "");
        } else {
            alert("Erro ao extrair conteúdo.");
        }
    } catch (err) {
        alert("Erro de conexão.");
    } finally {
        document.getElementById('submitBtn').style.display = 'block';
        document.getElementById('loading').style.display = 'none';
    }
}

async function triggerAIActions(action, param) {
    const file = document.getElementById('fileInput').files[0];
    if (!file) {
        alert("Selecione um arquivo PDF primeiro!");
        return;
    }
    
    const fd = new FormData();
    fd.append("file", file);
    
    if (action === 'summarize') {
        fd.append("length", param);
    } else if (action === 'translate') {
        fd.append("lang", document.getElementById('translate-lang').value);
    }
    
    document.getElementById('loading').style.display = 'block';
    document.getElementById('resultContainer').style.display = 'none';
    
    try {
        const response = await fetch(API_URL + '/' + action, { method: 'POST', body: fd });
        if (response.ok) {
            const data = await response.json();
            document.getElementById('resultContainer').style.display = 'block';
            document.getElementById('previewArea').innerHTML = data.html || "";
        } else {
            let errMsg = "Erro na inteligência artificial.";
            try {
                const errData = await response.json();
                errMsg += " Detalhes: " + (errData.detail || errData.error || "");
            } catch(e) {}
            alert(errMsg);
        }
    } catch (err) {
        alert("Erro de conexão.");
    } finally {
        document.getElementById('loading').style.display = 'none';
    }
}

async function downloadBackendPDF(html, defaultName) {
    const fd = new FormData();
    fd.append("html_content", html);
    
    // Mostra um aviso enquanto baixa
    const btn = document.activeElement;
    const oldText = btn ? btn.innerText : "";
    if (btn) btn.innerText = "⏳ Gerando...";
    
    try {
        const response = await fetch(API_URL + '/export-pdf', {
            method: 'POST',
            body: fd
        });
        
        if (response.ok) {
            const blob = await response.blob();
            const url = window.URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.style.display = 'none';
            a.href = url;
            a.download = defaultName;
            document.body.appendChild(a);
            a.click();
            window.URL.revokeObjectURL(url);
            a.remove();
        } else {
            alert("Erro ao exportar o PDF pelo servidor.");
        }
    } catch(err) {
        alert("Erro de conexão ao exportar PDF.");
    } finally {
        if (btn) btn.innerText = oldText;
    }
}

function downloadPreviewPDF(defaultName) {
    const content = document.getElementById('previewArea');
    if (!content) return;
    downloadBackendPDF(content.innerHTML, defaultName);
}

function downloadEditorPDF() {
    if (!quillEditor) return;
    const content = document.querySelector('.ql-editor').innerHTML;
    downloadBackendPDF(content, 'SOPDF_Editado.pdf');
}