<script setup>
import { ref } from 'vue'
import { useI18n } from 'vue-i18n'
import { useAuthStore } from '../stores/auth'
import LanguageSwitcher from '../components/LanguageSwitcher.vue'

const { t } = useI18n()
const authStore = useAuthStore()
const username = ref('')
const password = ref('')
const loading = ref(false)
const error = ref('')

const handleLogin = async () => {
  if (!username.value || !password.value) {
    error.value = t('auth.login.messages.fillRequired')
    return
  }

  loading.value = true
  error.value = ''

  try {
    const result = await authStore.login({
      username: username.value,
      password: password.value,
    })

    if (!result.success) {
      error.value = result.error || t('auth.login.messages.loginFailed')
      // 登录失败时清空密码字段，提升安全性和用户体验
      password.value = ''
    }
  } catch {
    error.value = t('auth.login.messages.loginError')
    // 登录错误时也清空密码字段
    password.value = ''
  } finally {
    loading.value = false
  }
}
</script>

<template>
  <v-img
    src="/src/assets/images/login.jpg"
    cover
    height="100vh"
    style="object-position: center top;"
  >
    <v-container class="fill-height" fluid>
      <v-row
        align="center"
        justify="center"
        class="fill-height"
        no-gutters
      >
        <!-- 登录表单 -->
        <v-col cols="12" md="4" class="">
          <v-sheet
            elevation="10"
            rounded="xl"
            class="pa-8 h-100 justify-center align-center flex-grow-1"
            style="background: rgba(255, 255, 255, 0.95);"
          >
            <!-- 语言切换器 -->
            <div class="d-flex justify-end mb-4">
              <LanguageSwitcher />
            </div>

            <form @submit.prevent="handleLogin" style="width: 100%;">
              <div class="text-h4 font-weight-bold mb-4">{{ $t('auth.login.title') }}</div>
              <div class="text-body-1">
                {{ $t('auth.login.description') }}
              </div>
              <v-row justify="center" class="pa-6">
                <v-avatar size="128" class="mb-4" >
                  <v-img src="/src/assets/images/loginAvatar.jpg" />
                </v-avatar>
              </v-row>
              <v-text-field
                v-model="username"
                :label="$t('auth.login.form.username')"
                prepend-inner-icon="mdi-account"
                class="mb-4"
                variant="outlined"
                density="comfortable"
              />
              <v-text-field
                v-model="password"
                :label="$t('auth.login.form.password')"
                type="password"
                prepend-inner-icon="mdi-lock"
                class="mb-6"
                variant="outlined"
                density="comfortable"
              />
              <v-alert
                v-if="error"
                type="error"
                variant="tonal"
                class="mb-4"
              >
                {{ error }}
              </v-alert>
              <v-btn
                color="primary"
                block
                large
                :loading="loading"
                type="submit"
              >
                {{ $t('auth.login.buttons.signIn') }}
              </v-btn>
            </form>
          </v-sheet>
        </v-col>
      </v-row>
    </v-container>
  </v-img>
</template>

<style scoped>
</style>
