<script setup lang="ts">
import { computed, ref, useTemplateRef, readonly, provide } from 'vue'
import { useI18n } from 'vue-i18n'
import { throttle } from 'lodash-es'
import { Down } from '@icon-park/vue-next'
import CustomLoading from './custom-loading.vue'
import SmartForms from './smart-forms/index.vue'
import { usePersonalAppConfigStore } from '@/store/modules/personal-app-config'
import MarkdownRender from '@/components/markdown-render/markdown-render.vue'
import ExecuteCodeRender from '@/components/execute-code-render/execute-code-render.vue'
import ExecutePluginRender from '@/components/execute-plugin-render/execute-plugin-render.vue'
import { useUserStore } from '@/store/modules/user'
import { asBlob } from 'html-docx-js-typescript'
import { downloadFile } from '@/utils/download-file'
import { copyToClip } from '@/utils/copy'

interface Props {
  messageItemId: string
  messageItem: ConversationMessageItem
}

const props = defineProps<Props>()

const emit = defineEmits<{
  audioPlay: []
  audioPause: []
  showKnowledgeResult: []
}>()

const { t } = useI18n()

const userStore = useUserStore()
const personalAppConfigStore = usePersonalAppConfigStore()

const markdownRenderRef = useTemplateRef<InstanceType<typeof MarkdownRender>>('markdownRenderRef')

provide('messageItemId', props.messageItemId)

const isShowReasoningContent = ref(true)

const displaySmartFormsList = readonly(['travelForm'])

const useAvatar = computed(() => {
  return userStore.userInfo.avatarUrl || 'https://gsst-poe-sit.gz.bcebos.com/data/20240910/1725952917468.png'
})

const assistantAvatar = computed(() => {
  return personalAppConfigStore.baseInfo.agentAvatar
})

const isAgentMessage = computed(() => {
  return props.messageItem.role === 'assistant'
})

const currentBubbleTextColor = computed(() => {
  return isAgentMessage.value ? '#192338' : '#fff'
})

const isShowSmartForms = computed(() => {
  if (props.messageItem?.pluginResult?.displayFormat) {
    return displaySmartFormsList.includes(props.messageItem?.pluginResult?.displayFormat)
  }
  return false
})

const messageAuthor = computed(() => {
  return isAgentMessage.value ? props.messageItem.modelName || 'AI' : userStore.userInfo.nickName
})

const isShowAudioControl = computed(() => {
  return isAgentMessage.value && !props.messageItem.isVoiceLoading
})

const isPlayableAudio = computed(() => {
  return isShowAudioControl.value && !!props.messageItem.voiceFragmentUrlList.length
})

const isShowVoiceLoading = computed(() => {
  return isAgentMessage.value && props.messageItem.isVoiceLoading && props.messageItem.isVoiceEnabled
})

const isDeepSeekR1 = computed(() => {
  return props.messageItem.modelName === 'DeepSeek'
})

function handleAudioControl() {
  if (!isPlayableAudio.value) {
    return
  }

  if (props.messageItem.isVoicePlaying) {
    emit('audioPause')
  } else {
    emit('audioPlay')
  }
}

function handleShowReasoningContentSwitch() {
  isShowReasoningContent.value = !isShowReasoningContent.value
}

const handleContentDownload = throttle(
  () => {
    if (markdownRenderRef.value) {
      const content = markdownRenderRef.value.getRenderTextContent()

      asBlob(content).then((data) => {
        downloadFile(data as Blob).then(() => {
          window.$message.success(t('common_module.copy_success_message'))
        })
      })
    }
  },
  1000,
  { leading: true, trailing: false },
)

const handleContentCopy = throttle(
  () => {
    copyToClip(props.messageItem.textContent).then(() => {
      window.$message.success(t('common_module.copy_success_message'))
    })
  },
  1000,
  { leading: true, trailing: false },
)
</script>

<template>
  <div class="mb-5 flex last:mb-0">
    <NImage
      :src="isAgentMessage ? assistantAvatar : useAvatar"
      preview-disabled
      :width="32"
      :height="32"
      object-fit="cover"
      class="mr-2 mt-1.5 h-8 w-8 flex-shrink-0 rounded-full"
    />

    <div v-if="!isShowSmartForms" class="flex flex-col items-start overflow-x-auto">
      <!-- DeepSeek大模型思考 -->
      <template v-if="isAgentMessage && isDeepSeekR1">
        <div class="my-[7px] select-none text-[14px]">
          <div class="inline-flex cursor-pointer" @click="handleShowReasoningContentSwitch">
            <span v-if="messageItem.isTextContentLoading" class="mr-[6px]">
              {{ t('common_module.deep_thinking', { modelName: personalAppConfigStore.commModelConfig.largeModel }) }}
            </span>
            <span v-else class="mr-[6px]">
              {{ t('common_module.have_thought_deeply') }}
            </span>
            <Down
              theme="outline"
              size="21"
              fill="#333"
              :stroke-width="3"
              class="transition-[rotate] duration-100 ease-linear"
              :class="{ '-rotate-180': isShowReasoningContent }"
            />
          </div>
        </div>

        <n-collapse-transition :show="isShowReasoningContent">
          <div
            v-show="messageItem.reasoningContent"
            class="my-[14px] border-l-[1px] border-solid border-l-[#ccc] p-[13px]"
          >
            <MarkdownRender
              ref="markdownRenderRef"
              :raw-text-content="
                messageItem.reasoningContent
                  ? messageItem.reasoningContent
                  : t('common_module.dialogue_module.empty_message_content')
              "
              color="#999"
            />
          </div>
        </n-collapse-transition>
      </template>

      <!-- 大模型内容 -->
      <div class="flex min-w-[80px] max-w-full flex-col items-start overflow-x-auto">
        <div
          class="w-full flex-wrap rounded-xl border border-[#9EA3FF] px-4 py-[11px]"
          :class="isAgentMessage ? 'bg-white text-[#333]' : 'user-content-container bg-[#777EF9] text-white'"
        >
          <img
            v-show="!isAgentMessage && messageItem.imageUrl"
            :src="messageItem.imageUrl"
            class="max-h-[120px]! mb-[11px] rounded-[10px] object-contain"
          />

          <!-- 插件返回结果 -->
          <div v-show="isAgentMessage && messageItem?.pluginResult?.pluginName" class="mb-[11px] w-full">
            <ExecutePluginRender
              :display-format="messageItem.pluginResult?.displayFormat || 'none'"
              :name="messageItem.pluginResult?.pluginName!"
              :content="messageItem.pluginResult?.pluginContent!"
              :arguments="messageItem.pluginResult?.arguments!"
              :plugin-loading="messageItem.isTextContentLoading"
            />
          </div>

          <div v-if="messageItem.isTextContentLoading" class="flex px-4 py-1.5">
            <CustomLoading />
          </div>

          <div v-else>
            <!-- 数据库问答结果 -->
            <div v-show="messageItem.dbChainSQLContent" class="mb-[10px] w-full">
              <ExecuteCodeRender
                :title="t('common_module.database_QA_executed_successfully')"
                :raw-text-content="messageItem.dbChainSQLContent"
              />
            </div>

            <p class="break-all">
              <MarkdownRender
                ref="markdownRenderRef"
                :raw-text-content="
                  messageItem.isEmptyContent
                    ? t('common_module.dialogue_module.empty_message_content')
                    : messageItem.textContent
                "
                :color="currentBubbleTextColor"
              />
            </p>

            <div
              v-show="(isAgentMessage && messageItem.isAnswerResponseLoading) || isShowVoiceLoading"
              class="mt-4 px-4"
              :class="isShowAudioControl ? 'mb-2.5' : 'mb-[5px]'"
            >
              <CustomLoading />
            </div>

            <div
              v-show="isShowAudioControl"
              class="text-font-color ml-[-4px] mt-1.5 flex h-[24px] items-center gap-0.5"
              :class="isPlayableAudio ? 'hover:text-theme-color cursor-pointer hover:opacity-80' : 'cursor-not-allowed'"
              @click="handleAudioControl"
            >
              <i v-if="!messageItem.isVoicePlaying" class="iconfont icon-play text-[24px]" />
              <div
                v-else
                class="mx-1.5 my-3 h-[12px] w-[12px] bg-[url(@/assets/images/playing.gif)] bg-[length:100%_100%]"
              />

              <span
                v-show="isPlayableAudio"
                class="text-[12px]"
                :class="messageItem.isVoicePlaying ? 'text-theme-color' : ''"
              >
                {{ messageItem.isVoicePlaying ? t('common_module.stop_playing') : t('common_module.start_playing') }}
              </span>
              <n-popover style="max-width: 310px">
                <template #trigger>
                  <span v-show="!isPlayableAudio" class="text-[12px]"> {{ t('common_module.unplayable') }} </span>
                </template>
                {{ t('common_module.unplayable_tip') }}
              </n-popover>
            </div>
          </div>
        </div>

        <!-- 操作区域 -->
        <div class="flex w-full items-center justify-between py-[5px]">
          <div>
            <div
              v-show="isAgentMessage && messageItem.knowledgeContentResult.length"
              class="flex-center rounded-theme h-8 cursor-pointer gap-[5px] px-[13px] font-['Microsoft_YaHei_UI'] text-[#0B7DFF] hover:opacity-80"
              @click="emit('showKnowledgeResult')"
            >
              <i class="iconfont icon-knowledge" />
              <span>{{ t('common_module.knowledge') }}</span>
            </div>
          </div>

          <div
            v-show="isAgentMessage && messageItem.textContent && !messageItem.isAnswerResponseLoading"
            class="pr-[13px] text-end"
          >
            <i
              class="iconfont icon-fuzhi hover:text-theme-color mr-[14px] transform cursor-pointer text-[14px] text-[#3d3d3d]"
              @click="handleContentCopy"
            />
            <i
              class="iconfont icon-download hover:text-theme-color transform cursor-pointer text-[14px] text-[#3d3d3d]"
              @click="handleContentDownload"
            />
          </div>
        </div>
      </div>
    </div>

    <SmartForms
      v-else
      :message-author="messageAuthor"
      :is-agent-message="isAgentMessage"
      :message-item="messageItem"
      :current-bubble-text-color="currentBubbleTextColor"
    />
  </div>
</template>

<style lang="scss" scoped>
:deep(.user-content-container) {
  a {
    color: #fff !important;
  }
}

:deep(.markdown-render-container .markdown-render-inner) {
  table {
    color: #fff !important;
  }
}
</style>
