<script setup lang="ts">
import { ref } from 'vue'
import Preamble from './preamble.vue'
import { useI18n } from 'vue-i18n'
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 { t } = useI18n()

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: t('common_module.dialogue_module.clear_message_dialog_title'),
    content: t('common_module.dialogue_module.clear_message_dialog_content'),
    negativeText: t('common_module.cancel_btn_text'),
    positiveText: t('common_module.confirm_btn_text'),
    onPositiveClick: () => {
      footerInputRef.value?.blockMessageResponse()
      messageList.value = []
      window.$message.success(t('common_module.clear_success_message'))
    },
  })
}

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">
      {{ t('personal_space_module.agent_module.agent_setting_module.agent_config_module.preview') }}
    </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>
