<script setup>
import FloatingConfigurator from '@/components/FloatingConfigurator.vue';
import AuthService from '@/service/AuthService';
import { ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';

const email = ref('');
const password = ref('');
const checked = ref(false);
const loading = ref(false);
const errorMessage = ref('');

const route = useRoute();
const router = useRouter();

async function onSubmit() {
    errorMessage.value = '';
    loading.value = true;
    try {
        await AuthService.signin(email.value.trim().toLowerCase(), password.value);
        const redirect = (route.query.redirect && String(route.query.redirect)) || '/';
        router.replace(redirect);
    } catch (e) {
        errorMessage.value = e?.message || 'Ошибка входа';
    } finally {
        loading.value = false;
    }
}
</script>

<template>
    <FloatingConfigurator />
    <div class="flex min-h-screen min-w-[100vw] items-center justify-center overflow-hidden bg-gradient-to-br from-primary-50 via-surface-0 to-purple-50 dark:from-surface-900 dark:via-surface-800 dark:to-surface-900">
        <div class="flex flex-col items-center justify-center">
            <div class="w-full max-w-md rounded-2xl bg-surface-0 p-8 shadow-xl ring-1 ring-surface-900/5 dark:bg-surface-800 dark:ring-surface-700">
                <div class="mb-8 text-center">
                    <div class="mb-6 flex justify-center">
                        <div class="flex h-16 w-16 items-center justify-center rounded-full bg-gradient-to-br from-primary-500 to-purple-500">
                            <i class="pi pi-lock text-2xl text-white" />
                        </div>
                    </div>
                    <h1 class="mb-2 text-3xl font-bold tracking-tight text-surface-900 dark:text-surface-0">Маркетинговый анализ v4.0</h1>
                    <p class="mt-2 text-sm text-surface-600 dark:text-surface-400">Войдите в систему для начала работы</p>
                </div>

                <form @submit.prevent="onSubmit" class="space-y-6">
                    <div class="space-y-1">
                        <label for="email1" class="flex items-center gap-2 text-sm font-medium text-surface-700 dark:text-surface-300">
                            <i class="pi pi-envelope text-xs" />
                            Email
                        </label>
                        <InputText id="email1" v-model="email" type="email" placeholder="example@mail.kz" class="w-full" :class="{ 'p-invalid': errorMessage }" />
                    </div>

                    <div class="space-y-1">
                        <label for="password1" class="flex items-center gap-2 text-sm font-medium text-surface-700 dark:text-surface-300">
                            <i class="pi pi-lock text-xs" />
                            Пароль
                        </label>
                        <Password id="password1" v-model="password" placeholder="Введите пароль" :toggleMask="true" :feedback="false" class="w-full" inputClass="w-full" :class="{ 'p-invalid': errorMessage }" />
                    </div>

                    <div v-if="errorMessage" class="rounded-lg bg-red-50 px-4 py-3 text-sm text-red-700 dark:bg-red-900/30 dark:text-red-200">
                        {{ errorMessage }}
                    </div>

                    <div class="flex items-center justify-between">
                        <div class="flex items-center">
                            <Checkbox v-model="checked" id="rememberme1" binary inputId="rememberme1" />
                            <label for="rememberme1" class="ml-2 text-sm text-surface-600 dark:text-surface-400">Remember me</label>
                        </div>
                        <span class="cursor-pointer text-sm font-medium text-primary no-underline hover:text-primary-600 dark:text-primary-400"> Forgot password? </span>
                    </div>

                    <Button :loading="loading" label="Войти" icon="pi pi-sign-in" icon-pos="right" class="w-full" @click="onSubmit" />
                </form>
            </div>
        </div>
    </div>
</template>

<style scoped>
.pi-eye {
    transform: scale(1.6);
    margin-right: 1rem;
}

.pi-eye-slash {
    transform: scale(1.6);
    margin-right: 1rem;
}
</style>
