<script setup lang="ts">
import ConfigCard from '@/components/admin/ConfigCard.vue'
import { useHead } from '@unhead/vue'
import { ref } from 'vue'
import { api } from '@/tools/web.ts'
import InDev from '@/components/InDev.vue'
import { useMessage } from 'naive-ui'
import type { ReturnDto } from '@/types/response.ts'

interface SiteConfig {
  site_name: string
  site_url: string
  backend_url: string

  default_user_avatar_url: string
  default_user_background_url: string
  default_chatroom_script_cover_url: string
  default_page_cover_url: string

  jwt_secret_key: string
  allow_upload_file_extensions: string[]

  smtp_enable: boolean
  smtp_sender: string
  smtp_hostname: string
  smtp_port: number
  smtp_username: string
  smtp_password: string
  smtp_use_tls: boolean
}

const MESSAGE = useMessage()

useHead({
  title: 'NyaHome 管理后台',
})

const siteConfig = ref<SiteConfig | null>(null)

function getConfig() {
  api.get('/admin/site_config/').then((res) => {
    siteConfig.value = res.data as SiteConfig
    MESSAGE.success('成功获取设置~')
  })
}

function saveConfig() {
  api.post('/admin/site_config/', JSON.stringify(siteConfig.value)).then((res) => {
    siteConfig.value = res.data as SiteConfig
    MESSAGE.success('保存并刷新设置成功~')
  })
}

const testMailTo = ref('25565@qq.com')

function sendTestMail() {
  api
    .post('/admin/email-test/', JSON.stringify({ to: testMailTo.value }))
    .then((res) => res.data as ReturnDto)
    .then((data) => data.success)
    .then((success) => {
      if (success) {
        MESSAGE.success('邮件发送成功，请稍等片刻，然后检查收件箱~')
      } else {
        MESSAGE.error('后端表示邮件发送失败，请检查日志输出。')
      }
    })
}
</script>

<template>
  <n-card>
    <template #header>
      <n-h3 prefix="bar" style="margin: 0">NyaHome 管理后台</n-h3>
    </template>
    <template #header-extra>
      <n-flex>
        <n-button type="success" secondary @click="getConfig()">获取设置</n-button>
        <n-button type="error" secondary @click="saveConfig()">保存设置</n-button>
      </n-flex>
    </template>
  </n-card>

  <n-tabs type="card" v-if="siteConfig !== null">
    <n-tab-pane name="user" tab="用户" display-directive="show">
      <config-card title="全部用户">
        <in-dev />
      </config-card>
    </n-tab-pane>

    <n-tab-pane name="chatroom" tab="聊天室" display-directive="show">
      <config-card title="全部聊天室">
        <in-dev />
      </config-card>
    </n-tab-pane>

    <n-tab-pane name="script" tab="剧本" display-directive="show">
      <config-card title="全部剧本">
        <in-dev />
      </config-card>
    </n-tab-pane>

    <n-tab-pane name="site_info" tab="站点信息" display-directive="show">
      <n-flex vertical>
        <config-card title="基本信息">
          <n-form>
            <n-form-item label="站点名称">
              <n-input v-model:value="siteConfig.site_name" />
            </n-form-item>
            <n-alert type="info" class="in-form-alert">
              您在浏览器中访问本站点时使用的地址（主机名/域名）。
              如果需要前后端分开部署，则是前端所在地址。<br />
              就默认而言，这两个地址应当一致。
            </n-alert>
            <n-form-item label="站点地址">
              <n-input v-model:value="siteConfig.site_url" />
            </n-form-item>
            <n-alert type="info" class="in-form-alert">
              如果您需要将 NyaHome
              的前后端分开部署，则需要在此设置后端地址。您需要自行处理跨域问题。
            </n-alert>
            <n-form-item label="FastAPI 后端地址">
              <n-input v-model:value="siteConfig.backend_url" />
            </n-form-item>
          </n-form>
        </config-card>

        <config-card title="搜索引擎设置与 SEO">
          <in-dev />
        </config-card>
      </n-flex>
    </n-tab-pane>

    <n-tab-pane name="custom" tab="站点定制" display-directive="show">
      <config-card title="默认图片">
        <n-form>
          <n-form-item label="默认用户头像">
            <n-input v-model:value="siteConfig.default_user_avatar_url" />
          </n-form-item>
          <n-form-item label="默认用户背景">
            <n-input v-model:value="siteConfig.default_user_background_url" />
          </n-form-item>
          <n-form-item label="默认聊天室和剧本封面">
            <n-input v-model:value="siteConfig.default_chatroom_script_cover_url" />
          </n-form-item>
          <n-form-item label="默认页面封面">
            <n-input v-model:value="siteConfig.default_page_cover_url" />
          </n-form-item>
        </n-form>
      </config-card>
    </n-tab-pane>

    <n-tab-pane name="permission" tab="权限设置" display-directive="show">
      <config-card title="用户权限">
        <in-dev />
      </config-card>
    </n-tab-pane>

    <n-tab-pane name="security" tab="安全设置" display-directive="show">
      <n-flex vertical>
        <config-card title="JWT">
          <n-form>
            <n-alert type="info" class="in-form-alert">
              JWT（Json Web Token）签名需要一个密钥，你可以手动提供一个，或者自行生成一个。<br />
              修改此密钥会导致所有用户的登录状态丢失（你也会），请一次性设置一个足够安全的。
            </n-alert>
            <n-form-item label="JWT 密钥">
              <n-input
                v-model:value="siteConfig.jwt_secret_key"
                type="password"
                show-password-toggle
              />
            </n-form-item>
          </n-form>
        </config-card>

        <config-card title="文件上传">
          <n-form>
            <n-form-item label="允许上传的文件类型（拓展名）">
              <n-dynamic-tags v-model:value="siteConfig.allow_upload_file_extensions" type="info" />
            </n-form-item>
          </n-form>
        </config-card>
      </n-flex>
    </n-tab-pane>

    <n-tab-pane name="remote_service" tab="外部服务" display-directive="show">
      <n-flex vertical>
        <config-card title="邮件 SMTP">
          <n-form>
            <n-alert type="info" class="in-form-alert">
              NayHome 无法自己发送邮件，需要配置 SMTP 服务。<br />
              或者你也可以关闭邮件功能，当然芒果还是建议你配置一下的。
            </n-alert>
            <n-form-item label="启用邮件功能（SMTP）">
              <n-switch v-model:value="siteConfig.smtp_enable" />
            </n-form-item>
            <n-form-item label="发件人邮件地址">
              <n-input v-model:value="siteConfig.smtp_sender" />
            </n-form-item>
            <n-form-item label="SMTP 主机名">
              <n-input v-model:value="siteConfig.smtp_hostname" />
            </n-form-item>
            <n-form-item label="SMTP 端口">
              <n-input-number v-model:value="siteConfig.smtp_port" />
            </n-form-item>
            <n-form-item label="SMTP 用户名">
              <n-input v-model:value="siteConfig.smtp_username" />
            </n-form-item>
            <n-form-item label="SMTP 密码（一般应当是一个独立的应用程序密码）">
              <n-input v-model:value="siteConfig.smtp_password" />
            </n-form-item>
            <n-form-item label="使用 TLS/SSL 加密">
              <n-switch v-model:value="siteConfig.smtp_use_tls" />
            </n-form-item>
          </n-form>
          <template #action>
            <n-flex vertical>
              <n-text
                >你可以在这里测试 NayHome 的邮件系统能否使用上述 SMTP
                设置工作，这会发送一封测试邮件。
              </n-text>
              <n-input v-model:value="testMailTo" />
              <n-button secondary type="warning" @click="sendTestMail()">发送测试邮件</n-button>
            </n-flex>
          </template>
        </config-card>
      </n-flex>
    </n-tab-pane>
  </n-tabs>

  <n-empty size="large" v-else description="请尝试手动获取设置..." />
</template>

<style scoped>
.in-form-alert {
  margin-bottom: 16px;
}
</style>
