<script setup lang="ts">
/**
 * @file reset-password.vue
 * @description Reset Password Page.
 * Allows user to set a new password after verifying their email link (simulated).
 */

definePageMeta({
  layout: 'auth'
})

useHead({
  title: 'ตั้งรหัสผ่านใหม่ - e-Learning'
})

const route = useRoute()
const router = useRouter()
const { confirmResetPassword } = useAuth()
const { errors, validate, clearFieldError } = useFormValidation()

const isLoading = ref(false)

const resetForm = reactive({
  password: '',
  confirmPassword: ''
})

const resetRules = {
  password: { 
    rules: { 
      required: true, 
      minLength: 8,
      custom: (val: string) => /[\u0E00-\u0E7F]/.test(val) ? 'ห้ามใส่ภาษาไทย' : null
    }, 
    label: 'รหัสผ่านใหม่' 
  },
  confirmPassword: { rules: { required: true, match: 'password' }, label: 'ยืนยันรหัสผ่าน' }
}

const handlePasswordInput = (field: keyof typeof resetForm, val: string) => {
  resetForm[field] = val
  if (/[\u0E00-\u0E7F]/.test(val)) {
    if (field === 'password') errors.value.password = 'ห้ามใส่ภาษาไทย'
    // We don't necessarily need to flag confirmPassword individually if it just needs to match, but let's be consistent if we want
  } else {
    // Clear error if it was "Thai characters"
    if (field === 'password' && errors.value.password === 'ห้ามใส่ภาษาไทย') {
      clearFieldError('password')
    }
  }
}

onMounted(() => {
  if (!route.query.token) {
    alert('ลิงก์รีเซ็ตรหัสผ่านไม่ถูกต้องหรือหมดอายุ')
    router.push('/auth/login')
  }
})

const resetPassword = async () => {
  if (!validate(resetForm, resetRules)) return
  
  // Extract token from query
  const token = route.query.token as string

  if (!token) {
     alert('ข้อมูลสำหรับรีเซ็ตไม่ครบถ้วน')
     return
  }

  isLoading.value = true
  
  const result = await confirmResetPassword({
    token,
    password: resetForm.password
  })

  isLoading.value = false

  if (result.success) {
    alert('รีเซ็ตรหัสผ่านสำเร็จ! กรุณาเข้าสู่ระบบด้วยรหัสผ่านใหม่')
    router.push('/auth/login')
  } else {
    alert(result.error || 'เกิดข้อผิดพลาดในการรีเซ็ตรหัสผ่าน')
  }
}
</script>

<template>
  <div class="card" style="width: 100%; max-width: 440px;">
    <!-- Loading Overlay -->
    <LoadingSpinner v-if="isLoading" full-page text="กำลังดำเนินการ..." />
    
    <!-- Header -->
    <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-muted text-sm">ตั้งรหัสผ่านใหม่ของคุณ</p>
    </div>

    <!-- RESET PASSWORD FORM -->
    <form @submit.prevent="resetPassword">
      <h3 class="font-bold mb-4">ตั้งรหัสผ่านใหม่</h3>
      
      <!-- New Password -->
      <FormInput
        :model-value="resetForm.password"
        label="รหัสผ่านใหม่"
        type="password"
        placeholder="••••••••"
        :error="errors.password"
        required
        @update:model-value="(val) => handlePasswordInput('password', val)"
      />
      
      <!-- Confirm New Password -->
      <FormInput
        v-model="resetForm.confirmPassword"
        label="ยืนยันรหัสผ่านใหม่"
        type="password"
        placeholder="••••••••"
        :error="errors.confirmPassword"
        required
        @update:model-value="clearFieldError('confirmPassword')"
      />
      
      <button type="submit" class="btn btn-primary w-full mb-4" :disabled="isLoading">
        <LoadingSpinner v-if="isLoading" size="sm" />
        <span v-else>บันทึกรหัสผ่านใหม่</span>
      </button>

      <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 class="text-center pt-4 border-t border-gray-100">
        <NuxtLink to="/" class="text-sm text-slate-700 dark:text-slate-400 hover:text-slate-900 dark:hover:text-slate-200 transition-colors flex items-center justify-center gap-1">
          <span>←</span> กลับไปหน้าหลัก
        </NuxtLink>
      </div>
    </form>
  </div>
</template>
