<template>
  <div>
    <!-- Header -->
    <div class="mb-8">
      <div class="flex justify-between items-center">
        <div>
          <h1 class="text-2xl font-bold text-gray-900">
            สวัสดี, {{ authStore.user?.firstName }} {{ authStore.user?.lastName }}
          </h1>
          <p class="text-gray-600 mt-2">ยินดีต้อนรับกลับสู่ระบบ</p>
        </div>
        <div class="flex items-center gap-4">
          <div class="text-right">
            <div class="text-sm font-semibold text-gray-900">{{ authStore.user?.firstName }} {{ authStore.user?.lastName }}</div>
            <div class="text-xs text-gray-500">{{ authStore.user?.role || 'ADMIN' }}</div>
          </div>
          <div 
            class="w-12 h-12 bg-primary-100 rounded-full flex items-center justify-center text-2xl cursor-pointer hover:bg-primary-200 transition"
          >
            <q-icon name="person" />
            <q-menu>
              <q-list style="min-width: 200px">
                <!-- User Info Header -->
                <q-item class="bg-primary-50">
                  <q-item-section>
                    <q-item-label class="text-weight-bold">{{ authStore.user?.firstName }} {{ authStore.user?.lastName }}</q-item-label>
                    <q-item-label caption>{{ authStore.user?.email }}</q-item-label>
                  </q-item-section>
                </q-item>

                <q-separator />

                <!-- Profile -->
                <q-item clickable v-close-popup @click="goToProfile">
                  <q-item-section avatar>
                    <q-icon name="person" />
                  </q-item-section>
                  <q-item-section>โปรไฟล์</q-item-section>
                </q-item>

                <q-separator />

                <!-- Logout -->
                <q-item clickable v-close-popup @click="handleLogout">
                  <q-item-section avatar>
                    <q-icon name="logout" color="negative" />
                  </q-item-section>
                  <q-item-section class="text-negative">ออกจากระบบ</q-item-section>
                </q-item>
              </q-list>
            </q-menu>
          </div>
        </div>
      </div>
    </div>

    <!-- 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>
        </div>
      </div>
    </div>
    <!-- Recent Courses -->
    <div class="card">
      <h2 class="text-xl font-semibold mb-4">Dashboard</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: 'admin',
  middleware: 'auth'
});

const authStore = useAuthStore();
const router = useRouter();

// Navigation functions
const goToProfile = () => {
  router.push('/admin/profile');
};

const handleLogout = () => {
  authStore.logout();
  router.push('/login');
};
</script>