<script lang="ts" setup>
import { computed, reactive, watch } from 'vue'
import { storeToRefs } from 'pinia'
import { Help } from '@icon-park/vue-next'
import { useI18n } from 'vue-i18n'
import CustomModal from '@/components/custom-modal/custom-modal.vue'
import { PersonalAppConfigState } from '@/store/types/personal-app-config'
import { usePersonalAppConfigStore } from '@/store/modules/personal-app-config'
import { useSystemLanguageStore } from '@/store/modules/system-language'

export type KnowledgeConfigType = Omit<PersonalAppConfigState['knowledgeConfig'], 'knowledgeIds' | 'isDocumentParsing'>

interface SearchStrategyOptionInterface {
  label: string
  value: 'MIX' | 'KEY_WORD' | 'SEMANTICS'
  desc?: string
}

interface Emits {
  (e: 'confirm', value: KnowledgeConfigType): void
}

const { t } = useI18n()

const emits = defineEmits<Emits>()

const personalAppConfigStore = usePersonalAppConfigStore()
const systemLanguageStore = useSystemLanguageStore()

const { knowledgeConfig } = storeToRefs(personalAppConfigStore)

const showModal = defineModel<boolean>('isShowModal', { required: true })

let newKnowledgeConfig = reactive<KnowledgeConfigType>({
  knowledgeResponseType: 'default',
  knowledgeSearchType: 'MIX',
  knowledgeCustomResponse: [],
  knowledgeSimilarity: 0.4,
  knowledgeNResult: 3,
})

const songs = [
  {
    label: t('personal_space_module.agent_module.agent_setting_module.agent_config_module.default_reply'),
    value: 'default',
  },
  {
    label: t('personal_space_module.agent_module.agent_setting_module.agent_config_module.custom_reply'),
    value: 'custom',
  },
]

const searchStrategyOptions: SearchStrategyOptionInterface[] = [
  {
    label: t('personal_space_module.agent_module.agent_setting_module.agent_config_module.mix'),
    value: 'MIX',
    desc: t('personal_space_module.agent_module.agent_setting_module.agent_config_module.mix_desc'),
  },
  {
    label: t('personal_space_module.agent_module.agent_setting_module.agent_config_module.keyword'),
    value: 'KEY_WORD',
    desc: t('personal_space_module.agent_module.agent_setting_module.agent_config_module.keyword_desc'),
  },
  {
    label: t('personal_space_module.agent_module.agent_setting_module.agent_config_module.semantics'),
    value: 'SEMANTICS',
    desc: t('personal_space_module.agent_module.agent_setting_module.agent_config_module.semantics_desc'),
  },
]

const isEnglishLanguage = computed(() => systemLanguageStore.currentLanguageInfo.key === 'en')

watch(
  () => showModal.value,
  (newVal) => {
    if (newVal) {
      newKnowledgeConfig.knowledgeCustomResponse = knowledgeConfig.value.knowledgeCustomResponse || []
      newKnowledgeConfig.knowledgeSimilarity = knowledgeConfig.value.knowledgeSimilarity || 0.4
      newKnowledgeConfig.knowledgeNResult = knowledgeConfig.value.knowledgeNResult || 3
      newKnowledgeConfig.knowledgeSearchType = knowledgeConfig.value.knowledgeSearchType || 'MIX'
      newKnowledgeConfig.knowledgeResponseType = knowledgeConfig.value.knowledgeResponseType || 'default'
    }
  },
)

function handleUpdateReplyType(type: string) {
  type !== 'custom' && (newKnowledgeConfig.knowledgeCustomResponse = [])
}

function handleConfirm() {
  emits('confirm', newKnowledgeConfig)
}
</script>

<template>
  <CustomModal
    v-model:is-show="showModal"
    :title="t('personal_space_module.agent_module.agent_setting_module.agent_config_module.knowledge_base_setting')"
    :width="775"
    :height="684"
    @confirm="handleConfirm"
  >
    <template #content>
      <article>
        <div class="flex items-center gap-[6px]">
          <div class="bg-theme-color h-[14px] w-1 rounded-[2px]" />
          <div class="font-family-medium">
            {{ t('personal_space_module.agent_module.agent_setting_module.agent_config_module.reply') }}
          </div>
          <n-popover trigger="hover" class="max-w-[300px]!">
            <template #trigger>
              <Help theme="outline" size="15" fill="#999" :stroke-width="3" class="mt-[2px] cursor-pointer" />
            </template>
            <span class="text-xs">
              {{ t('personal_space_module.agent_module.agent_setting_module.agent_config_module.reply_desc') }}
            </span>
          </n-popover>
        </div>

        <div class="mb-[8px] mt-[12px] flex items-center gap-[20px]">
          <span class="font-family-medium">
            {{
              t(
                'personal_space_module.agent_module.agent_setting_module.agent_config_module.reply_to_superclass_question',
              )
            }}
          </span>
          <n-radio-group
            v-model:value="newKnowledgeConfig.knowledgeResponseType"
            name="radiogroup"
            @update:value="handleUpdateReplyType"
          >
            <n-space>
              <n-radio v-for="song in songs" :key="song.value" :value="song.value">
                {{ song.label }}
              </n-radio>
            </n-space>
          </n-radio-group>
        </div>

        <n-input
          v-show="newKnowledgeConfig.knowledgeResponseType === 'custom'"
          v-model:value="newKnowledgeConfig.knowledgeCustomResponse[0]"
          type="textarea"
          :placeholder="
            t('personal_space_module.agent_module.agent_setting_module.agent_config_module.please_enter_custom_content')
          "
          :autosize="{
            minRows: 5,
            maxRows: 5,
          }"
          :maxlength="500"
          show-count
        />
      </article>

      <article class="mt-6">
        <div class="flex items-center gap-[6px]">
          <div class="bg-theme-color h-[14px] w-1 rounded-[2px]" />
          <div class="font-family-medium">
            {{
              t(
                'personal_space_module.agent_module.agent_setting_module.agent_config_module.knowledge_base_retrieval_strategy',
              )
            }}
          </div>
          <n-popover trigger="hover" class="max-w-[300px]!">
            <template #trigger>
              <Help theme="outline" size="15" fill="#999" :stroke-width="3" class="mt-[2px] cursor-pointer" />
            </template>
            <span class="text-xs">
              {{
                t(
                  'personal_space_module.agent_module.agent_setting_module.agent_config_module.knowledge_base_retrieval_strategy_desc',
                )
              }}
            </span>
          </n-popover>
        </div>

        <div class="mt-3 grid grid-cols-3 gap-[18px]">
          <div
            v-for="item in searchStrategyOptions"
            :key="item.value"
            class="rounded-theme hover:border-theme-color flex cursor-pointer flex-col border px-[15px] py-[10px]"
            :class="
              newKnowledgeConfig.knowledgeSearchType === item.value ? 'border-theme-color' : 'border-gray-border-color'
            "
            @click="newKnowledgeConfig.knowledgeSearchType = item.value"
          >
            <n-radio
              :checked="item.value === newKnowledgeConfig.knowledgeSearchType"
              name="searchStrategyRadio"
              :value="item.value"
              class="search-strategy-radio"
            >
              {{ item.label }}
            </n-radio>
            <span class="text-gray-font-color mt-2 text-xs">{{ item.desc }}</span>
          </div>
        </div>
      </article>

      <article class="mt-6">
        <div class="flex items-center gap-[6px]">
          <div class="bg-theme-color h-[14px] w-1 rounded-[2px]" />
          <div class="font-family-medium">
            {{
              t(
                'personal_space_module.agent_module.agent_setting_module.agent_config_module.retrieval_strategy_setting',
              )
            }}
          </div>
        </div>

        <p class="text-gray-font-color mt-1">
          {{
            t(
              'personal_space_module.agent_module.agent_setting_module.agent_config_module.retrieval_strategy_setting_desc',
            )
          }}
        </p>

        <div class="mt-[18px] flex items-center gap-[20px]">
          <div class="flex items-center gap-[5px]" :class="isEnglishLanguage ? 'w-[205px]' : 'w-[180px]'">
            <span class="font-family-medium">
              {{ t('personal_space_module.agent_module.agent_setting_module.agent_config_module.minimum_similarity') }}
            </span>
            <n-popover trigger="hover" class="max-w-[300px]!">
              <template #trigger>
                <Help theme="outline" size="15" fill="#999" :stroke-width="3" class="mt-[2px] cursor-pointer" />
              </template>
              <span class="text-xs">
                {{
                  t(
                    'personal_space_module.agent_module.agent_setting_module.agent_config_module.minimum_similarity_desc',
                  )
                }}
              </span>
            </n-popover>
          </div>

          <div class="flex w-[240px] items-center justify-around">
            <span>0.01</span>
            <n-slider
              v-model:value="newKnowledgeConfig.knowledgeSimilarity"
              :step="0.01"
              :min="0.01"
              :max="0.99"
              class="w-[150px]!"
            />
            <span>0.99</span>
          </div>

          <div>
            <n-input-number
              v-model:value="newKnowledgeConfig.knowledgeSimilarity"
              :step="0.01"
              :min="0.01"
              :max="0.99"
              button-placement="both"
              class="w-[120px]! strategy-setting-input-number"
              placeholder=""
            >
              <template #minus-icon>
                <div class="hover:border-theme-color icon-button flex-center h-[32px] shrink-0 border-r text-xs">
                  <i class="iconfont icon-minus px-[7px]" />
                </div>
              </template>

              <template #add-icon>
                <div class="hover:border-theme-color icon-button flex-center h-[32px] shrink-0 border-l text-xs">
                  <i class="iconfont icon-add px-[7px]" />
                </div>
              </template>
            </n-input-number>
          </div>
        </div>

        <div class="mt-[18px] flex items-center gap-[20px]">
          <div class="flex items-center gap-[5px]" :class="isEnglishLanguage ? 'w-[205px]' : 'w-[180px]'">
            <span class="font-family-medium">
              {{
                t(
                  'personal_space_module.agent_module.agent_setting_module.agent_config_module.number_of_results_returned',
                )
              }}
            </span>
            <n-popover trigger="hover" class="max-w-[300px]!">
              <template #trigger>
                <Help theme="outline" size="15" fill="#999" :stroke-width="3" class="mt-[2px] cursor-pointer" />
              </template>
              <span class="text-xs">
                {{
                  t(
                    'personal_space_module.agent_module.agent_setting_module.agent_config_module.number_of_results_returned_desc',
                  )
                }}
              </span>
            </n-popover>
          </div>

          <div class="flex w-[240px] items-center justify-around">
            <span>1</span>
            <n-slider
              v-model:value="newKnowledgeConfig.knowledgeNResult"
              :step="1"
              :min="1"
              :max="10"
              class="w-[150px]!"
            />
            <span>10</span>
          </div>

          <div>
            <n-input-number
              v-model:value="newKnowledgeConfig.knowledgeNResult"
              :step="1"
              :min="1"
              :max="10"
              button-placement="both"
              class="w-[120px]! strategy-setting-input-number"
              placeholder=""
            >
              <template #minus-icon>
                <div class="hover:border-theme-color icon-button flex-center h-[32px] shrink-0 border-r text-xs">
                  <i class="iconfont icon-minus px-[7px]" />
                </div>
              </template>

              <template #add-icon>
                <div class="hover:border-theme-color icon-button flex-center h-[32px] shrink-0 border-l text-xs">
                  <i class="iconfont icon-add px-[7px]" />
                </div>
              </template>
            </n-input-number>
          </div>
        </div>
      </article>
    </template>
  </CustomModal>
</template>

<style lang="scss" scoped>
:deep(.search-strategy-radio) {
  .n-radio__label {
    font-family: 'SourceHanSansCN-Medium';
  }
}

:deep(.strategy-setting-input-number) {
  .n-input__input-el {
    text-align: center;
  }

  .n-input__prefix,
  .n-input__suffix {
    width: 30px;
    margin-right: 0;
  }

  .n-button--disabled .icon-button {
    border-color: #ccc !important;
  }

  .n-input-wrapper {
    padding: 0 !important;
  }
}
</style>
