<script setup lang='ts'>
import type { DataTableColumns } from 'naive-ui'
import { computed, h, ref, watch } from 'vue'
import { NButton, NCard, NDataTable, NDivider, NInput, NLayoutContent, NMessageProvider, NModal, NPopconfirm, NSpace, NTabPane, NTabs, useMessage } from 'naive-ui'
import PromptRecommend from '../../../assets/recommend.json'
import { SvgIcon } from '..'
import { usePromptStore } from '@/store'
import { useBasicLayout } from '@/hooks/useBasicLayout'
import { t } from '@/locales'

interface DataProps {
  renderKey: string
  renderValue: string
  key: string
  value: string
}

interface Props {
  visible: boolean
}

interface Emit {
  (e: 'update:visible', visible: boolean): void
}

const props = defineProps<Props>()

const emit = defineEmits<Emit>()

const message = useMessage()

const show = computed({
  get: () => props.visible,
  set: (visible: boolean) => emit('update:visible', visible),
})

const showModal = ref(false)

const importLoading = ref(false)
const exportLoading = ref(false)

const searchValue = ref<string>('')

// 移动端自适应相关
const { isMobile } = useBasicLayout()

const promptStore = usePromptStore()

// Prompt在线导入推荐List,根据部署者喜好进行修改(assets/recommend.json)
const promptRecommendList = PromptRecommend
const promptList = ref<any>(promptStore.promptList)

// 用于添加修改的临时prompt参数
const tempPromptKey = ref('')
const tempPromptValue = ref('')

// Modal模式，根据不同模式渲染不同的Modal内容
const modalMode = ref('')

// 这个是为了后期的修改Prompt内容考虑，因为要针对无uuid的list进行修改，且考虑到不能出现标题和内容的冲突，所以就需要一个临时item来记录一下
const tempModifiedItem = ref<any>({})

// 添加修改导入都使用一个Modal, 临时修改内容占用tempPromptKey,切换状态前先将内容都清楚
const changeShowModal = (mode: string, selected = { key: '', value: '' }) => {
  if (mode === 'add') {
    tempPromptKey.value = ''
    tempPromptValue.value = ''
  }
  else if (mode === 'modify') {
    tempModifiedItem.value = { ...selected }
    tempPromptKey.value = selected.key
    tempPromptValue.value = selected.value
  }
  else if (mode === 'local_import') {
    tempPromptKey.value = 'local_import'
    tempPromptValue.value = ''
  }
  showModal.value = !showModal.value
  modalMode.value = mode
}

// 在线导入相关
const downloadURL = ref('')
const downloadDisabled = computed(() => downloadURL.value.trim().length < 1)
const setDownloadURL = (url: string) => {
  downloadURL.value = url
}

// 控制 input 按钮
const inputStatus = computed (() => tempPromptKey.value.trim().length < 1 || tempPromptValue.value.trim().length < 1)

// Prompt模板相关操作
const addPromptTemplate = () => {
  for (const i of promptList.value) {
    if (i.key === tempPromptKey.value) {
      message.error(t('store.addRepeatTitleTips'))
      return
    }
    if (i.value === tempPromptValue.value) {
      message.error(t('store.addRepeatContentTips', { msg: tempPromptKey.value }))
      return
    }
  }
  promptList.value.unshift({ key: tempPromptKey.value, value: tempPromptValue.value } as never)
  message.success(t('common.addSuccess'))
  changeShowModal('')
}

const modifyPromptTemplate = () => {
  let index = 0

  // 通过临时索引把待修改项摘出来
  for (const i of promptList.value) {
    if (i.key === tempModifiedItem.value.key && i.value === tempModifiedItem.value.value)
      break
    index = index + 1
  }

  const tempList = promptList.value.filter((_: any, i: number) => i !== index)

  // 搜索有冲突的部分
  for (const i of tempList) {
    if (i.key === tempPromptKey.value) {
      message.error(t('store.editRepeatTitleTips'))
      return
    }
    if (i.value === tempPromptValue.value) {
      message.error(t('store.editRepeatContentTips', { msg: i.key }))
      return
    }
  }

  promptList.value = [{ key: tempPromptKey.value, value: tempPromptValue.value }, ...tempList] as never
  message.success(t('common.editSuccess'))
  changeShowModal('')
}

const deletePromptTemplate = (row: { key: string; value: string }) => {
  promptList.value = [
    ...promptList.value.filter((item: { key: string; value: string }) => item.key !== row.key),
  ] as never
  message.success(t('common.deleteSuccess'))
}

const clearPromptTemplate = () => {
  promptList.value = []
  message.success(t('common.clearSuccess'))
}

const importPromptTemplate = () => {
  try {
    const jsonData = JSON.parse(tempPromptValue.value)
    let key = ''
    let value = ''
    // 可以扩展加入更多模板字典的key
    if ('key' in jsonData[0]) {
      key = 'key'
      value = 'value'
    }
    else if ('act' in jsonData[0]) {
      key = 'act'
      value = 'prompt'
    }
    else {
      // 不支持的字典的key防止导入 以免破坏prompt商店打开
      message.warning('prompt key not supported.')
      throw new Error('prompt key not supported.')
    }

    for (const i of jsonData) {
      if (!('key' in i) || !('value' in i))
        throw new Error(t('store.importError'))
      let safe = true
      for (const j of promptList.value) {
        if (j.key === i[key]) {
          message.warning(t('store.importRepeatTitle', { msg: i[key] }))
          safe = false
          break
        }
        if (j.value === i[value]) {
          message.warning(t('store.importRepeatContent', { msg: i[key] }))
          safe = false
          break
        }
      }
      if (safe)
        promptList.value.unshift({ key: i[key], value: i[value] } as never)
    }
    message.success(t('common.importSuccess'))
    changeShowModal('')
  }
  catch {
    message.error('JSON 格式错误，请检查 JSON 格式')
    changeShowModal('')
  }
}

// 模板导出
const exportPromptTemplate = () => {
  exportLoading.value = true
  const jsonDataStr = JSON.stringify(promptList.value)
  const blob = new Blob([jsonDataStr], { type: 'application/json' })
  const url = URL.createObjectURL(blob)
  const link = document.createElement('a')
  link.href = url
  link.download = 'ChatGPTPromptTemplate.json'
  link.click()
  URL.revokeObjectURL(url)
  exportLoading.value = false
}

// 模板在线导入
const downloadPromptTemplate = async () => {
  try {
    importLoading.value = true
    await fetch(downloadURL.value)
      .then(response => response.json())
      .then((jsonData) => {
        tempPromptValue.value = JSON.stringify(jsonData)
      }).then(() => {
        importPromptTemplate()
      })
    downloadURL.value = ''
  }
  catch {
    message.error(t('store.downloadError'))
  }
  finally {
    importLoading.value = false
  }
}

// 移动端自适应相关
const renderTemplate = () => {
  const [keyLimit, valueLimit] = isMobile.value ? [6, 9] : [15, 50]

  return promptList.value.map((item: { key: string; value: string }) => {
    return {
      renderKey: item.key.length <= keyLimit ? item.key : `${item.key.substring(0, keyLimit)}...`,
      renderValue: item.value.length <= valueLimit ? item.value : `${item.value.substring(0, valueLimit)}...`,
      key: item.key,
      value: item.value,
    }
  })
}

const pagination = computed(() => {
  const [pageSize, pageSlot] = isMobile.value ? [6, 5] : [7, 15]
  return {
    pageSize, pageSlot,
  }
})

// table相关
const createColumns = (): DataTableColumns<DataProps> => {
  return [
    {
      title: t('store.title'),
      key: 'renderKey',
    },
    {
      title: t('store.description'),
      key: 'renderValue',
    },
    {
      title: t('common.action'),
      key: 'actions',
      width: 100,
      align: 'center',
      render(row) {
        return h('div', { class: 'flex items-center flex-col gap-2' }, {
          default: () => [h(
            NButton,
            {
              tertiary: true,
              size: 'small',
              type: 'info',
              onClick: () => changeShowModal('modify', row),
            },
            { default: () => t('common.edit') },
          ),
          h(
            NButton,
            {
              tertiary: true,
              size: 'small',
              type: 'error',
              onClick: () => deletePromptTemplate(row),
            },
            { default: () => t('common.delete') },
          ),
          ],
        })
      },
    },
  ]
}

const columns = createColumns()

watch(
  () => promptList,
  () => {
    promptStore.updatePromptList(promptList.value)
  },
  { deep: true },
)

const dataSource = computed(() => {
  const data = renderTemplate()
  const value = searchValue.value
  if (value && value !== '') {
    return data.filter((item: DataProps) => {
      return item.renderKey.includes(value) || item.renderValue.includes(value)
    })
  }
  return data
})
</script>

<template>
  <NMessageProvider>
    <NModal v-model:show="show" style="width: 90%; max-width: 900px;" preset="card">
      <div class="space-y-4">
        <NTabs type="segment">
          <NTabPane name="local" :tab="$t('store.local')">
            <div
              class="flex gap-3"
              :class="[isMobile ? 'flex-col' : 'flex-row justify-between']"
            >
              <div class="flex items-center space-x-4">
                <NButton
                  type="primary"
                  size="small"
                  @click="changeShowModal('add')"
                >
                  {{ $t('common.add') }}
                </NButton>
                <NButton
                  size="small"
                  @click="changeShowModal('local_import')"
                >
                  {{ $t('common.import') }}
                </NButton>
                <NButton
                  size="small"
                  :loading="exportLoading"
                  @click="exportPromptTemplate()"
                >
                  {{ $t('common.export') }}
                </NButton>
                <NPopconfirm @positive-click="clearPromptTemplate">
                  <template #trigger>
                    <NButton size="small">
                      {{ $t('common.clear') }}
                    </NButton>
                  </template>
                  {{ $t('store.clearStoreConfirm') }}
                </NPopconfirm>
              </div>
              <div class="flex items-center">
                <NInput v-model:value="searchValue" style="width: 100%" />
              </div>
            </div>
            <br>
            <NDataTable
              :max-height="400"
              :columns="columns"
              :data="dataSource"
              :pagination="pagination"
              :bordered="false"
            />
          </NTabPane>
          <NTabPane name="download" :tab="$t('store.online')">
            <p class="mb-4">
              {{ $t('store.onlineImportWarning') }}
            </p>
            <div class="flex items-center gap-4">
              <NInput v-model:value="downloadURL" placeholder="" />
              <NButton
                strong
                secondary
                :disabled="downloadDisabled"
                :loading="importLoading"
                @click="downloadPromptTemplate()"
              >
                {{ $t('common.download') }}
              </NButton>
            </div>
            <NDivider />
            <NLayoutContent
              style="height: 360px"
              content-style="background: none;"
              :native-scrollbar="false"
            >
              <NCard
                v-for="info in promptRecommendList"
                :key="info.key" :title="info.key"
                style="margin: 5px;"
                embedded
                :bordered="true"
              >
                <p
                  class="overflow-hidden text-ellipsis whitespace-nowrap"
                  :title="info.desc"
                >
                  {{ info.desc }}
                </p>
                <template #footer>
                  <div class="flex items-center justify-end space-x-4">
                    <NButton text>
                      <a
                        :href="info.url"
                        target="_blank"
                      >
                        <SvgIcon class="text-xl" icon="ri:link" />
                      </a>
                    </NButton>
                    <NButton text @click="setDownloadURL(info.downloadUrl) ">
                      <SvgIcon class="text-xl" icon="ri:add-fill" />
                    </NButton>
                  </div>
                </template>
              </NCard>
            </NLayoutContent>
          </NTabPane>
        </NTabs>
      </div>
    </NModal>
    <NModal v-model:show="showModal" style="width: 90%; max-width: 600px;" preset="card">
      <NSpace v-if="modalMode === 'add' || modalMode === 'modify'" vertical>
        {{ t('store.title') }}
        <NInput v-model:value="tempPromptKey" />
        {{ t('store.description') }}
        <NInput v-model:value="tempPromptValue" type="textarea" />
        <NButton
          block
          type="primary"
          :disabled="inputStatus"
          @click="() => { modalMode === 'add' ? addPromptTemplate() : modifyPromptTemplate() }"
        >
          {{ t('common.confirm') }}
        </NButton>
      </NSpace>
      <NSpace v-if="modalMode === 'local_import'" vertical>
        <NInput
          v-model:value="tempPromptValue"
          :placeholder="t('store.importPlaceholder')"
          :autosize="{ minRows: 3, maxRows: 15 }"
          type="textarea"
        />
        <NButton
          block
          type="primary"
          :disabled="inputStatus"
          @click="() => { importPromptTemplate() }"
        >
          {{ t('common.import') }}
        </NButton>
      </NSpace>
    </NModal>
  </NMessageProvider>
</template>
