<script setup lang="ts">
import { fetchRecommendQuestionList } from '@/apis/home-agent'
import { nanoid } from 'nanoid'
import { computed, ref } from 'vue'
import { useI18n } from 'vue-i18n'
import { debounce } from 'lodash-es'
import type { AgentApplicationRecordItem } from '../types'

interface Props {
  messageListLength: number
  currentAgentApplication: AgentApplicationRecordItem
}

interface RecommendQuestionItem {
  id: string
  content: string
}

const props = defineProps<Props>()

const questionContent = defineModel<string>('questionContent', { required: true })

const { t } = useI18n()

const recommendQuestionList = ref<RecommendQuestionItem[]>([])
const promptChangeBtnStatus = ref<'normal' | 'loading' | 'failed'>('normal')

const isShowAgentAbout = computed(() => {
  return props.messageListLength === 0
})

;(function () {
  getRecommendQuestionList()
})()

function getRecommendQuestionList() {
  return fetchRecommendQuestionList<string[]>().then((res) => {
    const recommendQuestionListDraft: RecommendQuestionItem[] = []

    res.data.forEach((content) => {
      recommendQuestionListDraft.push({ id: nanoid(), content })
    })

    recommendQuestionList.value = recommendQuestionListDraft
  })
}

function handleQuestionClick(question: string) {
  questionContent.value = question
}

const handleRecommendQuestionListUpdate = debounce(
  () => {
    if (promptChangeBtnStatus.value === 'loading') {
      return
    }

    promptChangeBtnStatus.value = 'loading'

    getRecommendQuestionList()
      .then(() => {
        promptChangeBtnStatus.value = 'normal'
      })
      .catch(() => {
        promptChangeBtnStatus.value = 'failed'
      })
  },
  700,
  { leading: true, trailing: false },
)
</script>

<template>
  <div :class="isShowAgentAbout ? 'flex flex-1 flex-col overflow-hidden overflow-y-auto' : ''">
    <Transition name="agent-about" mode="out-in">
      <div v-if="isShowAgentAbout" class="flex flex-1 flex-col overflow-hidden overflow-y-auto">
        <div class="flex items-center pr-[10px]">
          <img class="h-[70px] w-[70px] rounded-full" src="@/assets/images/home/agent-avatar.png" alt="代理人頭像" />

          <div class="ml-[20px]">
            <h2 class="font-600 mb-[14px] text-[26px]">{{ t('home_module.agent_welcome_message') }}</h2>
            <div class="text-theme-color text-[18px]">{{ t('home_module.agent_description') }}</div>
          </div>
        </div>

        <div class="mt-[39px] flex flex-1 flex-col overflow-hidden overflow-y-auto">
          <h3 class="text-[14px] text-[#999]">{{ t('common_module.recommended_questions') }}：</h3>

          <div class="flex-1 overflow-hidden overflow-y-auto py-[10px]">
            <n-scrollbar>
              <ul class="select-none pr-[10px]">
                <template v-if="recommendQuestionList.length">
                  <li
                    v-for="questionItem in recommendQuestionList"
                    :key="questionItem.id"
                    class="mt-[14px] w-fit cursor-pointer rounded-[20px] bg-[#E1E1FC] px-[12px] py-[10px] transition first:mt-[4px] hover:bg-[#D1D1EB]"
                    @click="handleQuestionClick(questionItem.content)"
                  >
                    {{ questionItem.content }}
                  </li>
                </template>

                <template v-else>
                  <n-skeleton class="mt-[4px]" height="41px" width="52%" round />
                  <n-skeleton class="mt-[14px]" height="41px" width="72%" round />
                  <n-skeleton class="mt-[14px]" height="41px" width="70%" round />
                </template>

                <li class="mt-[10px] pl-[20px] text-[12px]">
                  <span
                    class="group cursor-pointer text-[#0B7DFF] transition"
                    :class="{
                      'hover:text-[#096EE0]': promptChangeBtnStatus !== 'loading',
                      'cursor-not-allowed': promptChangeBtnStatus === 'loading',
                      'text-[#BDBDBD]': promptChangeBtnStatus === 'loading',
                    }"
                    @click="handleRecommendQuestionListUpdate"
                  >
                    <i
                      class="iconfont icon-huanyihuan mr-[2px] inline-block text-[11px] transition-[rotate] duration-150 ease-in-out"
                      :class="{ 'group-active:rotate-360': promptChangeBtnStatus !== 'loading' }"
                    ></i>
                    <span>
                      {{ promptChangeBtnStatus === 'failed' ? t('common_module.retry') : t('common_module.exchange') }}
                    </span>
                  </span>
                </li>
              </ul>
            </n-scrollbar>
          </div>
        </div>
      </div>

      <div v-else class="flex-center flex">
        <div class="font-600 flex items-center rounded-[31px] bg-[#ECEFFF] px-[38px] py-[11px] text-[18px]">
          <div
            class="mr-[6px] h-[22px] w-[22px] bg-contain bg-no-repeat"
            :style="{ backgroundImage: `url(${currentAgentApplication.agentAvatar})` }"
          ></div>
          <span>{{ currentAgentApplication.agentTitle || '--' }}</span>
        </div>
      </div>
    </Transition>
  </div>
</template>

<style lang="scss" scoped>
.agent-about-enter-active,
.agent-about-leave-active {
  transition-timing-function: ease-in-out;
  transition-duration: 0.2s;
  transition-property: opacity;
}

.agent-about-enter-from,
.agent-about-leave-to {
  opacity: 0;
}
</style>
