<template>
  <div>
    <h1 class="text-3xl font-bold mb-6">Dashboard</h1>
    <p class="text-gray-600 mb-8">ยินดีต้อนรับ, {{ authStore.user?.fullName }}</p>
    <!-- Stats Cards -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
      <div class="card">
        <div class="flex items-center justify-between">
          <div>
            <p class="text-gray-600 text-sm">หลักสูตรทั้งหมด</p>
            <p class="text-3xl font-bold text-primary-600">5</p>
          </div>
          <q-icon name="school" size="48px" class="text-primary-200" />
        </div>
      </div>
      <div class="card">
        <div class="flex items-center justify-between">
          <div>
            <p class="text-gray-600 text-sm">ผู้เรียนทั้งหมด</p>
            <p class="text-3xl font-bold text-secondary-500">125</p>
          </div>
          <q-icon name="people" size="48px" class="text-secondary-200" />
        </div>
      </div>
      <div class="card">
        <div class="flex items-center justify-between">
          <div>
            <p class="text-gray-600 text-sm">เรียนจบแล้ว</p>
            <p class="text-3xl font-bold text-accent-500">45</p>
          </div>
          <q-icon name="emoji_events" size="48px" class="text-accent-200" />
        </div>
      </div>
    </div>
    <!-- Recent Courses -->
    <div class="card">
      <h2 class="text-xl font-semibold mb-4">หลักสูตรล่าสุด</h2>
      <div class="space-y-4">
        <div class="flex items-center gap-4 p-4 bg-gray-50 rounded-lg">
          <div class="w-16 h-16 bg-primary-100 rounded-lg flex items-center justify-center">
            <q-icon name="code" size="32px" class="text-primary-600" />
          </div>
          <div class="flex-1">
            <h3 class="font-semibold">Python เบื้องต้น</h3>
            <p class="text-sm text-gray-600">45 ผู้เรียน • 8 บทเรียน</p>
          </div>
          <q-btn flat color="primary" label="ดูรายละเอียด" />
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
definePageMeta({
  layout: 'instructor',
  middleware: 'instructor'
});
const authStore = useAuthStore();
</script>