document.querySelectorAll('[data-contact-group-selector]').forEach(selector => {
  const search = selector.querySelector('[data-group-search]');
  const count = selector.querySelector('[data-group-selection-count]');
  const clear = selector.querySelector('[data-clear-groups]');
  const empty = selector.querySelector('[data-group-empty]');
  const choices = Array.from(selector.querySelectorAll('.group-choice-list > div > div'));

  const update = () => {
    let selected = 0;
    let visible = 0;
    const query = (search?.value || '').trim().toLocaleLowerCase('fa');
    choices.forEach(choice => {
      const input = choice.querySelector('input[type="checkbox"]');
      const matches = !query || choice.textContent.toLocaleLowerCase('fa').includes(query);
      choice.hidden = !matches;
      choice.classList.toggle('is-selected', Boolean(input?.checked));
      selected += input?.checked ? 1 : 0;
      visible += matches ? 1 : 0;
    });
    if (count) count.textContent = `${selected.toLocaleString('fa-IR')} گروه انتخاب شده`;
    if (clear) clear.disabled = selected === 0;
    if (empty) empty.hidden = visible !== 0;
  };

  selector.addEventListener('change', update);
  search?.addEventListener('input', update);
  clear?.addEventListener('click', () => {
    choices.forEach(choice => {
      const input = choice.querySelector('input[type="checkbox"]');
      if (input) input.checked = false;
    });
    update();
  });
  update();
});