<script setup lang="ts">
const auth = useAuth()

const email = ref('')
const submitting = ref(false)
const sent = ref(false)
const error = ref<string | null>(null)

async function submit() {
  error.value = null
  submitting.value = true
  try {
    await auth.forgotPassword(email.value)
    sent.value = true
  } catch (e: any) {
    error.value = useErrMessage(e, 'Request failed')
  } finally {
    submitting.value = false
  }
}
</script>

<template>
  <section class="mx-auto max-w-md py-12">
    <h1 class="mb-2 text-2xl font-semibold">Forgot your password?</h1>
    <p class="mb-6 text-sm text-zinc-400">
      Enter your email and we'll send a reset link if there's an account on file.
    </p>

    <div v-if="sent" class="card text-sm">
      <p class="mb-2 font-medium text-brand-300">Check your inbox.</p>
      <p class="text-zinc-400">
        If <span class="text-zinc-200">{{ email }}</span> is registered, a reset link is on its way.
      </p>
      <NuxtLink to="/login" class="btn-ghost mt-4 w-full">Back to sign in</NuxtLink>
    </div>

    <form v-else class="card space-y-4" @submit.prevent="submit">
      <div>
        <label class="label">Email</label>
        <input v-model="email" type="email" class="input" autocomplete="email" required />
      </div>
      <button class="btn-primary w-full" :disabled="submitting || !email">
        {{ submitting ? 'Sending…' : 'Send reset link' }}
      </button>
      <p v-if="error" class="text-sm text-red-400">{{ error }}</p>
    </form>
  </section>
</template>
