<script setup lang="ts">
import { ref } from 'vue'
import { api } from '@/tools/web.js'
import type { ReturnDto } from '@/types/response.js'
import { useMessage } from 'naive-ui'
import { AxiosError } from 'axios'
import { useNowUser } from '@/stores/now-user.js'

const MESSAGE = useMessage()
const NOWUSER = useNowUser()

const page = ref<'login' | 'register'>('login')

const loginMethod = ref<'name' | 'email' | 'phone'>('name')

const loginForm = ref({
  username: '',
  password: '',
})

function login() {
  api
    .post(`/admin/login/${loginMethod.value}`, {
      username: loginForm.value.username,
      password: loginForm.value.password,
    })
    .then((res) => res.data as ReturnDto)
    .then((data) => {
      if (data.success) {
        return data.result as { user_id: number; access_token: string }
      } else {
        throw TypeError('未知原因，后端登录业务失败。')
      }
    })
    .then((result) => {
      localStorage.setItem('user-id', String(result.user_id))
      localStorage.setItem('access-token', result.access_token)
      MESSAGE.success('登录成功~')
      NOWUSER.loadUserInfo(result.user_id, result.access_token)
    })
    .catch((err) => {
      let err_msg = '未知的错误'
      if (err instanceof AxiosError) {
        if (err.status === 404) {
          err_msg = '用户名不存在，请检查。'
        } else if (err.status === 401) {
          err_msg = '用户名或密码错误，请检查。'
        }
      }
      MESSAGE.error(`登录失败：${err_msg}`)
    })
}
</script>

<template>
  <div>
    <div class="user-action nyahome-card" v-if="NOWUSER.isLogin" style="position: relative">
      <img :src="NOWUSER.background_url" alt="User Background" class="user-action-background" />
      <div class="card-content" style="margin-top: auto; margin-bottom: 20px">
        <n-avatar :size="96" circle :src="NOWUSER.avatar_url" />
        <n-h2 style="margin: 0">
          {{ NOWUSER.display_name ? NOWUSER.display_name : NOWUSER.name }}
        </n-h2>
        <n-tag type="primary">{{ NOWUSER.name }}</n-tag>
        <n-flex class="card-input">
          <router-link class="card-button" to="/admin">
            <n-button type="primary" style="width: 100%" secondary>管理</n-button>
          </router-link>
          <router-link class="card-button" :to="`/user/${NOWUSER.id}`">
            <n-button type="info" style="width: 100%" secondary>主页</n-button>
          </router-link>
          <router-link class="card-button" to="#">
            <n-button type="error" style="width: 100%" secondary>注销</n-button>
          </router-link>
        </n-flex>
      </div>
    </div>

    <div class="user-action nyahome-card" v-else>
      <n-radio-group v-model:value="page">
        <n-radio-button value="login">登录</n-radio-button>
        <n-radio-button value="register">注册</n-radio-button>
      </n-radio-group>
      <div class="card-content" v-if="page === 'login'">
        <n-avatar :size="96" circle />
        <n-radio-group v-model:value="loginMethod">
          <n-radio-button value="name">用户名</n-radio-button>
          <n-radio-button value="email">邮箱</n-radio-button>
          <n-radio-button value="phone">手机</n-radio-button>
        </n-radio-group>
        <n-input v-model:value="loginForm.username" class="card-input" placeholder="" />
        <n-input
          v-model:value="loginForm.password"
          class="card-input"
          placeholder="密码"
          type="password"
          show-password-toggle
        />
        <n-flex class="card-input">
          <n-button type="info" class="card-button" @click="login()">登录</n-button>
          <n-button type="warning" class="card-button">忘记密码</n-button>
        </n-flex>
      </div>

      <div class="card-content" v-else>
        <n-avatar :size="96" circle />
        <n-input class="card-input" placeholder="用户名" />
        <n-input class="card-input" placeholder="密码" type="password" show-password-toggle />
        <n-flex class="card-input">
          <n-button type="primary" class="card-button">注册</n-button>
        </n-flex>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
div.user-action {
  height: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;

  .user-action-background {
    position: absolute;
    top: 0;
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 6px 6px 0 0;
  }

  div.card-content {
    width: 80%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;

    .card-input {
      width: 100%;
    }

    .card-button {
      flex: 1;
    }
  }
}
</style>
