<script setup lang="ts">
/**
 * @file login.vue
 * @description หน้าเข้าสู่ระบบ (Login Page)
 * รองรับการเข้าสู่ระบบด้วย Email/Password
 * NOTE: ไม่เปลี่ยนสี และไม่เปลี่ยนการเรียก API login
 */

definePageMeta({
  layout: 'auth',
  middleware: 'auth'
})

useHead({
  title: 'เข้าสู่ระบบ - e-Learning'
})

const router = useRouter()
const { login, user } = useAuth()
const { errors, validate, clearFieldError } = useFormValidation()

const isLoading = ref(false)
const rememberMe = ref(false)
const showPassword = ref(false)

// Form data model
const loginForm = reactive({
  email: '',
  password: ''
})

type LoginField = keyof typeof loginForm

// Validation rules definition
// กำหนดกฎการตรวจสอบข้อมูล (Validation Rules)
const loginRules = {
  email: {
    rules: {
      required: true,
      email: true,
      custom: (val: string) => (/[\u0E00-\u0E7F]/.test(val) ? 'ห้ามใส่ภาษาไทย' : null)
    },
    label: 'อีเมล',
    messages: {
      required: 'กรุณากรอกอีเมลของคุณ',
      email: 'กรุณากรอกอีเมลให้ถูกต้อง (you@example.com)'
    }
  },
  password: {
    rules: {
      required: true,
      minLength: 8,
      custom: (val: string) => (/[\u0E00-\u0E7F]/.test(val) ? 'ห้ามใส่ภาษาไทย' : null)
    },
    label: 'รหัสผ่าน',
    messages: {
      required: 'กรุณากรอกรหัสผ่าน',
      minLength: 'กรุณากรอกรหัสผ่าน (อย่างน้อย 8 ตัวอักษร)'
    }
  }
} as const

/**
 * จัดการเมื่อมีการพิมพ์ข้อมูล (Input Handler)
 * - ลบ error เมื่อเริ่มพิมพ์ใหม่
 * - ตรวจสอบภาษาไทยแบบ real-time
 */
const handleInput = (field: LoginField, value: string) => {
  loginForm[field] = value

  if (/[\u0E00-\u0E7F]/.test(value)) {
    errors.value[field] = 'ห้ามใส่ภาษาไทย'
    return
  }

  if (errors.value[field] === 'ห้ามใส่ภาษาไทย') {
    clearFieldError(field)
  }
}

/**
 * ฟังก์ชันตรวจสอบความถูกต้องของฟอร์มและเรียก API login
 */
const handleLogin = async () => {
  if (!validate(loginForm, loginRules)) return

  isLoading.value = true

  // ✅ ไม่เปลี่ยน API: ยังคงเรียก login({ email, password }) ตามเดิม
  const result = await login({
    email: loginForm.email,
    password: loginForm.password
  })

  isLoading.value = false

  if (result.success) {
    router.push('/dashboard')
    return
  }

  // Show error on specific fields
  // Show generic error for security (or specific if role mismatch)
  if (result.error === 'Email ไม่ถูกต้อง') {
     errors.value.email = result.error // Role mismatch case
  } else {
     // Generic login failure (401, 404, etc.)
     const msg = 'กรุณาเช็ค Email หรือ รหัสผ่านใหม่อีกครั้ง'
     errors.value.email = msg
     errors.value.password = msg
  }
}

// optional: social login placeholder (ไม่แตะ API เดิม)
const handleGoogleLogin = () => {
  // TODO: implement when backend ready
}
</script>

<template>
    
    <!-- Background Decoration (Optional Subtle Glows to match cool dark feel) -->
    <div class="absolute top-[-20%] left-[-10%] w-[600px] h-[600px] bg-blue-600/5 rounded-full blur-[120px] pointer-events-none"></div>
    <div class="absolute bottom-[-20%] right-[-10%] w-[600px] h-[600px] bg-indigo-600/5 rounded-full blur-[120px] pointer-events-none"></div>

    <q-card
class="w-full max-w-[480px] shadow-2xl rounded-2xl bg-slate-800 text-white border border-slate-700 relative z-10 q-pa-xl"
>

      <!-- Header / Logo Section -->
      <div class="flex flex-col items-center mb-10">
        <div class="w-14 h-14 bg-white text-blue-600 rounded-2xl flex items-center justify-center font-extrabold text-3xl mb-6 shadow-lg shadow-white/10">
          E
        </div>
        <h1 class="text-3xl font-bold text-white mb-3">e-Learning Platform</h1>
        <p class="text-slate-400 text-base">ยินดีต้อนรับกลับ! กรุณากรอกข้อมูลของคุณ</p>
      </div>

      <!-- Login Form -->
      <form @submit.prevent="handleLogin" class="flex flex-col gap-5">
        
        <!-- Email Input -->
        <div>
           <div class="text-base font-semibold text-slate-300 mb-2 ml-1">อีเมล <span class="text-red-500">*</span></div>
           <q-input
              :model-value="loginForm.email"
              outlined
              dense
              dark
              placeholder="student@example.com"
              class="rounded-lg custom-dark-input"
              color="primary"
              :error="!!errors.email"
              :error-message="errors.email"
              @update:model-value="(val: string | number | null) => handleInput('email', val as string)"
              hide-bottom-space
           >
           </q-input>
        </div>

        <!-- Password Input -->
        <div>
           <div class="text-base font-semibold text-slate-300 mb-2 ml-1">รหัสผ่าน <span class="text-red-500">*</span></div>
           <q-input
              :model-value="loginForm.password"
              outlined
              dense
              dark
              :type="showPassword ? 'text' : 'password'"
              placeholder="••••••••"
              class="rounded-lg custom-dark-input"
              color="primary"
              :error="!!errors.password"
              :error-message="errors.password"
              @update:model-value="(val: string | number | null) => handleInput('password', val as string)"
              hide-bottom-space
           >
             <template v-slot:append>
                <q-icon
                  :name="showPassword ? 'visibility_off' : 'visibility'"
                  class="cursor-pointer text-slate-400 hover:text-white transition-colors"
                  @click="showPassword = !showPassword"
                />
             </template>
           </q-input>
        </div>
        
        <!-- Helpers: Remember Me & Forgot Password -->
        <div class="flex justify-between items-center text-sm">
          <q-checkbox 
            v-model="rememberMe" 
            label="จดจำฉัน" 
            size="sm" 
            dense 
            dark
            color="white"
            class="text-slate-300"
          />
          <NuxtLink to="/auth/forgot-password" class="font-medium text-blue-400 hover:text-blue-300 transition-colors">
            ลืมรหัสผ่าน?
          </NuxtLink>
        </div>
        
        <!-- Submit Button -->
        <q-btn
          type="submit"
          unelevated
          rounded
          color="primary"
          class="w-full h-12 text-lg font-bold shadow-lg shadow-blue-500/20 bg-blue-600 hover:bg-blue-500"
          :loading="isLoading"
        >
          เข้าสู่ระบบ
          <template v-slot:loading>
            <q-spinner-dots color="white" />
          </template>
        </q-btn>

        <!-- Back to Landing Page -->
        <div class="text-center pt-6 border-t border-slate-700 mt-2">
          <NuxtLink to="/" class="inline-flex items-center gap-2 px-6 py-2.5 rounded-xl text-slate-400 text-base font-bold hover:text-white hover:bg-slate-700 transition-all duration-300 group">
             <q-icon name="arrow_back" class="text-lg transform group-hover:-translate-x-1 transition-transform" />
            กลับไปหน้าแรก
          </NuxtLink>
        </div>
      </form>

    </q-card>
</template>

<style scoped>
.font-inter {
  font-family: 'Inter', 'Prompt', sans-serif;
}

/* Custom dark input styling to match screenshot: Dark background, light border */
.custom-dark-input :deep(.q-field__control) {
  background: #334155 !important; /* Slate 700ish */
  border-radius: 8px;
}
.custom-dark-input :deep(.q-field__control:before) {
  border-color: #475569; /* Slate 600 */
}
.custom-dark-input :deep(.q-field--focused .q-field__control:after) {
  border-color: #3b82f6; /* Blue 500 */
}
</style>
