<script setup>
import { ref, reactive } from 'vue'
import {Head, router, useForm, usePage} from '@inertiajs/vue3'
import { useAuthStore } from '../../Stores/auth.js'
import { TbUser, TbLock } from 'vue-icons-plus/tb'
import {RiPulseFill} from 'vue-icons-plus/ri'
import {
    NForm, NFormItem, NInput, NButton, NCheckbox,
    NSpace, NCard, NIcon, NAlert, NModal, darkTheme,
    NConfigProvider, NLayout, NP, NEl
} from 'naive-ui'

const authStore = useAuthStore()
const page = usePage()
const appVersion = page.props.app.version
const appTag = page.props.app.tag

// Состояние формы
const formRef = ref(null)

const form = useForm({
    login: '',
    password: '',
})


// Состояние UI
const loading = ref(false)
const forgotLoading = ref(false)
const error = ref('')
const showForgotPassword = ref(false)

// Правила валидации
const rules = {
    login: [
        { required: true, message: 'Введите логин', trigger: 'blur' },
    ],
    password: [
        { required: true, message: 'Введите пароль', trigger: 'blur' },
        { min: 3, message: 'Пароль должен содержать минимум 3 символа', trigger: 'blur' }
    ]
}

// Обработка входа
const handleLogin = async () => {
    error.value = ''

    try {
        await formRef.value?.validate()

        loading.value = true

        form.post(
            '/auth/login',
            {
                onSuccess: () => {},
                onError: (err) => {
                    error.value = err[0]
                }
            }
        )
    } catch (validationError) {
        console.log('Ошибка валидации:', validationError)
    } finally {
        loading.value = false
    }
}

// Восстановление пароля
const handleForgotPassword = async () => {
    forgotLoading.value = true
    // Здесь будет запрос на восстановление пароля
    await new Promise(resolve => setTimeout(resolve, 1000))
    forgotLoading.value = false
    showForgotPassword.value = false
}
</script>

<template>
    <NConfigProvider :theme="darkTheme">
        <NLayout embedded>
            <div class="min-h-screen flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
                <Head title="Вход в систему" />

                <div class="max-w-md w-full space-y-8">
                    <!-- Логотип и заголовок -->
                    <div class="text-center">
                        <div class="flex justify-center">
                            <NEl class="w-16 h-16 rounded-full flex items-center justify-center" style="background-color: var(--primary-color);">
                                <NIcon size="32" color="var(--base-color)">
                                    <RiPulseFill />
                                </NIcon>
                            </NEl>
                        </div>
                        <h2 class="mt-6 text-3xl font-bold">
                            Метрика
                        </h2>
                        <NP class="mt-2! text-sm" depth="3">
                            Введите данные для входа в систему
                        </NP>
                    </div>

                    <!-- Форма входа -->
                    <n-card>
                        <n-form
                            ref="formRef"
                            :model="form"
                            :rules="rules"
                            @submit.prevent="handleLogin"
                        >
                            <n-space vertical size="large">
                                <!-- Email -->
                                <n-form-item label="Логин" path="login">
                                    <n-input
                                        id="login"
                                        v-model:value="form.login"
                                        placeholder="Ваш логин"
                                        size="large"
                                        @keydown.enter="handleLogin"
                                    >
                                        <template #prefix>
                                            <n-icon><TbUser /></n-icon>
                                        </template>
                                    </n-input>
                                </n-form-item>

                                <!-- Пароль -->
                                <n-form-item label="Пароль" path="password">
                                    <n-input
                                        id="password"
                                        v-model:value="form.password"
                                        type="password"
                                        placeholder="Ваш пароль"
                                        size="large"
                                        show-password-on="click"
                                        @keydown.enter="handleLogin"
                                    >
                                        <template #prefix>
                                            <n-icon><TbLock /></n-icon>
                                        </template>
                                    </n-input>
                                </n-form-item>

                                <!-- Запомнить меня -->
<!--                                <n-form-item>-->
<!--                                    <n-checkbox v-model:checked="form.remember">-->
<!--                                        Запомнить меня-->
<!--                                    </n-checkbox>-->
<!--                                </n-form-item>-->

                                <!-- Ошибки -->
                                <n-alert v-if="error" title="Ошибка входа" type="error">
                                    {{ error }}
                                </n-alert>

                                <!-- Кнопка входа -->
                                <n-button
                                    type="primary"
                                    size="large"
                                    :loading="loading"
                                    @click="handleLogin"
                                    block
                                >
                                    Войти в систему
                                </n-button>

                                <!-- Дополнительные ссылки -->
                                <div class="text-center space-y-3">
                                    <div class="text-sm">
                                        <n-button text type="primary" @click="showForgotPassword = true">
                                            Забыли пароль?
                                        </n-button>
                                    </div>

<!--                                    <div class="text-sm text-gray-600">-->
<!--                                        Нет аккаунта?-->
<!--                                        <n-button text type="primary" @click="$inertia.visit(route('register'))">-->
<!--                                            Зарегистрироваться-->
<!--                                        </n-button>-->
<!--                                    </div>-->
                                </div>
                            </n-space>
                        </n-form>
                    </n-card>

                    <!-- Информация о системе -->
                    <NP class="mt-2! text-xs! text-center" depth="3">
                        <p>Метрика v{{ appVersion }}-{{ appTag }}</p>
                        <p>Только для авторизованного персонала</p>
                    </NP>
                </div>

                <!-- Модальное окно восстановления пароля -->
                <n-modal v-model:show="showForgotPassword">
                    <n-card
                        style="width: 400px"
                        title="Восстановление пароля"
                        :bordered="false"
                        size="small"
                    >
                        <n-form :model="forgotForm" @submit.prevent="handleForgotPassword">
                            <n-space vertical>
                                <n-form-item label="Email" required>
                                    <n-input
                                        v-model:value="forgotForm.email"
                                        placeholder="Введите ваш email"
                                    />
                                </n-form-item>

                                <n-button type="primary" block :loading="forgotLoading">
                                    Отправить инструкции
                                </n-button>
                            </n-space>
                        </n-form>
                    </n-card>
                </n-modal>
            </div>
        </NLayout>
    </NConfigProvider>
</template>

<style scoped>

</style>
