// ✅ FUNCIÓN: Preview de imágenes en tiempo real
function setupImagePreview(inputId, previewId) {
    const input = document.getElementById(inputId);
    const preview = document.getElementById(previewId);
    
    if (!input || !preview) return;
    
    input.addEventListener('change', function(e) {
        preview.innerHTML = '';
        
        const file = e.target.files[0];
        if (!file) return;
        
        if (!file.type.startsWith('image/')) {
            Swal.fire({
                icon: 'error',
                title: 'Archivo no válido',
                text: 'Por favor seleccione una imagen válida',
                width: '400px'
            });
            input.value = '';
            return;
        }
        
        if (file.size > 5 * 1024 * 1024) {
            Swal.fire({
                icon: 'error',
                title: 'Imagen muy grande',
                text: 'El tamaño máximo permitido es 5MB',
                width: '400px'
            });
            input.value = '';
            return;
        }
        
        const reader = new FileReader();
        reader.onload = function(e) {
            const previewContainer = document.createElement('div');
            previewContainer.className = 'imagen-preview';
            
            const img = document.createElement('img');
            img.src = e.target.result;
            
            const btnEliminar = document.createElement('button');
            btnEliminar.type = 'button';
            btnEliminar.className = 'eliminar-img';
            btnEliminar.innerHTML = '×';
            btnEliminar.onclick = function() {
                input.value = '';
                preview.innerHTML = '';
            };
            
            previewContainer.appendChild(img);
            previewContainer.appendChild(btnEliminar);
            preview.appendChild(previewContainer);
        };
        reader.readAsDataURL(file);
    });
}

// ✅ FUNCIÓN CRÍTICA: Mostrar imagen existente en edición
function mostrarImagenExistente(previewId, rutaImagen, inputId) {
    const preview = document.getElementById(previewId);
    if (!preview || !rutaImagen) return;
    
    preview.innerHTML = '';
    
    const previewContainer = document.createElement('div');
    previewContainer.className = 'imagen-preview';
    
    const img = document.createElement('img');
    img.src = rutaImagen;
    
    const btnEliminar = document.createElement('button');
    btnEliminar.type = 'button';
    btnEliminar.className = 'eliminar-img';
    btnEliminar.innerHTML = '×';
    btnEliminar.onclick = function() {
        Swal.fire({
            title: '¿Eliminar imagen?',
            text: 'La imagen se eliminará al guardar los cambios',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Sí, eliminar',
            cancelButtonText: 'Cancelar',
            width: '400px'
        }).then((result) => {
            if (result.isConfirmed) {
                console.log(`🔴 ELIMINANDO: ${inputId}`);
                
                // 1. Limpiar el preview visual
                preview.innerHTML = '';
                
                // 2. ✅ MARCAR PARA ELIMINACIÓN
                const inputEliminar = document.getElementById(inputId + '_eliminar');
                console.log(`Buscando campo: ${inputId}_eliminar`);
                console.log('Campo encontrado:', inputEliminar);
                
                if (inputEliminar) {
                    inputEliminar.value = '1';
                    console.log(`✅ MARCADO: ${inputId}_eliminar = "${inputEliminar.value}"`);
                } else {
                    console.error(`❌ ERROR: No existe el campo ${inputId}_eliminar`);
                    alert(`ERROR CRÍTICO: No se encontró el campo ${inputId}_eliminar en el HTML`);
                }
                
                // 3. Limpiar la ruta actual
                const hiddenInput = document.getElementById(inputId + '_actual');
                if (hiddenInput) {
                    hiddenInput.value = '';
                    console.log(`✅ Limpiado: ${inputId}_actual`);
                }
                
                // 4. Mostrar confirmación
                Swal.fire({
                    icon: 'info',
                    title: 'Imagen marcada para eliminar',
                    text: 'Presiona "Guardar" para confirmar',
                    timer: 2000,
                    showConfirmButton: false,
                    width: '400px'
                });
            }
        });
    };
    
    previewContainer.appendChild(img);
    previewContainer.appendChild(btnEliminar);
    preview.appendChild(previewContainer);
}

// ✅ FUNCIÓN: Limpiar formulario completo
function limpiarFormularioCompleto(event) {
    // Prevenir el reset nativo del formulario
    if (event) {
        event.preventDefault();
    }
    
    const form = document.getElementById('formPregunta');
    
    // Guardar los valores de eliminación ANTES de resetear
    const eliminarPregunta = document.getElementById('imagen_pregunta_eliminar').value;
    const eliminarA = document.getElementById('imagen_pregunta_a_eliminar').value;
    const eliminarB = document.getElementById('imagen_pregunta_b_eliminar').value;
    
    // Resetear el formulario de manera nativa
    form.reset();
    
    // Restaurar los valores de eliminación
    document.getElementById('imagen_pregunta_eliminar').value = eliminarPregunta;
    document.getElementById('imagen_pregunta_a_eliminar').value = eliminarA;
    document.getElementById('imagen_pregunta_b_eliminar').value = eliminarB;
    
    // Limpiar previews manualmente
    document.getElementById('preview_pregunta').innerHTML = '';
    document.getElementById('preview_pregunta_a').innerHTML = '';
    document.getElementById('preview_pregunta_b').innerHTML = '';
    
    // Limpiar campos ocultos de rutas actuales
    document.getElementById('imagen_pregunta_actual').value = '';
    document.getElementById('imagen_pregunta_a_actual').value = '';
    document.getElementById('imagen_pregunta_b_actual').value = '';
    
    console.log('🧹 Formulario limpiado (manteniendo marcadores de eliminación)');
}

// ✅ FUNCIÓN: Editar pregunta
function editarPregunta(datos) {
    console.log('📝 EDITANDO PREGUNTA ID:', datos.Id);
    
    const form = document.getElementById('formPregunta');
    form.id.value = datos.Id;
    
    const selectMateria = form.querySelector('select[name="materia_id"]');
    if (selectMateria) {
        selectMateria.value = datos.materia_id;
    }
    
    form.pregunta.value = datos.pregunta;
    
    const preguntaA = form.querySelector('[name="pregunta_a"]');
    const preguntaB = form.querySelector('[name="pregunta_b"]');
    
    if (preguntaA) preguntaA.value = datos.pregunta_a || '';
    if (preguntaB) preguntaB.value = datos.pregunta_b || '';
    
    form.opcion1.value = datos.opcion1;
    form.opcion2.value = datos.opcion2;
    form.opcion3.value = datos.opcion3;
    form.opcion4.value = datos.opcion4 || '';
    form.opcion5.value = datos.opcion5 || '';
    form.correcta_rpta.value = datos.correcta_rpta;
    form.detalle_rpta.value = datos.detalle_rpta || '';
    
    // Guardar rutas actuales
    document.getElementById('imagen_pregunta_actual').value = datos.imagen_pregunta || '';
    document.getElementById('imagen_pregunta_a_actual').value = datos.imagen_pregunta_a || '';
    document.getElementById('imagen_pregunta_b_actual').value = datos.imagen_pregunta_b || '';
    
    // ✅ RESETEAR marcadores de eliminación
    document.getElementById('imagen_pregunta_eliminar').value = '';
    document.getElementById('imagen_pregunta_a_eliminar').value = '';
    document.getElementById('imagen_pregunta_b_eliminar').value = '';
    
    console.log('🔄 Marcadores de eliminación reseteados');
    
    // Mostrar previews de imágenes existentes
    if (datos.imagen_pregunta) {
        mostrarImagenExistente('preview_pregunta', datos.imagen_pregunta, 'imagen_pregunta');
    } else {
        document.getElementById('preview_pregunta').innerHTML = '';
    }
    
    if (datos.imagen_pregunta_a) {
        mostrarImagenExistente('preview_pregunta_a', datos.imagen_pregunta_a, 'imagen_pregunta_a');
    } else {
        document.getElementById('preview_pregunta_a').innerHTML = '';
    }
    
    if (datos.imagen_pregunta_b) {
        mostrarImagenExistente('preview_pregunta_b', datos.imagen_pregunta_b, 'imagen_pregunta_b');
    } else {
        document.getElementById('preview_pregunta_b').innerHTML = '';
    }
    
    // Limpiar inputs de archivo
    document.getElementById('file_pregunta').value = '';
    document.getElementById('file_pregunta_a').value = '';
    document.getElementById('file_pregunta_b').value = '';
    
    window.scrollTo({ top: 0, behavior: 'smooth' });
}

// ✅ FUNCIÓN: Eliminar pregunta
function eliminarPregunta(id) {
    Swal.fire({
        title: '¿Está seguro?',
        text: "Se eliminará esta pregunta y sus imágenes asociadas",
        icon: 'warning',
        showCancelButton: true,
        confirmButtonText: 'Sí, eliminar',
        cancelButtonText: 'Cancelar',
        width: '400px'
    }).then((result) => {
        if (result.isConfirmed) {
            const formData = new FormData();
            formData.append('accion', 'eliminar');
            formData.append('id', id);

            fetch('procesar_crud_preguntas.php', {
                method: 'POST',
                body: formData
            })
            .then(res => res.text())
            .then(msg => {
                Swal.fire({
                    icon: /error/i.test(msg) ? 'error' : 'success',
                    title: 'Resultado',
                    text: msg,
                    timer: 4000,
                    showConfirmButton: false,
                    width: '400px'
                }).then(() => location.reload());
            })
            .catch(err => {
                console.error(err);
                Swal.fire('Error', 'Error al eliminar la pregunta.', 'error');
            });
        }
    });
}

// ✅ EVENTO: Enviar formulario
document.addEventListener('DOMContentLoaded', () => {
    const form = document.getElementById('formPregunta');
    
    if (form) {
        // ✅ INTERCEPTAR EL EVENTO RESET
        form.addEventListener('reset', function(e) {
            e.preventDefault(); // Evitar reset nativo
            limpiarFormularioCompleto(e);
        });
        
        form.addEventListener('submit', async function (e) {
            e.preventDefault();

            const formData = new FormData(this);
            const esActualizar = !!this.id.value;
            formData.append('accion', esActualizar ? 'actualizar' : 'registrar');

            const opcion1 = formData.get('opcion1').trim();
            const opcion2 = formData.get('opcion2').trim();
            const opcion3 = formData.get('opcion3').trim();
            const opcion4 = formData.get('opcion4').trim();
            const opcion5 = formData.get('opcion5').trim();
            const correcta = formData.get('correcta_rpta');

            if (!opcion1 || !opcion2 || !opcion3) {
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: 'Las primeras 3 opciones son obligatorias',
                    width: '400px'
                });
                return;
            }

            if (correcta == '4' && !opcion4) {
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: 'No puedes seleccionar la Opción 4 como correcta porque está vacía',
                    width: '400px'
                });        
                return;
            }
            
            if (correcta == '5' && !opcion5) {
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: 'No puedes seleccionar la Opción 5 como correcta porque está vacía',
                    width: '400px'
                }); 
                return;
            }

            // ✅ DEBUG CRÍTICO: Mostrar datos antes de enviar
            console.log('═══════════════════════════════════════');
            console.log('📤 ENVIANDO FORMULARIO');
            console.log('═══════════════════════════════════════');
            console.log('Acción:', esActualizar ? 'ACTUALIZAR' : 'REGISTRAR');
            console.log('ID Pregunta:', formData.get('id'));
            console.log('---');
            console.log('🖼️ IMAGEN PREGUNTA PRINCIPAL:');
            console.log('  - Eliminar:', formData.get('imagen_pregunta_eliminar'));
            console.log('  - Actual:', formData.get('imagen_pregunta_actual'));
            console.log('  - Nueva archivo:', formData.get('file_pregunta')?.name || 'ninguno');
            console.log('---');
            console.log('🖼️ IMAGEN PREGUNTA A:');
            console.log('  - Eliminar:', formData.get('imagen_pregunta_a_eliminar'));
            console.log('  - Actual:', formData.get('imagen_pregunta_a_actual'));
            console.log('  - Nueva archivo:', formData.get('file_pregunta_a')?.name || 'ninguno');
            console.log('---');
            console.log('🖼️ IMAGEN PREGUNTA B:');
            console.log('  - Eliminar:', formData.get('imagen_pregunta_b_eliminar'));
            console.log('  - Actual:', formData.get('imagen_pregunta_b_actual'));
            console.log('  - Nueva archivo:', formData.get('file_pregunta_b')?.name || 'ninguno');
            console.log('═══════════════════════════════════════');

            Swal.fire({
                title: esActualizar ? 'Actualizando pregunta...' : 'Guardando pregunta...',
                text: 'Por favor espere',
                allowOutsideClick: false,
                didOpen: () => Swal.showLoading(),
                width: '400px'
            });

            fetch('procesar_crud_preguntas.php', {
                method: 'POST',
                body: formData
            })
            .then(res => res.text())
            .then(msg => {
                console.log('📥 RESPUESTA DEL SERVIDOR:', msg);
                Swal.fire({
                    icon: /error|no válida/i.test(msg) ? 'error' : 'success',
                    title: 'Resultado',
                    text: msg,
                    timer: 4000,
                    showConfirmButton: false,
                    width: '400px'
                }).then(() => {
                    if (/pregunta registrada|actualizada/i.test(msg)) {
                        location.reload();
                    }
                });
            })
            .catch(err => {
                console.error('❌ ERROR:', err);
                Swal.fire('Error', 'Ocurrió un error al procesar los datos.', 'error');
            });
        });
    }
    
    setupImagePreview('file_pregunta', 'preview_pregunta');
    setupImagePreview('file_pregunta_a', 'preview_pregunta_a');
    setupImagePreview('file_pregunta_b', 'preview_pregunta_b');
    
    const btnImportar = document.getElementById('importarBtn');
    if (btnImportar) {
        btnImportar.addEventListener('click', async () => {
            const result = await Swal.fire({
                title: '¿Está seguro?',
                text: 'Esta función permitirá importar preguntas desde un archivo.',
                icon: 'question',
                showCancelButton: true,
                confirmButtonText: 'Sí, continuar',
                cancelButtonText: 'Cancelar',
                width: '400px'
            });

            if (!result.isConfirmed) return;

            const input = document.createElement('input');
            input.type = 'file';
            input.accept = '.csv,.txt,.xlsx';
            
            input.onchange = async function(e) {
                const file = e.target.files[0];
                if (!file) return;

                const formData = new FormData();
                formData.append('archivo', file);
                formData.append('accion', 'importar');

                try {
                    Swal.fire({
                        title: 'Procesando archivo...',
                        text: 'Espere un momento mientras se importa.',
                        icon: 'info',
                        allowOutsideClick: false,
                        didOpen: () => Swal.showLoading(),
                        width: '400px'
                    });
                    
                    const resp = await fetch('importar_preguntas.php', {
                        method: 'POST',
                        body: formData
                    });
                    
                    const data = await resp.text();
                    
                    Swal.close();
                    Swal.fire({
                        icon: /error/i.test(data) ? 'error' : 'success',
                        title: 'Resultado',
                        text: data,
                        timer: 4000,
                        showConfirmButton: false,
                        width: '400px'
                    }).then(() => {
                        if (!/error/i.test(data)) {
                            location.reload();
                        }
                    });
                } catch (e) {
                    console.error(e);
                    Swal.fire('Error', 'Error al procesar el archivo', 'error');
                }
            };

            input.click();
        });
    }
});