<script setup lang="ts">
/**
 * @file forgot-password.vue
 * @description Forgot Password Page.
 * Allows users to request a password reset link via email.
 */

definePageMeta({
  layout: 'auth'
})

useHead({
  title: 'ลืมรหัสผ่าน - e-Learning'
})

const { errors, validate, clearFieldError } = useFormValidation()

const isLoading = ref(false)
// State to track if the request email has been sent
const forgotStep = ref<'initial' | 'success'>('initial')

const forgotForm = reactive({
  email: ''
})

const forgotRules = {
  email: { 
    rules: { 
      required: true, 
      email: true,
      custom: (val: string) => /[\u0E00-\u0E7F]/.test(val) ? 'ห้ามใส่ภาษาไทย' : null 
    }, 
    label: 'อีเมล' 
  }
}

const handleInput = (val: string) => {
  forgotForm.email = val
  if (/[\u0E00-\u0E7F]/.test(val)) {
    errors.value.email = 'ห้ามใส่ภาษาไทย'
  } else {
    if (errors.value.email === 'ห้ามใส่ภาษาไทย') {
      clearFieldError('email')
    }
  }
}

const { requestPasswordReset } = useAuth()

const sendResetLink = async () => {
  if (!validate(forgotForm, forgotRules)) return
  
  isLoading.value = true
  
  const result = await requestPasswordReset(forgotForm.email)
  
  isLoading.value = false
  
  if (result.success) {
    forgotStep.value = 'success'
  } else {
    alert(result.error || 'ไม่สามารถส่งลิงก์รีเซ็ตได้ กรุณาลองใหม่')
  }
}
</script>

<template>
  <div class="card" style="width: 100%; max-width: 440px;">
    <!-- Loading Overlay -->
    <LoadingSpinner v-if="isLoading" full-page text="กำลังดำเนินการ..." />
    
    <!-- Logo area -->
    <div class="flex flex-col items-center mb-6">
      <div 
        style="width: 48px; height: 48px; background: #eff6ff; color: #3b82f6; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 24px; margin-bottom: 16px;"
      >
        E
      </div>
      <h1 style="font-size: 24px; margin-bottom: 8px;">e-Learning Platform</h1>
      <p class="text-slate-700 dark:text-slate-400 text-sm">รีเซ็ตรหัณผ่านของคุณ</p>
    </div>

    <!-- MAIN CONTENT -->
    <div>
      <!-- Step 1: Request Email Form -->
      <form v-if="forgotStep === 'initial'" @submit.prevent="sendResetLink">
        <p class="text-slate-700 dark:text-slate-400 text-sm mb-6">กรุณากรอกอีเมลเพื่อรับลิงก์รีเซ็ตรหัณผ่าน</p>
        <FormInput
          :model-value="forgotForm.email"
          label="อีเมล"
          type="email"
          placeholder="student@example.com"
          :error="errors.email"
          required
          @update:model-value="handleInput"
        />
        <button type="submit" class="btn btn-primary w-full mb-4" :disabled="isLoading">
          <LoadingSpinner v-if="isLoading" size="sm" />
          <span v-else>ส่งลิงก์รีเซ็ต</span>
        </button>
      </form>
      <!-- Navigation Links -->
      <div class="text-center mt-6">
        <NuxtLink to="/auth/login" class="text-sm font-bold text-slate-500 hover:text-slate-800 transition-colors">
          ← กลับไปหน้าเข้าสู่ระบบ
        </NuxtLink>
      </div>
    </div>
  </div>
</template>

<style scoped>
.card {
  box-shadow: var(--shadow-md);
}
</style>
