<template>
  <section class="mx-auto flex min-h-[70vh] max-w-lg flex-col justify-center gap-6">
    <div class="text-center">
      <h1 class="mos-title text-2xl font-semibold">管理员登录</h1>
      <p class="mos-muted mt-2 text-sm">使用演示账号快速预览功能</p>
    </div>

    <div class="mos-card p-6 space-y-4">
      <div>
        <label class="text-xs font-semibold text-mosquito-ink/70">用户名</label>
        <input class="mos-input mt-2 w-full" placeholder="管理员账号" disabled />
      </div>
      <div>
        <label class="text-xs font-semibold text-mosquito-ink/70">密码</label>
        <input class="mos-input mt-2 w-full" type="password" placeholder="••••••••" disabled />
      </div>
      <button class="mos-btn mos-btn-accent w-full opacity-50 cursor-not-allowed" disabled>
        登录（暂未接入）
      </button>

      <div class="border-t border-mosquito-line pt-4">
        <button class="mos-btn mos-btn-secondary w-full" @click="loginDemo">
          一键登录（演示管理员）
        </button>
        <p class="mos-muted mt-2 text-xs text-center">未登录默认进入演示管理员视图</p>
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { useAuthStore } from '../stores/auth'

const auth = useAuthStore()
const router = useRouter()

const loginDemo = async () => {
  await auth.loginDemo('admin')
  await router.push('/')
}
</script>
