<template>
  <div class="bg-white rounded-2xl shadow-sm border border-gray-200 p-8 w-full">
    <h2 class="text-2xl font-semibold text-gray-900 mb-1">Reset your password</h2>
    <p class="text-sm text-gray-500 mb-6">Enter your email and we'll send you a reset link.</p>

    <template v-if="!sent">
      <form @submit.prevent="submit" class="space-y-4">
        <div>
          <label class="block text-sm font-semibold text-gray-700 mb-1">Email</label>
          <input
            v-model="email"
            type="email"
            required
            autocomplete="email"
            class="block w-full rounded-lg px-3 py-3 text-sm border border-gray-300 bg-white text-gray-900 transition-colors focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 focus:outline-none"
          />
        </div>

        <div v-if="error" class="p-3 rounded-lg bg-red-50 border border-red-200 text-sm text-red-700">
          {{ error }}
        </div>

        <button
          type="submit"
          :disabled="loading"
          class="w-full flex items-center justify-center gap-2 px-6 py-3 bg-indigo-600 text-white rounded-lg text-sm font-semibold hover:bg-indigo-700 transition-colors disabled:opacity-75 min-h-[44px]"
        >
          <AppSpinner v-if="loading" />
          {{ loading ? 'Sending…' : 'Send reset link' }}
        </button>

        <p class="text-center text-sm text-gray-500">
          <router-link to="/login" class="text-indigo-600 hover:underline">Back to sign in</router-link>
        </p>
      </form>
    </template>

    <template v-else>
      <div class="p-4 bg-green-50 border border-green-200 text-sm text-green-800 rounded-lg">
        If an account exists for that email, you will receive a reset link shortly. Check your inbox.
      </div>
      <p class="text-center text-sm text-gray-500 mt-4">
        <router-link to="/login" class="text-indigo-600 hover:underline">Back to sign in</router-link>
      </p>
    </template>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import * as api from '../../api/client.js'
import AppSpinner from '../../components/ui/AppSpinner.vue'

const email = ref('')
const loading = ref(false)
const error = ref(null)
const sent = ref(false)

async function submit() {
  loading.value = true
  error.value = null
  try {
    await api.passwordResetRequest(email.value)
    sent.value = true
  } catch {
    // Anti-enumeration: always show success message (D-02)
    sent.value = true
  } finally {
    loading.value = false
  }
}
</script>
