// Create a custom event
const cartEvent = new CustomEvent('item-added', {
  detail: {
    productId: 42,
    name: 'Wireless Mouse',
    price: 29.99
  },
  bubbles: true
});

// Dispatch the event on any element
document.querySelector('.add-to-cart').dispatchEvent(cartEvent);

// Listen anywhere up the DOM tree (because bubbles: true)
document.addEventListener('item-added', (event) => {
  console.log('Added:', event.detail.name);
  console.log('Price:', event.detail.price);
  updateCartBadge();
});

// ✅ Named function — can be removed
function handleClick(event) {
  console.log('Clicked!', event.target);
}

button.addEventListener('click', handleClick);
// Later, when done:
button.removeEventListener('click', handleClick);

// ❌ Anonymous function — CANNOT be removed
button.addEventListener('click', (event) => {
  console.log('Clicked!');
});
// No way to reference this function to remove it!

const controller = new AbortController();

// Add multiple listeners with the same signal
button.addEventListener('click', handleClick, { signal: controller.signal });
button.addEventListener('mouseenter', handleHover, { signal: controller.signal });
window.addEventListener('resize', handleResize, { signal: controller.signal });

// Remove ALL of them at once
controller.abort();

// Only fire once (great for one-time animations)
dialog.addEventListener('transitionend', () => {
  dialog.remove();
}, { once: true });

// Passive scroll listener (smoother performance)
window.addEventListener('scroll', handleScroll, { passive: true });

// Capture phase — fires BEFORE the target element
document.addEventListener('click', (e) => {
  console.log('Captured on document first!');
}, { capture: true });

function throttle(fn, limit) {
  let waiting = false;
  return function(...args) {
    if (!waiting) {
      fn.apply(this, args);
      waiting = true;
      setTimeout(() => { waiting = false; }, limit);
    }
  };
}

// Scroll handler runs at most once every 200ms
window.addEventListener('scroll',
  throttle(updateScrollIndicator, 200),
  { passive: true }
);

function debounce(fn, delay) {
  let timer;
  return function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  };
}

// Only search after user stops typing for 300ms
searchInput.addEventListener('input',
  debounce(performSearch, 300)
);

// Prevent a form from submitting (validate first)
form.addEventListener('submit', (event) => {
  if (!isFormValid()) {
    event.preventDefault();
    showErrors();
  }
});

// Prevent a link from navigating
link.addEventListener('click', (event) => {
  event.preventDefault();
  smoothScrollTo(link.hash);
});

// Clicking the close button shouldn't also trigger the card click
card.addEventListener('click', () => {
  openCardDetail();
});

closeBtn.addEventListener('click', (event) => {
  event.stopPropagation();
  closeCard();
});

function trapFocus(modal) {
  const focusable = modal.querySelectorAll(
    'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
  );
  const first = focusable[0];
  const last = focusable[focusable.length - 1];

  modal.addEventListener('keydown', (e) => {
    if (e.key !== 'Tab') return;

    if (e.shiftKey) {
      // Shift+Tab: if on first element, wrap to last
      if (document.activeElement === first) {
        e.preventDefault();
        last.focus();
      }
    } else {
      // Tab: if on last element, wrap to first
      if (document.activeElement === last) {
        e.preventDefault();
        first.focus();
      }
    }
  });

  first.focus();
}

const bus = document.createElement('div');

// Module A publishes
bus.dispatchEvent(new CustomEvent('user-logged-in', {
  detail: { username: 'alice' }
}));

// Module B subscribes
bus.addEventListener('user-logged-in', (e) => {
  showWelcomeMessage(e.detail.username);
});

// Lazy-load a library the first time a feature is used
mapButton.addEventListener('click', async () => {
  const maps = await import('./maps.js');
  maps.init();
}, { once: true });

function openModal(modal) {
  modal.hidden = false;
  trapFocus(modal);

  const handleEsc = (e) => {
    if (e.key === 'Escape') {
      closeModal(modal);
      document.removeEventListener('keydown', handleEsc);
    }
  };
  document.addEventListener('keydown', handleEsc);
}