/**
 * Modern Toast Notification for Dashboard
 * This script creates and shows a beautiful, modern toast notification
 * that appears when the dashboard is fully loaded
 */

document.addEventListener('DOMContentLoaded', function() {
  // Create the toast container if it doesn't exist
  let toastContainer = document.querySelector('.toast-container');
  if (!toastContainer) {
    toastContainer = document.createElement('div');
    toastContainer.className = 'toast-container';
    document.body.appendChild(toastContainer);
  }
  
  // Create the toast notification
  const toast = document.createElement('div');
  toast.className = 'toast-modern';
  toast.innerHTML = `
    <div class="toast-header">
      <div class="toast-title">
        <div class="toast-icon">
          <i class="fas fa-check"></i>
        </div>
        <span>Sistema Cargado</span>
      </div>
      <button type="button" class="toast-close" aria-label="Close">
        <i class="fas fa-times"></i>
      </button>
    </div>
    <div class="toast-body">
      <p class="mb-1">El panel administrativo está listo para usar.</p>
      <p class="text-muted mb-0" style="font-size: 0.85rem;">Todos los módulos han sido cargados correctamente.</p>
    </div>
  `;
  
  // Add the toast to the container
  toastContainer.appendChild(toast);
  
  // Add event listener to close button
  const closeButton = toast.querySelector('.toast-close');
  closeButton.addEventListener('click', function() {
    closeToast(toast);
  });
  
  // Play a subtle notification sound if browser allows
  try {
    // Create a simple sound using Web Audio API
    const audioContext = new (window.AudioContext || window.webkitAudioContext)();
    
    // Create oscillator for the notification "ding"
    const oscillator = audioContext.createOscillator();
    oscillator.type = 'sine';
    oscillator.frequency.setValueAtTime(880, audioContext.currentTime); // Note A5
    
    // Create a gain node to control volume
    const gainNode = audioContext.createGain();
    gainNode.gain.setValueAtTime(0.1, audioContext.currentTime);
    gainNode.gain.exponentialRampToValueAtTime(0.001, audioContext.currentTime + 0.5);
    
    // Connect nodes
    oscillator.connect(gainNode);
    gainNode.connect(audioContext.destination);
    
    // Play a short tone
    oscillator.start();
    oscillator.stop(audioContext.currentTime + 0.3);
  } catch(e) {
    console.log('Audio notification not supported in this browser');
  }
  
  // Auto close after 5 seconds
  setTimeout(function() {
    closeToast(toast);
  }, 5000);
});

// Function to close toast with animation
function closeToast(toast) {
  toast.style.opacity = '0';
  toast.style.transform = 'translateX(100%)';
  toast.style.transition = 'all 0.3s ease';
  
  setTimeout(function() {
    if (toast.parentNode) {
      toast.parentNode.removeChild(toast);
    }
  }, 300);
}