<script setup>
import { onMounted, ref } from 'vue';
import AppIcon from './AppIcon.vue';
import { boot } from '../format';
import { useTheme } from '../composables/useTheme';
import { useTracker } from '../store';

/**
 * What a guest sees. Talks to the store directly — a wrong password comes back
 * as a field error here and a toast in the corner.
 */
const { state, login } = useTracker();
const { theme, toggle } = useTheme();

const email = ref('');
const password = ref('');
const errors = ref({});
const emailInput = ref(null);
const showPassword = ref(false);

onMounted(() => emailInput.value?.focus());

async function submit() {
    errors.value = {};

    const result = await login({ email: email.value.trim(), password: password.value });

    if (!result.ok) {
        errors.value = result.errors;
        password.value = '';
    }
}
</script>

<template>
    <main class="login">
        <button type="button" class="btn btn-quiet btn-icon login-theme" aria-label="থিম বদলান" @click="toggle">
            <AppIcon :name="theme === 'dark' ? 'sun' : 'moon'" :size="17"/>
        </button>

        <form class="login-card" @submit.prevent="submit">
            <div class="login-inner">
                <div class="login-brand">
                    <span class="brand-mark"><AppIcon name="rings" :size="26"/></span>
                    <h1>{{ boot.title }}</h1>
                    <p>{{ boot.period.label }} · {{ boot.period.duration }}</p>
                    <p class="login-welcome">স্বাগতম — চালিয়ে যেতে লগইন করুন</p>
                </div>

                <div class="field" :class="{ 'has-error': errors.email }">
                    <label for="l-email">ইমেইল</label>
                    <div class="control has-icon">
                        <AppIcon name="mail" :size="15"/>
                        <input id="l-email" ref="emailInput" v-model="email" type="email" required
                               autocomplete="username" placeholder="you@demo.com">
                    </div>
                    <span v-if="errors.email" class="error">{{ errors.email[0] }}</span>
                </div>

                <div class="field" :class="{ 'has-error': errors.password }">
                    <label for="l-password">পাসওয়ার্ড</label>
                    <div class="control has-icon has-peek">
                        <AppIcon name="lock" :size="15"/>
                        <input id="l-password" v-model="password"
                               :type="showPassword ? 'text' : 'password'" required
                               autocomplete="current-password" placeholder="••••••••">
                        <button type="button" class="peek"
                                :aria-label="showPassword ? 'পাসওয়ার্ড লুকান' : 'পাসওয়ার্ড দেখান'"
                                :aria-pressed="showPassword" @click="showPassword = !showPassword">
                            <AppIcon :name="showPassword ? 'eye-off' : 'eye'" :size="15"/>
                        </button>
                    </div>
                    <span v-if="errors.password" class="error">{{ errors.password[0] }}</span>
                </div>

                <button type="submit" class="btn btn-primary login-submit" :disabled="state.loggingIn">
                    <AppIcon :name="state.loggingIn ? 'rotate' : 'check'" :size="16"
                             :class="{ 'is-spinning': state.loggingIn }"/>
                    {{ state.loggingIn ? 'দেখা হচ্ছে…' : 'লগইন করুন' }}
                </button>

                <p class="login-note">
                    <AppIcon name="lock" :size="13"/>
                    আপনার তথ্য নিরাপদে সংরক্ষিত
                </p>
            </div>
        </form>
    </main>
</template>
