<script setup lang='ts'>
import type { Ref } from 'vue'
import { computed, onMounted, onUnmounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import { storeToRefs } from 'pinia'
import {
  NAutoComplete,
  NButton,
  NInput,
  useDialog,
  useMessage,
} from 'naive-ui'
import html2canvas from 'html2canvas'
import { Message } from './components'
import { useScroll } from './hooks/useScroll'
import { useChat } from './hooks/useChat'
import { useUsingContext } from './hooks/useUsingContext'
import HeaderComponent from './components/Header/index.vue'
import { HoverButton, SvgIcon } from '@/components/common'
import { useBasicLayout } from '@/hooks/useBasicLayout'
import { useChatStore, usePromptStore } from '@/store'
import { fetchChatAPIProcess } from '@/api'
import { t } from '@/locales'
import indexBG from '@/components/animation/indexBG.vue'
import recording from '@/components/animation/recording.vue'
import inputing from '@/components/animation/inputing.vue'
import lodingSpin from '@/components/animation/lodingSpin.vue'

// import IatRecorder from '@/utils/larRcorder.js'

// import socket from "@/websocket/socket";

// let socket = new WebSocket("wss://chat.lihaink.cn/chat");

const maxWeight = ref(1200)

// 接收命令
const connection = new Push({
  url: 'wss://chat.lihaink.cn/zhanti/push', // websocket地址
  app_key: 'aaea61749929eb53a4bd75a1474c1d27',
  auth: '/plugin/webman/push/auth', // 订阅鉴权(仅限于私有频道)
})

// 是否正在录音
const recordFalg = ref(0)

// 假设用户uid为1
const uid = 1
// 浏览器监听user-1频道的消息，也就是用户uid为1的用户消息
const user_channel = connection.subscribe(`user-${uid}`)
console.log(user_channel)
// 当user-1频道有message事件的消息时
user_channel.on('message', (data: any) => {
  // data里是消息内容
  console.log('收到命令', data)
  if (recordFalg.value == 0) {
    RecordXunfei()
    recordFalg.value = 1
    nowStatus.value = 'record'
  }
  else {
    RecordXunfei()
    recordFalg.value = 0
    nowStatus.value = 'loding'
    handleSubmit()
  }
})

const changeRecord = () => {
  if (recordFalg.value == 0) {
    RecordXunfei()
    recordFalg.value = 1
    nowStatus.value = 'record'
  }
  else {
    RecordXunfei()
    recordFalg.value = 0
    nowStatus.value = 'input'
  }
}

let controller = new AbortController()

const openLongReply = import.meta.env.VITE_GLOB_OPEN_LONG_REPLY === 'true'

const route = useRoute()
const dialog = useDialog()
const ms = useMessage()

const chatStore = useChatStore()

const { isMobile } = useBasicLayout()
const { addChat, updateChat, updateChatSome, getChatByUuidAndIndex }
  = useChat()
const { scrollRef, scrollToBottom, scrollToBottomIfAtBottom } = useScroll()
const { usingContext, toggleUsingContext } = useUsingContext()

const { uuid } = route.params as { uuid: string }
chatStore.getChatByUuid(+uuid).length = 0

const dataSources = computed(() => chatStore.getChatByUuid(+uuid))
const conversationList = computed(() =>
  dataSources.value.filter(
    item => !item.inversion && !!item.conversationOptions,
  ),
)

const prompt = ref<string>('')
const loading = ref<boolean>(false)
const inputRef = ref<Ref | null>(null)
const nowStatus = ref('input') // 当前系统状态, input等待, loding加载, record录音,
const nowStart = ref(true) // 当前是否有消息, 有才显示聊天记录

// 添加PromptStore
const promptStore = usePromptStore()

// 使用storeToRefs，保证store修改后，联想部分能够重新渲染
const { promptList: promptTemplate } = storeToRefs<any>(promptStore)

// 未知原因刷新页面，loading 状态不会重置，手动重置
dataSources.value.forEach((item, index) => {
  if (item.loading)
    updateChatSome(+uuid, index, { loading: false })
})

function handleSubmit() {
  onConversation()
}

// 发送消息
async function onConversation() {
  const message = prompt.value

  const socket = new WebSocket('wss://chat.lihaink.cn/chat')

  const promise = () => {
    return new Promise((resolve, reject) => {
      // 监听WebSocket连接打开事件
      socket.onopen = () => {
        console.log('socket已连接')
        resolve(null)
      }
    })
  }

  await promise()

  // 监听WebSocket关闭事件
  socket.onclose = (event: any) => {
    console.log('连接已关闭: ', event)
    nowStatus.value = 'input'
  }
  socket.onerror = (event: any) => {
    console.log('连接出错: ', event)
    nowStatus.value = 'input'
  }

  if (loading.value)
    return

  if (!message || message.trim() === '')
    return

  controller = new AbortController()

  addChat(+uuid, {
    dateTime: new Date().toLocaleString(),
    text: message,
		tts: '',
    inversion: true,
    error: false,
    conversationOptions: null,
    requestOptions: { prompt: message, options: null },
  })
  scrollToBottom()

  loading.value = true
  prompt.value = ''

  let options: Chat.ConversationRequest = {}
  const lastContext
    = conversationList.value[conversationList.value.length - 1]
      ?.conversationOptions

  if (lastContext && usingContext.value)
    options = { ...lastContext }

  addChat(+uuid, {
    dateTime: new Date().toLocaleString(),
    text: '思考中',
		tts: '',
    loading: true,
    inversion: false,
    error: false,
    conversationOptions: null,
    requestOptions: { prompt: message, options: { ...options } },
  })
  scrollToBottom()

  try {
    let lastText = ''
		const tts:any = [];
    console.log('发送消息', message)

    const fetchChatAPIOnce = async () => {
      socket.send(JSON.stringify({
        tts: 1,
        data: [
          {
            role: 'user',
            content: message,
          },
        ],
      }))
      nowStatus.value = 'loding'

      // 监听WebSocket接收消息事件
      socket.onmessage = (event: any) => {
        try {
          const msg = JSON.parse(event.data)
          // console.log(`收到消息: `, msg.payload.choices.text[0].content);
          // console.log(`当前消息: `, dataSources.value[dataSources.value.length - 1].text);
          lastText += msg.payload.choices.text[0].content
					console.log('tts:', msg.payload.choices.tts_text);
					msg.payload.choices.tts_text != '' ? tts.push(msg.payload.choices.tts_text): null;
          const loading = false
          nowStart.value = false
          updateChat(
            +uuid,
            dataSources.value.length - 1,
            {
              dateTime: new Date().toLocaleString(),
              text: lastText,
              inversion: false,
							tts: JSON.stringify(tts),
              error: false,
              loading,
              conversationOptions: { conversationId: msg.header.sid, parentMessageId: msg.header.sid },
              requestOptions: { prompt: message, options: { ...options } },
            },
          )
          // 关闭连接
          if (msg.header.code != 0 || (event.data && msg.header.status == 2)) {
            nowStatus.value = 'input'
            socket.close()
          }
        }
        catch (error) {
          nowStatus.value = 'input'
          socket.close()
        }
      }

      // await fetchChatAPIProcess<Chat.ConversationResponse>({
      //   prompt: message,
      //   options,
      //   signal: controller.signal,
      //   onDownloadProgress: ({ event }) => {
      //     const xhr = event.target
      //     const { responseText } = xhr
      //     // Always process the final line
      //     const lastIndex = responseText.lastIndexOf('\n', responseText.length - 2)
      //     let chunk = responseText
      //     if (lastIndex !== -1)
      //       chunk = responseText.substring(lastIndex)
      //     try {
      //       const data = JSON.parse(chunk)
      //       updateChat(
      //         +uuid,
      //         dataSources.value.length - 1,
      //         {
      //           dateTime: new Date().toLocaleString(),
      //           text: lastText + (data.text ?? ''),
      //           inversion: false,
      //           error: false,
      //           loading: true,
      //           conversationOptions: { conversationId: data.conversationId, parentMessageId: data.id },
      //           requestOptions: { prompt: message, options: { ...options } },
      //         },
      //       )

      //       if (openLongReply && data.detail.choices[0].finish_reason === 'length') {
      //         options.parentMessageId = data.id
      //         lastText = data.text
      //         message = ''
      //         return fetchChatAPIOnce()
      //       }

      //       scrollToBottomIfAtBottom()
      //     }
      //     catch (error) {
      //       //
      //     }
      //   },
      // })
      updateChatSome(+uuid, dataSources.value.length - 1, { loading: false })
    }

    await fetchChatAPIOnce()
  }
  catch (error: any) {
    const errorMessage = error?.message ?? t('common.wrong')

    if (error.message === 'canceled') {
      updateChatSome(+uuid, dataSources.value.length - 1, {
        loading: false,
      })
      scrollToBottomIfAtBottom()
      return
    }

    const currentChat = getChatByUuidAndIndex(
      +uuid,
      dataSources.value.length - 1,
    )

    if (currentChat?.text && currentChat.text !== '') {
      updateChatSome(+uuid, dataSources.value.length - 1, {
        text: `${currentChat.text}\n[${errorMessage}]`,
        error: false,
        loading: false,
      })
      return
    }

    updateChat(+uuid, dataSources.value.length - 1, {
      dateTime: new Date().toLocaleString(),
      text: errorMessage,
      inversion: false,
      error: true,
      loading: false,
      conversationOptions: null,
      requestOptions: { prompt: message, options: { ...options } },
    })
    scrollToBottomIfAtBottom()
  }
  finally {
    loading.value = false
  }
}

async function onRegenerate(index: number) {
  if (loading.value)
    return

  controller = new AbortController()

  const { requestOptions } = dataSources.value[index]

  let message = requestOptions?.prompt ?? ''

  let options: Chat.ConversationRequest = {}

  if (requestOptions.options)
    options = { ...requestOptions.options }

  loading.value = true

  updateChat(+uuid, index, {
    dateTime: new Date().toLocaleString(),
    text: '',
    inversion: false,
    error: false,
    loading: true,
    conversationOptions: null,
    requestOptions: { prompt: message, options: { ...options } },
  })

  try {
    let lastText = ''
    const fetchChatAPIOnce = async () => {
      await fetchChatAPIProcess<Chat.ConversationResponse>({
        prompt: message,
        options,
        signal: controller.signal,
        onDownloadProgress: ({ event }) => {
          const xhr = event.target
          const { responseText } = xhr
          // Always process the final line
          const lastIndex = responseText.lastIndexOf(
            '\n',
            responseText.length - 2,
          )
          let chunk = responseText
          if (lastIndex !== -1)
            chunk = responseText.substring(lastIndex)
          try {
            const data = JSON.parse(chunk)
            updateChat(+uuid, index, {
              dateTime: new Date().toLocaleString(),
              text: lastText + (data.text ?? ''),
              inversion: false,
              error: false,
              loading: true,
              conversationOptions: {
                conversationId: data.conversationId,
                parentMessageId: data.id,
              },
              requestOptions: { prompt: message, options: { ...options } },
            })

            if (
              openLongReply
              && data.detail.choices[0].finish_reason === 'length'
            ) {
              options.parentMessageId = data.id
              lastText = data.text
              message = ''
              return fetchChatAPIOnce()
            }
          }
          catch (error) {
            //
          }
        },
      })
      updateChatSome(+uuid, index, { loading: false })
    }
    await fetchChatAPIOnce()
  }
  catch (error: any) {
    if (error.message === 'canceled') {
      updateChatSome(+uuid, index, {
        loading: false,
      })
      return
    }

    const errorMessage = error?.message ?? t('common.wrong')

    updateChat(+uuid, index, {
      dateTime: new Date().toLocaleString(),
      text: errorMessage,
      inversion: false,
      error: true,
      loading: false,
      conversationOptions: null,
      requestOptions: { prompt: message, options: { ...options } },
    })
  }
  finally {
    loading.value = false
  }
}

function handleExport() {
  if (loading.value)
    return

  const d = dialog.warning({
    title: t('chat.exportImage'),
    content: t('chat.exportImageConfirm'),
    positiveText: t('common.yes'),
    negativeText: t('common.no'),
    onPositiveClick: async () => {
      try {
        d.loading = true
        const ele = document.getElementById('image-wrapper')
        const canvas = await html2canvas(ele as HTMLDivElement, {
          useCORS: true,
        })
        const imgUrl = canvas.toDataURL('image/png')
        const tempLink = document.createElement('a')
        tempLink.style.display = 'none'
        tempLink.href = imgUrl
        tempLink.setAttribute('download', 'chat-shot.png')
        if (typeof tempLink.download === 'undefined')
          tempLink.setAttribute('target', '_blank')

        document.body.appendChild(tempLink)
        tempLink.click()
        document.body.removeChild(tempLink)
        window.URL.revokeObjectURL(imgUrl)
        d.loading = false
        ms.success(t('chat.exportSuccess'))
        Promise.resolve()
      }
      catch (error: any) {
        ms.error(t('chat.exportFailed'))
      }
      finally {
        d.loading = false
      }
    },
  })
}

function handleDelete(index: number) {
  if (loading.value)
    return

  dialog.warning({
    title: t('chat.deleteMessage'),
    content: t('chat.deleteMessageConfirm'),
    positiveText: t('common.yes'),
    negativeText: t('common.no'),
    onPositiveClick: () => {
      chatStore.deleteChatByUuid(+uuid, index)
    },
  })
}

function handleClear() {
  if (loading.value)
    return

  dialog.warning({
    title: t('chat.clearChat'),
    content: t('chat.clearChatConfirm'),
    positiveText: t('common.yes'),
    negativeText: t('common.no'),
    onPositiveClick: () => {
      chatStore.clearChatByUuid(+uuid)
    },
  })
}

function handleEnter(event: KeyboardEvent) {
  if (!isMobile.value) {
    if (event.key === 'Enter' && !event.shiftKey) {
      event.preventDefault()
      handleSubmit()
    }
  }
  else {
    if (event.key === 'Enter' && event.ctrlKey) {
      event.preventDefault()
      handleSubmit()
    }
  }
}

function handleStop() {
  if (loading.value) {
    controller.abort()
    loading.value = false
  }
}

// 可优化部分
// 搜索选项计算，这里使用value作为索引项，所以当出现重复value时渲染异常(多项同时出现选中效果)
// 理想状态下其实应该是key作为索引项,但官方的renderOption会出现问题，所以就需要value反renderLabel实现
const searchOptions = computed(() => {
  if (prompt.value.startsWith('/')) {
    return promptTemplate.value
      .filter((item: { key: string }) =>
        item.key.toLowerCase().includes(prompt.value.substring(1).toLowerCase()),
      )
      .map((obj: { value: any }) => {
        return {
          label: obj.value,
          value: obj.value,
        }
      })
  }
  else {
    return []
  }
})

// value反渲染key
const renderOption = (option: { label: string }) => {
  for (const i of promptTemplate.value) {
    if (i.value === option.label)
      return [i.key]
  }

  return []
}

const placeholder = computed(() => {
  if (isMobile.value)
    return t('chat.placeholderMobile')
  return t('chat.placeholder')
})

const buttonDisabled = computed(() => {
  return loading.value || !prompt.value || prompt.value.trim() === ''
})

const footerClass = computed(() => {
  let classes = ['p-4']
  if (isMobile.value) {
    classes = [
      'sticky',
      'left-0',
      'bottom-0',
      'right-0',
      'p-2',
      'pr-3',
      'overflow-hidden',
    ]
  }
  return classes
})

// 改变状态
const changeNowStatus = (e: any) => {
  console.log('收到数据', e)
  if (e != nowStatus.value) {
    switch (e) {
      case 'playing': nowStatus.value = 'record'; break
      case 'loding': nowStatus.value = 'loding'; break
      default: nowStatus.value = 'input'; break
    }
  }
}

onMounted(() => {
  scrollToBottom()
  if (inputRef.value && !isMobile.value)
    inputRef.value?.focus()
})

onUnmounted(() => {
  if (loading.value)
    controller.abort()
})

window.winText = ''

window.addEventListener('test', (e) => {
  if (recordFalg.value == 1)
    prompt.value = window.winText
})

setTimeout(() => {
  nowStart.value = false
}, 800)
</script>

<template>
  <div class="flex w-full h-full my-layout">
    <indexBG v-if="!isMobile">
      <transition mode="out-in" name="fade">
        <inputing v-if="nowStatus == 'input'" key="input" />
        <recording v-else-if="nowStatus == 'record'" key="record" />
        <!-- <loding v-else-if="nowStatus=='loding'" key="loding"></loding> -->
        <lodingSpin v-else-if="nowStatus == 'loding'" key="loding" />
        <!-- <lodingCir v-else-if="nowStatus=='loding'" key="loding"></lodingCir> -->
      </transition>
    </indexBG>
    <transition name="slide-right-to-left">
      <div v-if="!nowStart" class="flex flex-col w-full h-full" :style="{ 'max-width': `${maxWeight}px` }">
        <HeaderComponent
          v-if="isMobile"
          :using-context="usingContext"
          @export="handleExport"
          @handle-clear="handleClear"
        />
        <main class="flex-1 overflow-hidden">
          <div
            id="scrollRef"
            ref="scrollRef"
            class="h-full overflow-hidden overflow-y-auto"
          >
            <div
              id="image-wrapper"
              class="w-full max-w-screen-xl m-auto dark:bg-[#101014]"
              :class="[isMobile ? 'p-2' : 'p-4']"
              :style="{ 'max-width': `${maxWeight}px` }"
            >
              <!-- <div @click="click">录音开始</div> -->
              <!-- <div>
								浏览器录音听写：<button id="btn_control" @click="click">
									开始录音
								</button>
							</div>
							<br>
							<div id="result" ref="resultRef" /> -->

              <template v-if="!dataSources.length">
                <div
                  class="flex items-center justify-center mt-4 text-center text-neutral-300"
                >
                  <SvgIcon icon="ri:bubble-chart-fill" class="mr-2 text-3xl" />
                  <span>欢迎来到里海AI~</span>
                </div>
              </template>
              <template v-else>
                <div>
                  <Message
                    v-for="(item, index) of dataSources"
                    :key="index"
                    :date-time="item.dateTime"
                    :text="item.text"
										:tts="item.tts"
                    :inversion="item.inversion"
                    :error="item.error"
                    :loading="item.loading"
                    @changeNowStatus="changeNowStatus"
                    @regenerate="onRegenerate(index)"
                    @delete="handleDelete(index)"
                  />
                  <div class="sticky bottom-0 left-0 flex justify-center">
                    <NButton v-if="loading" type="warning" @click="handleStop">
                      <template #icon>
                        <SvgIcon icon="ri:stop-circle-line" />
                      </template>
                      {{ t("common.stopResponding") }}
                    </NButton>
                  </div>
                </div>
              </template>
            </div>
          </div>
        </main>
        <footer :class="footerClass">
          <div
            class="w-full max-w-screen-xl m-auto"
            :style="{ 'max-width': `${maxWeight}px` }"
          >
            <div class="flex items-center justify-between space-x-2">
              <HoverButton v-if="recordFalg == 0" @click="changeRecord">
                <span class="text-xl text-[#4f555e] dark:text-white">
                  录音
                </span>
              </HoverButton>
              <HoverButton v-else-if="recordFalg == 1" @click="changeRecord">
                <span class="text-xl text-[#4f555e] dark:text-white">
                  完成
                </span>
              </HoverButton>
              <HoverButton v-if="!isMobile" @click="handleClear">
                <span class="text-xl text-[#4f555e] dark:text-white">
                  <SvgIcon icon="ri:delete-bin-line" />
                </span>
              </HoverButton>
              <!-- <HoverButton v-if="!isMobile" @click="handleExport">
								<span class="text-xl text-[#4f555e] dark:text-white">
									<SvgIcon icon="ri:download-2-line" />
								</span>
							</HoverButton> -->
              <!-- <HoverButton @click="toggleUsingContext">
								<span
									class="text-xl"
									:class="{
										'text-[#4b9e5f]': usingContext,
										'text-[#a8071a]': !usingContext,
									}"
								>
									<SvgIcon icon="ri:chat-history-line" />
								</span>
							</HoverButton> -->
              <NAutoComplete
                v-model:value="prompt"
                :options="searchOptions"
                :render-label="renderOption"
              >
                <template #default="{ handleInput, handleBlur, handleFocus }">
                  <NInput
                    v-model:value="prompt"
                    type="textarea"
                    :placeholder="placeholder"
                    :autosize="{ minRows: 1, maxRows: isMobile ? 4 : 8 }"
                    @input="handleInput"
                    @focus="handleFocus"
                    @blur="handleBlur"
                    @keypress="handleEnter"
                  />
                </template>
              </NAutoComplete>
              <NButton
                type="primary"
                :disabled="buttonDisabled"
                @click="handleSubmit"
              >
                <template #icon>
                  <span class="dark:text-black">
                    <SvgIcon icon="ri:send-plane-fill" />
                  </span>
                </template>
              </NButton>
            </div>
          </div>
        </footer>
      </div>
    </transition>
  </div>
</template>

<style scoped>
.my-layout{
	justify-content: center;
	align-items: center;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
	/* 调整缓动函数 */
  /* transition-timing-function: ease-in-out; */
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

.slide-right-to-left-enter-active,
.slide-right-to-left-leave-active {
  transition: all 2.0s;
}

.slide-right-to-left-enter,
.slide-right-to-left-leave-to {
  opacity: 1;
  transform: translateX(100%);
}

.slide-right-to-left-enter-to,
.slide-right-to-left-leave {
  opacity: 1;
  transform: translateX(0%);
}
</style>
