<!-- src/pages/auth/lostpassword.vue -->

<template>
  <div class="WrapperPlain">
    <div class="container max-w-3xl mx-auto text-white">
      <div class="mt-5 mb-5">
        <nav class="rounded-md w-full">
          <ol class="list-reset flex">
            <li>
              <router-link :to="{ name: 'home' }">
                <a class="text-primary hover:text-primary ">Home</a>
              </router-link>
            </li>
            <li>
              <span class="text-gray-500 mx-2">/</span>
            </li>
          </ol>
        </nav>
      </div>
    </div>
    <div class="mx-auto max-w-lg flex items-center justify-center mb-10 mt-12 text-white">
      <form class="bg-neutral rounded-md px-8 pt-6 pb-8 mb-4 w-full" @submit.prevent="onSubmit">
        <div class="mb-4 text-center text-[20px] ">
          In order to unlock your account, please enter your username/email below.
        </div>
        <div class="my-5">
          <input v-model="form.username" class="rounded w-full py-2 px-3 input-primary text-black" type="text"
            autocomplete="off" placeholder="Username" :class="{ 'input-error': v$.form.username.$error }" />
          <span v-if="v$.form.username.$error" class="text-red-600 text-center">
            {{ v$.form.username.$errors[0].$message }}
          </span>
        </div>
        <div class="my-5">
          <input v-model="form.email" class="rounded w-full py-2 px-3 input-primary text-black" type="text"
            autocomplete="off" placeholder="Email" :class="{ 'input-error': v$.form.email.$error }" />
          <span v-if="v$.form.email.$error" class="text-red-600 text-center">
            {{ v$.form.email.$errors[0].$message }}
          </span>
        </div>
        <div class="flex p-md justify-center">
          <button
            class="bg-primary hover:bg-zinc-400 text-white font-bold py-2 px-4 rounded focus:outline-blue-300 focus:outline-none focus:shadow-outline"
            type="submit">
            Confirm
          </button>
        </div>
      </form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, computed } from 'vue'
import { useRouter } from 'vue-router'
import { notify } from "@kyvg/vue3-notification"
import { useVuelidate } from '@vuelidate/core'
import { required } from "@vuelidate/validators"
import { authService } from '../../services/authService'

const router = useRouter()

// Form state
const form = reactive({
  email: '',
  username: '',
})

// Validation rules
const rules = computed(() => ({
  form: {
    email: { required },
    username: { required },
  },
}))

const v$ = useVuelidate(rules, { form })

// Methods
async function onSubmit() {
  const isValid = await v$.value.$validate()

  if (!isValid) {
    notify({
      title: "Authorization",
      text: "Form Failure",
      type: "error",
    })
    return
  }

  try {
    const response = await authService.unlockAccount({
      email: form.email,
      username: form.username,
    })

    const data = response.data as any

    if (data.ok) {
      localStorage.setItem("auth_token", data.token)
      localStorage.setItem("auth_user", data.user)
      router.push({ name: "changePassword" })
    }
  } catch (error) {
    notify({
      title: "Authorization",
      text: "Form Error",
      type: "error",
    })
  }
}
</script>

<style scoped></style>