<script setup lang="ts">
import { ref } from 'vue'
import Preamble from './preamble.vue'
import MessageList from './message-list.vue'
import FooterInput from './footer-input.vue'
import { fetchCreateContinueQuestions } from '@/apis/agent-application'
import { usePersonalAppConfigStore } from '@/store/modules/personal-app-config'

const personalAppConfigStore = usePersonalAppConfigStore()

const messageListRef = ref<InstanceType<typeof MessageList> | null>(null)
const footerInputRef = ref<InstanceType<typeof FooterInput> | null>(null)

const messageList = ref<ConversationMessageItem[]>([])

const continuousQuestionStatus = ref<'default' | 'close'>(personalAppConfigStore.commConfig.continuousQuestionStatus)

const continuousQuestionList = ref<string[]>([])

function handleAddMessageItem(messageItem: ConversationMessageItem) {
  messageList.value.push(messageItem)
}

function handleUpdateSpecifyMessageItem(messageItemIndex: number, newObj: Partial<ConversationMessageItem>) {
  if (messageList.value[messageItemIndex]) {
    Object.entries(newObj).forEach(([k, v]) => {
      ;(messageList.value[messageItemIndex] as any)[k as keyof typeof newObj] = v
    })
  }
}

function handleDeleteLastMessageItem() {
  messageList.value.pop()
}

function handleUpdatePageScroll() {
  messageListRef.value?.scrollToBottom()
}

function handleClearAllMessage() {
  window.$dialog.warning({
    title: '确认要清空对话吗？',
    content: '清空对话将清空调试区域所有历史对话内容，确定清空对话吗？',
    negativeText: '取消',
    positiveText: '确定',
    onPositiveClick: () => {
      footerInputRef.value?.blockMessageResponse()
      messageList.value = []
      window.$message.success('清空成功')
    },
  })
}

async function handleCreateContinueQuestions(replyTextContent: string) {
  const res = await fetchCreateContinueQuestions<string[]>({ input: replyTextContent })

  if (res.code === 0) {
    continuousQuestionList.value = res.data
    handleUpdatePageScroll()
  }
}

function handleUpdateContinueQuestionStatus(status: 'default' | 'close') {
  continuousQuestionStatus.value = status
  continuousQuestionList.value = []
}
</script>

<template>
  <div class="flex h-full min-w-[300px] flex-1 flex-col overflow-hidden bg-[#f2f5f9]">
    <p class="mb-[18px] px-5 py-[18px] text-base">预览与调试</p>

    <div class="flex w-full flex-1 overflow-hidden">
      <div v-show="messageList.length === 0" class="flex w-full">
        <Preamble />
      </div>

      <div v-show="messageList.length > 0" class="w-full">
        <MessageList
          ref="messageListRef"
          :message-list="messageList"
          :continuous-question-status="continuousQuestionStatus"
          :continuous-question-list="continuousQuestionList"
        />
      </div>
    </div>

    <FooterInput
      ref="footerInputRef"
      :continuous-question-status="continuousQuestionStatus"
      :message-list="messageList"
      @add-message-item="handleAddMessageItem"
      @update-specify-message-item="handleUpdateSpecifyMessageItem"
      @delete-last-message-item="handleDeleteLastMessageItem"
      @update-page-scroll="handleUpdatePageScroll"
      @clear-all-message="handleClearAllMessage"
      @create-continue-questions="handleCreateContinueQuestions"
      @update-continuous-question-status="handleUpdateContinueQuestionStatus"
    />
  </div>
</template>

<style scoped lang="scss">
@include custom-scrollbar(6px);
</style>
