<script setup>
import { authService } from '@/api/authService';
import { useAuthStore } from '@/stores/auth';
import Button from 'primevue/button';
import Card from 'primevue/card';
import InputText from 'primevue/inputtext';
import Password from 'primevue/password';
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();
const authStore = useAuthStore();

const username = ref('');
const password = ref('');
const loading = ref(false);
const errorMessage = ref('');

const validateForm = () => {
    if (!username.value.trim()) {
        errorMessage.value = '请输入用户名';
        return false;
    }
    if (!password.value) {
        errorMessage.value = '请输入密码';
        return false;
    }
    if (password.value.length < 8) {
        errorMessage.value = '密码至少需要8个字符';
        return false;
    }
    return true;
};

const handleLogin = async () => {
    if (!validateForm()) return;

    loading.value = true;
    errorMessage.value = '';

    try {
        const resp = await authService.login(username.value, password.value);
        const { token } = resp.data;
        if (!token) {
            alert('登录失败');
            return;
        }
        authStore.setToken(token);
        router.push('/');
    } catch (error) {
        errorMessage.value = error.message || '登录失败';
    } finally {
        loading.value = false;
    }
};
</script>

<template>
    <div class="min-h-screen bg-gray-100 flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
        <div class="max-w-md w-full space-y-8">
            <Card class="mt-8 bg-white shadow-lg">
                <template #content>
                    <div class="space-y-6">
                        <div class="flex flex-col gap-2">
                            <label for="username" class="text-sm font-medium text-gray-700">用户名</label>
                            <InputText id="username" v-model="username" class="appearance-none relative block w-full"
                                placeholder="请输入用户名" @keyup.enter="handleLogin" />
                        </div>

                        <div class="flex flex-col gap-2">
                            <label for="password" class="text-sm font-medium text-gray-700">密码</label>
                            <Password id="password" v-model="password" class="w-full" placeholder="请输入密码" toggleMask
                                :feedback="false" @keyup.enter="handleLogin" />
                        </div>

                        <div v-if="errorMessage" class="text-red-500 text-sm text-center">
                            {{ errorMessage }}
                        </div>

                        <Button label="登录" @click="handleLogin" :loading="loading" class="w-full p-button-primary"
                            :class="{ 'p-disabled': loading }" />
                    </div>
                </template>
            </Card>
        </div>
    </div>
</template>

<style scoped>
:deep(.p-password input) {
    width: 100%;
}

:deep(.p-inputtext) {
    padding: 0.75rem 1rem;
}
</style>
