{% extends "base.html" %}

{% block title %}Importar Contraseñas - {{ config.APP_NAME }}{% endblock %}

{% block content %}
<div class="min-h-screen bg-gradient-to-br from-gray-50 to-blue-50 dark:from-gray-900 dark:to-gray-800 py-12 px-4 sm:px-6 lg:px-8">
    <div class="max-w-2xl mx-auto">
        <!-- Header -->
        <div class="text-center mb-8 animate-fade-in-up">
            <div class="mx-auto h-16 w-16 bg-gradient-to-br from-green-500 to-emerald-600 rounded-full flex items-center justify-center mb-4 shadow-glow">
                <i class="fas fa-upload text-white text-2xl"></i>
            </div>
            <h2 class="text-3xl font-bold gradient-text">
                Importar Contraseñas
            </h2>
            <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
                Carga un archivo CSV cifrado con contraseñas al sistema de forma segura
            </p>
        </div>

        <!-- Import Form -->
        <div class="card shadow-2xl animate-fade-in-up" style="animation-delay: 0.2s;">
            <div class="p-8">
                <form method="POST" enctype="multipart/form-data" class="space-y-6">
                    {{ form.hidden_tag() }}

                    <!-- Department Selection -->
                    <div>
                        <label for="{{ form.department_id.id }}" class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
                            <i class="fas fa-building mr-2 text-primary-500"></i>Departamento de Destino
                        </label>
                        {{ form.department_id(class="form-input") }}
                        <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                            Todas las contraseñas importadas se asignarán a este departamento
                        </p>
                        {% if form.department_id.errors %}
                            <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ form.department_id.errors[0] }}</p>
                        {% endif %}
                    </div>

                    <!-- File Upload Method -->
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-4">
                            <i class="fas fa-file-upload mr-2 text-blue-500"></i>Método de Importación
                        </label>

                        <!-- Tabs for Upload Methods -->
                        <div class="mb-4">
                            <div class="flex bg-gray-100 dark:bg-gray-700 rounded-lg p-1">
                                <button type="button" id="uploadTab" class="flex-1 text-center py-2 px-4 rounded-md text-sm font-medium transition-all duration-200 bg-white dark:bg-gray-800 text-primary-600 dark:text-primary-400 shadow-sm">
                                    <i class="fas fa-cloud-upload mr-2"></i>Subir Archivo
                                </button>
                                <button type="button" id="pasteTab" class="flex-1 text-center py-2 px-4 rounded-md text-sm font-medium transition-all duration-200 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300">
                                    <i class="fas fa-paste mr-2"></i>Pegar Contenido
                                </button>
                            </div>
                        </div>

                        <!-- File Upload Section -->
                        <div id="uploadSection" class="space-y-4">
                            <div class="relative">
                                <div id="dropZone" class="border-2 border-dashed border-primary-300 dark:border-primary-600 rounded-xl p-8 text-center bg-gradient-to-br from-primary-50 to-blue-50 dark:from-primary-900/20 dark:to-blue-900/20 hover:border-primary-400 dark:hover:border-primary-500 transition-all duration-300 cursor-pointer">
                                    <input type="file" id="{{ form.csv_file_upload.id }}" name="{{ form.csv_file_upload.name }}" accept=".enc,.csv" class="hidden">
                                    <div id="dropZoneContent">
                                        <i class="fas fa-cloud-upload-alt text-primary-500 text-5xl mb-4"></i>
                                        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">
                                            Arrastra tu archivo aquí o haz clic para seleccionar
                                        </h3>
                                        <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
                                            Formatos soportados: .enc, .csv (máximo 10MB)
                                        </p>
                                        <div class="inline-flex items-center px-4 py-2 bg-primary-500 text-white rounded-lg hover:bg-primary-600 transition-colors duration-200">
                                            <i class="fas fa-folder-open mr-2"></i>
                                            Seleccionar Archivo
                                        </div>
                                    </div>
                                    <div id="filePreview" class="hidden">
                                        <i class="fas fa-file-alt text-green-500 text-4xl mb-3"></i>
                                        <p id="fileName" class="font-semibold text-gray-900 dark:text-white"></p>
                                        <p id="fileSize" class="text-sm text-gray-600 dark:text-gray-400 mb-4"></p>
                                        <button type="button" onclick="clearFile()" class="text-red-500 hover:text-red-700 text-sm">
                                            <i class="fas fa-times mr-1"></i>Eliminar archivo
                                        </button>
                                    </div>
                                </div>
                                {% if form.csv_file_upload.errors %}
                                    <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ form.csv_file_upload.errors[0] }}</p>
                                {% endif %}
                            </div>
                        </div>

                        <!-- Paste Content Section -->
                        <div id="pasteSection" class="hidden space-y-4">
                            <div>
                                <label for="{{ form.csv_file.id }}" class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
                                    <i class="fas fa-file-csv mr-2 text-green-500"></i>Contenido del Archivo CSV
                                </label>
                                {{ form.csv_file(class="form-input font-mono text-xs", placeholder="Pega aquí el contenido del archivo CSV cifrado...", rows="8") }}
                                <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                                    Copia y pega el contenido completo del archivo .enc exportado
                                </p>
                                {% if form.csv_file.errors %}
                                    <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ form.csv_file.errors[0] }}</p>
                                {% endif %}
                            </div>
                        </div>
                    </div>

                    <!-- Encryption Password -->
                    <div>
                        <label for="{{ form.encryption_password.id }}" class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
                            <i class="fas fa-unlock mr-2 text-purple-500"></i>Contraseña de Descifrado
                        </label>
                        <div class="relative">
                            {{ form.encryption_password(class="form-input pr-10", placeholder="Contraseña usada para cifrar el archivo") }}
                            <button type="button" onclick="togglePassword('encryption_password')" class="absolute inset-y-0 right-0 pr-3 flex items-center">
                                <i id="encryption_password-eye" class="fas fa-eye text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors duration-200"></i>
                            </button>
                        </div>
                        {% if form.encryption_password.errors %}
                            <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ form.encryption_password.errors[0] }}</p>
                        {% endif %}
                    </div>

                    <!-- Import Instructions -->
                    <div class="bg-gradient-to-r from-primary-50 to-indigo-50 dark:from-primary-900/20 dark:to-indigo-900/20 border border-primary-200 dark:border-primary-800 rounded-xl p-6">
                        <div class="flex">
                            <div class="flex-shrink-0">
                                <i class="fas fa-info-circle text-primary-500 text-xl"></i>
                            </div>
                            <div class="ml-3">
                                <h3 class="text-sm font-semibold text-primary-800 dark:text-primary-200">
                                    Instrucciones de Importación
                                </h3>
                                <div class="mt-2 text-sm text-primary-700 dark:text-primary-300">
                                    <div id="uploadInstructions">
                                        <ol class="list-decimal list-inside space-y-1">
                                            <li>Selecciona o arrastra el archivo .enc exportado</li>
                                            <li>Ingresa la contraseña que usaste para cifrar el archivo</li>
                                            <li>Selecciona el departamento de destino</li>
                                            <li>Haz clic en "Importar Contraseñas"</li>
                                        </ol>
                                    </div>
                                    <div id="pasteInstructions" class="hidden">
                                        <ol class="list-decimal list-inside space-y-1">
                                            <li>Abre el archivo .enc exportado con un editor de texto</li>
                                            <li>Copia todo el contenido del archivo</li>
                                            <li>Pégalo en el campo "Contenido del Archivo CSV"</li>
                                            <li>Ingresa la contraseña que usaste para cifrar el archivo</li>
                                            <li>Selecciona el departamento de destino</li>
                                            <li>Haz clic en "Importar Contraseñas"</li>
                                        </ol>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Submit Buttons -->
                    <div class="flex flex-col sm:flex-row gap-4 pt-6 border-t border-gray-200 dark:border-gray-700">
                        <a href="{{ url_for('dashboard') }}" class="btn-secondary flex-1 justify-center py-3">
                            <i class="fas fa-arrow-left mr-2"></i>
                            Volver al Dashboard
                        </a>
                        <button type="button" onclick="showImportModal()" class="btn-primary flex-1 justify-center py-3 shadow-glow">
                            <i class="fas fa-upload mr-2"></i>
                            Importar Contraseñas
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <!-- CSV Format Information -->
        <div class="card mt-8 animate-fade-in-up" style="animation-delay: 0.4s;">
            <div class="p-6">
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">
                    <i class="fas fa-table mr-2 text-green-500"></i>
                    Formato CSV Esperado
                </h3>
                <div class="bg-gradient-to-r from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-700 p-4 rounded-xl border border-gray-200 dark:border-gray-600 overflow-x-auto">
                    <div class="text-xs font-mono space-y-2">
                        <div class="text-gray-600 dark:text-gray-400 font-semibold">name,username,password,url,notes,tags,department</div>
                        <div class="text-gray-500 dark:text-gray-500">Servidor Web,admin,contraseña123,https://servidor.com,Servidor principal,servidor,IT</div>
                        <div class="text-gray-500 dark:text-gray-500">Email Corp,usuario@empresa.com,pass456,https://mail.empresa.com,Email corporativo,"email,importante",Admin</div>
                    </div>
                </div>
                <p class="mt-3 text-xs text-gray-600 dark:text-gray-400">
                    El archivo debe tener exactamente estas columnas en este orden. Las etiquetas múltiples se separan con comas dentro de comillas.
                </p>
            </div>
        </div>

        <!-- Security Warning -->
        <div class="card mt-6 animate-fade-in-up" style="animation-delay: 0.6s;">
            <div class="p-6">
                <div class="bg-gradient-to-r from-amber-50 to-yellow-50 dark:from-amber-900/20 dark:to-yellow-900/20 border border-amber-200 dark:border-amber-800 rounded-xl p-6">
                    <div class="flex">
                        <div class="flex-shrink-0">
                            <i class="fas fa-exclamation-triangle text-amber-600 dark:text-amber-400 text-xl"></i>
                        </div>
                        <div class="ml-3">
                            <h3 class="text-sm font-semibold text-amber-800 dark:text-amber-200">
                                Importante - Proceso de Importación
                            </h3>
                            <div class="mt-2 text-sm text-amber-700 dark:text-amber-300">
                                <ul class="list-disc list-inside space-y-1">
                                    <li>Las contraseñas duplicadas por nombre serán omitidas automáticamente</li>
                                    <li>Los datos se cifrarán nuevamente con la clave maestra del sistema</li>
                                    <li>La importación creará un registro en los logs de acceso</li>
                                    <li>Solo los administradores y editores pueden importar contraseñas</li>
                                    <li>Elimina el archivo original después de la importación exitosa</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal de Confirmación de Importación -->
<div id="importModal" class="fixed inset-0 bg-black/60 backdrop-blur-sm hidden items-center justify-center z-50 p-4">
    <div class="relative bg-white dark:bg-gray-800 rounded-2xl max-w-lg w-full shadow-2xl border border-gray-200 dark:border-gray-700 overflow-hidden animate-fade-in-up">
        <!-- Header del Modal -->
        <div class="bg-gradient-to-r from-green-500 to-emerald-600 px-6 py-4">
            <div class="flex items-center justify-between">
                <div class="flex items-center space-x-3">
                    <div class="w-10 h-10 bg-white/20 rounded-full flex items-center justify-center">
                        <i class="fas fa-upload text-white text-lg"></i>
                    </div>
                    <div>
                        <h3 class="text-lg font-bold text-white">Confirmar Importación</h3>
                        <p class="text-sm text-green-100">Verificar datos antes de proceder</p>
                    </div>
                </div>
                <button onclick="closeImportModal()" class="text-white/80 hover:text-white p-2 rounded-lg hover:bg-white/20 transition-all duration-200">
                    <i class="fas fa-times"></i>
                </button>
            </div>
        </div>

        <!-- Contenido del Modal -->
        <div class="p-6">
            <div class="space-y-4">
                <!-- Información de la importación -->
                <div class="bg-gradient-to-r from-green-50 to-emerald-50 dark:from-green-900/20 dark:to-emerald-900/20 border border-green-200 dark:border-green-800 rounded-xl p-4">
                    <h4 class="font-semibold text-gray-900 dark:text-white mb-3 flex items-center">
                        <i class="fas fa-info-circle text-green-500 mr-2"></i>
                        Resumen de Importación
                    </h4>
                    <div class="space-y-2 text-sm">
                        <div class="flex items-center justify-between">
                            <span class="text-gray-600 dark:text-gray-400">Método:</span>
                            <span id="modalImportMethod" class="font-medium text-gray-900 dark:text-white"></span>
                        </div>
                        <div class="flex items-center justify-between">
                            <span class="text-gray-600 dark:text-gray-400">Departamento:</span>
                            <span id="modalImportDepartment" class="font-medium text-gray-900 dark:text-white"></span>
                        </div>
                        <div class="flex items-center justify-between">
                            <span class="text-gray-600 dark:text-gray-400">Archivo:</span>
                            <span id="modalFileName" class="font-medium text-gray-900 dark:text-white text-xs"></span>
                        </div>
                    </div>
                </div>

                <!-- Advertencias de importación -->
                <div class="bg-gradient-to-r from-amber-50 to-yellow-50 dark:from-amber-900/20 dark:to-yellow-900/20 border border-amber-200 dark:border-amber-800 rounded-xl p-4">
                    <h4 class="font-semibold text-gray-900 dark:text-white mb-3 flex items-center">
                        <i class="fas fa-exclamation-triangle text-amber-500 mr-2"></i>
                        Importante - Proceso de Importación
                    </h4>
                    <div class="space-y-2 text-sm text-amber-700 dark:text-amber-300">
                        <div class="flex items-start space-x-2">
                            <i class="fas fa-shield-alt mt-0.5 text-amber-500"></i>
                            <span>Las contraseñas se cifrarán con la clave maestra del sistema</span>
                        </div>
                        <div class="flex items-start space-x-2">
                            <i class="fas fa-copy mt-0.5 text-amber-500"></i>
                            <span>Las contraseñas duplicadas por nombre serán omitidas</span>
                        </div>
                        <div class="flex items-start space-x-2">
                            <i class="fas fa-history mt-0.5 text-amber-500"></i>
                            <span>Se creará un registro en los logs de acceso</span>
                        </div>
                    </div>
                </div>

                <!-- Checklist de confirmación -->
                <div class="bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-900/20 dark:to-indigo-900/20 border border-blue-200 dark:border-blue-800 rounded-xl p-4">
                    <h4 class="font-semibold text-gray-900 dark:text-white mb-3 flex items-center">
                        <i class="fas fa-check-circle text-blue-500 mr-2"></i>
                        Confirmación
                    </h4>
                    <div class="checkbox-group">
                        <div class="checkbox-container">
                            <input type="checkbox" id="importCheck1" class="form-checkbox checkbox-success">
                            <label for="importCheck1" class="form-checkbox-label">
                                <span class="checkbox-title">Archivo Verificado</span>
                                <span class="checkbox-description">He verificado que el archivo y contraseña de descifrado son correctos</span>
                            </label>
                        </div>
                        <div class="checkbox-container">
                            <input type="checkbox" id="importCheck2" class="form-checkbox checkbox-success">
                            <label for="importCheck2" class="form-checkbox-label">
                                <span class="checkbox-title">Proceso Entendido</span>
                                <span class="checkbox-description">Entiendo que esto agregará nuevas contraseñas al sistema actual</span>
                            </label>
                        </div>
                        <div class="checkbox-container">
                            <input type="checkbox" id="importCheck3" class="form-checkbox checkbox-success">
                            <label for="importCheck3" class="form-checkbox-label">
                                <span class="checkbox-title">Limpieza Segura</span>
                                <span class="checkbox-description">Eliminaré el archivo original de forma segura después de la importación</span>
                            </label>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Botones de acción -->
            <div class="flex flex-col sm:flex-row gap-3 mt-6 pt-6 border-t border-gray-200 dark:border-gray-700">
                <button onclick="closeImportModal()" class="btn-secondary flex-1 py-3">
                    <i class="fas fa-times mr-2"></i>
                    Cancelar
                </button>
                <button id="confirmImportBtn" onclick="confirmImport()" disabled class="btn-primary flex-1 py-3 disabled:opacity-50 disabled:cursor-not-allowed">
                    <i class="fas fa-upload mr-2"></i>
                    Confirmar e Importar
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Modal de Progreso de Importación -->
<div id="importProgressModal" class="fixed inset-0 bg-black/70 backdrop-blur-sm hidden items-center justify-center z-50">
    <div class="bg-white dark:bg-gray-800 rounded-2xl p-8 max-w-sm w-full mx-4 shadow-2xl text-center">
        <div class="w-16 h-16 mx-auto mb-4 relative">
            <div class="loading-spinner border-green-500"></div>
        </div>
        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">Importando Contraseñas</h3>
        <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">Procesando y cifrando datos...</p>
        <div class="bg-gray-200 dark:bg-gray-700 rounded-full h-2 overflow-hidden">
            <div id="importProgressBar" class="bg-gradient-to-r from-green-500 to-emerald-600 h-full rounded-full transition-all duration-300" style="width: 0%"></div>
        </div>
        <p id="importProgressText" class="text-xs text-gray-500 dark:text-gray-400 mt-2">Preparando...</p>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
let currentMethod = 'upload';

function togglePassword(fieldId) {
    const field = document.getElementById(fieldId);
    const eye = document.getElementById(fieldId + '-eye');

    if (field.type === 'password') {
        field.type = 'text';
        eye.classList.remove('fa-eye');
        eye.classList.add('fa-eye-slash');
    } else {
        field.type = 'password';
        eye.classList.remove('fa-eye-slash');
        eye.classList.add('fa-eye');
    }
}

function switchTab(method) {
    currentMethod = method;

    // Update tab appearance
    const uploadTab = document.getElementById('uploadTab');
    const pasteTab = document.getElementById('pasteTab');

    if (method === 'upload') {
        uploadTab.className = 'flex-1 text-center py-2 px-4 rounded-md text-sm font-medium transition-all duration-200 bg-white dark:bg-gray-800 text-primary-600 dark:text-primary-400 shadow-sm';
        pasteTab.className = 'flex-1 text-center py-2 px-4 rounded-md text-sm font-medium transition-all duration-200 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300';

        document.getElementById('uploadSection').classList.remove('hidden');
        document.getElementById('pasteSection').classList.add('hidden');
        document.getElementById('uploadInstructions').classList.remove('hidden');
        document.getElementById('pasteInstructions').classList.add('hidden');
    } else {
        pasteTab.className = 'flex-1 text-center py-2 px-4 rounded-md text-sm font-medium transition-all duration-200 bg-white dark:bg-gray-800 text-primary-600 dark:text-primary-400 shadow-sm';
        uploadTab.className = 'flex-1 text-center py-2 px-4 rounded-md text-sm font-medium transition-all duration-200 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300';

        document.getElementById('uploadSection').classList.add('hidden');
        document.getElementById('pasteSection').classList.remove('hidden');
        document.getElementById('uploadInstructions').classList.add('hidden');
        document.getElementById('pasteInstructions').classList.remove('hidden');
    }
}

function clearFile() {
    const fileInput = document.getElementById('csv_file_upload');
    fileInput.value = '';
    document.getElementById('dropZoneContent').classList.remove('hidden');
    document.getElementById('filePreview').classList.add('hidden');
}

function handleFileSelect(file) {
    if (file) {
        // Validate file size (10MB max)
        if (file.size > 10 * 1024 * 1024) {
            alert('El archivo es demasiado grande. Máximo permitido: 10MB');
            return false;
        }

        // Validate file type
        const allowedExtensions = ['.enc', '.csv'];
        const fileName = file.name.toLowerCase();
        const isValidType = allowedExtensions.some(ext => fileName.endsWith(ext));

        if (!isValidType) {
            alert('Tipo de archivo no válido. Solo se permiten archivos .enc y .csv');
            return false;
        }

        // Show file preview
        document.getElementById('dropZoneContent').classList.add('hidden');
        document.getElementById('filePreview').classList.remove('hidden');
        document.getElementById('fileName').textContent = file.name;
        document.getElementById('fileSize').textContent = formatFileSize(file.size);

        return true;
    }
}

function formatFileSize(bytes) {
    if (bytes === 0) return '0 Bytes';
    const k = 1024;
    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
    const i = Math.floor(Math.log(bytes) / Math.log(k));
    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
}

function showImportModal() {
    const fileInput = document.getElementById('csv_file_upload');
    const csvContent = document.getElementById('csv_file').value.trim();
    const password = document.getElementById('encryption_password').value;
    const departmentSelect = document.getElementById('department_id');

    // Validaciones básicas
    if (!password) {
        alert('Por favor, ingresa la contraseña de descifrado.');
        return;
    }

    if (currentMethod === 'upload') {
        if (!fileInput.files[0]) {
            alert('Por favor, selecciona un archivo para subir.');
            return;
        }
    } else {
        if (!csvContent) {
            alert('Por favor, pega el contenido del archivo CSV cifrado.');
            return;
        }
    }

    // Actualizar información del modal
    document.getElementById('modalImportMethod').textContent = currentMethod === 'upload' ? 'Subir Archivo' : 'Pegar Contenido';
    document.getElementById('modalImportDepartment').textContent = departmentSelect.options[departmentSelect.selectedIndex].text;

    if (currentMethod === 'upload' && fileInput.files[0]) {
        document.getElementById('modalFileName').textContent = fileInput.files[0].name;
    } else {
        document.getElementById('modalFileName').textContent = 'Contenido pegado (' + csvContent.length + ' caracteres)';
    }

    // Mostrar modal
    document.getElementById('importModal').classList.remove('hidden');
    document.getElementById('importModal').classList.add('flex');

    // Reset checkboxes
    document.querySelectorAll('#importModal input[type="checkbox"]').forEach(cb => {
        cb.checked = false;
    });
    updateImportConfirmButton();
}

function closeImportModal() {
    document.getElementById('importModal').classList.add('hidden');
    document.getElementById('importModal').classList.remove('flex');
}

function updateImportConfirmButton() {
    const checkboxes = document.querySelectorAll('#importModal input[type="checkbox"]');
    const allChecked = Array.from(checkboxes).every(cb => cb.checked);
    const confirmBtn = document.getElementById('confirmImportBtn');

    confirmBtn.disabled = !allChecked;
    if (allChecked) {
        confirmBtn.classList.remove('opacity-50', 'cursor-not-allowed');
    } else {
        confirmBtn.classList.add('opacity-50', 'cursor-not-allowed');
    }
}

function confirmImport() {
    closeImportModal();
    showImportProgressModal();

    // Simular progreso
    let progress = 0;
    const progressBar = document.getElementById('importProgressBar');
    const progressText = document.getElementById('importProgressText');

    const interval = setInterval(() => {
        progress += Math.random() * 12;
        if (progress > 100) progress = 100;

        progressBar.style.width = progress + '%';

        if (progress < 25) {
            progressText.textContent = 'Validando archivo...';
        } else if (progress < 50) {
            progressText.textContent = 'Descifrando datos...';
        } else if (progress < 75) {
            progressText.textContent = 'Procesando contraseñas...';
        } else if (progress < 95) {
            progressText.textContent = 'Guardando en base de datos...';
        } else {
            progressText.textContent = 'Finalizando...';
        }

        if (progress >= 100) {
            clearInterval(interval);
            setTimeout(() => {
                document.getElementById('importProgressModal').classList.add('hidden');
                // Limpiar el campo de archivo si usamos el método de pegar
                if (currentMethod === 'paste') {
                    document.getElementById('csv_file_upload').value = '';
                }
                document.querySelector('form').submit();
            }, 500);
        }
    }, 120);
}

function showImportProgressModal() {
    document.getElementById('importProgressModal').classList.remove('hidden');
    document.getElementById('importProgressModal').classList.add('flex');
    document.getElementById('importProgressBar').style.width = '0%';
    document.getElementById('importProgressText').textContent = 'Preparando...';
}

// Initialize drag and drop functionality
document.addEventListener('DOMContentLoaded', function() {
    const dropZone = document.getElementById('dropZone');
    const fileInput = document.getElementById('csv_file_upload');

    // Tab switching
    document.getElementById('uploadTab').addEventListener('click', () => switchTab('upload'));
    document.getElementById('pasteTab').addEventListener('click', () => switchTab('paste'));

    // File input change
    if (fileInput) {
        fileInput.addEventListener('change', function(e) {
            const file = e.target.files[0];
            handleFileSelect(file);
        });
    }

    // Drop zone click
    if (dropZone) {
        dropZone.addEventListener('click', function() {
            fileInput.click();
        });

        // Drag and drop events
        dropZone.addEventListener('dragover', function(e) {
            e.preventDefault();
            dropZone.classList.add('border-primary-500', 'bg-primary-100');
        });

        dropZone.addEventListener('dragleave', function(e) {
            e.preventDefault();
            dropZone.classList.remove('border-primary-500', 'bg-primary-100');
        });

        dropZone.addEventListener('drop', function(e) {
            e.preventDefault();
            dropZone.classList.remove('border-primary-500', 'bg-primary-100');

            const files = e.dataTransfer.files;
            if (files.length > 0) {
                const file = files[0];
                if (handleFileSelect(file)) {
                    fileInput.files = files;
                }
            }
        });
    }

    // Auto-resize del textarea
    const csvTextarea = document.getElementById('csv_file');
    if (csvTextarea) {
        csvTextarea.addEventListener('input', function() {
            this.style.height = 'auto';
            this.style.height = Math.min(this.scrollHeight, 300) + 'px';
        });

        // Detectar cuando se pega contenido
        csvTextarea.addEventListener('paste', function() {
            setTimeout(() => {
                const content = this.value;
                if (content && content.length > 100) {
                    // Mostrar indicador de que se detectó contenido
                    const indicator = document.createElement('div');
                    indicator.className = 'mt-2 text-sm text-green-600 dark:text-green-400';
                    indicator.innerHTML = '<i class="fas fa-check mr-1"></i>Contenido detectado (' + content.length + ' caracteres)';

                    // Remover indicador anterior si existe
                    const existing = this.parentNode.querySelector('.content-indicator');
                    if (existing) existing.remove();

                    indicator.classList.add('content-indicator');
                    this.parentNode.appendChild(indicator);

                    // Auto-resize
                    this.style.height = 'auto';
                    this.style.height = Math.min(this.scrollHeight, 300) + 'px';
                }
            }, 100);
        });
    }

    // Actualizar botón de confirmar cuando cambien los checkboxes
    document.querySelectorAll('#importModal input[type="checkbox"]').forEach(cb => {
        cb.addEventListener('change', updateImportConfirmButton);
    });

    // Cerrar modal al hacer clic fuera
    document.getElementById('importModal').addEventListener('click', function(e) {
        if (e.target === this) {
            closeImportModal();
        }
    });
});
</script>
{% endblock %}