<template>
  <div class="container">
    <section class="hero fade-up">
      <div class="hero-badge">SECURE ACCESS</div>
      <h1 class="hero-title">垃圾信息识别平台</h1>
      <p class="hero-sub">登录后即可使用文本检测、发布拦截、申诉处理和管理看板能力。</p>
      <div class="hero-meta">
        <span class="hero-metric">实时风控</span>
        <span class="hero-metric">闭环审核</span>
        <span class="hero-metric">模型迭代</span>
      </div>
    </section>

    <section class="card fade-up fade-up-delay-1" style="max-width: 460px; margin: 24px auto;">
      <div class="card-title">账号登录</div>
      <div class="card-desc">请输入用户名和密码，进入你的工作台。</div>

      <div class="field">
        <label class="field-label">用户名</label>
        <input class="input" v-model.trim="username" placeholder="请输入用户名" @keyup.enter="submit" />
      </div>

      <div class="field">
        <label class="field-label">密码</label>
        <input class="input" type="password" v-model.trim="password" placeholder="请输入密码" @keyup.enter="submit" />
      </div>

      <button class="btn btn-primary" :disabled="loading" @click="submit" style="width: 100%;">
        {{ loading ? '登录中...' : '立即登录' }}
      </button>

      <div class="btn-row">
        <button class="btn btn-ghost" type="button" @click="fillDemo">填充演示账号</button>
        <button class="btn btn-accent" type="button" @click="goRegister">注册新账号</button>
      </div>
    </section>
  </div>
</template>

<script>
import { request } from '@/utils/request'
import { setAuth } from '@/store'
import { toast } from '@/utils/feedback'

export default {
  name: 'LoginView',
  data() {
    return {
      username: '',
      password: '',
      loading: false
    }
  },
  methods: {
    fillDemo() {
      this.username = 'admin'
      this.password = 'Admin@123456'
    },
    goRegister() {
      this.$router.push('/register')
    },
    async submit() {
      if (this.loading) return
      if (!this.username || !this.password) {
        toast('请输入用户名和密码', 'error')
        return
      }
      this.loading = true
      try {
        const data = await request({
          url: '/auth/login',
          method: 'POST',
          data: { username: this.username, password: this.password }
        })
        setAuth(data.token, data.user)
        toast('登录成功', 'success')
        setTimeout(() => this.$router.replace('/'), 200)
      } catch (err) {
        // toast already triggered
      } finally {
        this.loading = false
      }
    }
  }
}
</script>
