<template>
  <div class="live-auth">
    <header class="live-auth-top">
      <router-link to="/live" class="live-auth-back">← 返回直播</router-link>
    </header>
    <main class="live-auth-main">
      <h1 class="live-auth-title">登录发弹幕</h1>
      <p class="live-auth-desc">本站账号仅用于直播弹幕，与后台管理无关。</p>
      <form class="live-auth-form" @submit.prevent="submit">
        <label class="live-auth-label">
          <span>用户名</span>
          <input v-model.trim="username" class="live-auth-input" type="text" autocomplete="username" required />
        </label>
        <label class="live-auth-label">
          <span>密码</span>
          <input
            v-model="password"
            class="live-auth-input"
            type="password"
            autocomplete="current-password"
            required
          />
        </label>
        <p v-if="err" class="live-auth-err">{{ err }}</p>
        <button type="submit" class="live-auth-btn" :disabled="loading">
          {{ loading ? '登录中…' : '登录' }}
        </button>
      </form>
      <p class="live-auth-footer">
        还没有账号？
        <router-link to="/live/register" class="live-auth-link">注册</router-link>
      </p>
    </main>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { apiBase } from '../config'
import { setSiteDmSession } from '../utils/siteUserAuth'

const router = useRouter()
const username = ref('')
const password = ref('')
const err = ref('')
const loading = ref(false)

async function submit() {
  err.value = ''
  loading.value = true
  try {
    const url = apiBase ? `${apiBase}/api/web/site/login` : '/api/web/site/login'
    const res = await fetch(url, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        username: username.value,
        password: password.value
      })
    })
    const j = await res.json().catch(() => ({}))
    if (!res.ok) {
      err.value = j.error || `登录失败（${res.status}）`
      return
    }
    if (!j.token) {
      err.value = '服务器未返回凭证'
      return
    }
    setSiteDmSession(j.token, j.username || username.value)
    router.push('/live')
  } catch {
    err.value = '网络错误，请稍后重试'
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
.live-auth {
  min-height: 100vh;
  padding: 24px 20px 48px;
  background: radial-gradient(ellipse at 30% 20%, rgba(74, 26, 107, 0.25) 0%, transparent 45%),
    radial-gradient(ellipse at 70% 80%, rgba(30, 58, 95, 0.3) 0%, transparent 50%),
    #0a0a12;
  color: #fff;
  font-family: 'Noto Sans SC', system-ui, sans-serif;
}
.live-auth-top {
  max-width: 400px;
  margin: 0 auto 24px;
}
.live-auth-back {
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  font-size: 14px;
}
.live-auth-back:hover {
  color: #00d4ff;
}
.live-auth-main {
  max-width: 400px;
  margin: 0 auto;
}
.live-auth-title {
  font-size: 1.35rem;
  margin: 0 0 10px;
  letter-spacing: 0.08em;
}
.live-auth-desc {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.5;
  margin: 0 0 24px;
}
.live-auth-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.live-auth-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
  text-align: left;
}
.live-auth-input {
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(0, 212, 255, 0.35);
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  font-size: 15px;
}
.live-auth-input:focus {
  outline: none;
  border-color: #00d4ff;
}
.live-auth-err {
  margin: 0;
  font-size: 13px;
  color: #ff6b6b;
}
.live-auth-btn {
  margin-top: 8px;
  padding: 12px 20px;
  border-radius: 10px;
  border: none;
  background: linear-gradient(135deg, #00d4ff, #ff2d95);
  color: #0a0a12;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.live-auth-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.live-auth-footer {
  margin-top: 24px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.55);
}
.live-auth-link {
  color: #00d4ff;
  text-decoration: none;
}
.live-auth-link:hover {
  text-decoration: underline;
}
</style>
