<script setup lang="ts">
definePageMeta({
    layout: 'login'
})

const errorMessage = ref('')

const login = async () => {
    // Clear any previous error messages
    errorMessage.value = ''
    
    const payload = {
        username: document.getElementById('username')?.value,
        password: document.getElementById('password')?.value
    }
    const config = useRuntimeConfig()
    const apiBase = config.public.apiBase
    const api_url = `${apiBase}/auth/token`
    
    try {
        const { data: user } = await useFetch(api_url, {
            method: 'POST',
            body: payload
        })
        
        if (!user.value) {
            errorMessage.value = 'Kirjautuminen epäonnistui. Tarkista käyttäjätunnus ja salasana.'
            return
        }
        
        localStorage.setItem('user', JSON.stringify(user.value))
        navigateTo('/')
    } catch (error) {
        errorMessage.value = 'Kirjautuminen epäonnistui. Palvelimeen ei saada yhteyttä.'
    }
}
</script>

<template>
    <div class="p-6">
        <div class="flex flex-col gap-4 m-6 bg-slate-300 rounded-2xl p-6 shadow-md text-sm">
            <h1 class="text-center font-bold text-lg">Kirjaudu</h1>
            <form @submit.prevent="login" class="">
                <div v-if="errorMessage" class="error-message p-2 my-2 bg-red-100 text-red-700 rounded border border-red-300">
                    {{ errorMessage }}
                </div>
                <label>Käyttäjätunnus
                    <input class="textfield" type="text" id="username" placeholder="Käyttäjätunnus" />
                </label>
                <label>Salasana
                    <input class="textfield" type="password" id="password" placeholder="Salasana" />
                </label>
                <button type="submit" class="btn-primary">Kirjaudu</button>
            </form>
        </div>
    </div>
</template>

<style>
    .textfield {
        border: none;
        border-bottom: 1px solid #ccc;
        max-width: 80%;
        padding: 6px;
    }
</style>
