/*
da error cuando intenta guardar los generos

genericAjax.js?ver=3.0.2.1216093552:940 
 Error al guardar los géneros: undefined
(anónimo)	@	genericAjax.js?ver=3.0.2.1216093552:940

function guardarGenerosUsuario() {
    if (!is_user_logged_in()) {
        wp_send_json_error('Debes iniciar sesión para realizar esta acción.');
    }
    $generos = isset($_POST['generos']) ? $_POST['generos'] : array();

    if (empty($generos) || !is_array($generos)) {
        wp_send_json_error('No se recibieron géneros seleccionados.');
    }

    $generos_sanitizados = array_map('sanitize_text_field', $generos);
    $userId = get_current_user_id();
    update_user_meta($userId, 'usuarioPreferencias', $generos_sanitizados);
    wp_send_json_success('Los géneros han sido guardados.');
}

add_action('wp_ajax_guardarGenerosUsuario', 'guardarGenerosUsuario');
*/

document.addEventListener('DOMContentLoaded', function () {
    // Verificar si existe el modalTipoUsuario en la página
    const modalTipoUsuario = document.querySelector('.selectorModalUsuario');
    const modalGeneros = document.querySelector('.selectorGeneros');

    let darkBackgroundTipoUsuario; // Para almacenar el fondo oscuro del modalTipoUsuario
    let darkBackgroundGeneros; // Para almacenar el fondo oscuro del modalGeneros

    if (modalTipoUsuario) {
        // Mover el modalTipoUsuario al body si no es hijo directo
        if (modalTipoUsuario.parentNode !== document.body) {
            document.body.appendChild(modalTipoUsuario);
        }

        // Establecer el z-index del modal por encima del fondo oscuro
        modalTipoUsuario.style.zIndex = '999';

        // Mostrar el modalTipoUsuario
        modalTipoUsuario.style.display = 'flex';

        // Crear el fondo oscuro detrás del modalTipoUsuario
        darkBackgroundTipoUsuario = createDarkBackground();

        // Obtener elementos
        const fanDiv = document.getElementById('fanDiv');
        const artistaDiv = document.getElementById('artistaDiv');
        const botonSiguiente = modalTipoUsuario.querySelector('.botonsecundario');

        let tipoUsuarioSeleccionado = '';

        // Eventos para la selección de fan y artista
        fanDiv.addEventListener('click', function () {
            tipoUsuarioSeleccionado = 'Fan';
            fanDiv.classList.add('seleccionado');
            artistaDiv.classList.remove('seleccionado');
            botonSiguiente.style.display = 'flex';
        });

        artistaDiv.addEventListener('click', function () {
            tipoUsuarioSeleccionado = 'Artista';
            artistaDiv.classList.add('seleccionado');
            fanDiv.classList.remove('seleccionado');
            botonSiguiente.style.display = 'flex';
        });

        // Evento para el botón "Siguiente"
        botonSiguiente.addEventListener('click', async function () {
            if (tipoUsuarioSeleccionado) {
                // Guardar el tipo de usuario mediante AJAX
                const response = await enviarAjax('guardarTipoUsuario', { tipoUsuario: tipoUsuarioSeleccionado });
                if (response.success) {
                    // Ocultar modalTipoUsuario
                    modalTipoUsuario.style.display = 'none';

                    // Remover el fondo oscuro del modalTipoUsuario
                    removeDarkBackground(darkBackgroundTipoUsuario);

                    if (modalGeneros) {
                        // Mover el modalGeneros al body si no es hijo directo
                        if (modalGeneros.parentNode !== document.body) {
                            document.body.appendChild(modalGeneros);
                        }

                        // Establecer el z-index del modal por encima del fondo oscuro
                        modalGeneros.style.zIndex = '999';

                        // Mostrar modalGeneros
                        modalGeneros.style.display = 'flex';

                        // Crear el fondo oscuro detrás del modalGeneros
                        darkBackgroundGeneros = createDarkBackground();

                        iniciarModalGeneros();
                    }
                } else {
                    console.error('Error al guardar el tipo de usuario:', response.message);
                }
            }
        });
    } else if (modalGeneros) {
        // Mover el modalGeneros al body si no es hijo directo
        if (modalGeneros.parentNode !== document.body) {
            document.body.appendChild(modalGeneros);
        }

        // Establecer el z-index del modal por encima del fondo oscuro
        modalGeneros.style.zIndex = '999';

        // Mostrar modalGeneros
        modalGeneros.style.display = 'flex';

        // Crear el fondo oscuro detrás del modalGeneros
        darkBackgroundGeneros = createDarkBackground();

        iniciarModalGeneros();
    }

    function iniciarModalGeneros() {
        // Obtener elementos
        const generosDiv = modalGeneros.querySelector('.GNEROBDS');
        const generoItems = generosDiv.querySelectorAll('.borde');
        const botonListo = modalGeneros.querySelector('.botonsecundario');

        let generosSeleccionados = [];

        // Evento para la selección de géneros
        generoItems.forEach(function (item) {
            item.addEventListener('click', function () {
                const genero = item.textContent.trim();
                if (item.classList.contains('seleccionado')) {
                    item.classList.remove('seleccionado');
                    generosSeleccionados = generosSeleccionados.filter(g => g !== genero);
                } else {
                    item.classList.add('seleccionado');
                    generosSeleccionados.push(genero);
                }
            });
        });

        // Evento para el botón "Listo"
        botonListo.addEventListener('click', async function () {
            if (generosSeleccionados.length > 0) {
                // Enviar géneros seleccionados mediante AJAX
                const response = await enviarAjax('guardarGenerosUsuario', { generos: generosSeleccionados });
                if (response.success) {
                    // Ocultar modalGeneros
                    modalGeneros.style.display = 'none';

                    // Remover el fondo oscuro del modalGeneros
                    removeDarkBackground(darkBackgroundGeneros);

                } else {
                    console.error('Error al guardar los géneros:', response.message);
                }
            } else {
                alert('Por favor, selecciona al menos un género.');
            }
        });
    }

    // Funciones para crear y remover el fondo oscuro
    function createDarkBackground() {
        const darkBackground = document.createElement('div');
        darkBackground.style.position = 'fixed';
        darkBackground.style.top = '0';
        darkBackground.style.left = '0';
        darkBackground.style.width = '100%';
        darkBackground.style.height = '100%';
        darkBackground.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
        darkBackground.style.zIndex = '998'; // Debe ser menor que el z-index del modal
        darkBackground.style.pointerEvents = 'auto';

        document.body.appendChild(darkBackground);

        return darkBackground;
    }

    function removeDarkBackground(darkBackground) {
        if (darkBackground && darkBackground.parentNode) {
            darkBackground.parentNode.removeChild(darkBackground);
        }
    }
});