<script setup lang="ts">
const { requestPasswordReset } = useAuth()

const { t } = useI18n()
const localePath = useLocalePath()
const toast = useToast()

const email = ref('')
const loading = ref(false)
const emailSent = ref(false)

async function handleSubmit() {
  if (loading.value || !email.value) return

  loading.value = true
  try {
    const { error } = await requestPasswordReset({
      email: email.value,
      redirectTo: '/auth/reset-password'
    })

    if (error) {
      toast.add({
        title: t('auth.forgotPassword.error'),
        description: error.message,
        color: 'error'
      })
    } else {
      emailSent.value = true
      toast.add({
        title: t('auth.forgotPassword.emailSent'),
        description: t('auth.forgotPassword.checkInbox'),
        color: 'success'
      })
    }
  } catch {
    toast.add({
      title: t('auth.forgotPassword.error'),
      description: t('auth.forgotPassword.errorDescription'),
      color: 'error'
    })
  } finally {
    loading.value = false
  }
}
</script>

<template>
  <NuxtLayout>
    <UContainer>
      <UPageBody>
        <AuthCard :title="t('auth.forgotPassword.title')">
          <template v-if="!emailSent">
            <p class="text-muted mb-6">
              {{ t('auth.forgotPassword.description') }}
            </p>

            <form
              class="flex flex-col gap-4"
              @submit.prevent="handleSubmit"
            >
              <UFormField
                :label="t('auth.email')"
                required
              >
                <UInput
                  v-model="email"
                  type="email"
                  :placeholder="t('auth.email')"
                  class="w-full"
                  :icon="useSolarIcon('letter')"
                />
              </UFormField>

              <UButton
                type="submit"
                color="primary"
                :loading="loading"
                :disabled="!email || loading"
                block
              >
                {{ t('auth.forgotPassword.sendResetLink') }}
              </UButton>

              <div class="text-center mt-4">
                <ULink
                  :to="localePath('/auth')"
                  class="hover:text-primary"
                >
                  {{ t('auth.forgotPassword.backToLogin') }}
                </ULink>
              </div>
            </form>
          </template>

          <template v-else>
            <div class="text-center py-6">
              <UIcon
                :name="useSolarIcon('inbox-in')"
                class="h-10 w-10 mx-auto mb-4 text-success"
              />
              <h2 class="text-xl font-semibold mb-2">
                {{ t('auth.forgotPassword.emailSent') }}
              </h2>
              <p class="text-muted mb-6">
                {{ t('auth.forgotPassword.checkInboxDescription', { email: email }) }}
              </p>
              <UButton
                :to="localePath('/auth')"
                color="neutral"
                variant="outline"
              >
                {{ t('auth.forgotPassword.backToLogin') }}
              </UButton>
            </div>
          </template>
        </AuthCard>
      </UPageBody>
    </UContainer>
  </NuxtLayout>
</template>
