<script setup lang="ts">
import type { AuthFormField, FormSubmitEvent } from '@nuxt/ui'
import { useForm } from '@inertiajs/vue3'
import * as v from 'valibot'
import { computed } from 'vue'
import { useAuth } from '@/composables/useAuth'
import AuthLayout from '@/layouts/AuthLayout.vue'

const props = defineProps<{
  email: string
  token: string
}>()

const { config } = useAuth()

const form = useForm('ResetPasswordForm', {
  token: props.token,
  email: props.email,
  password: '',
  password_confirmation: '',
})

const fields: AuthFormField[] = [
  {
    name: 'email',
    type: 'email',
    label: 'Email',
    placeholder: 'Enter your email',
    required: true,
  },
  {
    name: 'password',
    type: 'password',
    label: 'New password',
    placeholder: 'Enter your new password',
    required: true,
  },
  {
    name: 'password_confirmation',
    type: 'password',
    label: 'Confirm password',
    placeholder: 'Confirm your new password',
    required: true,
  },
]

const schema = v.pipe(
  v.object({
    email: v.pipe(v.string('Email is required'), v.nonEmpty('Email is required'), v.email('Please enter a valid email')),
    password: v.pipe(v.string('Password is required'), v.nonEmpty('Password is required'), v.minLength(8, 'Password must be at least 8 characters')),
    password_confirmation: v.pipe(v.string('Please confirm your password'), v.nonEmpty('Please confirm your password')),
  }),
  v.forward(
    v.partialCheck(
      [['password'], ['password_confirmation']],
      input => input.password === input.password_confirmation,
      'Passwords do not match',
    ),
    ['password_confirmation'],
  ),
)

type Schema = v.InferOutput<typeof schema>

function onSubmit(event: FormSubmitEvent<Schema>) {
  form.email = event.data.email
  form.password = event.data.password
  form.password_confirmation = event.data.password_confirmation

  form.post('/reset-password')
}

const hasErrors = computed(() => Object.keys(form.errors).length > 0)
const firstError = computed(() => Object.values(form.errors)[0])
</script>

<template>
  <AuthLayout>
    <UAuthForm
      :schema="schema"
      :fields="fields"
      :submit="{ label: config.resetPassword.submit_label, loading: form.processing }"
      :disabled="form.processing"
      :ui="{ header: 'hidden' }"
      @submit="onSubmit"
    >
      <template v-if="hasErrors" #validation>
        <UAlert
          color="error"
          icon="i-lucide-alert-circle"
          :title="firstError"
        />
      </template>

      <template #footer>
        <span class="text-muted">
          Remember your password?
          <ULink to="/login" class="text-primary font-medium">
            Sign in
          </ULink>
        </span>
      </template>
    </UAuthForm>
  </AuthLayout>
</template>
