document.addEventListener('DOMContentLoaded', function () {
  const loadButtonWrapper = document.querySelector('.bloglex-advanced-pagination');

  if (!loadButtonWrapper) return;

  const loadButton = loadButtonWrapper.querySelector('.bloglex-ajax-load-button');
  const loader = loadButtonWrapper.querySelector('.bloglex-pagination-spinner');
  const postsListWrapper = document.querySelector('.article-groups');

  if (!loadButton || !loader || !postsListWrapper) {
    console.error('Required elements not found.');
    return;
  }

  let currentPage = parseInt(loadButtonWrapper.getAttribute('data-page'), 10);
  const maxPages = parseInt(loadButtonWrapper.getAttribute('data-max-pages'), 10);
  const loadType = loadButtonWrapper.getAttribute('data-load-type') || 'pagination_ajax_on_click';

  if (isNaN(currentPage) || isNaN(maxPages)) {
    console.error('Invalid pagination attributes.');
    return;
  }

  const fetchThePosts = () => {
    if (currentPage >= maxPages) {
      console.error('No more pages to load.');
      return;
    }

    loadButton.classList.add('loading');
    loader.classList.add('active');

    const data = {
      action: 'bloglex_load_posts',
      nonce: BloglexVars.load_post_nonce_wp,
      query_vars: BloglexVars.query_vars,
      query_vars_hash: BloglexVars.query_vars_hash,
      page: currentPage + 1,
      post_type: 'post' // Adjust this if you're loading a different post type
    };

    fetch(BloglexVars.ajaxurl, {
      method: 'POST',
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
      body: new URLSearchParams(data)
    })
        .then(response => {
          if (!response.ok) throw new Error(`HTTP error! Status: ${response.status}`);
          return response.json();
        })
        .then(response => {
          if (response.success) {
            const content = response.data.content.join('');
            const tempDiv = document.createElement('div');
            tempDiv.innerHTML = content;
            Array.from(tempDiv.children).forEach((child, index) => {
              child.classList.add('bloglex-post-animate');
              child.style.animationDelay = `${index * 0.1}s`;
              postsListWrapper.appendChild(child);
            });

            currentPage++;
            loadButtonWrapper.setAttribute('data-page', currentPage);

            if (currentPage >= maxPages) {
              loadButtonWrapper.style.display = 'none';
            }

            document.body.dispatchEvent(new Event('posts-loaded'));
          } else {
            console.error('Failed to load posts:', response.data);
          }
        })
        .catch(error => {
          console.error('Error during fetch:', error);
        })
        .finally(() => {
          loadButton.classList.remove('loading');
          loader.classList.remove('active');
        });
  };

  const debounce = (func, wait) => {
    let timeout;
    return function (...args) {
      const later = () => {
        clearTimeout(timeout);
        func.apply(this, args);
      };
      clearTimeout(timeout);
      timeout = setTimeout(later, wait);
    };
  };

  if (loadType === 'pagination_ajax_on_click') {
    loadButton.addEventListener('click', function (event) {
      event.preventDefault();
      fetchThePosts();
    });
  } else if (loadType === 'pagination_ajax_on_scroll') {
    const handleScroll = debounce(function () {
      const btnPosition = loadButtonWrapper.getBoundingClientRect().top;
      const isBtnVisible = btnPosition - window.innerHeight <= 400;
      if (currentPage < maxPages && isBtnVisible) {
        fetchThePosts();
      }
    }, 200);

    window.addEventListener('scroll', handleScroll);
  }
});