<template>
  <div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 to-blue-100">
    <q-card class="w-full max-w-md p-8 shadow-xl">
      <q-card-section>
        <div class="text-center mb-8">
          <h1 class="text-3xl font-bold text-gray-900">E-Learning</h1>
          <p class="text-gray-600 mt-2">เข้าสู่ระบบ</p>
        </div>
        <q-form @submit="handleLogin" class="space-y-4">
          <q-input
            v-model="email"
            label="อีเมล"
            type="email"
            outlined
            :rules="[val => !!val || 'กรุณากรอกอีเมล']"
          >
            <template v-slot:prepend>
              <q-icon name="email" />
            </template>
          </q-input>
          <q-input
            v-model="password"
            label="รหัสผ่าน"
            :type="showPassword ? 'text' : 'password'"
            outlined
            :rules="[val => !!val || 'กรุณากรอกรหัสผ่าน']"
          >
            <template v-slot:prepend>
              <q-icon name="lock" />
            </template>
            <template v-slot:append>
              <q-icon
                :name="showPassword ? 'visibility_off' : 'visibility'"
                class="cursor-pointer"
                @click="showPassword = !showPassword"
              />
            </template>
          </q-input>
          <q-btn
            type="submit"
            color="primary"
            label="เข้าสู่ระบบ"
            class="w-full"
            size="lg"
            :loading="loading"
          />
        </q-form>
        <div class="mt-6 text-center text-sm text-gray-600">
          <p>ทดสอบ: instructor@test.com / admin@test.com</p>
        </div>
      </q-card-section>
    </q-card>
  </div>
</template>
<script setup lang="ts">
import { useQuasar } from 'quasar';
definePageMeta({
  layout: 'auth'
});
const $q = useQuasar();
const authStore = useAuthStore();
const router = useRouter();
const email = ref('');
const password = ref('');
const showPassword = ref(false);
const loading = ref(false);
const handleLogin = async () => {
  loading.value = true;
  try {
    await authStore.login(email.value, password.value);
    
    $q.notify({
      type: 'positive',
      message: 'เข้าสู่ระบบสำเร็จ',
      position: 'top'
    });
    // Redirect based on role
    if (authStore.isInstructor) {
      router.push('/instructor');
    } else if (authStore.isAdmin) {
      router.push('/admin');
    }
  } catch (error) {
    $q.notify({
      type: 'negative',
      message: 'อีเมลหรือรหัสผ่านไม่ถูกต้อง',
      position: 'top'
    });
  } finally {
    loading.value = false;
  }
};
</script>