// Progreso de importación con AJAX
document.addEventListener('DOMContentLoaded', function() {
    const importForms = document.querySelectorAll('form[action*="importar"]');
    
    importForms.forEach(form => {
        form.addEventListener('submit', function(e) {
            const submitBtn = form.querySelector('button[type="submit"]');
            const fileInput = form.querySelector('input[type="file"]');
            
            if (!fileInput.files[0]) {
                e.preventDefault();
                showAlert('Por favor selecciona un archivo CSV.', 'warning');
                return;
            }
            
            // Validar tamaño del archivo
            const maxSize = 5 * 1024 * 1024; // 5MB
            if (fileInput.files[0].size > maxSize) {
                e.preventDefault();
                showAlert('El archivo es demasiado grande. Tamaño máximo: 5MB', 'error');
                return;
            }
            
            // Validar extensión
            const fileName = fileInput.files[0].name;
            if (!fileName.toLowerCase().endsWith('.csv')) {
                e.preventDefault();
                showAlert('Solo se permiten archivos CSV.', 'error');
                return;
            }
            
            // Mostrar indicador de progreso
            submitBtn.disabled = true;
            submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Procesando...';
            
            // Crear modal de progreso
            showProgressModal();
        });
    });
    
    function showProgressModal() {
        const modalHtml = `
            <div class="modal fade" id="progressModal" tabindex="-1" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">
                                <i class="fas fa-upload text-primary"></i> 
                                Procesando Importación
                            </h5>
                        </div>
                        <div class="modal-body text-center">
                            <div class="spinner-border text-primary mb-3" role="status">
                                <span class="visually-hidden">Cargando...</span>
                            </div>
                            <p class="mb-0">Por favor espera mientras se procesa el archivo...</p>
                            <small class="text-muted">Este proceso puede tomar varios minutos dependiendo del tamaño del archivo.</small>
                        </div>
                    </div>
                </div>
            </div>
        `;
        
        document.body.insertAdjacentHTML('beforeend', modalHtml);
        const modal = new bootstrap.Modal(document.getElementById('progressModal'));
        modal.show();
        
        // Auto-cerrar después de timeout (prevención)
        setTimeout(() => {
            modal.hide();
            document.getElementById('progressModal').remove();
        }, 300000); // 5 minutos
    }
    
    function showAlert(message, type = 'info') {
        const alertClass = {
            'info': 'alert-info',
            'success': 'alert-success',
            'warning': 'alert-warning',
            'error': 'alert-danger'
        }[type] || 'alert-info';
        
        const alertHtml = `
            <div class="alert ${alertClass} alert-dismissible fade show" role="alert">
                <i class="fas fa-${type === 'error' ? 'exclamation-triangle' : type === 'success' ? 'check-circle' : 'info-circle'}"></i>
                ${message}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        `;
        
        const container = document.querySelector('.container');
        container.insertAdjacentHTML('afterbegin', alertHtml);
        
        // Auto-remover después de 5 segundos
        setTimeout(() => {
            const alert = container.querySelector('.alert');
            if (alert) {
                bootstrap.Alert.getOrCreateInstance(alert).close();
            }
        }, 5000);
    }
});
