//post-grid__toolbar-actions

export default function archivesInit() {
  const isArchivePage = document.querySelector('body.archive');
  if (!isArchivePage) return;

  const toolbar = document.querySelector('.post-grid__toolbar');
  if (!toolbar) return;

  const postGridToolbarActions = toolbar.querySelector('.post-grid__toolbar-actions');
  const currentPostType = postGridToolbarActions?.getAttribute(
    'data-post-type',
  ) as string;
  const etiquettesSelect = toolbar.querySelector(
    'select[name="etiquettes"]',
  ) as HTMLSelectElement;
  const auteursSelect = toolbar.querySelector(
    'select[name="auteurs"]',
  ) as HTMLSelectElement;
  const sortBySelect = toolbar.querySelector(
    'select[name="sort_by"]',
  ) as HTMLSelectElement;
  const rechercheInput = toolbar.querySelector('.search-bar input') as HTMLInputElement;

  // Évite les courses: annule les requêtes précédentes et ignore les réponses obsolètes
  let currentAbortController: AbortController | null = null;
  let lastRequestId = 0;

  // Debounce simple pour la recherche
  function debounce<T extends (...args: any[]) => void>(fn: T, waitMs: number) {
    let timeoutId: number | undefined;
    return (...args: Parameters<T>) => {
      if (timeoutId) window.clearTimeout(timeoutId);
      timeoutId = window.setTimeout(() => fn(...args), waitMs);
    };
  }

  async function hydratePosts() {
    const etiquetteValue = etiquettesSelect?.value ?? '';
    const auteurValue = auteursSelect?.value ?? '';
    const sortByValue = sortBySelect?.value ?? '';
    const rechercheValue = rechercheInput?.value ?? '';
    const postTypeValue = currentPostType ?? '';

    const params = new URLSearchParams({
      etiquette: etiquetteValue,
      auteur: auteurValue,
      sort_by: sortByValue,
      recherche: rechercheValue,
      post_type: postTypeValue,
    });

    const url = `/wp-json/carhop-datas/v1/build/posts?${params.toString()}`;

    // Annule la précédente et prépare un nouvel identifiant
    if (currentAbortController) currentAbortController.abort();
    currentAbortController = new AbortController();
    const requestId = ++lastRequestId;

    try {
      const response = await fetch(url, { signal: currentAbortController.signal });
      if (!response.ok) throw new Error(`HTTP ${response.status}`);
      const data = await response.json();

      console.log('data', data);

      // Ignore si une requête plus récente a été envoyée
      if (requestId !== lastRequestId) return;

      const articlesContainer = document.querySelector('.post-grid__list');
      if (!articlesContainer) return;
      articlesContainer.innerHTML = data.html_template;

      updatePostCount(data.post_count);
    } catch (error) {
      if ((error as any)?.name === 'AbortError') return;
      console.error('Erreur lors de la récupération des articles:', error);
    }
  }

  const hydratePostsDebounced = debounce(hydratePosts, 150);

  function resetCurrentFilters() {
    if (!etiquettesSelect || !auteursSelect || !rechercheInput) return;

    etiquettesSelect.value = '';
    auteursSelect.value = '';
    rechercheInput.value = '';
  }

  function setFilterByActivebutton(button: HTMLButtonElement) {
    const filterByButtons = document.querySelectorAll('.search-by button');
    if (!filterByButtons) return;
    filterByButtons.forEach((button) => {
      button.setAttribute('aria-selected', 'false');
    });
    button.setAttribute('aria-selected', 'true');
  }

  function handleFilterPostsBy() {
    const filterByButtons = document.querySelectorAll('.search-by button');
    if (!filterByButtons) return;
    filterByButtons.forEach((button) => {
      button.addEventListener('click', (e) => {
        e.preventDefault();
        setFilterByActivebutton(button as HTMLButtonElement);
        resetCurrentFilters();
        hydratePosts(); // immédiat sur action explicite
      });
    });
  }

  auteursSelect.addEventListener('change', (e) => {
    hydratePosts();
  });

  etiquettesSelect.addEventListener('change', (e) => {
    hydratePosts();
  });

  sortBySelect.addEventListener('change', (e) => {
    hydratePosts(); // immédiat pour le tri
  });
  rechercheInput.addEventListener('input', (e) => {
    hydratePostsDebounced(); // debounce pour la saisie rapide
  });
  handleFilterPostsBy();

  postGridToolbarActions.addEventListener('click', (e) => {
    e.preventDefault();
  });
}

function updatePostCount(count: number) {
  const postCount = document.querySelector('.post-count__count');
  if (!postCount) return;
  postCount.innerHTML = count.toString();
}

function scrollToPostsGridIfHasInitialFilter() {
  const postsGrid = document.querySelector('.post-grid');
  const hasInitialFilter = postsGrid?.classList.contains('has-initial-filter');
  if (!hasInitialFilter || !postsGrid) return;

  setTimeout(() => {
    postsGrid.scrollIntoView({ behavior: 'smooth' });
  }, 200);
  setTimeout(() => {
    const etiquettesSelect = document.querySelector(
      '.post-grid__toolbar-actions select[name="etiquettes"]',
    ) as HTMLSelectElement;
    if (!etiquettesSelect) return;
    etiquettesSelect.focus();
  }, 500);
}

window.addEventListener('load', () => {
  scrollToPostsGridIfHasInitialFilter();
});