Modals, Toasts & Overlays

/* Modals, Toasts & Overlays — script.js
   Implements modal dialog (focus trap + ESC), toast stack, and drawer.
*/

/* ── Utilities ── */

/** Get all focusable elements within a container */
function getFocusable(container) {
  return Array.from(
    container.querySelectorAll(
      'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
    )
  );
}

/* ── Modal ── */
const modalBackdrop = document.getElementById('modal-backdrop');
const modal = document.getElementById('modal');
const openModalBtn = document.getElementById('open-modal-btn');
const modalCancel = document.getElementById('modal-cancel');
const modalConfirm = document.getElementById('modal-confirm');

let modalPrevFocus = null;
let modalOpen = false;

function openModal() {
  if (modalOpen) return;
  modalOpen = true;
  modalPrevFocus = document.activeElement;

  modalBackdrop.classList.add('is-open');
  modalBackdrop.setAttribute('aria-hidden', 'false');

  // Focus the dialog after transition starts
  requestAnimationFrame(() => {
    modal.focus();
  });

  document.addEventListener('keydown', handleModalKeydown);
}

function closeModal() {
  if (!modalOpen) return;
  modalOpen = false;

  modalBackdrop.classList.remove('is-open');
  modalBackdrop.setAttribute('aria-hidden', 'true');

  document.removeEventListener('keydown', handleModalKeydown);
  modalPrevFocus?.focus();
}

function handleModalKeydown(e) {
  if (e.key === 'Escape') {
    closeModal();
    return;
  }

  // Focus trap
  if (e.key === 'Tab') {
    const focusable = getFocusable(modal);
    const first = focusable[0];
    const last = focusable[focusable.length - 1];

    if (e.shiftKey) {
      if (document.activeElement === first) {
        e.preventDefault();
        last.focus();
      }
    } else {
      if (document.activeElement === last) {
        e.preventDefault();
        first.focus();
      }
    }
  }
}

openModalBtn.addEventListener('click', openModal);
modalCancel.addEventListener('click', closeModal);
modalConfirm.addEventListener('click', () => {
  closeModal();
  showToast('success', 'Action confirmed', 'Your changes have been published.');
});

// Close on backdrop click (not modal itself)
modalBackdrop.addEventListener('click', e => {
  if (e.target === modalBackdrop) closeModal();
});

/* ── Toasts ── */
const toastContainer = document.getElementById('toast-container');
const TOAST_DURATION = 3000;

const TOAST_CONFIG = {
  success: { icon: '✓', title: 'Success', msg: 'Operation completed successfully.' },
  error:   { icon: '✕', title: 'Error',   msg: 'Something went wrong. Please try again.' },
  warning: { icon: '⚠', title: 'Warning', msg: 'Proceed with caution.' },
  info:    { icon: 'ℹ', title: 'Info',    msg: 'Here is some useful information.' },
};

function showToast(type, title, msg) {
  const cfg = TOAST_CONFIG[type];
  const toast = document.createElement('div');
  toast.className = `toast toast-${type}`;
  toast.setAttribute('role', 'status');
  toast.innerHTML = `
    <span class="toast-icon">${cfg.icon}</span>
    <div class="toast-content">
      <div class="toast-title">${title || cfg.title}</div>
      <div class="toast-msg">${msg || cfg.msg}</div>
    </div>
    <button class="toast-dismiss" aria-label="Dismiss notification">×</button>
  `;

  toastContainer.appendChild(toast);

  // Animate in
  requestAnimationFrame(() => {
    requestAnimationFrame(() => toast.classList.add('is-visible'));
  });

  // Auto-dismiss
  let dismissTimer = setTimeout(() => removeToast(toast), TOAST_DURATION);

  toast.querySelector('.toast-dismiss').addEventListener('click', () => {
    clearTimeout(dismissTimer);
    removeToast(toast);
  });
}

function removeToast(toast) {
  toast.classList.remove('is-visible');
  toast.classList.add('is-leaving');
  toast.addEventListener('transitionend', () => toast.remove(), { once: true });
}

document.querySelectorAll('.toast-btn').forEach(btn => {
  btn.addEventListener('click', () => showToast(btn.dataset.type));
});

/* ── Drawer ── */
const drawerOverlay = document.getElementById('drawer-overlay');
const drawer = document.getElementById('drawer');
const openDrawerBtn = document.getElementById('open-drawer-btn');
const drawerCloseBtn = document.getElementById('drawer-close');

let drawerPrevFocus = null;
let drawerOpen = false;

function openDrawer() {
  if (drawerOpen) return;
  drawerOpen = true;
  drawerPrevFocus = document.activeElement;

  drawerOverlay.classList.add('is-open');
  drawerOverlay.setAttribute('aria-hidden', 'false');
  drawer.classList.add('is-open');

  requestAnimationFrame(() => {
    drawer.focus();
  });

  document.addEventListener('keydown', handleDrawerKeydown);
}

function closeDrawer() {
  if (!drawerOpen) return;
  drawerOpen = false;

  drawerOverlay.classList.remove('is-open');
  drawerOverlay.setAttribute('aria-hidden', 'true');
  drawer.classList.remove('is-open');

  document.removeEventListener('keydown', handleDrawerKeydown);
  drawerPrevFocus?.focus();
}

function handleDrawerKeydown(e) {
  if (e.key === 'Escape') {
    closeDrawer();
    return;
  }

  // Focus trap
  if (e.key === 'Tab') {
    const focusable = getFocusable(drawer);
    const first = focusable[0];
    const last = focusable[focusable.length - 1];

    if (e.shiftKey) {
      if (document.activeElement === first) {
        e.preventDefault();
        last.focus();
      }
    } else {
      if (document.activeElement === last) {
        e.preventDefault();
        first.focus();
      }
    }
  }
}

openDrawerBtn.addEventListener('click', openDrawer);
drawerCloseBtn.addEventListener('click', closeDrawer);
drawerOverlay.addEventListener('click', closeDrawer);