function ensureAlphabetStyles() {
  if (document.getElementById('alphabet-sort-style')) return;

  const style = document.createElement('style');
  style.id = 'alphabet-sort-style';
  style.textContent = `
    .alphabet-groups-wrapper {
      column-count: 5;
      column-gap: 3rem;
    }

    .alphabet-group {
      break-inside: avoid;
      page-break-inside: avoid;
      -webkit-column-break-inside: avoid;
      margin-bottom: 2rem;
      display: inline-block;
      width: 100%;
    }

    .alphabet-header {
      font-size: 1.25rem;
      font-weight: 700;
      color: #1a2b5f;
      margin-bottom: 0.5rem;
      padding-bottom: 0.5rem;
      border-bottom: 1px solid rgba(26, 43, 95, 0.3);
    }

    .alphabet-names {
      display: flex;
      flex-direction: column;
      gap: 0.375rem;
    }

    .alphabet-name-item {
      font-size: 1rem;
      color: #1a2b5f;
      line-height: 1.4;
    }

    /* Responsive */
    @media (max-width: 1200px) {
      .alphabet-groups-wrapper {
        column-count: 4;
      }
    }

    @media (max-width: 991px) {
      .alphabet-groups-wrapper {
        column-count: 3;
        column-gap: 2rem;
      }
    }

    @media (max-width: 767px) {
      .alphabet-groups-wrapper {
        column-count: 2;
        column-gap: 1.5rem;
      }
    }

    @media (max-width: 479px) {
      .alphabet-groups-wrapper {
        column-count: 1;
      }
    }
  `;
  document.head.appendChild(style);
}

function buildAlphabetGroups() {
  const containers = document.querySelectorAll('.alphabet-container');
  if (!containers.length) return;

  ensureAlphabetStyles();

  containers.forEach((container, containerIndex) => {
    const list = container.querySelector('.alphabetical-list');
    if (!list) return;

    // Remove old rendered groups so rerender stays clean
    container
      .querySelectorAll('[data-alphabet-groups="true"]')
      .forEach((el) => el.remove());

    const items = Array.from(list.querySelectorAll('.w-dyn-item'));
    if (!items.length) return;

    const groups = {};

    items.forEach((item) => {
      const nameEl = item.querySelector('.list-item');
      if (!nameEl) return;

      const name = nameEl.innerText.trim();
      if (!name) return;

      const firstLetter = name.charAt(0).toUpperCase();
      if (!groups[firstLetter]) groups[firstLetter] = [];
      groups[firstLetter].push(item.cloneNode(true));
    });

    const sortedLetters = Object.keys(groups).sort();
    if (!sortedLetters.length) return;

    const alphabetWrapper = document.createElement('div');
    alphabetWrapper.className = 'alphabet-groups-wrapper';
    alphabetWrapper.setAttribute('data-alphabet-groups', 'true');
    alphabetWrapper.setAttribute('data-container-index', containerIndex);

    sortedLetters.forEach((letter) => {
      const groupDiv = document.createElement('div');
      groupDiv.className = 'alphabet-group';
      groupDiv.setAttribute('data-letter', letter);

      const headerDiv = document.createElement('div');
      headerDiv.className = 'alphabet-header';
      headerDiv.innerText = letter;

      const namesDiv = document.createElement('div');
      namesDiv.className = 'alphabet-names';

      groups[letter].forEach((item) => {
        const nameDiv = document.createElement('div');
        nameDiv.className = 'alphabet-name-item';
        nameDiv.innerHTML = item.innerHTML;
        namesDiv.appendChild(nameDiv);
      });

      groupDiv.appendChild(headerDiv);
      groupDiv.appendChild(namesDiv);
      alphabetWrapper.appendChild(groupDiv);
    });

    list.style.display = 'none';
    container.appendChild(alphabetWrapper);
  });
}

const observedLists = new WeakSet();
function observeListChanges() {
  document.querySelectorAll('.alphabet-container .alphabetical-list').forEach((list) => {
    if (observedLists.has(list)) return;
    observedLists.add(list);

    let timer;
    const observer = new MutationObserver(() => {
      clearTimeout(timer);
      timer = setTimeout(() => {
        buildAlphabetGroups();
      }, 80);
    });

    observer.observe(list, { childList: true, subtree: true });
  });
}

let initializedFromFsList = false;

window.FinsweetAttributes = window.FinsweetAttributes || [];
window.FinsweetAttributes.push([
  'list',
  () => {
    initializedFromFsList = true;

    // Wait until Finsweet List render is done, then execute current code
    requestAnimationFrame(() => {
      buildAlphabetGroups();
      observeListChanges();
    });
  },
]);

// Fallback: if Finsweet list is not used on this page, still run once.
document.addEventListener('DOMContentLoaded', function () {
  setTimeout(() => {
    if (!initializedFromFsList) {
      buildAlphabetGroups();
      observeListChanges();
    }
  }, 400);
});