let selectedPostId = null;
let selectedCollectionId = null;

//esta funcion se va a llamar cada vez que carguen mas post o se cambie de pagina dinamicamente, esta preparada para eso?, tambien cuando se abre otro modal reiniciar selectedPostId, y selectedCollectionId, y por cierto, en vez de usar const, me gustaría usar funciones independientes y que siga funcionando 
function colec() {
    const modal = document.querySelector('.modalColec');
    if (!modal) {
        console.error('No se encontró el elemento con la clase .modalColec');
        return;
    }

    let darkBackground = null;

    const openModal = () => {
        modal.style.display = 'block';
        darkBackground = createDarkBackground();
        document.body.classList.add('no-scroll');
    };

    const closeModal = () => {
        modal.style.display = 'none';
        removeDarkBackground();
        document.body.classList.remove('no-scroll');
        resetSelections();
    };

    const createDarkBackground = () => {
        const bg = document.createElement('div');
        bg.classList.add('submenu-background');
        Object.assign(bg.style, {
            position: 'fixed',
            top: '0',
            left: '0',
            width: '100vw',
            height: '100vh',
            backgroundColor: 'rgba(0, 0, 0, 0.5)',
            zIndex: '998',
            pointerEvents: 'auto'
        });
        document.body.appendChild(bg);
        bg.addEventListener('click', closeModal, { once: true });
        return bg;
    };

    const removeDarkBackground = () => {
        if (darkBackground) {
            darkBackground.remove();
            darkBackground = null;
        }
    };

    const resetSelections = () => {
        selectedPostId = null;
        selectedCollectionId = null;
        document.querySelectorAll('.coleccion').forEach(item => item.classList.remove('seleccion'));
    };

    const handleCollectionClick = (coleccion) => {
        document.querySelectorAll('.coleccion').forEach(item => item.classList.remove('seleccion'));
        coleccion.classList.add('seleccion');
        selectedCollectionId = coleccion.getAttribute('data-id') || coleccion.id;
    };

    const handleListoClick = () => {
        if (selectedPostId && selectedCollectionId) {
            console.log('Post ID:', selectedPostId);
            console.log('Collection ID:', selectedCollectionId);
            closeModal();
        } else {
            alert('Por favor, selecciona una colección.');
        }
    };

    const filterCollections = (query) => {
        document.querySelectorAll('.listaColeccion .coleccion').forEach(coleccion => {
            const titulo = coleccion.querySelector('span')?.innerText.toLowerCase() || '';
            coleccion.style.display = titulo.includes(query) ? 'flex' : 'none';
        });
    };

    document.body.addEventListener('click', (e) => {
        const btn = e.target.closest('.botonColeccionBtn');
        if (btn) {
            e.preventDefault();
            selectedPostId = btn.getAttribute('data-post_id');
            openModal();
        }
    });

    const listaColecciones = document.querySelector('.listaColeccion');
    if (listaColecciones) {
        listaColecciones.addEventListener('click', (e) => {
            const coleccion = e.target.closest('.coleccion');
            if (coleccion) handleCollectionClick(coleccion);
        });
    } else {
        console.error('No se encontró el elemento con la clase .listaColeccion');
    }

    const btnListo = document.getElementById('btnListo');
    if (btnListo) {
        btnListo.addEventListener('click', handleListoClick);
    } else {
        console.error('No se encontró el botón con el ID #btnListo');
    }

    const buscarInput = document.getElementById('buscarColeccion');
    if (buscarInput) {
        buscarInput.addEventListener('input', () => {
            const query = buscarInput.value.toLowerCase();
            filterCollections(query);
        });
    } else {
        console.error('No se encontró el input con el ID #buscarColeccion');
    }
}