<script setup lang="ts">
/**
 * @file login.vue
 * @description Login Page.
 * Handles user authentication with email/password and social login (mock).
 * Uses the 'auth' layout.
 */

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)

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

// Validation rules definition
const loginRules = {
  email: { rules: { required: true, email: true }, label: 'อีเมล' },
  password: { rules: { required: true, minLength: 6 }, label: 'รหัสผ่าน' }
}

/**
 * Validates form and attempts login.
 * Currently simulates an API call for demonstration.
 */
const handleLogin = async () => {
  if (!validate(loginForm, loginRules)) return
  
  isLoading.value = true
  
  const result = await login({
    email: loginForm.email,
    password: loginForm.password
  })
  
  isLoading.value = false

  if (result.success) {
    // Redirect based on user role
    const role = user.value?.role?.code
    
    if (role === 'ADMIN') {
      router.push('/admin')
    } else if (role === 'INSTRUCTOR') {
      router.push('/instructor')
    } else {
      router.push('/dashboard')
    }
  } else {
    // Show error from API or fallback
    alert(result.error || 'อีเมลหรือรหัสผ่านไม่ถูกต้อง')
  }
}
</script>

<template>
  <div class="card" style="width: 100%; max-width: 440px;">
    <!-- Loading Screen Overlay -->
    <LoadingSpinner v-if="isLoading" full-page text="กำลังดำเนินการ..." />
    
    <!-- Header / Logo Section -->
    <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>

    <!-- Login Form -->
    <form @submit.prevent="handleLogin">
      <!-- Email Input -->
      <FormInput
        v-model="loginForm.email"
        label="อีเมล"
        type="email"
        placeholder="student@example.com"
        :error="errors.email"
        required
        @update:model-value="clearFieldError('email')"
      />
      <!-- Password Input -->
      <FormInput
        v-model="loginForm.password"
        label="รหัสผ่าน"
        type="password"
        placeholder="••••••••"
        :error="errors.password"
        required
        @update:model-value="clearFieldError('password')"
      />
      
      <!-- Helpers: Remember Me & Forgot Password -->
      <div class="flex justify-between items-center mb-6">
        <label class="flex items-center gap-2 text-sm text-muted">
          <input type="checkbox"> จดจำฉัน
        </label>
        <NuxtLink to="/auth/forgot-password" class="text-sm" style="color: var(--primary); font-weight: 500;">ลืมรหัสผ่าน?</NuxtLink>
      </div>
      
      <!-- Submit Button -->
      <button type="submit" class="btn btn-primary w-full mb-4" :disabled="isLoading">
        <LoadingSpinner v-if="isLoading" size="sm" />
        <span v-else>เข้าสู่ระบบ</span>
      </button>

      
      

      <!-- Social Login (Google) -->
      <button type="button" class="btn-google w-full mb-6 flex items-center justify-center gap-3">
        <svg width="18" height="18" viewBox="0 0 18 18">
          <path d="M17.64 9.2c0-.637-.057-1.251-.164-1.84H9v3.481h4.844c-.209 1.125-.843 2.078-1.796 2.717v2.258h2.908c1.702-1.567 2.684-3.874 2.684-6.615z" fill="#4285F4"/>
          <path d="M9 18c2.43 0 4.467-.806 5.956-2.184l-2.908-2.258c-.806.54-1.834.859-3.048.859-2.344 0-4.328-1.584-5.036-3.711H.957v2.332A8.997 8.997 0 0 0 9 18z" fill="#34A853"/>
          <path d="M3.964 10.706c-.18-.54-.282-1.117-.282-1.706 0-.589.102-1.166.282-1.706V4.962H.957A8.996 8.996 0 0 0 0 9c0 1.452.348 2.827.957 4.038l3.007-2.332z" fill="#FBBC05"/>
          <path d="M9 3.58c1.321 0 2.508.454 3.44 1.345l2.582-2.58C13.463.891 11.426 0 9 0A8.997 8.997 0 0 0 .957 4.962l3.007 2.332c.708-2.127 2.692-3.711 5.036-3.711z" fill="#EA4335"/>
        </svg>
        <span>เข้าสู่ระบบด้วย Google</span>
      </button>

      <!-- Back to Landing Page -->
      <div class="text-center pt-6 border-t border-gray-100">
        <NuxtLink to="/" class="inline-flex items-center gap-2 px-6 py-2.5 rounded-xl border border-gray-200 text-sm font-bold text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-blue-600 transition-all duration-300 group">
          <span class="transform group-hover:-translate-x-1 transition-transform">←</span>
          กลับไปหน้าแรก
        </NuxtLink>
      </div>
    </form>
  </div>
</template>

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