<template>
  <div
    id="dataease-v2-embedded-assistant-sqlbot"
    class="dataease-v2-embedded-assistant-sqlbot"
  ></div>
</template>

<script lang="ts" setup>
import { createApp, onMounted, onUnmounted, reactive, ref } from 'vue'
import request from '@/config/axios'
import { useUserStoreWithOut } from '@/store/modules/user'
import SQDatasetSelect from '@/views/sqlbot/SQDatasetSelect.vue'
import AssistantHead from '@/views/sqlbot/AssistantHead.vue'
const userStore = useUserStoreWithOut()
const loading = ref(true)
const state = reactive({
  domain: '',
  id: '',
  enabled: false,
  valid: false,
  historyShow: false,
  sqlbotScript: null
})
const sqlbotExist = ref(false)
const timer = ref()

const loadSqlbotInfo = () => {
  const url = '/sysParameter/sqlbot'
  request.get({ url }).then(res => {
    if (res && res.data) {
      const { domain, id, enabled, valid } = res.data
      if (!enabled) {
        console.error('sqlbot embedded disabled')
      }
      if (!valid) {
        console.error('sqlbot embedded invalid')
      }
      state.domain = domain
      state.id = id
      state.enabled = enabled
      state.valid = valid
      loadSqlbotPage()
    }
  })
}

const loadSqlbotPage = () => {
  const scriptId = `sqlbot-assistant-float-script-${state.id}`
  const exitsScript = document.getElementById(scriptId)
  if (exitsScript && window['sqlbot_assistant_handler']) {
    mountedEmbeddedPage()
    return
  }
  const script = document.createElement('script')
  script.defer = true
  script.async = true
  script.id = scriptId
  let sqlbotDomain = state.domain
  if (sqlbotDomain.endsWith('/')) {
    sqlbotDomain = sqlbotDomain.slice(0, -1)
  }
  script.src = `${sqlbotDomain}/assistant.js?id=${state.id}&online=true&userFlag=${
    userStore.getUid
  }&t=${new Date().getTime()}`
  script.onload = () => {
    mountedEmbeddedPage()
  }
  document.head.appendChild(script)
  state.sqlbotScript = script
}
const mountedEmbeddedPage = () => {
  if (sqlbotExist.value) {
    return
  }
  const tempTimer = setTimeout(() => {
    if (window['sqlbot_assistant_handler']) {
      const container = document.getElementById('sqlbot-assistant-chat-container')
      if (container) {
        // 数据集选择
        const mountPoint = document.createElement('div')
        mountPoint.id = 'chat-component-mount-point'
        container.appendChild(mountPoint)
        const chatApp = createApp(SQDatasetSelect, {
          // 在这里传递 props
          assistantId: state.id
        })
        chatApp.mount(mountPoint)

        // 头部样式
        const mountPointHead = document.createElement('div')
        mountPointHead.id = 'chat-component-mount-point-head'
        container.appendChild(mountPointHead)
        const chatHeadApp = createApp(AssistantHead)
        chatHeadApp.mount(mountPointHead)
      }
      loading.value = false
      sqlbotExist.value = true
      if (tempTimer) {
        clearTimeout(tempTimer)
      }
    }
  }, 2000)
}

onMounted(() => {
  loadSqlbotInfo()
  timer.value = setInterval(() => {
    loadSqlbotInfo()
  }, 30000)
})

onUnmounted(() => {
  if (timer.value) {
    clearInterval(timer.value)
    timer.value = null
  }

  // 移除 script 标签
  if (state.sqlbotScript && state.sqlbotScript.parentNode) {
    state.sqlbotScript.parentNode.removeChild(state.sqlbotScript)
  }

  // 可选：清理全局变量
  if (window['sqlbot_assistant_handler']) {
    delete window['sqlbot_assistant_handler']
  }
})
</script>

<style lang="less">
#sqlbot-assistant-chat-container {
  z-index: 200;
}
</style>

<style lang="less" scoped>
.dataease-v2-embedded-assistant-sqlbot {
  width: 20px;
  height: 20px;
  overflow: hidden;
  position: absolute;
  display: flex;
}
</style>