<script setup lang="ts">
const { requestPasswordReset } = useDngAuth()
const email = ref('')
const busy = ref(false)
const error = ref('')
const sent = ref(false)

async function submit() {
  busy.value = true
  error.value = ''
  try {
    await requestPasswordReset(email.value)
    sent.value = true
  } catch (cause) {
    const value = cause as { data?: { msg?: string; message?: string }; message?: string }
    error.value = value.data?.msg ?? value.data?.message ?? value.message ?? 'Could not send the reset email.'
  } finally {
    busy.value = false
  }
}
</script>

<template>
  <AuthCard eyebrow="ACCOUNT RECOVERY" title="RESET THE SIGNAL." subtitle="Enter your account email. If it exists, Supabase will send a secure password reset link.">
    <p v-if="sent" class="form-success" role="status">CHECK YOUR EMAIL. The recovery link can be used once and expires automatically.</p>
    <form v-else class="auth-form" @submit.prevent="submit">
      <label>EMAIL<input v-model="email" name="email" type="email" autocomplete="email" required placeholder="you@example.com"></label>
      <p v-if="error" class="form-error" role="alert">{{ error }}</p>
      <button :disabled="busy">{{ busy ? 'SENDING…' : 'SEND RESET LINK →' }}</button>
    </form>
    <template #footer><NuxtLink class="form-link" to="/auth/sign-in">← BACK TO SIGN IN</NuxtLink></template>
  </AuthCard>
</template>
