<script setup lang="ts">
import { GetSelfAccount, useAccount } from '@/api/account'
import { QueryGetAPI } from '@/api/query'
import { BILI_API_URL } from '@/data/constants'
import {
  NAlert,
  NButton,
  NCard,
  NCountdown,
  NInput,
  NInputGroup,
  NInputNumber,
  NSpace,
  NSpin,
  NText,
  useMessage,
} from 'naive-ui'
import { onMounted, ref } from 'vue'

const message = useMessage()

const accountInfo = useAccount()
const isStart = ref(false)
const timeLeft = ref(0)
const timeOut = ref(false)

const uId = ref()
const roomId = ref()
const timer = ref()

function onStartVerify() {
  QueryGetAPI(BILI_API_URL + 'verify', {
    uId: uId.value,
  }).then((data) => {
    if (data.code == 200) {
      message.info('已开始认证流程, 请前往直播间发送认证码')
      checkStatus()
      isStart.value = true
      timer.value = setInterval(checkStatus, 2500)
    }
  })
}
async function checkStatus() {
  const data = await QueryGetAPI<{
    uId: number
    roomId: number
    endTime: number
  }>(BILI_API_URL + 'status')
  if (data.code == 200) {
    //正在进行认证
    roomId.value ??= data.data.roomId
    timeLeft.value = data.data.endTime
    return true
  } else if (data.code == 201) {
    clearInterval(timer.value)
    message.success('认证成功')
    setTimeout(() => {
      GetSelfAccount()
    }, 1)
    return true
  } else if (data.code == 400 && isStart.value) {
    timeOut.value = true
    clearInterval(timer.value)
    message.error('认证超时')
    return false
  }
  return false
}
function copyCode() {
  if (navigator.clipboard) {
    navigator.clipboard.writeText(accountInfo.value?.biliVerifyCode ?? '')
    message.success('已复制认证码到剪切板')
  } else {
    message.warning('当前环境不支持自动复制, 请手动选择并复制')
  }
}

onMounted(async () => {
  if (accountInfo.value && !accountInfo.value.isBiliVerified) {
    if (await checkStatus()) {
      isStart.value = true
      timer.value = setInterval(checkStatus, 5000)
    }
  }
})
</script>

<template>
  <NAlert
    v-if="accountInfo?.isBiliVerified"
    type="success"
  >
    你已通过验证
  </NAlert>
  <NAlert v-else-if="!accountInfo">
    尚未登录
  </NAlert>
  <NCard
    v-else
    embedded
  >
    <template #header>
      Bilibili 身份验证
    </template>
    <template v-if="isStart">
      <NSpace
        vertical
        justify="center"
        align="center"
      >
        <template v-if="!timeOut">
          <NSpin />
          <span> 剩余 <NCountdown :duration="timeLeft - Date.now()" /> </span>
        </template>
        <NAlert
          v-else
          type="error"
        >
          认证超时
          <NButton
            type="info"
            @click="
              () => {
                isStart = false
                timeOut = false
              }
            "
          >
            重新开始
          </NButton>
        </NAlert>
        <NInputGroup>
          <NInput
            v-model:value="accountInfo.biliVerifyCode"
            :allow-input="() => false"
          />
          <NButton @click="copyCode">
            复制认证码
          </NButton>
        </NInputGroup>
        <NButton
          v-if="roomId"
          type="primary"
          tag="a"
          :href="'https://live.bilibili.com/' + roomId"
          target="_blank"
        >
          前往直播间
        </NButton>
      </NSpace>
    </template>
    <template v-else>
      <NSpace
        vertical
        justify="center"
        align="center"
      >
        <NAlert type="info">
          <NText>
            请在点击
            <NText
              type="primary"
              strong
            >
              开始认证
            </NText>
            后2分钟之内使用
            <NText
              strong
              type="primary"
            >
              需要认证的账户
            </NText>
            在自己的直播间内发送
            <NButton
              type="info"
              text
              @click="copyCode"
            >
              {{ accountInfo?.biliVerifyCode }}
            </NButton>
          </NText>
        </NAlert>
        <NInputNumber
          v-model:value="uId"
          size="small"
          placeholder="输入用户UId"
          :min="1"
          :show-button="false"
        />
        <NButton
          size="large"
          type="primary"
          @click="onStartVerify"
        >
          开始认证
        </NButton>
      </NSpace>
    </template>
  </NCard>
</template>
