<script setup lang="ts">
import { computed, inject } from 'vue'
import { Emitter } from 'mitt'
import { usePersonalAppConfigStore } from '@/store/modules/personal-app-config'

const personalAppConfigStore = usePersonalAppConfigStore()

const emitter = inject<Emitter<MittEvents>>('emitter')

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

function handleSelectFeaturedQuestion(featuredQuestion: string) {
  emitter?.emit('selectQuestion', featuredQuestion)
}
</script>

<template>
  <div class="flex w-full flex-1 flex-col overflow-auto px-5">
    <div class="mb-5 flex w-full justify-center pt-[50px]">
      <img
        v-if="personalAppConfigStore.baseInfo.agentAvatar"
        :src="agentAvatar"
        class="h-[72px] w-[72px] rounded-xl object-cover"
      />

      <div v-else class="h-[72px] w-[72px] rounded-xl border" />
    </div>

    <div class="flex flex-col items-center justify-center">
      <p class="font-500 mb-4 line-clamp-1 text-2xl text-[#151b26]">
        {{ personalAppConfigStore.baseInfo.agentTitle }}
      </p>

      <div class="flex flex-col items-start justify-center">
        <p
          v-show="personalAppConfigStore.commConfig.preamble"
          class="mb-6 select-none break-all rounded-xl border border-[#e8e9eb] bg-white px-[16px] py-[12px] shadow-[0_2px_2px_#0000000a]"
        >
          {{ personalAppConfigStore.commConfig.preamble }}
        </p>

        <ul class="flex max-w-full flex-col items-start justify-center gap-3 overflow-hidden">
          <li v-for="(featuredQuestionItem, index) in personalAppConfigStore.commConfig.featuredQuestions" :key="index">
            <div
              v-show="featuredQuestionItem"
              class="w-full cursor-pointer rounded-xl border border-[#d4d6d9] bg-[#ffffff80] px-[14px] py-[11px] hover:opacity-80"
              @click="handleSelectFeaturedQuestion(featuredQuestionItem)"
            >
              <span class="break-all">{{ featuredQuestionItem }}</span>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
