<script setup lang="ts">
import { computed, h, onMounted, reactive, VNodeChild } from 'vue'
import { SelectOption } from 'naive-ui'
import { useI18n } from 'vue-i18n'
import { Help, Down } from '@icon-park/vue-next'
import { PersonalAppConfigState } from '@/store/types/personal-app-config'
import { DiversityModeItem, diversityModeList } from '@/data/agent-setting-data'
import { fetchGetLargeModelList } from '@/apis/agent-application'

const { t } = useI18n()

let modalListOptions = reactive<SelectOption[]>([])
let modalListRenderLabel: (option: SelectOption) => VNodeChild

const personalAppConfig = defineModel<PersonalAppConfigState>('personalAppConfig', { required: true })
const currentDiversityMode = defineModel<string>('currentDiversityMode', { required: true })
const currentLargeModelIcon = defineModel<string>('currentLargeModelIcon', { required: true })

const isDisabledCommModelConfig = computed(() => {
  return currentDiversityMode.value !== 'custom'
})

onMounted(() => {
  handleGetLargeModelList()
})

// 获取大模型列表
async function handleGetLargeModelList() {
  modalListOptions = []
  const res = await fetchGetLargeModelList<{ owner: string; models: string[]; icon: string }[]>()

  res.data.forEach((item) => {
    modalListOptions.push({
      type: 'group',
      label: item.owner,
      key: item.owner,
      children: item.models.map((model) => ({
        label: model,
        value: model,
        style: { fontSize: '12px' },
        icon: item.icon,
      })),
    })
  })

  modalListRenderLabel = (option: SelectOption): VNodeChild => {
    if (option.type === 'group') return `${option.label}`

    return [
      h('div', { class: 'flex items-center' }, [
        h('div', {
          style: {
            width: '16px',
            height: '16px',
            marginRight: '6px',
            flexShrink: 0,
            background: `url(${option.icon})`,
            backgroundSize: '100% 100%',
          },
        }),
        h('span', {}, { default: () => option.label as string }),
      ]),
    ]
  }
}

// 更换大模型
function handleUpdateLargeModel(_value: string, option: SelectOption) {
  currentLargeModelIcon.value = option.icon as string
}

function handleDiversityModeChange(diversityModeItem: DiversityModeItem) {
  const { value, topP, temperature, communicationTurn } = diversityModeItem
  currentDiversityMode.value = value
  personalAppConfig.value.commModelConfig.topP = topP
  personalAppConfig.value.commModelConfig.temperature = temperature
  personalAppConfig.value.commModelConfig.communicationTurn = communicationTurn
}
</script>

<template>
  <div>
    <NPopover placement="bottom" trigger="click" style="width: 420px">
      <template #trigger>
        <div
          class="hover:border-theme-color flex cursor-pointer items-center justify-between rounded-md border border-[#d4d6d9] px-3 py-[7px]"
        >
          <img :src="currentLargeModelIcon || '@/assets/images/lingjing-icon.png'" class="mr-1 h-4 w-4" />
          <span class="line-clamp-1 w-[100px] text-xs text-[#5c5f66]">
            {{ personalAppConfig.commModelConfig.largeModel }}
          </span>
          <Down theme="outline" size="16" fill="#333" class="ml-1.5 text-base outline-none" />
        </div>
      </template>
      <div class="mb-2 mt-[6px] flex items-center">
        <span class="font-500 mr-3 text-sm text-[#151b26]">
          {{ t('personal_space_module.agent_module.agent_setting_module.agent_config_module.question_answer_model') }}
        </span>
        <span class="rounded bg-[#f2f5f9] px-1 text-xs text-[#5c5f66]">
          {{
            t('personal_space_module.agent_module.agent_setting_module.agent_config_module.question_answer_model_desc')
          }}
        </span>
      </div>
      <NSelect
        v-model:value="personalAppConfig.commModelConfig.largeModel"
        class="model-select"
        :options="modalListOptions"
        :render-label="modalListRenderLabel"
        @update:value="handleUpdateLargeModel"
      />

      <div class="mt-4">
        <span>
          {{ t('personal_space_module.agent_module.agent_setting_module.agent_config_module.generate_diversity') }}
        </span>
        <ul class="rounded-theme mt-2 grid grid-cols-4 overflow-hidden">
          <li
            v-for="(diversityModeItem, index) in diversityModeList"
            :key="index"
            class="hover:text-font-color flex h-[34px] w-full cursor-pointer items-center justify-center text-xs"
            :class="
              currentDiversityMode === diversityModeItem.value
                ? 'text-font-color bg-active-color'
                : 'text-gray-font-color bg-[#F7F7FA]'
            "
            @click="handleDiversityModeChange(diversityModeItem)"
          >
            {{ t(diversityModeItem.label) }}
          </li>
        </ul>
      </div>

      <div class="mt-4 text-xs">
        <div class="mb-2.5 flex h-[34px] items-center justify-between">
          <div class="flex w-[105px] items-center">
            <span>
              {{ t('personal_space_module.agent_module.agent_setting_module.agent_config_module.topP') }}
            </span>
            <NPopover trigger="hover">
              <template #trigger>
                <Help
                  theme="outline"
                  size="15"
                  fill="#333"
                  :stroke-width="3"
                  class="ml-1 cursor-pointer text-base text-[#999] outline-none"
                />
              </template>
              <span class="text-xs">
                {{
                  t('personal_space_module.agent_module.agent_setting_module.agent_config_module.topP_popover_message')
                }}
              </span>
            </NPopover>
          </div>

          <div class="mx-5 flex flex-1">
            <NSlider
              v-model:value="personalAppConfig.commModelConfig.topP"
              :default-value="0"
              :step="0.01"
              :min="0"
              :max="1"
              :disabled="isDisabledCommModelConfig"
            />
            <span class="ml-4 w-8">{{ personalAppConfig.commModelConfig.topP }}</span>
          </div>

          <NInputNumber
            v-model:value="personalAppConfig.commModelConfig.topP"
            placeholder=""
            :step="0.01"
            :min="0"
            :max="1"
            :disabled="isDisabledCommModelConfig"
            size="small"
            class="w-[90px]! text-xs!"
          />
        </div>

        <div class="mb-2.5 flex h-[34px] items-center justify-between">
          <div class="flex w-[105px] items-center">
            <span>
              {{ t('personal_space_module.agent_module.agent_setting_module.agent_config_module.temperature') }}
            </span>
            <NPopover trigger="hover">
              <template #trigger>
                <Help
                  theme="outline"
                  size="15"
                  fill="#333"
                  :stroke-width="3"
                  class="ml-1 cursor-pointer text-base text-[#999] outline-none"
                />
              </template>
              <span class="text-xs">
                {{
                  t(
                    'personal_space_module.agent_module.agent_setting_module.agent_config_module.temperature_popover_message',
                  )
                }}
              </span>
            </NPopover>
          </div>

          <div class="mx-5 flex flex-1">
            <NSlider
              v-model:value="personalAppConfig.commModelConfig.temperature"
              :default-value="0"
              :step="0.01"
              :min="0.01"
              :max="1"
              :disabled="isDisabledCommModelConfig"
            />
            <span class="ml-4 w-[32px]">{{ personalAppConfig.commModelConfig.temperature }}</span>
          </div>

          <NInputNumber
            v-model:value="personalAppConfig.commModelConfig.temperature"
            placeholder=""
            :step="0.01"
            :min="0"
            :max="1"
            :disabled="isDisabledCommModelConfig"
            size="small"
            class="w-[90px]! text-xs!"
          />
        </div>

        <div class="mb-2.5 flex h-[34px] items-center justify-between">
          <div class="flex w-[105px] items-center">
            <span>
              {{ t('personal_space_module.agent_module.agent_setting_module.agent_config_module.communication_turn') }}
            </span>
            <NPopover trigger="hover">
              <template #trigger>
                <Help
                  theme="outline"
                  size="15"
                  fill="#333"
                  :stroke-width="3"
                  class="ml-1 cursor-pointer text-base text-[#999] outline-none"
                />
              </template>
              <span class="text-xs">
                {{
                  t(
                    'personal_space_module.agent_module.agent_setting_module.agent_config_module.communication_turn_popover_message',
                  )
                }}
              </span>
            </NPopover>
          </div>

          <div class="mx-5 flex flex-1">
            <NSlider
              v-model:value="personalAppConfig.commModelConfig.communicationTurn"
              :default-value="3"
              :step="1"
              :min="0"
              :max="100"
            />
            <span class="ml-4 w-8">{{ personalAppConfig.commModelConfig.communicationTurn }}</span>
          </div>
          <NInputNumber
            v-model:value="personalAppConfig.commModelConfig.communicationTurn"
            :step="1"
            :min="0"
            :max="100"
            size="small"
            class="w-[90px]!"
            placeholder=""
          />
        </div>
      </div>
    </NPopover>
  </div>
</template>

<style lang="scss" scoped>
.model-select {
  :deep(.n-base-selection) {
    font-size: 12px;
    border-radius: 6px;
  }
}
</style>
