/**
 * 质感提升说明：
 * 1. 请确保全局样式或 index.css 中包含以下动画定义：
 * * #toast-container {
 * position: fixed; top: 2rem; left: 50%; transform: translateX(-50%);
 * display: flex; flex-direction: column; gap: 0.75rem; z-index: 9999;
 * pointer-events: none;
 * }
 * .toast-item {
 * pointer-events: auto;
 * opacity: 0;
 * transform: translateY(-16px) scale(0.92);
 * transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); // 物理弹簧曲线
 * will-change: transform, opacity;
 * }
 * .toast-item.show {
 * opacity: 1;
 * transform: translateY(0) scale(1);
 * }
 */

export const useToast = () => {
  // 高级感动画：成功的生长对勾
  const getSuccessIcon = () => `
    <svg class="w-5 h-5 flex-shrink-0 text-[green]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="animation: toast-icon-pop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;">
      <style>
        @keyframes toast-draw { to { stroke-dashoffset: 0; } }
        @keyframes toast-icon-pop { 0% { transform: scale(0.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
        .path-circle { stroke-dasharray: 63; stroke-dashoffset: 63; animation: toast-draw 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
        .path-check { stroke-dasharray: 15; stroke-dashoffset: 15; animation: toast-draw 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.25s; }
      </style>
      <circle cx="12" cy="12" r="10" stroke-opacity="0.15"></circle>
      <path d="M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2z" class="path-circle" />
      <path d="M8 12.5l3 3 5-6" class="path-check" />
    </svg>
  `

  // 高级感动画：失败的错落叉号 (新增抖动效果)
  const getErrorIcon = () => `
    <svg class="w-5 h-5 flex-shrink-0 text-red-400 drop-shadow-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="animation: toast-icon-pop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, toast-shake 0.4s ease-in-out 0.4s;">
      <style>
        @keyframes toast-draw { to { stroke-dashoffset: 0; } }
        /* 复用弹跳动画，新增左右警示抖动动画 */
        @keyframes toast-icon-pop { 0% { transform: scale(0.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
        @keyframes toast-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-2.5px); } 50% { transform: translateX(2.5px); } 75% { transform: translateX(-2.5px); } }
        
        .path-circle { stroke-dasharray: 63; stroke-dashoffset: 63; animation: toast-draw 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
        .path-cross-1 { stroke-dasharray: 10; stroke-dashoffset: 10; animation: toast-draw 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.2s; }
        .path-cross-2 { stroke-dasharray: 10; stroke-dashoffset: 10; animation: toast-draw 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.3s; }
      </style>
      <circle cx="12" cy="12" r="10" stroke-opacity="0.15"></circle>
      <path d="M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2z" class="path-circle" />
      <path d="M9 9l6 6" class="path-cross-1" />
      <path d="M15 9l-6 6" class="path-cross-2" />
    </svg>
  `

  // 高级感动画：信息的优雅提示 (天蓝色丝滑延展)
  const getInfoIcon = () => `
    <svg class="w-5 h-5 flex-shrink-0 text-sky-400 drop-shadow-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="animation: toast-icon-pop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;">
      <style>
        @keyframes toast-draw { to { stroke-dashoffset: 0; } }
        @keyframes toast-icon-pop { 0% { transform: scale(0.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
        .path-circle { stroke-dasharray: 63; stroke-dashoffset: 63; animation: toast-draw 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
        .path-info-1 { stroke-dasharray: 2; stroke-dashoffset: 2; animation: toast-draw 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.2s; }
        .path-info-2 { stroke-dasharray: 8; stroke-dashoffset: 8; animation: toast-draw 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.3s; }
      </style>
      <circle cx="12" cy="12" r="10" stroke-opacity="0.15"></circle>
      <path d="M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2z" class="path-circle" />
      <path d="M12 8v.01" class="path-info-1" />
      <path d="M12 12v4" class="path-info-2" />
    </svg>
  `

  // 高级感动画：警告的重点提示 (琥珀色三角 + 抖动)
  const getWarningIcon = () => `
    <svg class="w-5 h-5 flex-shrink-0 text-amber-400 drop-shadow-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="animation: toast-icon-pop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, toast-shake 0.4s ease-in-out 0.4s;">
      <style>
        @keyframes toast-draw { to { stroke-dashoffset: 0; } }
        @keyframes toast-icon-pop { 0% { transform: scale(0.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
        @keyframes toast-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-2.5px); } 50% { transform: translateX(2.5px); } 75% { transform: translateX(-2.5px); } }
        
        .path-triangle { stroke-dasharray: 72; stroke-dashoffset: 72; animation: toast-draw 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
        .path-warn-1 { stroke-dasharray: 6; stroke-dashoffset: 6; animation: toast-draw 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.25s; }
        .path-warn-2 { stroke-dasharray: 2; stroke-dashoffset: 2; animation: toast-draw 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.45s; }
      </style>
      <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" stroke-opacity="0.15" />
      <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" class="path-triangle" />
      <path d="M12 9v4" class="path-warn-1" />
      <path d="M12 17v.01" class="path-warn-2" />
    </svg>
  `

  type ToastType = 'success' | 'error' | 'info' | 'warning'

  const showToast = (message: string, type: ToastType = 'success') => {
    const container = document.getElementById('toast-container')
    if (!container) return

    const toast = document.createElement('div')

    // 质感核心：毛玻璃 (backdrop-blur) + 微调阴影 (shadow-2xl) + 细腻高光边框 (border-white/10)
    const baseClasses = 'toast-item flex items-center gap-3.5 px-4 py-3.5 rounded-2xl border backdrop-blur-xl shadow-2xl transition-all'

    // 状态配置表 (Map映射)，消除啰嗦的 if-else
    const typeConfig: Record<ToastType, { icon: string; classes: string }> = {
      success: { icon: getSuccessIcon(), classes: 'bg-zinc-900/85 border-white/10 shadow-black/40 text-zinc-100' },
      error: { icon: getErrorIcon(), classes: 'bg-red-950/85 border-red-500/20 shadow-red-900/20 text-red-50' },
      info: { icon: getInfoIcon(), classes: 'bg-sky-950/85 border-sky-500/20 shadow-sky-900/20 text-sky-50' },
      warning: { icon: getWarningIcon(), classes: 'bg-amber-950/85 border-amber-500/20 shadow-amber-900/20 text-amber-50' }
    }

    const currentConfig = typeConfig[type] || typeConfig.success
    toast.className = `${baseClasses} ${currentConfig.classes}`

    // 注入我们设计的原生 SVG 动画
    toast.innerHTML = `
      ${currentConfig.icon}
      <span class="text-sm font-medium tracking-wide leading-none pt-[1px]">${message}</span>
    `
    container.appendChild(toast)

    // 显示动画
    requestAnimationFrame(() => {
      requestAnimationFrame(() => toast.classList.add('show'))
    })

    // 3秒后自动隐藏
    setTimeout(() => {
      toast.classList.remove('show')
      setTimeout(() => toast.remove(), 400)
    }, 3000)
  }

  // 便捷方法保持不变
  const success = (message: string) => {
    showToast(message, 'success')
  }

  const error = (message: string) => {
    showToast(message, 'error')
  }
  const info = (message: string) => {
    showToast(message, 'info')
  }
  const warning = (message: string) => {
    showToast(message, 'warning')
  }

  return {
    showToast,
    success,
    error,
    info,
    warning
  }
}