const cards = [...document.querySelectorAll('[data-policy-card]')];
const sections = [...document.querySelectorAll('[data-policy-section]')];
const sortSelect = document.querySelector('#policy-sort');
const colorOrder = ['C', 'W', 'U', 'B', 'R', 'G'];

function closeDialog(dialog) {
  if (dialog?.open) dialog.close();
  const card = dialog?.closest('[data-policy-card]');
  card?.classList.remove('is-open');
  card?.querySelector('.policy-card-trigger')?.setAttribute('aria-expanded', 'false');
}

function openCard(card) {
  cards.forEach((candidate) => {
    const dialog = candidate.querySelector('.policy-modal');
    if (candidate !== card) closeDialog(dialog);
  });
  const trigger = card.querySelector('.policy-card-trigger');
  const dialog = card.querySelector('.policy-modal');
  if (!dialog) return;
  trigger?.setAttribute('aria-expanded', 'true');
  card.classList.add('is-open');
  dialog.showModal();
}

function identityFor(card) {
  const raw = String(card.dataset.colorIdentity || '').toUpperCase();
  return colorOrder.filter((symbol) => raw.includes(symbol));
}

function colorBucket(card) {
  const identity = identityFor(card);
  if (identity.length === 0) return 0;
  if (identity.length > 1) return 7;
  return colorOrder.indexOf(identity[0]) + 1;
}

function applyPolicySort() {
  const descending = sortSelect?.value === 'name-desc';

  sections.forEach((section) => {
    const grid = section.querySelector('[data-policy-grid]');
    const empty = section.querySelector('[data-policy-empty]');
    const sectionCards = [...section.querySelectorAll('[data-policy-card]')];
    sectionCards.sort((a, b) => {
      const bucketDifference = colorBucket(a) - colorBucket(b);
      if (bucketDifference !== 0) return bucketDifference;
      const nameDifference = String(a.dataset.policyName || '').localeCompare(String(b.dataset.policyName || ''), undefined, { sensitivity: 'base', numeric: true });
      return descending ? -nameDifference : nameDifference;
    });
    sectionCards.forEach((card) => {
      grid?.insertBefore(card, empty || null);
    });
  });
}

cards.forEach((card) => {
  const trigger = card.querySelector('.policy-card-trigger');
  const dialog = card.querySelector('.policy-modal');
  trigger?.addEventListener('click', () => openCard(card));
  card.querySelector('[data-policy-close]')?.addEventListener('click', () => {
    closeDialog(dialog);
    trigger?.focus();
  });
  dialog?.addEventListener('click', (event) => {
    const rect = dialog.getBoundingClientRect();
    if (event.clientX < rect.left || event.clientX > rect.right || event.clientY < rect.top || event.clientY > rect.bottom) closeDialog(dialog);
  });
  dialog?.addEventListener('close', () => {
    card.classList.remove('is-open');
    trigger?.setAttribute('aria-expanded', 'false');
  });
});

sortSelect?.addEventListener('change', applyPolicySort);
applyPolicySort();