<script setup lang="ts">
/**
 * Экран входа (LoginView).
 *
 * Источник дизайна: liderra_v8_handoff/concepts/v8_login.html секция #form-login.
 * Источник логики: ТЗ v8.5 §1.5/§4.1 (email+пароль; Yandex 360 SSO для админов
 * через `super_admin` аккаунт).
 *
 * Submit → useAuthStore.login() → Sanctum SPA flow:
 *   1. ensureCsrfCookie() — GET /sanctum/csrf-cookie.
 *   2. POST /api/auth/login.
 *   3. Если requires_2fa → /2fa, иначе → /dashboard.
 *   4. На 422 — показ form-errors.
 */
import { extractValidationErrors } from '../../api/client';
import { useAuthStore } from '../../stores/auth';
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const email = ref('');
const password = ref('');
const showPassword = ref(false);
const errors = ref<Record<string, string[]>>({});

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

async function handleSubmit() {
    errors.value = {};
    try {
        const response = await auth.login({
            email: email.value,
            password: password.value,
        });
        await router.push(response.requires_2fa ? '/2fa' : '/dashboard');
    } catch (error: unknown) {
        // Косяк 05: почта не подтверждена — не пугаем «заблокирован», уводим на
        // подтверждение почты (там кнопка «Отправить повторно»), email переносим в store.
        const data = (error as { response?: { data?: { email_not_confirmed?: boolean } } }).response?.data;
        if (data?.email_not_confirmed) {
            auth.pendingEmail = email.value;
            await router.push('/confirm-email');
            return;
        }
        const validationErrors = extractValidationErrors(error);
        if (validationErrors) {
            errors.value = validationErrors;
        } else {
            errors.value = { email: ['Произошла ошибка. Попробуйте позже.'] };
        }
    }
}
</script>

<template>
    <v-card variant="flat" :max-width="380" width="100%" color="transparent" class="login-card">
        <header class="login-header">
            <h1 class="text-h5 mb-1">Вход в Лидерру</h1>
            <p class="text-body-2 text-medium-emphasis ma-0">
                Нет аккаунта?
                <RouterLink to="/register" class="text-primary"> Зарегистрируйтесь </RouterLink>
            </p>
        </header>

        <v-alert
            v-if="auth.lockoutSeconds !== null"
            type="error"
            variant="tonal"
            density="compact"
            class="mb-3"
            data-testid="lockout-alert"
        >
            Слишком много попыток. Попробуйте через {{ Math.ceil(auth.lockoutSeconds / 60) }} мин.
        </v-alert>

        <v-form class="login-form" @submit.prevent="handleSubmit">
            <v-text-field
                v-model="email"
                label="Email"
                type="email"
                autocomplete="email"
                placeholder="manager@yourcompany.ru"
                variant="outlined"
                density="comfortable"
                required
                :error-messages="errors.email"
            />

            <v-text-field
                v-model="password"
                label="Пароль"
                :type="showPassword ? 'text' : 'password'"
                autocomplete="current-password"
                placeholder="Минимум 8 символов"
                variant="outlined"
                density="comfortable"
                required
                :error-messages="errors.password"
            >
                <template #append-inner>
                    <v-icon
                        class="password-toggle"
                        :icon="showPassword ? 'mdi-eye-off' : 'mdi-eye'"
                        :aria-label="showPassword ? 'Скрыть пароль' : 'Показать пароль'"
                        role="button"
                        tabindex="0"
                        @click="showPassword = !showPassword"
                        @keydown.enter.prevent="showPassword = !showPassword"
                        @keydown.space.prevent="showPassword = !showPassword"
                    />
                </template>
            </v-text-field>

            <div class="d-flex justify-end mb-2">
                <RouterLink to="/forgot" class="text-body-2 text-primary"> Забыли пароль? </RouterLink>
            </div>

            <v-btn type="submit" color="primary" block size="large" variant="flat" :loading="auth.loading">
                Войти
            </v-btn>

            <v-divider class="my-4">
                <span class="text-caption text-medium-emphasis">или</span>
            </v-divider>

            <v-tooltip text="Вход через Yandex 360 станет доступен после регистрации юр. лица (Б-1)." location="top">
                <template #activator="{ props }">
                    <div v-bind="props" class="yandex-sso-wrap">
                        <v-btn block size="large" variant="outlined" disabled> Войти через Yandex 360 </v-btn>
                    </div>
                </template>
            </v-tooltip>
        </v-form>
    </v-card>
</template>

<style scoped>
.login-card {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.login-header h1 {
    font-variation-settings: 'opsz' 26;
    letter-spacing: -0.018em;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.yandex-sso-wrap {
    width: 100%;
}

.password-toggle:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 1px;
    border-radius: 2px;
}
</style>
