const HIDDEN_CLASS = 'is-sort-hidden';

// Injecte la règle CSS pour masquer les cards filtrées
const style = document.createElement('style');
style.textContent = `.${HIDDEN_CLASS} { display: none !important; }`;
document.head.appendChild(style);

export function initSort(onLayoutChange) {
  const pageSort = document.querySelector('.page__sort');
  if (!pageSort) return;

  const container = document.querySelector('[data-sort-container]');
  if (!container) return;

  const getCards = () => Array.from(container.querySelectorAll('[data-date]'));

  // — Sort by date —
  const sortBtn = pageSort.querySelector('[data-sort-type]');
  if (sortBtn) {
    sortBtn.addEventListener('click', () => {
      const dir = sortBtn.getAttribute('data-sort-type') === 'down' ? 'up' : 'down';
      sortBtn.setAttribute('data-sort-type', dir);

      const cards = getCards();
      cards.sort((a, b) => {
        const da = new Date(a.dataset.date || 0);
        const db = new Date(b.dataset.date || 0);
        return dir === 'up' ? da - db : db - da;
      });
      cards.forEach(c => container.appendChild(c));

      onLayoutChange?.();
    });
  }

  // — Filter by category / location —
  const filterBtns = Array.from(pageSort.querySelectorAll('[data-filter]'));
  filterBtns.forEach(btn => {
    btn.addEventListener('click', () => {
      const wasSelected = btn.classList.contains('is-selected');

      // Ferme le dropdown parent
      btn.closest('.dropdown')?.classList.remove('is-open');

      // Bascule la sélection
      filterBtns.forEach(b => b.classList.remove('is-selected'));
      const value = wasSelected ? null : btn.getAttribute('data-filter');
      if (!wasSelected) btn.classList.add('is-selected');

      // Affiche / cache les cards
      getCards().forEach(card => {
        if (!value) {
          card.classList.remove(HIDDEN_CLASS);
        } else {
          const cardFilters = (card.dataset.filter || '').split(' ').filter(Boolean);
          card.classList.toggle(HIDDEN_CLASS, !cardFilters.includes(value));
        }
      });

      onLayoutChange?.();
    });
  });
}