import { createApp } from 'vue'
import ErrorModal from '../components/Toast.vue'

class ErrorModalManager {
  constructor() {
    this.instances = []
  }

  // 显示错误弹框
  show(message, options = {}) {
    const container = document.createElement('div')
    document.body.appendChild(container)

    const app = createApp(ErrorModal, {
      message,
      ...options,
      onConfirm: () => {
        if (options.onConfirm) {
          options.onConfirm()
        }
        this.cleanup(app, container)
      },
      onClose: () => {
        if (options.onClose) {
          options.onClose()
        }
        this.cleanup(app, container)
      }
    })

    const instance = app.mount(container)
    this.instances.push(app)

    return {
      close: () => instance.close(),
      instance
    }
  }

  // 清理DOM和实例
  cleanup(app, container) {
    setTimeout(() => {
      if (container && container.parentNode) {
        container.parentNode.removeChild(container)
      }
      app.unmount()

      // 从实例列表中移除
      const index = this.instances.indexOf(app)
      if (index > -1) {
        this.instances.splice(index, 1)
      }
    }, 100)
  }

  // 关闭所有弹框
  closeAll() {
    this.instances.forEach(app => {
      const instance = app._instance
      if (instance && instance.exposed && instance.exposed.close) {
        instance.exposed.close()
      }
    })
    this.instances = []
  }
}

// 创建全局实例
export const errorModal = new ErrorModalManager()

// 快捷方法 - 替代alert
export const showError = (message, title = 'Error') => {
  return errorModal.show(message, { title })
}

// 错误处理的专用方法
export const handleError = (error) => {
  let message = 'An unknown error occurred'
  let title = 'Error'

  if (error.errorCode === 1083) {
    title = 'Service Unavailable'
    message = 'Exchange function is not available'
  } else if (error.message && error.message.includes('HTTP Error: 406')) {
    title = 'Request Not Acceptable'
    message = 'Something went wrong, please retry.'
  } else if (error.message) {
    message = error.message
  }

  return errorModal.show(message, { title })
}

// 确认对话框
export const showConfirm = (message, title = 'Confirm') => {
  return new Promise((resolve) => {
    errorModal.show(message, {
      title,
      confirmText: 'Confirm',
      onConfirm: () => resolve(true),
      onClose: () => resolve(false)
    })
  })
}

export default errorModal