import { defineCustomElement } from 'vue'
import HelpChatButton from '@/components/help-chat-button/index.vue'
import { setHelpChatButtonConfig, getHelpChatButtonConfig, validateConfig, type HelpChatButtonConfig } from '@/components/help-chat-button/api'

// 全局状态
let isInitialized = false
let customElement: CustomElementConstructor | null = null

// 默认配置
const defaultConfig: Partial<HelpChatButtonConfig> = {
  themeColor: ['#667eea', '#764ba2'],
  position: {
    top: 'auto',
    right: '20px',
    bottom: '20px',
    left: 'auto'
  },
  draggable: true,
  aiChatConfig: {
    pollingInterval: 500,
    botCode: ''
  },
  userId: '',
  userName: '',
  feedbackConfig: {
    systemId: ''
  }
}

/**
 * 初始化 Help Chat Button SDK（Web Components 版本）
 * @param config SDK配置
 */
export const init = (config: HelpChatButtonConfig) => {
  // 防止重复初始化
  if (isInitialized) {
    console.warn('Help Chat Button SDK 已经初始化过了')
    return
  }

  // 验证必需参数
  validateConfig(config)

  // 合并配置
  const finalConfig = { ...defaultConfig, ...config }

  // 设置全局配置
  setHelpChatButtonConfig(finalConfig)

  // 检查是否支持Web Components
  if (!window.customElements) {
    throw new Error('当前浏览器不支持Web Components，请使用现代浏览器')
  }

  // 定义Web Component
  const tagName = 'help-chat-button-widget'
  if (!customElement) {
    customElement = defineCustomElement(HelpChatButton, {
      shadowRoot: false,
      styles: []
    })
    customElements.define(tagName, customElement)
  }

  // 创建并添加到页面
  const widget = document.createElement(tagName) as any
  
  // 直接设置 Vue 组件的 props，避免 HTML 属性限制
  // 这样可以避免 InvalidCharacterError
  widget.themeColor = finalConfig.themeColor || ['#667eea', '#764ba2']
  widget.position = finalConfig.position || {
    top: 'auto',
    right: '20px',
    bottom: '20px',
    left: 'auto'
  }
  widget.draggable = finalConfig.draggable !== false
  widget.aiChatConfig = finalConfig.aiChatConfig || {
    pollingInterval: 500,
    botCode: ''
  }
  widget.userId = finalConfig.userId || ''
  widget.userName = finalConfig.userName || 'name'
  widget.feedbackConfig = finalConfig.feedbackConfig || {
    systemId: ''
  }

  // 添加到body
  document.body.appendChild(widget)

  // 标记为已初始化
  isInitialized = true

  console.log('Help Chat Button SDK 初始化成功（Web Components版本）', finalConfig)
}

/**
 * 销毁SDK实例
 */
export const destroy = () => {
  if (!isInitialized) {
    console.warn('Help Chat Button SDK 未初始化或已经销毁')
    return
  }

  // 移除所有help-chat-button-widget元素
  const widgets = document.querySelectorAll('help-chat-button-widget')
  widgets.forEach(widget => widget.remove())

  // 重置状态
  isInitialized = false

  console.log('Help Chat Button SDK 已销毁')
}

/**
 * 检查SDK是否已初始化
 */
export const isSDKInitialized = () => isInitialized

/**
 * 重新配置SDK（需要先销毁再初始化）
 */
export const reconfigure = (config: HelpChatButtonConfig) => {
  destroy()
  init(config)
}

/**
 * 获取当前配置
 */
export const getConfig = () => getHelpChatButtonConfig()

/**
 * 更新配置（部分更新）
 */
export const updateConfig = (config: Partial<HelpChatButtonConfig>) => {
  if (!isInitialized) {
    console.warn('Help Chat Button SDK 未初始化，无法更新配置')
    return
  }

  const currentConfig = getHelpChatButtonConfig()
  const newConfig = { ...currentConfig, ...config }
  
  // 验证新配置
  validateConfig(newConfig)
  
  // 重新配置
  reconfigure(newConfig)
}

// 导出类型
export type { HelpChatButtonConfig } from '@/components/help-chat-button/api'

// 默认导出
export default {
  init,
  destroy,
  isSDKInitialized,
  reconfigure,
  getConfig,
  updateConfig
}