// Toast通知组合式函数
export const useToast = () => {
  // 移除toast函数
  const removeToast = (toastId: string) => {
    const toast = document.getElementById(toastId)
    if (toast) {
      toast.classList.remove('opacity-100', 'translate-x-0')
      toast.classList.add('opacity-0', 'translate-x-full')
      setTimeout(() => {
        toast.remove()
      }, 300)
    }
  }

  // 将函数添加到全局对象（仅在浏览器环境中）
  if (typeof window !== 'undefined') {
    (window as any).removeToast = removeToast
  }

  const showToast = (message: string, type: 'success' | 'error' | 'warning' | 'info' = 'info') => {
    // 创建toast容器（如果不存在）
    let toastContainer = document.getElementById('toast-container')
    if (!toastContainer) {
      toastContainer = document.createElement('div')
      toastContainer.id = 'toast-container'
      toastContainer.className = 'fixed top-4 right-4 z-50 space-y-2'
      document.body.appendChild(toastContainer)
    }

    // 创建toast元素
    const toast = document.createElement('div')
    const toastId = `toast-${Date.now()}`
    toast.id = toastId
    
    // 根据类型设置样式
    const typeClasses = {
      success: 'bg-green-100 border-green-500 text-green-700',
      error: 'bg-red-100 border-red-500 text-red-700',
      warning: 'bg-yellow-100 border-yellow-500 text-yellow-700',
      info: 'bg-blue-100 border-blue-500 text-blue-700'
    }

    const iconMap = {
      success: '✓',
      error: '✕',
      warning: '⚠',
      info: 'ℹ'
    }

    toast.className = `flex items-center p-4 rounded-lg border-l-4 shadow-md transform transition-all duration-300 ease-in-out ${typeClasses[type]} opacity-0 translate-x-full`
    
    toast.innerHTML = `
      <div class="flex-shrink-0 mr-3">
        <span class="text-lg font-bold">${iconMap[type]}</span>
      </div>
      <div class="flex-1">
        <p class="font-medium">${message}</p>
      </div>
      <button onclick="removeToast('${toastId}')" class="ml-4 text-gray-400 hover:text-gray-600">
        ✕
      </button>
    `

    toastContainer.appendChild(toast)

    // 显示动画
    setTimeout(() => {
      toast.classList.remove('opacity-0', 'translate-x-full')
      toast.classList.add('opacity-100', 'translate-x-0')
    }, 100)

    // 自动移除
    setTimeout(() => {
      removeToast(toastId)
    }, 5000)
  }

  return {
    showToast
  }
}