export default function archivesFondsArchivesInit() {
  const toolbar = document.querySelector('.fonds-archives-grid__toolbar');
  if (!toolbar) return;

  const lettersButtons = toolbar.querySelectorAll(
    '.alphabetical-order-select__button',
  ) as NodeListOf<HTMLButtonElement>;
  const sortBySelect = toolbar.querySelector(
    'select[name="sort_by"]',
  ) as HTMLSelectElement;
  const postsContainer = document.querySelector('.post-grid__list');
  const postCountElement = document.querySelector('.post-count__count');

  if (!lettersButtons.length || !postsContainer) return;
  const postsContainerElement = postsContainer as HTMLElement;

  let activeLetter = '';
  let currentAbortController: AbortController | null = null;
  let lastRequestId = 0;

  function setActiveLetterButton(letter: string) {
    lettersButtons.forEach((button) => {
      const isActive = button.dataset.letter === letter;
      button.classList.toggle('is-active', isActive);
      button.setAttribute('aria-pressed', isActive ? 'true' : 'false');
    });
  }

  async function hydrateFondsArchivesByLetter() {
    const params = new URLSearchParams({
      start_letter: activeLetter,
      sort_by: sortBySelect?.value ?? 'title_asc',
      post_type: 'fonds-archives',
    });

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

    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();

      if (requestId !== lastRequestId) return;

      postsContainerElement.innerHTML = data.html_template;
      if (postCountElement) {
        postCountElement.textContent = String(data.post_count ?? 0);
      }
    } catch (error) {
      if ((error as Error).name === 'AbortError') return;
      console.error('Erreur lors de la récupération des fonds d’archives:', error);
    }
  }

  lettersButtons.forEach((button) => {
    button.setAttribute('aria-pressed', 'false');
    button.addEventListener('click', (event) => {
      event.preventDefault();
      const clickedLetter = button.dataset.letter ?? '';
      activeLetter = activeLetter === clickedLetter ? '' : clickedLetter;
      setActiveLetterButton(activeLetter);
      hydrateFondsArchivesByLetter();
    });
  });

  if (sortBySelect) {
    sortBySelect.addEventListener('change', () => {
      hydrateFondsArchivesByLetter();
    });
  }
}