<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import { api } from '@/tools/web.js'
import type { ReturnDto } from '@/types/response.js'
import { type SelectOption, useMessage } from 'naive-ui'
import AiiModelAddModal from '@/components/chatroom/AiiModelAddModal.vue'
import type { AiiModelPublic } from '@/types/aii.js'
import ChatPromptQuicker from '@/components/chatroom/ChatPromptQuicker.vue'
import ScriptDrawer from '@/components/chatroom/ScriptDrawer.vue'

const MESSAGE = useMessage()

const selectedModel = defineModel<number | null>('selectModel', { required: true })
const quickerPrompt = defineModel<string>('quickerPrompt', { required: true })

const { script } = defineProps<{
  script: string
}>()

const showModal = ref(false)
const models = ref<AiiModelPublic[]>([])
const showScriptDrawer = ref(false)

const modelOptions = computed(() => {
  const options = [] as SelectOption[]
  for (const model of models.value) {
    options.push({
      value: model.id,
      label: `[${model.provider_name}] ${model.model_name}`,
    })
  }
  return options
})

function load() {
  api
    .get('/aii/model')
    .then((res) => res.data as ReturnDto)
    .then((data) => {
      if (data.success) {
        models.value = data.result as AiiModelPublic[]
      } else {
        throw TypeError('获取模型列表失败……')
      }
    })
    .catch((err) => {
      MESSAGE.error(`加载模型列表失败：${err}`)
    })
}

onMounted(() => {
  load()
})
</script>

<template>
  <n-flex vertical>
    <n-card title="模型">
      <template #header-extra>
        <n-flex>
          <n-button secondary type="info" size="small" round @click="load()">刷新</n-button>
          <n-button secondary type="warning" size="small" round @click="showModal = true">
            添加
          </n-button>
          <n-button-group>
            <n-button secondary type="primary" size="small" round>保存</n-button>
            <n-button secondary type="tertiary" size="small" round>?</n-button>
          </n-button-group>
        </n-flex>
      </template>
      <n-select v-model:value="selectedModel" :options="modelOptions" />
      <aii-model-add-modal v-model:show-modal="showModal" />
    </n-card>

    <chat-prompt-quicker v-model:prompt-prefix="quickerPrompt" />

    <n-card title="剧本">
      <template #header-extra>故事设定 · 世界书</template>
      <n-flex vertical>
        <n-alert type="info">剧本模板功能仍在开发中，暂不支持分享哦~</n-alert>
        <n-button secondary type="info" @click="showScriptDrawer = true">
          故事设定 · 世界书
        </n-button>
      </n-flex>
      <script-drawer :script v-model:show-drawer="showScriptDrawer" />
    </n-card>

    <n-card title="设置">
      <template #header-extra>也许你不需要修改这里</template>
      <n-flex vertical>
        <n-button secondary type="primary">聊天室信息</n-button>
        <n-button secondary type="info">系统设置</n-button>
      </n-flex>
    </n-card>
  </n-flex>
</template>

<style scoped></style>
