/**
 * Muestra un toast de aviso cuando se bloquea la navegación
 * @param {string} message - Mensaje a mostrar
 * @param {number} duration - Duración en ms (default: 3000)
 */
export function showBlockedNavigationToast(message = 'Guarda los cambios antes de salir', duration = 3000) {
  // Eliminar toast existente si hay uno
  const existingToast = document.querySelector('.blocked-nav-toast');
  if (existingToast) {
    existingToast.remove();
  }

  const toast = document.createElement('div');
  toast.className = 'blocked-nav-toast';

  toast.innerHTML = /*html*/`
    <div class="blocked-nav-toast-content">
      <svg class="blocked-nav-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <circle cx="12" cy="12" r="10"/>
        <line x1="12" y1="8" x2="12" y2="12"/>
        <line x1="12" y1="16" x2="12.01" y2="16"/>
      </svg>
      <span class="blocked-nav-message">${message}</span>
    </div>
  `;

  document.body.appendChild(toast);

  // Animar entrada
  requestAnimationFrame(() => {
    toast.classList.add('visible');
  });

  // Auto-cerrar después del tiempo especificado
  setTimeout(() => {
    toast.classList.remove('visible');
    toast.classList.add('hiding');
    
    setTimeout(() => {
      toast.remove();
    }, 300);
  }, duration);

  return toast;
}