const container = document.getElementById("toastContainer");

/**
 * Show a toast notification.
 * @param {string} message
 * @param {"error"|"warning"|"success"|"info"} type
 * @param {number} duration  ms before auto-dismiss (0 = persistent until manually dismissed)
 * @returns {{ dismiss: () => void }}  call dismiss() to remove early
 */
export function showToast(message, type = "info", duration = 4000) {
  const el = document.createElement("div");
  el.className = `toast ${type} shake`;
  el.textContent = message;
  container.appendChild(el);

  function dismiss() {
    if (!el.parentNode) return;
    el.classList.add("leaving");
    el.addEventListener("animationend", () => el.remove(), { once: true });
  }

  let timer = duration > 0 ? setTimeout(dismiss, duration) : null;

  el.addEventListener("click", () => {
    if (timer) clearTimeout(timer);
    dismiss();
  });

  return { dismiss };
}