elearning/Frontend-Learner/pages/dashboard/index.vue

<script setup lang="ts">
/**
 * @file index.vue
 * @description Dashboard Home Page matching FutureSkill design
 */

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

useHead({
  title: 'Dashboard - FutureSkill Clone'
})

const { currentUser } = useAuth()
const { fetchCourses, fetchEnrolledCourses, getLocalizedText } = useCourse()
const { fetchCategories } = useCategory()
const { t } = useI18n()

// State
const enrolledCourses = ref<any[]>([])
const recommendedCourses = ref<any[]>([])
const libraryCourses = ref<any[]>([])
const categories = ref<any[]>([])

const isLoading = ref(true)

// Initial Data Fetch
onMounted(async () => {
  isLoading.value = true
  try {
    const [catRes, enrollRes, courseRes] = await Promise.all([
      fetchCategories(),
      fetchEnrolledCourses({ limit: 3, status: 'IN_PROGRESS' }), // Fetch recent enrolled
      fetchCourses({ limit: 3, random: true, forceRefresh: true, is_recommended: true }) // Fetch 3 Recommended Courses
    ])

    if (catRes.success) {
      categories.value = catRes.data || []
    }
    
    const catMap = new Map()
    categories.value.forEach((c: any) => catMap.set(c.id, c.name))

    
    // Map Enrolled Courses
    if (enrollRes.success && enrollRes.data) {
       enrolledCourses.value = enrollRes.data.map((item: any) => ({
         id: item.course_id,
         title: item.course.title,
         thumbnail_url: item.course.thumbnail_url,
         progress: item.progress_percentage || 0,
         total_lessons: item.course.total_lessons || 10,
         completed_lessons: Math.floor((item.progress_percentage / 100) * (item.course.total_lessons || 10))
       }))
    }

    // Map Recommended/Library Courses
    if (courseRes.success && courseRes.data) {
       // Use fetched courses for recommended section
       recommendedCourses.value = courseRes.data.map((c: any) => ({
          id: c.id,
          title: c.title,
          category: catMap.get(c.category_id),
          description: c.description,
          lessons: c.total_lessons || 0,
          image: c.thumbnail_url || '',
          rating: c.rating, 
          price: c.price, 
          is_free: c.is_free
       }))

       // Just for demo, use same data for library if needed or fetch separately
       libraryCourses.value = courseRes.data.slice(0, 2)
    }

  } catch (err) {
    console.error('Failed to load dashboard data', err)
  } finally {
    isLoading.value = false
  }
})

// Helper for "Continue Learning" Hero Card
const heroCourse = computed(() => enrolledCourses.value[0] || null)
const sideCourses = computed(() => enrolledCourses.value.slice(1, 3))

</script>

<template>
  <div class="bg-[#F8F9FA] min-h-screen font-inter pb-20">
    


    <div class="max-w-7xl mx-auto px-4 md:px-12 space-y-16 mt-10">

        <!-- 2. Continue Learning Section -->
        <section v-if="enrolledCourses.length > 0">
            <div class="flex justify-between items-end mb-6">
                 <h2 class="text-xl md:text-2xl font-bold text-[#2D2D2D]">เรียนต่อกับคอร์สของคุณ</h2>
                 <NuxtLink to="/dashboard/my-courses" class="text-blue-600 hover:text-blue-700 font-medium text-sm flex items-center gap-1">
                    คอร์สเรียนของฉัน <q-icon name="arrow_forward" size="16px" />
                 </NuxtLink>
            </div>

            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                <!-- Hero Card (Left) -->
                <div v-if="heroCourse" class="relative group cursor-pointer rounded-2xl overflow-hidden bg-white shadow-sm border border-gray-100 hover:shadow-md transition-all h-[320px]">
                    <img :src="heroCourse.thumbnail_url" class="w-full h-full object-cover brightness-75 group-hover:brightness-90 transition-all duration-500" />
                    
                    <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/30 to-transparent p-8 flex flex-col justify-end">
                        <div class="bg-blue-600 text-white text-xs font-bold px-3 py-1 rounded w-fit mb-3">COURSE</div>
                        <h3 class="text-white text-2xl font-bold mb-4 line-clamp-2 leading-snug">{{ getLocalizedText(heroCourse.title) }}</h3>
                        
                        <!-- Progress -->
                        <div class="w-full">
                            <div class="flex justify-end text-gray-300 text-xs mb-2">
                                <span>{{ heroCourse.progress }}%</span>
                            </div>
                            <div class="h-1.5 w-full bg-white/20 rounded-full overflow-hidden">
                                <div class="h-full bg-blue-500 rounded-full" :style="{ width: `${heroCourse.progress}%` }"></div>
                            </div>
                            <div class="mt-4 flex justify-end">
                                <span class="text-white font-bold text-sm hover:underline">{{ heroCourse.progress === 100 ? 'เรียนอีกครั้ง' : 'เรียนต่อ' }}</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Side List (Right) -->
                <div class="flex flex-col gap-4 h-[320px]">
                    <div v-for="course in sideCourses" :key="course.id" class="flex-1 bg-white rounded-2xl p-4 border border-gray-100 shadow-sm hover:shadow-md transition-all flex gap-4 items-center">
                        <div class="w-32 h-20 rounded-xl overflow-hidden flex-shrink-0">
                            <img :src="course.thumbnail_url" class="w-full h-full object-cover" />
                        </div>
                        <div class="flex-grow min-w-0 flex flex-col justify-between h-full py-1">
                             <h4 class="text-gray-800 font-bold text-sm line-clamp-2 mb-2">{{ getLocalizedText(course.title) }}</h4>
                             
                             <div class="mt-auto">
                                <div class="h-1.5 w-full bg-gray-100 rounded-full overflow-hidden mb-2">
                                    <div class="h-full bg-blue-600 rounded-full" :style="{ width: `${course.progress}%` }"></div>
                                </div>
                                <div class="flex justify-end items-center text-xs">
                                    <span class="text-blue-600 font-bold cursor-pointer hover:underline" @click="navigateTo(`/classroom/learning?course_id=${course.id}`)">{{ course.progress === 100 ? 'เรียนอีกครั้ง' : 'เรียนต่อ' }}</span>
                                </div>
                             </div>
                        </div>
                    </div>
                     <!-- Empty State Placeholder if less than 2 side courses -->
                    <div v-if="sideCourses.length < 2" class="flex-1 bg-gray-50 rounded-2xl border border-dashed border-gray-200 flex items-center justify-center text-gray-400 text-sm">
                        เริ่มเรียนคอร์สใหม่ๆ เพื่อเติมเต็มส่วนนี้
                    </div>
                </div>
            </div>
        </section>

        <!-- 3. Knowledge Library -->
        <section>
             <div class="mb-6">
                 <h2 class="text-xl md:text-2xl font-bold text-[#2D2D2D] mb-1">คลังความรู้</h2>
                 <p class="text-gray-500 text-sm">คุณสามารถเลือกเรียนคอร์สเรียนที่คุณเป็นเจ้าของ</p>
            </div>

            <!-- Content when courses exist -->
            <div v-if="libraryCourses.length > 0" class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <!-- Course Cards -->
                <CourseCard 
                  v-for="course in libraryCourses" 
                  :key="course.id"
                  v-bind="course"
                  :image="course.thumbnail_url"
                  class="h-full md:col-span-1"
                />

                <!-- CTA Card (Large) -->
                <div class="bg-white rounded-3xl border border-gray-100 shadow-sm p-8 flex flex-col items-center justify-center text-center h-full min-h-[300px] hover:shadow-md transition-all group">
                     <p class="text-gray-600 font-medium mb-6 mt-4">เลือกเรียนคอร์สในคลังความรู้ของคุณ</p>
                     <q-btn
                        flat
                        rounded
                        no-caps
                        class="text-blue-600 hover:bg-blue-50 px-6 py-2 font-bold group-hover:scale-105 transition-transform"
                        to="/dashboard/my-courses"
                     >
                        ดูทั้งหมด <q-icon name="arrow_forward" size="18px" class="ml-2" />
                     </q-btn>
                </div>
            </div>

            <!-- Empty State when no courses -->
            <div v-else class="bg-white rounded-3xl border border-dashed border-gray-200 p-12 flex flex-col items-center justify-center text-center min-h-[300px]">
                <div class="bg-blue-50 p-6 rounded-full mb-6">
                    <q-icon name="school" size="48px" class="text-blue-200" />
                </div>
                <h3 class="text-xl font-bold text-gray-800 mb-2">ยังไม่มีคอร์สเรียนในคลัง</h3>
                <p class="text-gray-500 mb-8 max-w-md">เริ่มเรียนรู้สิ่งใหม่ๆ วันนี้ เลือกดูคอร์สเรียนที่น่าสนใจเพื่อพัฒนาทักษะของคุณ</p>
                <q-btn
                    unelevated
                    rounded
                    no-caps
                    class="bg-blue-600 text-white px-8 py-3 font-bold hover:bg-blue-700 shadow-lg shadow-blue-500/20 transition-all hover:scale-105"
                    to="/browse/discovery"
                >
                    ดูคอร์สเรียนทั้งหมด
                </q-btn>
            </div>
        </section>



        <!-- 5. Recommended Courses -->
        <section class="pb-20">
             <div class="mb-6">
                 <h2 class="text-xl md:text-2xl font-bold text-[#2D2D2D] text-left">คอร์สแนะนำ</h2>
            </div>

            <!-- Recommended Grid (3 columns) -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 animate-fade-in">
                <CourseCard 
                  v-for="course in recommendedCourses" 
                  :key="course.id" 
                  v-bind="course"
                />
            </div>
            
             <!-- Loading State -->
            <div v-if="recommendedCourses.length === 0 && !isLoading" class="flex justify-center py-10 opacity-50">
               <div class="text-gray-400">ไม่พบข้อมูลคอร์สแนะนำ</div>
            </div>
        </section>

    </div>
  </div>
</template>

<style scoped>
/* Scoped specific styles */
.animate-fade-in {
  animation: fadeIn 0.5s ease-out;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

:deep(.q-btn) {
    text-transform: none; /* Prevent uppercase in Q-Btns */
}
</style>