//necesito que se genere un background debajo de los modales 
document.addEventListener('DOMContentLoaded', function () {
    // Check if modalTipoUsuario exists on the page
    const modalTipoUsuario = document.querySelector('.selectorModalUsuario');
    const modalGeneros = document.querySelector('.selectorGeneros');

    if (modalTipoUsuario) {
        // Show the modalTipoUsuario
        modalTipoUsuario.style.display = 'flex';

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

        let tipoUsuarioSeleccionado = '';

        // Event listeners for fan and artista selection
        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';
        });

        // Event listener for "Siguiente" button
        botonSiguiente.addEventListener('click', async function () {
            if (tipoUsuarioSeleccionado) {
                // Save the tipoUsuario meta via AJAX
                const response = await enviarAjax('guardarTipoUsuario', {tipoUsuario: tipoUsuarioSeleccionado});
                if (response.success) {
                    // Hide modalTipoUsuario and show modalGeneros
                    modalTipoUsuario.style.display = 'none';
                    if (modalGeneros) {
                        modalGeneros.style.display = 'flex';
                        iniciarModalGeneros();
                    }
                } else {
                    console.error('Error al guardar el tipo de usuario:', response.message);
                }
            }
        });
    } else if (modalGeneros) {
        // If modalTipoUsuario does not exist but modalGeneros does, show modalGeneros
        modalGeneros.style.display = 'flex';
        iniciarModalGeneros();
    }

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

        let generosSeleccionados = [];

        // Event listener for genre selection
        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);
                }
            });
        });

        // Event listener for "Listo" button
        botonListo.addEventListener('click', async function () {
            if (generosSeleccionados.length > 0) {
                // Send selected genres via AJAX
                const response = await enviarAjax('guardarGenerosUsuario', {generos: generosSeleccionados});
                if (response.success) {
                    // Hide modalGeneros
                    modalGeneros.style.display = 'none';
                } else {
                    console.error('Error al guardar los géneros:', response.message);
                }
            } else {
                alert('Por favor, selecciona al menos un género.');
            }
        });
    }
});

/*
puedes usar (no pueden ser modificadas estas funciones o puedes hacer unas nuevas)

window.createModalDarkBackground = function (modal) {
    const darkBackground = document.createElement('div');
    darkBackground.classList.add('modal-background');
    darkBackground.style.position = 'fixed';
    darkBackground.style.top = 0;
    darkBackground.style.left = 0;
    darkBackground.style.width = '100vw';
    darkBackground.style.height = '100vh';
    darkBackground.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
    darkBackground.style.zIndex = 998; // Debe estar por debajo del modal
    darkBackground.style.pointerEvents = 'auto';

    // Insertar el background justo antes del modal, como hermano
    modal.parentNode.insertBefore(darkBackground, modal);

    return darkBackground;
};

// Función para remover el fondo oscuro del modal
window.removeModalDarkBackground = function (darkBackground) {
    if (darkBackground && darkBackground.parentNode) {
        darkBackground.parentNode.removeChild(darkBackground);
    }
};


*/