{% extends "base.html" %}

{% block title %}Data Import - Delphi Database{% endblock %}

{% block content %}
<div class="space-y-6">
    <!-- Page Header -->
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div class="flex items-center gap-3">
            <div class="flex items-center justify-center w-10 h-10 bg-primary-100 dark:bg-primary-900/30 text-primary-600 dark:text-primary-400 rounded-xl">
                <i class="fa-solid fa-upload text-lg"></i>
            </div>
            <h1 class="text-2xl font-bold text-neutral-900 dark:text-neutral-100">Data Import</h1>
        </div>
        <div class="flex items-center gap-3">
            <button id="refreshStatusBtn" class="bg-info-600 text-white hover:bg-info-700 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors duration-200 flex items-center gap-2">
                <i class="fa-solid fa-rotate-right"></i>
                <span>Refresh Status</span>
            </button>
        </div>
    </div>

    <!-- Import Status Panel -->
    <div class="bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-xl shadow-soft">
        <div class="px-6 py-4 border-b border-neutral-200 dark:border-neutral-700">
            <h5 class="text-lg font-semibold text-neutral-900 dark:text-neutral-100 flex items-center gap-2">
                <i class="fa-solid fa-circle-info"></i>
                <span>Current Database Status</span>
            </h5>
        </div>
        <div class="p-6">
            <div id="importStatus">
                <div class="flex items-center justify-center py-4 text-neutral-500 dark:text-neutral-400">
                    <i class="fa-solid fa-rotate-right animate-spin text-xl mr-2"></i>
                    <p>Loading import status...</p>
                </div>
            </div>
        </div>
    </div>

    <!-- CSV File Upload Panel -->
    <div class="bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-xl shadow-soft">
        <div class="px-6 py-4 border-b border-neutral-200 dark:border-neutral-700">
            <h5 class="text-lg font-semibold text-neutral-900 dark:text-neutral-100 flex items-center gap-2">
                <i class="fa-regular fa-file-arrow-up"></i>
                <span>Upload CSV Files</span>
            </h5>
        </div>
        <div class="p-6">
            <form id="importForm" enctype="multipart/form-data">
                <div class="grid grid-cols-1 md:grid-cols-12 gap-4">
                    <div class="md:col-span-4">
                        <label for="fileType" class="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-2">Data Type *</label>
                        <select class="w-full px-3 py-3 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded-lg text-neutral-900 dark:text-neutral-100 focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all duration-200" id="fileType" name="fileType" required>
                            <option value="">Select data type...</option>
                        </select>
                        <div class="text-sm text-neutral-500 dark:text-neutral-400 mt-1" id="fileTypeDescription"></div>
                    </div>
                    <div class="md:col-span-6">
                        <label for="csvFile" class="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-2">CSV File *</label>
                        <input type="file" class="w-full px-3 py-3 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded-lg text-neutral-900 dark:text-neutral-100 file:mr-4 file:py-2 file:px-4 file:rounded file:border-0 file:text-sm file:font-semibold file:bg-primary-100 file:text-primary-700 hover:file:bg-primary-200 transition-all duration-200" id="csvFile" name="csvFile" accept=".csv" required>
                        <div class="text-sm text-neutral-500 dark:text-neutral-400 mt-1">Select the CSV file to import</div>
                    </div>
                    <div class="md:col-span-2 flex items-end">
                        <label class="inline-flex items-center gap-2">
                            <input class="h-4 w-4 text-primary-600 border-neutral-300 rounded" type="checkbox" id="replaceExisting" name="replaceExisting">
                            <span>Replace existing data</span>
                        </label>
                    </div>
                </div>
                
                <div class="mt-4">
                    <div class="flex items-center gap-3">
                        <button type="button" class="px-4 py-2 bg-neutral-100 dark:bg-neutral-700 text-neutral-700 dark:text-neutral-300 hover:bg-neutral-200 dark:hover:bg-neutral-600 rounded-lg transition-colors duration-200 flex items-center gap-2" id="validateBtn">
                            <i class="fa-regular fa-circle-check"></i>
                            <span>Validate File</span>
                        </button>
                        <button type="submit" class="px-4 py-2 bg-primary-600 text-white hover:bg-primary-700 rounded-lg transition-colors duration-200 flex items-center gap-2" id="importBtn">
                            <i class="fa-solid fa-upload"></i>
                            <span>Import Data</span>
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Validation Results Panel -->
    <div class="bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-xl shadow-soft hidden" id="validationPanel">
        <div class="px-6 py-4 border-b border-neutral-200 dark:border-neutral-700">
            <h5 class="text-lg font-semibold text-neutral-900 dark:text-neutral-100 flex items-center gap-2">
                <i class="fa-solid fa-clipboard-check"></i>
                <span>File Validation Results</span>
            </h5>
        </div>
        <div class="p-6" id="validationResults">
            <!-- Validation results will be shown here -->
        </div>
    </div>

    <!-- Import Progress Panel -->
    <div class="bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-xl shadow-soft hidden" id="progressPanel">
        <div class="px-6 py-4 border-b border-neutral-200 dark:border-neutral-700">
            <h5 class="text-lg font-semibold text-neutral-900 dark:text-neutral-100 flex items-center gap-2">
                <i class="fa-solid fa-hourglass-half"></i>
                <span>Import Progress</span>
            </h5>
        </div>
        <div class="p-6">
            <div class="bg-neutral-200 dark:bg-neutral-700 rounded-full h-2 mb-3 overflow-hidden">
                <div class="bg-primary-600 h-full rounded-full transition-all duration-300" style="width: 0%" id="progressBar"></div>
            </div>
            <div id="progressStatus" class="text-sm text-neutral-600 dark:text-neutral-400">Ready to import...</div>
        </div>
    </div>

    <!-- Import Results Panel -->
    <div class="bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-xl shadow-soft hidden" id="resultsPanel">
        <div class="px-6 py-4 border-b border-neutral-200 dark:border-neutral-700">
            <h5 class="text-lg font-semibold text-neutral-900 dark:text-neutral-100 flex items-center gap-2">
                <i class="fa-solid fa-circle-check"></i>
                <span>Import Results</span>
            </h5>
        </div>
        <div class="p-6" id="importResults">
            <!-- Import results will be shown here -->
        </div>
    </div>

    <!-- Data Management Panel -->
    <div class="bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-xl shadow-soft">
        <div class="px-6 py-4 border-b border-neutral-200 dark:border-neutral-700">
            <h5 class="text-lg font-semibold text-neutral-900 dark:text-neutral-100 flex items-center gap-2">
                <i class="fa-solid fa-database"></i>
                <span>Data Management</span>
            </h5>
        </div>
        <div class="p-6">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <h6 class="text-base font-semibold mb-2">Clear Table Data</h6>
                    <p class="text-sm text-neutral-500 dark:text-neutral-400 mb-3">Remove all records from a specific table (cannot be undone)</p>
                    <div class="flex gap-3">
                        <select class="flex-grow px-3 py-3 bg-white dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 rounded-lg text-neutral-900 dark:text-neutral-100 focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all duration-200" id="clearTableType">
                            <option value="">Select table to clear...</option>
                        </select>
                        <button class="px-4 py-3 bg-danger-600 text-white hover:bg-danger-700 rounded-lg transition-colors duration-200 flex items-center gap-2 whitespace-nowrap" id="clearTableBtn">
                            <i class="fa-solid fa-trash"></i>
                            <span>Clear Table</span>
                        </button>
                    </div>
                </div>
                <div>
                    <h6 class="text-base font-semibold mb-2">Quick Actions</h6>
                    <div class="space-y-3">
                        <button class="w-full px-4 py-3 bg-neutral-100 dark:bg-neutral-700 text-neutral-700 dark:text-neutral-300 hover:bg-neutral-200 dark:hover:bg-neutral-600 rounded-lg transition-colors duration-200 flex items-center justify-center gap-2" id="backupBtn">
                            <i class="fa-solid fa-download"></i>
                            <span>Download Backup</span>
                        </button>
                        <button class="w-full px-4 py-3 bg-neutral-100 dark:bg-neutral-700 text-neutral-700 dark:text-neutral-300 hover:bg-neutral-200 dark:hover:bg-neutral-600 rounded-lg transition-colors duration-200 flex items-center justify-center gap-2" id="viewLogsBtn">
                            <i class="fa-regular fa-file-lines"></i>
                            <span>View Import Logs</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
// Import functionality
let availableFiles = {};
let importInProgress = false;

// Helper function for authenticated API calls
function getAuthHeaders() {
    const token = localStorage.getItem('auth_token');
    return {
        'Authorization': `Bearer ${token}`
    };
}

// Initialize on page load
document.addEventListener('DOMContentLoaded', function() {
    // Check authentication first
    const token = localStorage.getItem('auth_token');
    if (!token) {
        window.location.href = '/login';
        return;
    }
    
    loadAvailableFiles();
    loadImportStatus();
    setupEventListeners();
});

function setupEventListeners() {
    // Form submission
    document.getElementById('importForm').addEventListener('submit', handleImport);
    
    // Validation button
    document.getElementById('validateBtn').addEventListener('click', validateFile);
    
    // File type selection
    document.getElementById('fileType').addEventListener('change', updateFileTypeDescription);
    
    // Refresh status
    document.getElementById('refreshStatusBtn').addEventListener('click', loadImportStatus);
    
    // Clear table
    document.getElementById('clearTableBtn').addEventListener('click', clearTable);
    
    // Other buttons
    document.getElementById('backupBtn').addEventListener('click', downloadBackup);
    document.getElementById('viewLogsBtn').addEventListener('click', viewLogs);
}

async function loadAvailableFiles() {
    try {
        const response = await fetch('/api/import/available-files', {
            headers: getAuthHeaders()
        });
        
        if (!response.ok) throw new Error('Failed to load available files');
        
        const data = await response.json();
        availableFiles = data;
        
        // Populate file type dropdown
        const fileTypeSelect = document.getElementById('fileType');
        const clearTableSelect = document.getElementById('clearTableType');
        
        fileTypeSelect.innerHTML = '<option value="">Select data type...</option>';
        clearTableSelect.innerHTML = '<option value="">Select table to clear...</option>';
        
        data.available_files.forEach(fileType => {
            const description = data.descriptions[fileType] || fileType;
            
            const option1 = document.createElement('option');
            option1.value = fileType;
            option1.textContent = `${fileType} - ${description}`;
            fileTypeSelect.appendChild(option1);
            
            const option2 = document.createElement('option');
            option2.value = fileType;
            option2.textContent = `${fileType} - ${description}`;
            clearTableSelect.appendChild(option2);
        });
        
    } catch (error) {
        console.error('Error loading available files:', error);
        showAlert('Error loading available file types: ' + error.message, 'danger');
    }
}

async function loadImportStatus() {
    try {
        const response = await fetch('/api/import/status', {
            headers: getAuthHeaders()
        });
        
        if (!response.ok) throw new Error('Failed to load import status');
        
        const status = await response.json();
        displayImportStatus(status);
        
    } catch (error) {
        console.error('Error loading import status:', error);
        document.getElementById('importStatus').innerHTML = 
            '<div class="p-4 bg-danger-100 dark:bg-danger-900/30 text-danger-700 dark:text-danger-300 rounded-lg">Error loading import status: ' + error.message + '</div>';
    }
}

function displayImportStatus(status) {
    const container = document.getElementById('importStatus');
    
    let html = '<div class="grid grid-cols-1 md:grid-cols-3 gap-4">';
    let totalRecords = 0;
    
    Object.entries(status).forEach(([fileType, info]) => {
        totalRecords += info.record_count || 0;
        
        const statusClass = info.error ? 'danger' : (info.record_count > 0 ? 'success' : 'neutral');
        const statusBg = info.error ? 'bg-danger-100 dark:bg-danger-900/30 border-danger-200 dark:border-danger-800' : 
                         (info.record_count > 0 ? 'bg-success-100 dark:bg-success-900/30 border-success-200 dark:border-success-800' : 
                         'bg-neutral-100 dark:bg-neutral-900/30 border-neutral-200 dark:border-neutral-800');
    const statusIcon = info.error ? 'triangle-exclamation text-danger-600' : 
                           (info.record_count > 0 ? 'circle-check text-success-600' : 'circle text-neutral-600');
        
        html += `
            <div class="bg-white dark:bg-neutral-800 border ${statusBg} rounded-lg p-4">
                <div class="flex justify-between items-start">
                    <div>
                        <h6 class="font-semibold text-sm text-neutral-900 dark:text-neutral-100">${fileType}</h6>
                        <p class="text-xs text-neutral-600 dark:text-neutral-400">${info.table_name}</p>
                    </div>
                    <div class="text-right">
                        <i class="fa-solid fa-${statusIcon} text-lg"></i>
                        <p class="font-bold text-sm text-neutral-900 dark:text-neutral-100 mt-1">${info.record_count || 0}</p>
                    </div>
                </div>
                ${info.error ? `<p class="text-xs text-danger-600 dark:text-danger-400 mt-2">${info.error}</p>` : ''}
            </div>
        `;
    });
    
    html += '</div>';
    html += `<div class="mt-4 text-center">
        <span class="font-medium text-neutral-900 dark:text-neutral-100">Total Records: ${totalRecords.toLocaleString()}</span>
    </div>`;
    
    container.innerHTML = html;
}

function updateFileTypeDescription() {
    const fileType = document.getElementById('fileType').value;
    const description = availableFiles.descriptions && availableFiles.descriptions[fileType];
    document.getElementById('fileTypeDescription').textContent = description || '';
}

async function validateFile() {
    const fileType = document.getElementById('fileType').value;
    const fileInput = document.getElementById('csvFile');
    
    if (!fileType || !fileInput.files[0]) {
        showAlert('Please select both data type and CSV file', 'warning');
        return;
    }
    
    const formData = new FormData();
    formData.append('file', fileInput.files[0]);
    
    try {
        showProgress(true, 'Validating file...');
        
        const response = await fetch(`/api/import/validate/${fileType}`, {
            method: 'POST',
            headers: getAuthHeaders(),
            body: formData
        });
        
        if (!response.ok) {
            const error = await response.json();
            throw new Error(error.detail || 'Validation failed');
        }
        
        const result = await response.json();
        displayValidationResults(result);
        
    } catch (error) {
        console.error('Validation error:', error);
        showAlert('Validation failed: ' + error.message, 'danger');
    } finally {
        showProgress(false);
    }
}

function displayValidationResults(result) {
    const panel = document.getElementById('validationPanel');
    const container = document.getElementById('validationResults');
    
    let html = '';
    
    // Overall status
    const statusClass = result.valid ? 'success' : 'danger';
    const statusIcon = result.valid ? 'circle-check text-success-600' : 'triangle-exclamation text-danger-600';
    
    html += `
        <div class="p-4 bg-${statusClass}-100 dark:bg-${statusClass}-900/30 rounded-lg mb-4">
            <i class="fa-solid fa-${statusIcon} mr-2"></i>
            <span class="font-medium">File validation ${result.valid ? 'passed' : 'failed'}</span>
        </div>
    `;
    
    // Headers validation
    html += '<h6 class="text-sm font-semibold mb-2">Column Headers</h6>';
    if (result.headers.missing.length > 0) {
        html += `<div class="p-3 bg-warning-100 dark:bg-warning-900/30 rounded-lg mb-2">
            <strong class="text-warning-700 dark:text-warning-300">Missing columns:</strong> ${result.headers.missing.join(', ')}
        </div>`;
    }
    if (result.headers.extra.length > 0) {
        html += `<div class="p-3 bg-info-100 dark:bg-info-900/30 rounded-lg mb-2">
            <strong class="text-info-700 dark:text-info-300">Extra columns:</strong> ${result.headers.extra.join(', ')}
        </div>`;
    }
    if (result.headers.missing.length === 0 && result.headers.extra.length === 0) {
        html += '<div class="p-3 bg-success-100 dark:bg-success-900/30 rounded-lg mb-2">All expected columns found</div>';
    }
    
    // Sample data
    if (result.sample_data && result.sample_data.length > 0) {
        html += '<h6 class="text-sm font-semibold mb-2 mt-4">Sample Data (First 10 rows)</h6>';
        html += '<div class="overflow-x-auto"><table class="w-full text-sm text-neutral-900 dark:text-neutral-100">';
        html += '<thead><tr class="bg-neutral-100 dark:bg-neutral-700">';
        Object.keys(result.sample_data[0]).forEach(header => {
            html += `<th class="px-3 py-2 text-left font-medium">${header}</th>`;
        });
        html += '</tr></thead><tbody class="divide-y divide-neutral-200 dark:divide-neutral-700">';
        
        result.sample_data.forEach(row => {
            html += '<tr>';
            Object.values(row).forEach(value => {
                html += `<td class="px-3 py-2">${value || ''}</td>`;
            });
            html += '</tr>';
        });
        html += '</tbody></table></div>';
    }
    
    // Validation errors
    if (result.validation_errors && result.validation_errors.length > 0) {
        html += '<h6 class="text-sm font-semibold mb-2 mt-4">Data Issues Found</h6>';
        html += '<div class="p-3 bg-warning-100 dark:bg-warning-900/30 rounded-lg">';
        result.validation_errors.forEach(error => {
            html += `<div class="text-sm"><strong>Row ${error.row}, Field "${error.field}":</strong> ${error.error}</div>`;
        });
        if (result.total_errors > result.validation_errors.length) {
            html += `<div class="mt-2 text-sm font-medium">... and ${result.total_errors - result.validation_errors.length} more errors</div>`;
        }
        html += '</div>';
    }
    
    container.innerHTML = html;
    panel.classList.remove('hidden');
}

async function handleImport(event) {
    event.preventDefault();
    
    if (importInProgress) {
        showAlert('Import already in progress', 'warning');
        return;
    }
    
    const fileType = document.getElementById('fileType').value;
    const fileInput = document.getElementById('csvFile');
    const replaceExisting = document.getElementById('replaceExisting').checked;
    
    if (!fileType || !fileInput.files[0]) {
        showAlert('Please select both data type and CSV file', 'warning');
        return;
    }
    
    importInProgress = true;
    
    const formData = new FormData();
    formData.append('file', fileInput.files[0]);
    formData.append('replace_existing', replaceExisting);
    
    try {
        showProgress(true, 'Importing data...');
        
        const response = await fetch(`/api/import/upload/${fileType}`, {
            method: 'POST',
            headers: getAuthHeaders(),
            body: formData
        });
        
        if (!response.ok) {
            const error = await response.json();
            throw new Error(error.detail || 'Import failed');
        }
        
        const result = await response.json();
        displayImportResults(result);
        
        // Refresh status after successful import
        await loadImportStatus();
        
        // Reset form
        document.getElementById('importForm').reset();
        
    } catch (error) {
        console.error('Import error:', error);
        showAlert('Import failed: ' + error.message, 'danger');
    } finally {
        importInProgress = false;
        showProgress(false);
    }
}

function displayImportResults(result) {
    const panel = document.getElementById('resultsPanel');
    const container = document.getElementById('importResults');
    
    const successClass = result.errors && result.errors.length > 0 ? 'warning' : 'success';
    
    let html = `
        <div class="p-4 bg-${successClass}-100 dark:bg-${successClass}-900/30 rounded-lg mb-4">
            <h6 class="font-semibold flex items-center gap-2"><i class="fa-regular fa-circle-check"></i> Import Completed</h6>
            <div class="text-sm mt-2 space-y-1">
                <p><strong>File Type:</strong> ${result.file_type}</p>
                <p><strong>Records Imported:</strong> ${result.imported_count}</p>
                <p><strong>Errors:</strong> ${result.total_errors || 0}</p>
            </div>
        </div>
    `;
    
    if (result.errors && result.errors.length > 0) {
        html += '<h6 class="text-sm font-semibold mb-2">Import Errors</h6>';
        html += '<div class="p-3 bg-danger-100 dark:bg-danger-900/30 rounded-lg">';
        result.errors.forEach(error => {
            html += `<div class="text-sm"><strong>Row ${error.row}:</strong> ${error.error}</div>`;
        });
        if (result.total_errors > result.errors.length) {
            html += `<div class="mt-2 text-sm font-medium">... and ${result.total_errors - result.errors.length} more errors</div>`;
        }
        html += '</div>';
    }
    
    container.innerHTML = html;
    panel.classList.remove('hidden');
}

function showProgress(show, message = '') {
    const panel = document.getElementById('progressPanel');
    const status = document.getElementById('progressStatus');
    const bar = document.getElementById('progressBar');
    
    if (show) {
        status.textContent = message;
        bar.style.width = '100%';
        panel.classList.remove('hidden');
    } else {
        panel.classList.add('hidden');
    }
}

async function clearTable() {
    const fileType = document.getElementById('clearTableType').value;
    
    if (!fileType) {
        showAlert('Please select a table to clear', 'warning');
        return;
    }
    
    if (!confirm(`Are you sure you want to clear all data from ${fileType}? This action cannot be undone.`)) {
        return;
    }
    
    try {
        const response = await fetch(`/api/import/clear/${fileType}`, {
            method: 'DELETE',
            headers: getAuthHeaders()
        });
        
        if (!response.ok) {
            const error = await response.json();
            throw new Error(error.detail || 'Clear operation failed');
        }
        
        const result = await response.json();
        showAlert(`Successfully cleared ${result.deleted_count} records from ${result.table_name}`, 'success');
        
        // Refresh status
        await loadImportStatus();
        
    } catch (error) {
        console.error('Clear table error:', error);
        showAlert('Clear operation failed: ' + error.message, 'danger');
    }
}

function downloadBackup() {
    showAlert('Backup functionality coming soon', 'info');
}

function viewLogs() {
    showAlert('Import logs functionality coming soon', 'info');
}

function showAlert(message, type = 'info') {
    if (window.alerts && typeof window.alerts.show === 'function') {
        window.alerts.show(message, type);
    } else if (window.showNotification) {
        window.showNotification(message, type);
    } else {
        alert(String(message));
    }
}
</script>
{% endblock %}