// Simple toast notification system
type ToastType = 'success' | 'error' | 'info' | 'warning'

interface ToastOptions {
  message: string
  type: ToastType
  duration?: number
}

class ToastManager {
  private container: HTMLDivElement | null = null

  private getContainer() {
    if (!this.container) {
      this.container = document.createElement('div')
      this.container.id = 'toast-container'
      this.container.className = 'fixed top-4 right-4 z-50 space-y-2'
      document.body.appendChild(this.container)
    }
    return this.container
  }

  private show({ message, type, duration = 3000 }: ToastOptions) {
    const container = this.getContainer()
    const toast = document.createElement('div')
    
    const colors = {
      success: 'bg-green-500',
      error: 'bg-red-500',
      info: 'bg-blue-500',
      warning: 'bg-yellow-500',
    }
    
    toast.className = `${colors[type]} text-white px-6 py-3 rounded-lg shadow-lg transform transition-all duration-300 translate-x-0 opacity-100`
    toast.textContent = message
    
    container.appendChild(toast)
    
    setTimeout(() => {
      toast.classList.add('translate-x-full', 'opacity-0')
      setTimeout(() => {
        container.removeChild(toast)
      }, 300)
    }, duration)
  }

  success(message: string, duration?: number) {
    this.show({ message, type: 'success', duration })
  }

  error(message: string, duration?: number) {
    this.show({ message, type: 'error', duration })
  }

  info(message: string, duration?: number) {
    this.show({ message, type: 'info', duration })
  }

  warning(message: string, duration?: number) {
    this.show({ message, type: 'warning', duration })
  }
}

export const toast = new ToastManager()
