<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useAuthStore } from '@/stores/auth'
import { useValidation } from '@/composable/useValidation'
import type { FormError } from '@nuxt/ui'
import { i18n } from '@/plugins/02_i18n'
import Empty from '@/layouts/empty.vue'

const router = useRouter()
const route = useRoute()
const authStore = useAuthStore()
const validation = useValidation()
const new_password = ref('')
const confirm_new_password = ref('')
const showNewPassword = ref(false)
const showConfirmPassword = ref(false)
const resetToken = ref('')
const submitted = ref(false)

onMounted(() => {
    resetToken.value = (route.query.token as string) || ''
    if (!resetToken.value) {
        router.push({ name: 'password-recovery' })
    }
})

async function handleReset() {
    const success = await authStore.resetPassword(resetToken.value, new_password.value)
    if (success) {
        submitted.value = true
    }
}

function goToLogin() {
    router.push({ name: 'login' })
}

function validate(): FormError[] {
    validation.reset()
    validation.validatePasswords(
        new_password,
        'new_password',
        confirm_new_password,
        'confirm_new_password',
        i18n.t('validate_error.confirm_password_required'),
    )
    return validation.errors
}
</script>

<template>
    <component :is="Empty || 'div'">
        <div class="h-[100vh] flex flex-col items-center justify-center px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-15">
                <div
                    class="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-primary-500 text-white mb-4 shadow-lg shadow-primary-500/30">
                    <UIcon name="i-heroicons-clock" class="w-8 h-8" />
                </div>
                <h1 class="text-3xl font-bold text-gray-900 dark:text-white">B2B</h1>
            </div>
            <div class="w-full max-w-md flex flex-col gap-4">

                <template v-if="submitted">
                    <div class="text-center flex flex-col gap-4">
                        <UIcon name="i-heroicons-check-circle" class="w-12 h-12 mx-auto text-green-800" />
                        <h2 class="text-xl font-semibold dark:text-white text-black">
                            {{ $t('general.password_updated') }}
                        </h2>
                        <p class="text-sm text-gray-600 dark:text-gray-400">
                            {{ $t('general.password_updated_description') }}
                        </p>
                        <UButton block @click="goToLogin" class="dark:text-white text-black">
                            {{ $t('general.back_to_sign_in') }}
                        </UButton>
                    </div>
                </template>

                <template v-else>
                    <UForm :validate="validate" @submit="handleReset" class="flex flex-col gap-3">
                        <UAlert v-if="authStore.error" color="error" variant="subtle"
                            icon="i-heroicons-exclamation-triangle" :title="authStore.error"
                            :close-button="{ icon: 'i-heroicons-x-mark-20-solid', variant: 'link' }"
                            @close="authStore.clearError" />

                        <UFormField :label="$t('general.new_password')" name="new_password" required
                            class="w-full dark:text-white text-black">
                            <UInput v-model="new_password" :type="showNewPassword ? 'text' : 'password'"
                                :placeholder="$t('general.enter_your_new_password')" :disabled="authStore.loading"
                                class="w-full dark:text-white text-black placeholder:text-(--placeholder)"
                                :ui="{ trailing: 'pe-1' }">
                                <template #trailing>
                                    <UIcon color="neutral" variant="link" size="sm"
                                        :name="showNewPassword ? 'i-lucide-eye-off' : 'i-lucide-eye'"
                                        :aria-label="showNewPassword ? 'Hide password' : 'Show password'"
                                        :aria-pressed="showNewPassword" aria-controls="new_password"
                                        @click="showNewPassword = !showNewPassword" class="mr-2" />
                                </template>
                            </UInput>
                        </UFormField>

                        <UFormField :label="$t('general.confirm_password')" name="confirm_new_password" required
                            class="w-full dark:text-white text-black">
                            <UInput v-model="confirm_new_password" :type="showConfirmPassword ? 'text' : 'password'"
                                :placeholder="$t('general.confirm_your_new_password')" :disabled="authStore.loading"
                                class="w-full dark:text-white text-black placeholder:text-(--placeholder)"
                                :ui="{ trailing: 'pe-1' }">
                                <template #trailing>
                                    <UIcon color="neutral" variant="ghost" size="sm"
                                        :name="showConfirmPassword ? 'i-lucide-eye-off' : 'i-lucide-eye'"
                                        @click="showConfirmPassword = !showConfirmPassword" class="mr-2" />
                                </template>
                            </UInput>
                        </UFormField>

                        <UButton type="submit" block :loading="authStore.loading"
                            class="text-white! bg-(--accent-blue-light) dark:bg-(--accent-blue-dark) cursor-pointer">
                            {{ $t('general.reset_password') }}
                        </UButton>

                        <div class="text-center border-t dark:border-(--border-dark) border-(--border-light) pt-4">
                            <button color="neutral" variant="ghost" @click="goToLogin"
                                class="text-[15px] flex items-center gap-2 text-(--accent-blue-light) dark:text-(--accent-blue-dark) cursor-pointer">
                                <UIcon name="mingcute:arrow-left-line" />
                                {{ $t('general.back_to_sign_in') }}
                            </button>
                        </div>
                    </UForm>
                </template>
            </div>
        </div>
    </component>
</template>
