<template>
    <div class="mx-auto w-full max-w-lg">
    <span
        class="flex items-center justify-center bg-white text-xl font-bold uppercase text-primary-500 p-4"
    >
        <img src="/malio.png" alt="Logo" class="w-[150px]"/>
    </span>
        <form
            class="mt-8 space-y-6 rounded-lg border border-neutral-200 bg-white p-6 shadow-sm"
            @submit.prevent="handleSubmit"
        >
            <div>
                <label class="text-sm font-semibold text-neutral-700" for="username">
                    Nom d'utilisateur
                </label>
                <input
                    id="username"
                    v-model="username"
                    type="text"
                    autocomplete="username"
                    class="mt-2 w-full rounded-md border border-neutral-300 bg-white px-3 py-2 text-base text-neutral-900 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-secondary-500/20"
                />
            </div>

            <div>
                <label class="text-sm font-semibold text-neutral-700" for="password">
                    Mot de passe
                </label>
                <input
                    id="password"
                    v-model="password"
                    type="password"
                    autocomplete="current-password"
                    class="mt-2 w-full rounded-md border border-neutral-300 bg-white px-3 py-2 text-base text-neutral-900 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-secondary-500/20"
                />
            </div>

            <button
                type="submit"
                class="w-full rounded-md bg-primary-500 px-4 py-2 text-base font-semibold text-white transition hover:bg-secondary-500 disabled:cursor-not-allowed disabled:opacity-60"
                :disabled="isSubmitting"
            >
                Se connecter
            </button>
            <p class="font-bold">v{{ version }}</p>
        </form>
    </div>
</template>

<script setup lang="ts">
definePageMeta({layout: 'auth'})
useHead({
    title: 'Connexion'
})

const router = useRouter()
const auth = useAuthStore()
const { version } = useAppVersion()

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

const handleSubmit = async () => {
    if (isSubmitting.value) return

    isSubmitting.value = true
    try {
        await auth.login(username.value, password.value)

        await router.push('/calendar')
    } finally {
        isSubmitting.value = false
    }
}
</script>
