<script setup lang="ts">
import { Eye, EyeOff, Lock, User } from 'lucide-vue-next'

import { useAuth } from '@/composables/use-auth'

const username = ref('')
const password = ref('')
const showPassword = ref(false)

const { login, loading, error, isLogin } = useAuth()
const router = useRouter()

// 已登录则跳转首页
watchEffect(() => {
  if (unref(isLogin)) {
    router.push('/dashboard')
  }
})

async function handleSubmit() {
  if (!username.value || !password.value)
    return
  await login(username.value, password.value)
}
</script>

<template>
  <div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-background to-muted p-4">
    <UiCard class="w-full max-w-md">
      <UiCardHeader class="space-y-1 text-center">
        <div class="flex justify-center mb-4">
          <div class="size-12 rounded-xl bg-primary flex items-center justify-center">
            <Lock class="size-6 text-primary-foreground" />
          </div>
        </div>
        <UiCardTitle class="text-2xl font-bold">
          Monisuo Admin
        </UiCardTitle>
        <UiCardDescription>
          管理员登录
        </UiCardDescription>
      </UiCardHeader>
      <UiCardContent>
        <form @submit.prevent="handleSubmit" class="space-y-4">
          <div class="space-y-2">
            <UiLabel for="username">用户名</UiLabel>
            <div class="relative">
              <User class="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" />
              <UiInput
                id="username"
                v-model="username"
                type="text"
                placeholder="请输入用户名"
                class="pl-9"
                :disabled="loading"
              />
            </div>
          </div>
          <div class="space-y-2">
            <UiLabel for="password">密码</UiLabel>
            <div class="relative">
              <Lock class="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" />
              <UiInput
                id="password"
                v-model="password"
                :type="showPassword ? 'text' : 'password'"
                placeholder="请输入密码"
                class="pl-9 pr-9"
                :disabled="loading"
              />
              <button
                type="button"
                class="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
                @click="showPassword = !showPassword"
              >
                <Eye v-if="!showPassword" class="size-4" />
                <EyeOff v-else class="size-4" />
              </button>
            </div>
          </div>
          <UiAlert v-if="error" variant="destructive">
            <UiAlertDescription>{{ error }}</UiAlertDescription>
          </UiAlert>
          <UiButton type="submit" class="w-full" :disabled="loading">
            <UiSpinner v-if="loading" class="size-4 mr-2" />
            {{ loading ? '登录中...' : '登录' }}
          </UiButton>
        </form>
      </UiCardContent>
    </UiCard>
  </div>
</template>

<route lang="yaml">
meta:
  layout: blank
</route>
