{% extends "base.html" %}
{% block title %}Import - QBO Excel Sync{% endblock %}
{% block content %}
<div class="import-page">
    <div class="page-header">
        <h2>Import Excel Data</h2>
        <p>Upload your Excel file and map fields to QuickBooks Online.</p>
    </div>

    {% if not is_connected %}
    <div class="alert alert-warning">
        <strong>Not Connected</strong> - Please <a href="{{ url_for('connection') }}">connect to QuickBooks Online</a> first.
    </div>
    {% endif %}

    <div class="import-layout">
        <section class="card">
            <div class="card-header"><h3>1. Upload Excel File</h3></div>
            <div class="card-body">
                <div class="file-upload-area" id="upload-area">
                    <input type="file" id="file-input" accept=".xlsx,.xls" hidden>
                    <div class="upload-placeholder">
                        <p>Drag & drop your Excel file here, or <span class="upload-link">browse</span></p>
                        <small>Supports .xlsx and .xls files</small>
                    </div>
                </div>
                <div class="file-info" id="file-info" hidden>
                    <span class="file-name" id="file-name"></span>
                    <span class="file-meta" id="file-meta"></span>
                    <button type="button" class="btn btn-sm" id="remove-file">Remove</button>
                </div>
            </div>
        </section>

        <section class="card" id="config-section" hidden>
            <div class="card-header"><h3>2. Configure Import</h3></div>
            <div class="card-body">
                <div class="config-row">
                    <div class="form-group">
                        <label for="sheet-select">Sheet</label>
                        <select id="sheet-select"></select>
                    </div>
                    <div class="form-group">
                        <label for="data-type-select">Import As</label>
                        <select id="data-type-select">
                            <option value="check">Check</option>
                            <option value="invoice">Invoice</option>
                            <option value="bill">Bill</option>
                            <option value="customer">Customer</option>
                            <option value="vendor">Vendor</option>
                            <option value="account">Chart of Accounts</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="template-select">Template</label>
                        <select id="template-select">
                            <option value="">Default Template</option>
                            {% for template in templates %}
                            <option value="{{ template.name }}">{{ template.name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>
            </div>
        </section>

        <section class="card tabs-section" id="tabs-section" hidden>
            <div class="tabs-header">
                <button class="tab-btn active" data-tab="preview">Preview</button>
                <button class="tab-btn" data-tab="mapping">Mapping</button>
                <button class="tab-btn" data-tab="validation">Validation</button>
            </div>
            <div class="tab-content active" id="tab-preview">
                <div class="tab-toolbar">
                    <span id="preview-count">0 rows</span>
                    <button class="btn btn-sm btn-secondary" id="refresh-preview">
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <polyline points="23 4 23 10 17 10"/>
                            <path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/>
                        </svg>
                        Refresh File
                    </button>
                </div>
                <div class="table-container">
                    <table class="data-table" id="preview-table"><thead></thead><tbody></tbody></table>
                </div>
            </div>
            <div class="tab-content" id="tab-mapping">
                <div class="tab-toolbar">
                    <button class="btn btn-sm btn-secondary" id="auto-map">Auto-Map</button>
                </div>
                <div class="table-container">
                    <table class="data-table" id="mapping-table">
                        <thead><tr><th>Excel Column</th><th>QBO Field</th><th>Transform</th><th>Required</th><th>Default</th><th></th></tr></thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
            <div class="tab-content" id="tab-validation">
                <div class="validation-summary" id="validation-summary"><p>Click Validate to check data.</p></div>
                <div class="table-container">
                    <table class="data-table" id="validation-table">
                        <thead><tr><th>Row</th><th>Column</th><th>Field</th><th>Issue</th><th>Value</th></tr></thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </section>

        <section class="card" id="actions-section" hidden>
            <div class="card-body">
                <div class="progress-section" id="import-progress" hidden>
                    <div class="progress-header">
                        <span id="progress-text">Processing...</span>
                        <span id="progress-percentage">0%</span>
                    </div>
                    <div class="progress-bar"><div class="progress-fill" id="progress-fill"></div></div>
                    <div class="progress-details" id="progress-details"></div>
                </div>
                <div class="actions-row">
                    <button class="btn btn-secondary" id="validate-btn" {% if not is_connected %}disabled{% endif %}>Validate</button>
                    <button class="btn btn-primary" id="import-btn" {% if not is_connected %}disabled{% endif %}>Import to QuickBooks</button>
                </div>
            </div>
        </section>

        <section class="card" id="log-section" hidden>
            <div class="card-header">
                <h3>Import Log</h3>
                <div class="log-actions">
                    <button class="btn btn-sm btn-secondary" onclick="exportLog()">
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
                            <polyline points="7 10 12 15 17 10"/>
                            <line x1="12" y1="15" x2="12" y2="3"/>
                        </svg>
                        Export Log
                    </button>
                    <button class="btn btn-sm btn-secondary" onclick="clearLog()">
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <polyline points="3 6 5 6 21 6"/>
                            <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
                        </svg>
                        Clear Log
                    </button>
                </div>
            </div>
            <div class="card-body">
                <div class="log-output" id="log-output"></div>
            </div>
        </section>
    </div>
</div>

<style>
/* Enhanced Progress Section */
.progress-section {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
}

.progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

#progress-text {
    font-weight: 500;
    color: #334155;
}

#progress-percentage {
    font-weight: 600;
    color: #2563eb;
    font-size: 14px;
}

.progress-bar {
    height: 8px;
    background: #e2e8f0;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 12px;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #2563eb);
    border-radius: 4px;
    width: 0%;
    transition: width 0.3s ease;
}

.progress-details {
    max-height: 200px;
    overflow-y: auto;
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 12px;
    background: #1e293b;
    color: #e2e8f0;
    border-radius: 6px;
    padding: 12px;
}

.progress-details:empty {
    display: none;
}

.progress-item {
    padding: 4px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.progress-item:last-child {
    border-bottom: none;
}

.progress-item.success {
    color: #4ade80;
}

.progress-item.error {
    color: #f87171;
}

.progress-item.processing {
    color: #60a5fa;
}

.progress-item .row-num {
    color: #94a3b8;
    min-width: 60px;
}

.progress-item .status-icon {
    min-width: 20px;
}

/* Enhanced Log Styling */
.log-output {
    background: #1e293b;
    color: #e2e8f0;
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 12px;
    padding: 16px;
    border-radius: 8px;
    max-height: 400px;
    overflow-y: auto;
    line-height: 1.6;
}

.log-actions {
    display: flex;
    gap: 8px;
}

.log-actions .btn {
    display: flex;
    align-items: center;
    gap: 6px;
}

.log-output > div {
    padding: 2px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.log-output > div:last-child {
    border-bottom: none;
}

.log-timestamp {
    color: #64748b;
    margin-right: 8px;
}

.log-level {
    font-weight: 600;
    margin-right: 8px;
}

.log-info {
    color: #e2e8f0;
}

.log-info .log-level {
    color: #60a5fa;
}

.log-warning {
    color: #fef3c7;
}

.log-warning .log-level {
    color: #fbbf24;
}

.log-error {
    color: #fecaca;
}

.log-error .log-level {
    color: #f87171;
}

/* Make log scrollbar visible */
.log-output::-webkit-scrollbar {
    width: 8px;
}

.log-output::-webkit-scrollbar-track {
    background: #334155;
    border-radius: 4px;
}

.log-output::-webkit-scrollbar-thumb {
    background: #64748b;
    border-radius: 4px;
}

.log-output::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}
</style>
{% endblock %}

{% block extra_js %}
<script>
let currentFile = null;
let excelColumns = [];
let currentMappings = [];

document.addEventListener('DOMContentLoaded', function() {
    const uploadArea = document.getElementById('upload-area');
    const fileInput = document.getElementById('file-input');

    uploadArea.addEventListener('click', () => fileInput.click());
    uploadArea.addEventListener('dragover', (e) => { e.preventDefault(); uploadArea.classList.add('dragover'); });
    uploadArea.addEventListener('dragleave', () => uploadArea.classList.remove('dragover'));
    uploadArea.addEventListener('drop', (e) => {
        e.preventDefault();
        uploadArea.classList.remove('dragover');
        if (e.dataTransfer.files.length > 0) handleFileUpload(e.dataTransfer.files[0]);
    });
    fileInput.addEventListener('change', (e) => {
        if (e.target.files.length > 0) handleFileUpload(e.target.files[0]);
    });

    document.getElementById('remove-file').addEventListener('click', async () => {
        // Clear the file input so the same file can be selected again
        document.getElementById('file-input').value = '';
        
        // Clear session on server
        try {
            await fetch('/api/file/clear', { method: 'POST' });
        } catch (e) {
            console.log('Could not clear server session:', e);
        }
        
        currentFile = null;
        excelColumns = [];
        currentMappings = [];
        
        document.getElementById('file-info').hidden = true;
        document.querySelector('.upload-placeholder').hidden = false;
        document.getElementById('config-section').hidden = true;
        document.getElementById('tabs-section').hidden = true;
        document.getElementById('actions-section').hidden = true;
        document.getElementById('log-section').hidden = true;
        
        // Clear preview and log
        document.getElementById('preview-table').querySelector('thead').innerHTML = '';
        document.getElementById('preview-table').querySelector('tbody').innerHTML = '';
        document.getElementById('log-output').innerHTML = '';
        
        showToast('File removed', 'info');
    });

    document.querySelectorAll('.tab-btn').forEach(btn => {
        btn.addEventListener('click', () => {
            document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
            document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
            btn.classList.add('active');
            document.getElementById('tab-' + btn.dataset.tab).classList.add('active');
        });
    });

    document.getElementById('sheet-select').addEventListener('change', loadPreview);
    document.getElementById('data-type-select').addEventListener('change', loadDefaultMappings);
    document.getElementById('template-select').addEventListener('change', loadTemplateMappings);
    document.getElementById('validate-btn').addEventListener('click', validateData);
    document.getElementById('import-btn').addEventListener('click', importData);
    document.getElementById('auto-map').addEventListener('click', autoMap);
    document.getElementById('refresh-preview').addEventListener('click', refreshFile);
});

async function handleFileUpload(file) {
    const formData = new FormData();
    formData.append('file', file);
    
    try {
        const response = await fetch('/api/upload', { method: 'POST', body: formData });
        const result = await response.json();

        if (result.success) {
            currentFile = result;
            excelColumns = result.columns;
            document.getElementById('file-info').hidden = false;
            document.getElementById('file-name').textContent = result.filename;
            document.getElementById('file-meta').textContent = result.sheets.length + ' sheets, ' + result.columns.length + ' columns';
            document.querySelector('.upload-placeholder').hidden = true;

            const sheetSelect = document.getElementById('sheet-select');
            sheetSelect.innerHTML = result.sheets.map(s => '<option value="' + s + '">' + s + '</option>').join('');

            document.getElementById('config-section').hidden = false;
            document.getElementById('tabs-section').hidden = false;
            document.getElementById('actions-section').hidden = false;
            document.getElementById('log-section').hidden = false;

            loadPreview();
            loadDefaultMappings();
            showToast('File uploaded successfully', 'success');
        } else {
            showToast(result.error || 'Upload failed', 'error');
        }
    } catch (error) {
        showToast('Upload error: ' + error.message, 'error');
    }
}

async function loadPreview() {
    const sheet = document.getElementById('sheet-select').value;
    try {
        // Load all rows (max_rows=0 means no limit)
        const response = await fetch('/api/file/preview?sheet=' + encodeURIComponent(sheet) + '&max_rows=0');
        const result = await response.json();
        if (result.success) {
            excelColumns = result.columns;
            renderPreviewTable(result.columns, result.data);
            document.getElementById('preview-count').textContent = result.row_count + ' rows total';
        }
    } catch (error) {
        showToast('Error loading preview: ' + error.message, 'error');
    }
}

function renderPreviewTable(columns, data) {
    const table = document.getElementById('preview-table');
    table.querySelector('thead').innerHTML = '<tr>' + columns.map(c => '<th>' + escapeHtml(c) + '</th>').join('') + '</tr>';
    table.querySelector('tbody').innerHTML = data.map(row => 
        '<tr>' + columns.map(c => '<td>' + escapeHtml(row[c] || '') + '</td>').join('') + '</tr>'
    ).join('');
}

async function loadDefaultMappings() {
    const dataType = document.getElementById('data-type-select').value;
    try {
        const response = await fetch('/api/templates/default/' + dataType);
        const result = await response.json();
        if (result.success) {
            currentMappings = result.template.mappings;
            renderMappingTable();
        }
    } catch (error) { console.error('Error loading mappings:', error); }
}

async function loadTemplateMappings() {
    const templateName = document.getElementById('template-select').value;
    if (!templateName) { loadDefaultMappings(); return; }
    try {
        const response = await fetch('/api/templates');
        const result = await response.json();
        if (result.success) {
            const template = result.templates.find(t => t.name === templateName);
            if (template) { currentMappings = template.mappings; renderMappingTable(); }
        }
    } catch (error) { console.error('Error loading template:', error); }
}

function renderMappingTable() {
    const tbody = document.getElementById('mapping-table').querySelector('tbody');
    tbody.innerHTML = currentMappings.map((m, i) => 
        '<tr data-index="' + i + '">' +
        '<td><select class="mapping-column" data-field="excel_column"><option value="">--</option>' + 
        excelColumns.map(c => '<option value="' + escapeHtml(c) + '"' + (m.excel_column === c ? ' selected' : '') + '>' + escapeHtml(c) + '</option>').join('') + '</select></td>' +
        '<td><input type="text" data-field="qbo_field" value="' + escapeHtml(m.qbo_field || '') + '"></td>' +
        '<td><select data-field="transform"><option value="">None</option><option value="date"' + (m.transform === 'date' ? ' selected' : '') + '>Date</option><option value="currency"' + (m.transform === 'currency' ? ' selected' : '') + '>Currency</option><option value="number"' + (m.transform === 'number' ? ' selected' : '') + '>Number</option></select></td>' +
        '<td><input type="checkbox" data-field="required"' + (m.required ? ' checked' : '') + '></td>' +
        '<td><input type="text" data-field="default_value" value="' + escapeHtml(m.default_value || '') + '"></td>' +
        '<td><button class="btn btn-sm remove-mapping">X</button></td></tr>'
    ).join('');

    tbody.querySelectorAll('input, select').forEach(el => el.addEventListener('change', updateMappingFromTable));
    tbody.querySelectorAll('.remove-mapping').forEach(btn => {
        btn.addEventListener('click', (e) => {
            const row = e.target.closest('tr');
            currentMappings.splice(parseInt(row.dataset.index), 1);
            renderMappingTable();
        });
    });
}

function updateMappingFromTable() {
    const tbody = document.getElementById('mapping-table').querySelector('tbody');
    currentMappings = [];
    tbody.querySelectorAll('tr').forEach(row => {
        currentMappings.push({
            excel_column: row.querySelector('[data-field="excel_column"]').value,
            qbo_field: row.querySelector('[data-field="qbo_field"]').value,
            transform: row.querySelector('[data-field="transform"]').value || null,
            required: row.querySelector('[data-field="required"]').checked,
            default_value: row.querySelector('[data-field="default_value"]').value || null
        });
    });
}

function autoMap() {
    const colsLower = excelColumns.map(c => c.toLowerCase());
    currentMappings.forEach(m => {
        if (!m.excel_column) {
            const qbo = m.qbo_field.toLowerCase();
            for (let i = 0; i < colsLower.length; i++) {
                if (colsLower[i].includes(qbo) || qbo.includes(colsLower[i])) { m.excel_column = excelColumns[i]; break; }
            }
        }
    });
    renderMappingTable();
    showToast('Auto-mapping complete', 'success');
}

async function validateData() {
    updateMappingFromTable();
    showProgress('Validating...');
    addLog('info', 'Starting validation...');
    
    try {
        const response = await fetch('/api/validate', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ sheet: document.getElementById('sheet-select').value, mappings: currentMappings })
        });
        const result = await response.json();
        hideProgress();
        
        if (result.success === false) {
            addLog('error', 'Validation failed: ' + (result.error || 'Unknown error'));
            if (result.details) {
                addLog('error', 'Details: ' + result.details);
            }
            showToast(result.error || 'Validation failed', 'error');
            return;
        }
        
        const summary = document.getElementById('validation-summary');
        summary.innerHTML = '<div class="validation-stats"><strong>Total:</strong> ' + result.total_rows + ' | <strong>Valid:</strong> ' + result.valid_rows + ' | <strong>Errors:</strong> ' + result.error_count + ' | <strong>Warnings:</strong> ' + (result.warning_count || 0) + '</div>';
        
        const tbody = document.getElementById('validation-table').querySelector('tbody');
        tbody.innerHTML = (result.issues || []).map(issue => 
            '<tr class="' + issue.severity + '"><td>' + issue.row + '</td><td>' + escapeHtml(issue.column) + '</td><td>' + escapeHtml(issue.field) + '</td><td>' + escapeHtml(issue.message) + '</td><td>' + escapeHtml(issue.value || '') + '</td></tr>'
        ).join('');
        
        document.querySelector('[data-tab="validation"]').click();
        
        // Log validation summary
        addLog('info', 'Validation complete: ' + result.valid_rows + '/' + result.total_rows + ' valid rows');
        if (result.error_count > 0) {
            addLog('warning', 'Found ' + result.error_count + ' error(s) that will prevent import');
        }
        if (result.warning_count > 0) {
            addLog('warning', 'Found ' + (result.warning_count || 0) + ' warning(s)');
        }
        
        // Log first few issues for visibility
        (result.issues || []).slice(0, 5).forEach(issue => {
            addLog(issue.severity, 'Row ' + issue.row + ', ' + issue.field + ': ' + issue.message);
        });
        if ((result.issues || []).length > 5) {
            addLog('info', '... and ' + (result.issues.length - 5) + ' more issues (see Validation tab)');
        }
        
        showToast('Validation complete', result.error_count > 0 ? 'warning' : 'success');
    } catch (error) {
        hideProgress();
        addLog('error', 'Validation request failed: ' + error.message);
        addLog('error', 'Stack: ' + (error.stack || 'N/A'));
        showToast('Validation error: ' + error.message, 'error');
    }
}

async function importData() {
    updateMappingFromTable();
    if (!confirm('Import data to QuickBooks Online? This cannot be undone.')) return;
    
    showProgress('Preparing import...', 0, 0);
    clearProgressDetails();
    
    addLog('info', '════════════════════════════════════════════════════════════');
    addLog('info', 'IMPORT STARTED');
    addLog('info', '════════════════════════════════════════════════════════════');
    addLog('info', 'Data type: ' + document.getElementById('data-type-select').value);
    addLog('info', 'Sheet: ' + document.getElementById('sheet-select').value);
    addLog('info', 'Mappings: ' + currentMappings.filter(m => m.qbo_field).length + ' fields mapped');
    addLog('info', '────────────────────────────────────────────────────────────');
    
    try {
        // Start the import job
        const startResponse = await fetch('/api/import/start', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
                sheet: document.getElementById('sheet-select').value,
                data_type: document.getElementById('data-type-select').value,
                mappings: currentMappings
            })
        });
        
        const startResult = await startResponse.json();
        
        if (!startResult.success) {
            hideProgress();
            addLog('error', 'Import start failed: ' + (startResult.error || 'Unknown error'));
            showToast(startResult.error || 'Import failed to start', 'error');
            return;
        }
        
        const jobId = startResult.job_id;
        const totalRecords = startResult.total_records;
        
        addLog('info', 'Import job started: ' + jobId);
        addLog('info', 'Total records to process: ' + totalRecords);
        addProgressItem('processing', 0, 'Starting import of ' + totalRecords + ' records...');
        
        // Poll for progress
        let completed = false;
        let lastProcessed = 0;
        
        while (!completed) {
            await sleep(500); // Poll every 500ms
            
            const progressResponse = await fetch('/api/import/progress/' + jobId);
            const progress = await progressResponse.json();
            
            if (!progress.success) {
                hideProgress();
                addLog('error', 'Error checking progress: ' + progress.error);
                showToast('Error checking import progress', 'error');
                return;
            }
            
            // Update progress bar
            const percentage = totalRecords > 0 ? Math.round((progress.processed / totalRecords) * 100) : 0;
            updateProgress('Importing records...', progress.processed, totalRecords);
            
            // Show new record results
            if (progress.recent_results && progress.recent_results.length > 0) {
                progress.recent_results.forEach(result => {
                    if (result.row > lastProcessed) {
                        if (result.status === 'success') {
                            addProgressItem('success', result.row, 'Created ' + result.data_type + ' ID ' + result.qbo_id);
                            addLog('info', 'Row ' + result.row + ': SUCCESS - Created ID ' + result.qbo_id);
                        } else if (result.status === 'failed') {
                            addProgressItem('error', result.row, result.error);
                            addLog('error', 'Row ' + result.row + ': FAILED - ' + result.error);
                            if (result.key_fields) {
                                addLog('error', 'Row ' + result.row + ': Data - ' + result.key_fields);
                            }
                        } else if (result.status === 'duplicate') {
                            addProgressItem('warning', result.row, 'Skipped (duplicate)');
                            addLog('warning', 'Row ' + result.row + ': SKIPPED - Duplicate');
                        } else if (result.status === 'skipped') {
                            addProgressItem('warning', result.row, 'Skipped - ' + (result.error || 'Unknown reason'));
                            addLog('warning', 'Row ' + result.row + ': SKIPPED - ' + (result.error || 'Unknown'));
                        }
                        lastProcessed = result.row;
                    }
                });
            }
            
            // Check if completed
            if (progress.status === 'completed' || progress.status === 'failed') {
                completed = true;
                
                // Get final result
                const finalResponse = await fetch('/api/import/result/' + jobId);
                const finalResult = await finalResponse.json();
                
                hideProgress();
                
                if (finalResult.success) {
                    displayImportResult(finalResult);
                } else {
                    addLog('error', 'Import failed: ' + (finalResult.error || 'Unknown error'));
                    showToast(finalResult.error || 'Import failed', 'error');
                }
            }
        }
        
    } catch (error) {
        hideProgress();
        addLog('error', '');
        addLog('error', '┌─── REQUEST ERROR ───');
        addLog('error', '│ Type: ' + error.name);
        addLog('error', '│ Message: ' + error.message);
        if (error.stack) {
            addLog('error', '│');
            addLog('error', '│ Stack:');
            error.stack.split('\n').forEach(line => {
                if (line.trim()) {
                    addLog('error', '│   ' + line);
                }
            });
        }
        addLog('error', '└─────────────────────');
        addLog('error', '');
        addLog('error', '════════════════════════════════════════════════════════════');
        addLog('error', 'IMPORT FAILED - REQUEST ERROR');
        addLog('error', '════════════════════════════════════════════════════════════');
        
        showToast('Import error: ' + error.message, 'error');
    }
}

function displayImportResult(result) {
    // Log summary
    addLog('info', '');
    addLog('info', '┌─── IMPORT SUMMARY ───');
    addLog('info', '│ Total records:     ' + result.total_records);
    addLog('info', '│ Successful:        ' + result.successful + ' ✓');
    if (result.failed > 0) {
        addLog('error', '│ Failed:            ' + result.failed + ' ✗');
    } else {
        addLog('info', '│ Failed:            ' + result.failed);
    }
    addLog('info', '│ Duplicates:        ' + result.duplicates);
    addLog('info', '│ Skipped:           ' + result.skipped);
    addLog('info', '│ Success rate:      ' + (result.success_rate || 0).toFixed(1) + '%');
    addLog('info', '│ Duration:          ' + (result.duration_seconds || 0).toFixed(2) + ' seconds');
    addLog('info', '└──────────────────────');
    addLog('info', '');
    addLog('info', '════════════════════════════════════════════════════════════');
    addLog('info', 'IMPORT COMPLETED');
    addLog('info', '════════════════════════════════════════════════════════════');
    
    showToast('Imported ' + result.successful + ' records successfully', result.failed > 0 ? 'warning' : 'success');
    
    let alertMsg = 'Import Complete!\n\n';
    alertMsg += '✓ Successful: ' + result.successful + '\n';
    alertMsg += '✗ Failed: ' + result.failed + '\n';
    alertMsg += '⊘ Duplicates: ' + result.duplicates + '\n';
    alertMsg += '○ Skipped: ' + result.skipped + '\n\n';
    alertMsg += 'Success Rate: ' + (result.success_rate || 0).toFixed(1) + '%';
    
    if (result.failed > 0) {
        alertMsg += '\n\n⚠ Check the Import Log for failed record details.';
    }
    
    alert(alertMsg);
}

function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

function showProgress(text, current, total) {
    document.getElementById('import-progress').hidden = false;
    document.getElementById('progress-text').textContent = text;
    
    const percentage = total > 0 ? Math.round((current / total) * 100) : 0;
    document.getElementById('progress-percentage').textContent = percentage + '%';
    document.getElementById('progress-fill').style.width = percentage + '%';
}

function updateProgress(text, current, total) {
    document.getElementById('progress-text').textContent = text + ' (' + current + '/' + total + ')';
    
    const percentage = total > 0 ? Math.round((current / total) * 100) : 0;
    document.getElementById('progress-percentage').textContent = percentage + '%';
    document.getElementById('progress-fill').style.width = percentage + '%';
}

function hideProgress() {
    document.getElementById('import-progress').hidden = true;
}

function clearProgressDetails() {
    document.getElementById('progress-details').innerHTML = '';
}

function addProgressItem(status, row, message) {
    const details = document.getElementById('progress-details');
    let icon = '⋯';
    if (status === 'success') icon = '✓';
    else if (status === 'error') icon = '✗';
    else if (status === 'warning') icon = '⚠';
    else if (status === 'processing') icon = '→';
    
    const item = document.createElement('div');
    item.className = 'progress-item ' + status;
    item.innerHTML = '<span class="status-icon">' + icon + '</span>' +
                     '<span class="row-num">Row ' + row + ':</span>' +
                     '<span class="message">' + escapeHtml(message) + '</span>';
    
    details.appendChild(item);
    details.scrollTop = details.scrollHeight;
}

function addLog(level, msg) {
    const log = document.getElementById('log-output');
    const now = new Date();
    const timestamp = now.toLocaleTimeString('en-US', { hour12: false }) + '.' + String(now.getMilliseconds()).padStart(3, '0');
    const levelClass = level === 'error' ? 'log-error' : (level === 'warning' ? 'log-warning' : 'log-info');
    const levelLabel = level.toUpperCase().padEnd(7);
    log.innerHTML += '<div class="' + levelClass + '"><span class="log-timestamp">' + timestamp + '</span> <span class="log-level">[' + levelLabel + ']</span> ' + escapeHtml(msg) + '</div>';
    log.scrollTop = log.scrollHeight;
}

function clearLog() {
    document.getElementById('log-output').innerHTML = '';
}

function exportLog() {
    const logOutput = document.getElementById('log-output');
    if (!logOutput || logOutput.innerHTML.trim() === '') {
        showToast('No log content to export', 'warning');
        return;
    }
    
    // Extract text content from log entries
    const logEntries = logOutput.querySelectorAll('div');
    let logText = '';
    
    // Add header
    const now = new Date();
    logText += '═══════════════════════════════════════════════════════════════\n';
    logText += 'QBO EXCEL SYNC - IMPORT LOG\n';
    logText += '═══════════════════════════════════════════════════════════════\n';
    logText += 'Exported: ' + now.toLocaleString() + '\n';
    logText += 'File: ' + (document.getElementById('file-name')?.textContent || 'N/A') + '\n';
    logText += 'Data Type: ' + (document.getElementById('data-type-select')?.value || 'N/A') + '\n';
    logText += 'Sheet: ' + (document.getElementById('sheet-select')?.value || 'N/A') + '\n';
    logText += '═══════════════════════════════════════════════════════════════\n\n';
    
    // Extract log entries
    logEntries.forEach(entry => {
        const timestamp = entry.querySelector('.log-timestamp')?.textContent || '';
        const level = entry.querySelector('.log-level')?.textContent || '';
        const message = entry.textContent.replace(timestamp, '').replace(level, '').trim();
        logText += timestamp + ' ' + level + ' ' + message + '\n';
    });
    
    // Add footer
    logText += '\n═══════════════════════════════════════════════════════════════\n';
    logText += 'END OF LOG\n';
    logText += '═══════════════════════════════════════════════════════════════\n';
    
    // Create and download file
    const blob = new Blob([logText], { type: 'text/plain;charset=utf-8' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    
    // Generate filename with timestamp
    const filename = 'import_log_' + now.toISOString().replace(/[:.]/g, '-').slice(0, 19) + '.txt';
    a.download = filename;
    
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
    
    showToast('Log exported to ' + filename, 'success');
}

async function refreshFile() {
    if (!currentFile) {
        showToast('No file loaded', 'warning');
        return;
    }
    
    // Check if we have the original file in the file input
    const fileInput = document.getElementById('file-input');
    
    if (fileInput.files && fileInput.files.length > 0) {
        // Try to re-read the file from the file input
        showToast('Re-reading file...', 'info');
        addLog('info', 'Re-reading file from disk...');
        
        const file = fileInput.files[0];
        
        // Check if file is still accessible by trying to read it
        try {
            // First, try to read a small portion to verify the file is accessible
            const testReader = new FileReader();
            const testPromise = new Promise((resolve, reject) => {
                testReader.onload = () => resolve(true);
                testReader.onerror = () => reject(new Error('File is no longer accessible. It may have been moved, deleted, or modified. Please re-select the file.'));
                testReader.readAsArrayBuffer(file.slice(0, 100));
            });
            
            await testPromise;
            
            // File is accessible, proceed with upload
            const formData = new FormData();
            formData.append('file', file);
            
            const response = await fetch('/api/upload', { method: 'POST', body: formData });
            
            if (!response.ok) {
                throw new Error('Server returned ' + response.status);
            }
            
            const result = await response.json();
            
            if (result.success) {
                currentFile = result;
                excelColumns = result.columns;
                
                // Update sheet select
                const sheetSelect = document.getElementById('sheet-select');
                const currentSheet = sheetSelect.value;
                sheetSelect.innerHTML = result.sheets.map(s => '<option value="' + s + '"' + (s === currentSheet ? ' selected' : '') + '>' + s + '</option>').join('');
                
                // Update file meta
                document.getElementById('file-meta').textContent = result.sheets.length + ' sheets, ' + result.columns.length + ' columns';
                
                // Reload preview
                await loadPreview();
                
                // Update mapping table
                renderMappingTable();
                
                addLog('info', 'File re-read successfully: ' + result.columns.length + ' columns, ' + result.sheets.length + ' sheets');
                showToast('File refreshed from disk', 'success');
            } else {
                addLog('error', 'Refresh failed: ' + (result.error || 'Unknown error'));
                showToast(result.error || 'Refresh failed', 'error');
            }
        } catch (error) {
            // File might have changed on disk - prompt user to re-select
            addLog('warning', 'Could not read file: ' + error.message);
            addLog('info', 'Please re-select the file to load the updated content.');
            
            const reselect = confirm(
                'The file may have been modified or moved.\n\n' +
                'Would you like to re-select the file to load the updated content?\n\n' +
                'Click OK to select the file again, or Cancel to try server-side refresh.'
            );
            
            if (reselect) {
                // Trigger file selection dialog
                fileInput.value = ''; // Clear to allow same file selection
                fileInput.click();
                showToast('Please select the updated file', 'info');
            } else {
                // Try server-side refresh as fallback
                await refreshFromServer();
            }
        }
    } else {
        // No file in input, use server-side refresh
        await refreshFromServer();
    }
}

async function refreshFromServer() {
    showToast('Refreshing from server...', 'info');
    addLog('info', 'Refreshing uploaded file from server...');
    
    try {
        const response = await fetch('/api/file/refresh', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' }
        });
        
        if (!response.ok) {
            throw new Error('Server returned ' + response.status);
        }
        
        const result = await response.json();
        
        if (result.success) {
            excelColumns = result.columns;
            
            const sheetSelect = document.getElementById('sheet-select');
            const currentSheet = sheetSelect.value;
            sheetSelect.innerHTML = result.sheets.map(s => '<option value="' + s + '"' + (s === currentSheet ? ' selected' : '') + '>' + s + '</option>').join('');
            
            document.getElementById('file-meta').textContent = result.sheets.length + ' sheets, ' + result.columns.length + ' columns';
            
            await loadPreview();
            renderMappingTable();
            
            addLog('info', 'File refreshed successfully: ' + result.columns.length + ' columns found');
            showToast('File refreshed successfully', 'success');
        } else {
            addLog('error', 'Refresh failed: ' + (result.error || 'Unknown error'));
            showToast(result.error || 'Refresh failed', 'error');
        }
    } catch (error) {
        addLog('error', 'Server refresh error: ' + error.message);
        showToast('Refresh error: ' + error.message, 'error');
    }
}

function escapeHtml(text) { if (!text) return ''; const d = document.createElement('div'); d.textContent = String(text); return d.innerHTML; }
</script>
{% endblock %}