<script setup lang='ts'>
import {computed, onActivated, onMounted, onUnmounted, ref} from 'vue'
import { useRoute } from 'vue-router'
import { NAutoComplete, NButton, NInput, useDialog, useMessage } from 'naive-ui'
import html2canvas from 'html2canvas'
import { storeToRefs } from 'pinia'
import axios from 'axios'
import { ElMessage } from 'element-plus'
import Cookies from 'js-cookie'
import { Message } from './components'
import { useScroll } from './hooks/useScroll'
import { useChat } from './hooks/useChat'
import { useCopyCode } from './hooks/useCopyCode'
import { useUsingContext } from './hooks/useUsingContext'
import HeaderComponent from './components/Header/index.vue'
import { HoverButton, SvgIcon } from '@/components/common'
import { useBasicLayout } from '@/hooks/useBasicLayout'
import { countStore, useChatStore, usePromptStore } from '@/store'
import { fetchChatAPIProcess } from '@/api'
import { t } from '@/locales'

let controller = new AbortController()

// const openLongReply = import.meta.env.VITE_GLOB_OPEN_LONG_REPLY === 'true'
window.localStorage.removeItem('appSetting')
window.localStorage.removeItem('chatStorage')
// window.localStorage.removeItem("username")
// window.localStorage.removeItem("password")

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

const chatStore = useChatStore()

useCopyCode()

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

// const { uuid } = route.params as { uuid: string }
const { uuid } = route.params as { uuid: string }

const dataSources = computed(() => chatStore.getChatByUuid(+uuid))
const getEnabledNetwork = computed(() => chatStore.getEnabledNetwork)
// const conversationList = computed(() => dataSources.value.filter(item => (!item.inversion && !item.error)))

const prompt = ref<string>('')
const loading = ref<boolean>(false)

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

function handleSubmit() {
  onConversation()
}
const a1 = countStore()
interface CountResponse {
  msg: string
  code: number
  data: number
}
interface AddResponse {
  msg: string
  code: number
  data: boolean
}

async function onConversation() {
  const message = prompt.value

  if (loading.value)
    return

  if (!message || message.trim() === '')
    return
  // 获取当前登录用户的今天已使用次数
  try {
    const response = await axios.get<CountResponse>(
      `${import.meta.env.VITE_APP_API_BASE_URL
        }/deepSeekLog/findByUserId`,
      {
        headers: {
          Authorization: `Bearer ${Cookies.get('Admin-Token')}`,
        },
      },
    )
    if (response.data.code == 200) {
      a1.randomizeCounter(9 - response.data.data > 0 ? 9 - response.data.data : 0)
      if (response.data.data < 10) {
        try {
          const response = await axios.post<AddResponse>(
            `${import.meta.env.VITE_APP_API_BASE_URL}/deepSeekLog`,
            {
            },
            {
              headers: {
                'content-type': 'application/x-www-form-urlencoded',
                'Authorization': `Bearer ${Cookies.get('Admin-Token')}`, // 身份验证令牌
              },
            },
          )
          if (response.data.code == 200) {
            controller = new AbortController()

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

            loading.value = true
            prompt.value = ''

            const options: Chat.ConversationRequest = {
              conversationId: usingContext.value
                ? window.location.hash
                : Math.random().toString(),
            }
            // const lastContext = conversationList.value[conversationList.value.length - 1]?.conversationOptions

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

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

            try {
              await fetchChatAPIProcess<Chat.ConversationResponse>({
                prompt: message,
                // options,
                signal: controller.signal,
                // network: !!chatStore.getEnabledNetwork,
                onDownloadProgress: ({ event }) => {
                  // debugger;
                  const xhr = event.target
                  const { responseText } = xhr
                  // Always process the final line
                  // const lastIndex = responseText.lastIndexOf('\n')
                  // let chunk = responseText
                  const a1 = responseText
                    .split('\n')
                    .filter((line: any) => line.trim() !== '')
                  let mergedContent = ''
                  a1.forEach((x: any) => {
                    try {
                      const obj = JSON.parse(x)
                      if (obj.message?.content)
                        mergedContent += obj.message.content
                    }
                    catch (error) {
                      console.error('解析失败:', error)
                    }
                  })
                  mergedContent = mergedContent
                    .replace(/\\u003c/g, '<')
                    .replace(/\\u003e/g, '>')
                  // .replace("<think>", '')
                  // .replace("</think>", '');
                  // if (lastIndex !== -1)
                  //   chunk = responseText.substring(lastIndex)
                  try {
                    // const data = JSON.parse(chunk)
                    // debugger;
                    updateChat(+uuid, dataSources.value.length - 1, {
                      dateTime: new Date().toLocaleString(),
                      text: mergedContent ?? '',
                      inversion: false,
                      error: false,
                      loading: false,
                      conversationOptions: {},
                      requestOptions: {
                        prompt: message,
                        options: { ...options },
                      },
                    })
                    scrollToBottom()
                  }
                  catch (error) {
                    //
                  }
                },

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

              if (error.text === 'canceled') {
                updateChatSome(+uuid, dataSources.value.length - 1, {
                  loading: false,
                })
                scrollToBottom()
                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 } },
              })
              scrollToBottom()
            }
            finally {
              loading.value = false
            }
          }
          else {
            ElMessage({
              showClose: true,
              message: response.data.msg,
              type: 'error',
            })
          }
        }
        catch (error) {
          console.error('Error loading user:', error)
        }
        finally {
        }
      }
      else {
        ElMessage({
          showClose: true,
          message: '今日次数已达上限',
          type: 'error',
        })
      }
    }
    else {
      ElMessage({
        showClose: true,
        message: response.data.msg,
        type: 'error',
      })
    }
  }
  catch (error) {
    console.error('Error loading user:', error)
  }
  finally {
  }
}
async function onRegenerate(index: number) {
  // debugger;
  if (loading.value)
    return

  controller = new AbortController()

  const { requestOptions } = dataSources.value[index]

  const 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 },
  })
  // debugger;
  try {
    await fetchChatAPIProcess<Chat.ConversationResponse>({
      prompt: message,
      // options,
      // network: !!chatStore.getEnabledNetwork,
      signal: controller.signal,
      onDownloadProgress: ({ event }) => {
        const xhr = event.target
        const { responseText } = xhr
        // Always process the final line
        // const lastIndex = responseText.lastIndexOf('\n')
        // let chunk = responseText;
        const a1 = responseText
          .split('\n')
          .filter((line: any) => line.trim() !== '')
        let mergedContent = ''
        a1.forEach((x: any) => {
          try {
            const obj = JSON.parse(x)
            if (obj.message?.content)
              mergedContent += obj.message.content
          }
          catch (error) {
            console.error('解析失败:', error)
          }
        })
        mergedContent = mergedContent
          .replace(/\\u003c/g, '<')
          .replace(/\\u003e/g, '>')
        // .replace("<think>", '')
        // .replace("</think>", '');
        // if (lastIndex !== -1)
        // chunk = responseText.substring(lastIndex)
        try {
          // const data = JSON.parse(chunk)
          updateChat(+uuid, dataSources.value.length - 1, {
            dateTime: new Date().toLocaleString(),
            text: mergedContent ?? '',
            inversion: false,
            error: false,
            loading: false,
            conversationOptions: {},
            requestOptions: { prompt: message, options: { ...options } },
          })
          scrollToBottom()
        }
        catch (error) {
          //
        }
      },
    })
  }
  catch (error: any) {
    if (error.text === 'canceled') {
      updateChatSome(+uuid, index, {
        loading: false,
      })
      return
    }

    const errorMessage = 'Something went wrong, please try again later.'

    updateChat(+uuid, index, {
      dateTime: new Date().toLocaleString(),
      text: errorMessage,
      inversion: false,
      error: true,
      loading: false,
      conversationOptions: null,
      requestOptions: { prompt: message, ...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) {
        console.error('error', error)
        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() {
  chatStore.toggleNetwork()
}

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() {
  // debugger;
  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 === option.label)
      return [i]
  }

  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() === '')
    && a1.count1 < 10
  )
})

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
})
onActivated(() => {
  handleLogin()
})

const handleLogin = async () => {
  // 获取当前登录用户的今天已使用次数
  const response = await axios.get<CountResponse>(
		`${import.meta.env.VITE_APP_API_BASE_URL
		}/deepSeekLog/findByUserId`,
		{
		  headers: {
		    Authorization: `Bearer ${Cookies.get('Admin-Token')}`,
		  },
		},
  )
  try {
    if (response.data.code == 200) {
      a1.randomizeCounter(10 - response.data.data)
      if (response.data.data < 10) {
      }
      else {
        ElMessage({
          showClose: true,
          message: '今日次数已达上限',
          type: 'error',
        })
      }
    }
    else {
      ElMessage({
        showClose: true,
        message: response.data.msg,
        type: 'error',
      })
    }
  }
  catch {
  }
  finally { /* empty */ }
  scrollToBottom()
}

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

<template>
  <div class="flex flex-col w-full h-full">
    <HeaderComponent
      v-if="isMobile"
      :using-context="usingContext"
      @export="handleExport"
      @toggle-using-context="toggleUsingContext"
    />
    <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']"
        >
          <template v-if="!dataSources.length">
            <div
              class="flex items-center flex-col justify-center mt-4 text-center"
            >
              <!-- <SvgIcon icon="ri:bubble-chart-fill" class="mr-2 text-3xl" />
              <div>永久免费提供学习和测试，支持上下文，支持开启关闭联网模式，支持保存会话，切勿发布至国内平台或微信分享</div>
              <div>被举报了，chat.binjie.site域名的dns被运营商污染了。。60%以上地区无法访问</div>
              <div>可以访问境内镜像： https://chat1.binjie.site:7777 或者chat2,chat3,一直到9</div>
              <div>还可以访问 cloudflare托管的 https://chat.yqcloud.top/</div>
              <div></div>
              <div>如果你觉得做的好，可以给我买一瓶冰阔落</div>
              <div>
                <img src="https://store-cbj.oss-cn-beijing.aliyuncs.com/kele.jpg" width="200" height="100" alt="kele">
              </div> -->
            </div>
          </template>
          <template v-else>
            <Message
              v-for="(item, index) of dataSources"
              :key="index"
              :date-time="item.dateTime"
              :text="item.text"
              :inversion="item.inversion"
              :error="item.error"
              :loading="item.loading"
              @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>
                  停止响应
                </NButton>
              </div>
          </template>
        </div>
      </div>
    </main>
    <footer :class="footerClass">
      <div class="flex items-center justify-between space-x-2">
        <!-- <HoverButton tooltip="点击关闭或开启联网功能，开启后会自动从互联网获得信息来回答您，关闭联网能极大加快响应速度">
            <span class="text-xl text-[#4f555e]" @click="handleClear">
              <span style="color: #2979ff; width: 56px; display: inline-block;" v-if="getEnabledNetwork">联网开启</span>
              <span style="color: red; width: 56px; display: inline-block;" v-if="!getEnabledNetwork">联网关闭</span>
            </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: 2 }"
              @input="handleInput"
              @focus="handleFocus"
              @blur="handleBlur"
              @keypress="handleEnter"
            />
          </template>
        </NAutoComplete>
        <HoverButton v-if="!isMobile" @click="handleExport">
          <span class="text-xl text-[#4f555e] dark:text-white">
            <SvgIcon icon="ri:download-2-line" />
          </span>
        </HoverButton>

        <!-- <HoverButton v-if="!isMobile" @click="toggleUsingContext">
            <span class="text-xl" :class="{ 'text-[#4b9e5f]': usingContext, 'text-[#a8071a]': !usingContext }">
              <SvgIcon icon="ri:chat-history-line" />
            </span>
          </HoverButton> -->
        <NButton
          type="primary"
          :disabled="buttonDisabled"
          @click="handleSubmit"
        >
          <template #icon>
            <span class="dark:text-black">
              <SvgIcon icon="ri:send-plane-fill" />
            </span>
          </template>
        </NButton>
      </div>
    </footer>
  </div>
</template>
