<script setup lang="ts">
/**
 * @file index.vue
 * @description หน้าแสดงคอร์สเรียนทั้งหมดในรูปแบบแคตตาล็อกสาธารณะ
 * ดีไซน์ปรับให้ทันสมัยเพื่อดึงดูดผู้ใช้งานใหม่
 */

definePageMeta({
  layout: 'landing'
})

useHead({
  title: 'คอร์สทั้งหมด - E-Learning System'
})

const { t } = useI18n()
const searchQuery = ref('')
const { fetchCourses } = useCourse()
const { fetchCategories, categories } = useCategory()

const getLocalizedText = (text: string | { th: string; en: string } | undefined) => {
  if (!text) return ''
  if (typeof text === 'string') return text
  return text.th || text.en || ''
}

const route = useRoute()
const router = useRouter()

const selectedCategory = ref((route.query.category as string) || 'all')

const selectCategory = (slug: string) => {
  if (slug === 'all') {
    router.push({ query: { ...route.query, category: 'all' } })
  } else {
    router.push({ query: { ...route.query, category: slug } })
  }
}

watch(() => route.query.category, (newCategory) => {
  selectedCategory.value = (newCategory as string) || 'all'
})

const getCategoryIcon = (name: any) => {
   const text = getLocalizedText(name) || ''
   if (text.includes('เว็บ') || text.includes('Web') || text.includes('โปรแกรม') || text.includes('Program') || text.includes('โค้ด')) return 'code'
   if (text.includes('ออกแบบ') || text.includes('Design') || text.includes('UI')) return 'palette'
   if (text.includes('ธุรกิจ') || text.includes('Business') || text.includes('การตลาด') || text.includes('Market')) return 'trending_up'
   if (text.includes('ข้อมูล') || text.includes('Data') || text.includes('วิเคราะ') || text.includes('Sci')) return 'storage'
   return 'category'
}

await useAsyncData('categories-list', () => fetchCategories())

const { data: coursesResponse, pending: isLoading, error, refresh } = await useAsyncData(
  'browse-courses-list', 
  () => {
    const params: any = { limit: 500 }
    if (selectedCategory.value !== 'all') {
      const category = categories.value.find(c => c.slug === selectedCategory.value)
      if (category) {
        params.category_id = category.id
      }
    }
    return fetchCourses(params)
  }
)

watch(selectedCategory, () => { refresh() })

const formatPrice = (course: any) => {
    if (course.is_free) return 'ฟรี';
    if (!course.price) return 'ฟรี';
    return `฿${parseFloat(course.price).toLocaleString()}`;
}

const getInstructorName = (course: any) => {
    let user = null;
    if (course.instructors && course.instructors.length > 0) {
        const primary = course.instructors.find((i: any) => i.is_primary);
        user = primary ? primary.user : course.instructors[0].user;
    } else {
        user = course.creator || course.instructor;
    }
    
    if (user?.profile?.first_name) {
        return `${user.profile.first_name} ${user.profile.last_name || ''}`.trim();
    }
    if (user?.first_name) {
        return `${user.first_name} ${user.last_name || ''}`.trim();
    }
    return user?.username || 'ผู้สอน';
}

const courses = computed(() => {
  if (coursesResponse.value?.success && coursesResponse.value.data) {
    return coursesResponse.value.data.map((c: any) => {
       const cat = categories.value.find((cat: any) => cat.id === c.category_id);
       return {
          ...c,
          category_name: cat ? getLocalizedText(cat.name) : '',
          instructor_name: getInstructorName(c),
          formatted_price: formatPrice(c),
          rating: c.rating || '4.9',
          reviews_count: c.total_lessons ? c.total_lessons * 123 : Math.floor(Math.random() * 2000) + 100
       }
    })
  }
  return []
})

const filteredCourses = computed(() => {
  const list = courses.value || []
  if (!searchQuery.value) return list
  
  const query = searchQuery.value.toLowerCase()
  return list.filter((c: any) => {
    const title = getLocalizedText(c.title).toLowerCase()
    const desc = getLocalizedText(c.description).toLowerCase()
    return title.includes(query) || desc.includes(query)
  })
})

const viewMode = ref<'grid' | 'list'>('grid')
</script>

<template>
  <div class="bg-[#F8F9FA] dark:bg-[#020617] min-h-screen pt-32 pb-20 px-4 md:px-8 transition-colors duration-300">
    <div class="max-w-[1240px] mx-auto">
        <!-- มุมมองแคตตาล็อกแสดงคอร์ส (Catalog View) -->
        <div class="bg-white dark:bg-slate-900 rounded-[2rem] p-6 md:p-8 shadow-[0_2px_15px_rgb(0,0,0,0.02)] border border-slate-100 dark:border-slate-800 min-h-[500px] mb-12">
            
            <!-- ส่วนหัวและการค้นหา -->
            <div class="flex flex-col md:flex-row md:items-center justify-between gap-6 mb-8">
               <h2 class="text-[1.35rem] font-bold text-slate-900 dark:text-white tracking-tight">{{ $t('discovery.title') }}</h2>
               <div class="flex flex-wrap sm:flex-nowrap items-center gap-3 w-full md:w-auto">
                  <div class="relative w-full sm:w-[260px] flex-1">
                     <q-icon name="search" size="18px" class="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 group-focus-within:text-[#3B6BE8]" />
                     <input v-model="searchQuery" class="w-full bg-slate-100 dark:bg-slate-800 border-none rounded-xl py-2.5 pl-11 pr-4 text-sm font-medium text-slate-700 dark:text-slate-200 placeholder:text-slate-400 focus:ring-2 focus:ring-blue-500/20 outline-none transition-all shadow-sm" :placeholder="$t('discovery.searchPlaceholder')" />
                  </div>
                  <div class="flex items-center gap-2 shrink-0">
                     <button @click="viewMode = 'grid'" :class="viewMode === 'grid' ? 'bg-[#E9EFFD] dark:bg-blue-900/40 text-[#3B6BE8] border-[#3B6BE8]' : 'bg-white border-slate-200 dark:bg-slate-800 dark:border-slate-700 text-slate-400 hover:bg-slate-50'" class="w-[42px] h-[42px] flex items-center justify-center rounded-xl border transition-colors outline-none"><q-icon name="grid_view" size="20px" /></button>
                     <button @click="viewMode = 'list'" :class="viewMode === 'list' ? 'bg-[#E9EFFD] dark:bg-blue-900/40 text-[#3B6BE8] border-[#3B6BE8]' : 'bg-white border-slate-200 dark:bg-slate-800 dark:border-slate-700 text-slate-400 hover:bg-slate-50'" class="w-[42px] h-[42px] flex items-center justify-center rounded-xl border transition-colors outline-none"><q-icon name="view_list" size="20px" /></button>
                  </div>
               </div>
            </div>

            <!-- ตัวกรองหมวดหมู่ (Filters Category) -->
            <div class="flex flex-col xl:flex-row xl:items-center justify-between gap-4 mb-10 w-full relative">
                <div class="flex flex-wrap items-center gap-3 w-full xl:w-auto">
                   <button 
                     @click="selectCategory('all')"
                     :class="selectedCategory === 'all' ? 'bg-[#E9EFFD] dark:bg-blue-900/40 text-[#3B6BE8] border-transparent font-bold' : 'bg-white dark:bg-transparent border-slate-200 dark:border-slate-700 text-slate-800 dark:text-slate-300 hover:border-slate-300 font-medium'"
                     class="px-5 py-2.5 rounded-full border text-[13px] sm:text-[14px] flex items-center justify-center gap-2 transition-all outline-none">
                     <q-icon name="check_circle_outline" size="18px" :class="selectedCategory === 'all' ? 'text-[#3B6BE8]' : 'text-slate-400'"/> {{ $t('discovery.allCategory') }}
                   </button>
                   
                   <button 
                     v-for="cat in categories" :key="cat.id"
                     @click="selectCategory(cat.slug)"
                     :class="selectedCategory === cat.slug ? 'bg-[#E9EFFD] dark:bg-blue-900/40 text-[#3B6BE8] border-transparent font-bold' : 'bg-white dark:bg-transparent border-slate-200 dark:border-slate-700 text-slate-800 dark:text-slate-300 hover:border-slate-300 font-medium'"
                     class="px-5 py-2.5 rounded-full border text-[13px] sm:text-[14px] flex items-center justify-center gap-2 transition-all outline-none bg-transparent">
                     <q-icon :name="getCategoryIcon(cat.name)" size="18px" :class="selectedCategory === cat.slug ? 'text-[#3B6BE8]' : 'text-slate-600 dark:text-slate-400'"/>
                     {{ getLocalizedText(cat.name) }}
                   </button>
                </div>
            </div>

            <!-- ตัวแสดงการโหลด (Loader) -->
            <div v-if="isLoading" class="flex justify-center py-24">
               <q-spinner size="3rem" color="primary" />
            </div>

            <div v-else-if="filteredCourses.length > 0">
               <!-- มุมมองแบบกริด (GRID VIEW) -->
               <div v-if="viewMode === 'grid'" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
                  <NuxtLink v-for="course in filteredCourses" :key="course.id" :to="`/course/${course.id}`" class="flex flex-col rounded-[1.5rem] bg-white dark:bg-slate-900 border border-slate-100 dark:border-slate-800 overflow-hidden shadow-[0_2px_10px_rgb(0,0,0,0.03)] hover:shadow-[0_8px_30px_rgb(0,0,0,0.08)] transition-all duration-300 group cursor-pointer">
                     <!-- รูปหน้าปก (Thumbnail) -->
                     <div class="relative w-full aspect-[16/10] bg-slate-100 dark:bg-slate-800 overflow-hidden">
                        <img :src="course.thumbnail_url" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
                        <div v-if="course.category_name" class="absolute top-3 left-3 bg-white/95 dark:bg-slate-900/95 backdrop-blur-md text-[#3B6BE8] dark:text-blue-400 font-bold text-[10px] px-3.5 py-1 rounded-full shadow-sm" style="border-radius: 9999px; padding: 4px 12px;">
                           {{ course.category_name }}
                        </div>
                     </div>
                     
                     <!-- เนื้อหาคอร์ส (Body) -->
                     <div class="p-5 flex flex-col flex-1">
                        <h3 class="font-bold text-slate-900 dark:text-white text-[15px] leading-snug line-clamp-2 mb-2 group-hover:text-blue-600 transition-colors">{{ getLocalizedText(course.title) }}</h3>
                        
                        <div class="flex items-center gap-2 mb-4">
                           <span class="text-[12px] text-slate-500 font-medium">{{ $t('discovery.byInstructor') }} {{ course.instructor_name }}</span>
                        </div>

                        <div class="flex items-center gap-1.5 mb-5">
                             <q-icon name="star" class="text-amber-400" size="16px" />
                             <span class="text-[13px] font-bold text-slate-800 dark:text-slate-200">{{ course.rating }}</span>
                             <span class="text-[12px] text-slate-400">({{ course.reviews_count.toLocaleString() }} {{ $t('discovery.students') }})</span>
                        </div>
                        
                        <div class="mt-auto flex items-center justify-between">
                            <div class="font-[900] text-[18px]" :class="course.is_free ? 'text-green-500' : 'text-[#2563EB] dark:text-blue-400'">
                                {{ course.formatted_price }}
                            </div>
                            <!-- ปุ่มกดรูปตาเพื่อดูรายละเอียด (Eye icon circle button) -->
                            <button class="w-[38px] h-[38px] rounded-full bg-slate-50 dark:bg-slate-800 text-slate-400 dark:text-slate-500 flex items-center justify-center hover:bg-blue-50 hover:text-blue-600 dark:hover:bg-slate-700 border border-slate-100 dark:border-slate-700 transition-colors shadow-sm outline-none">
                                <q-icon name="visibility" size="18px" />
                            </button>
                        </div>
                     </div>
                  </NuxtLink>
               </div>

               <!-- มุมมองแบบรายการ (LIST VIEW) -->
               <div v-else class="flex flex-col gap-5">
                  <NuxtLink v-for="course in filteredCourses" :key="course.id" :to="`/course/${course.id}`" class="flex flex-col sm:flex-row rounded-[1.5rem] bg-white dark:bg-slate-900 border border-slate-100 dark:border-slate-800 p-3 sm:p-4 gap-4 sm:gap-6 shadow-sm hover:shadow-[0_8px_30px_rgb(0,0,0,0.06)] transition-all duration-300 group cursor-pointer">
                     <div class="relative w-full sm:w-[260px] aspect-[16/10] sm:aspect-auto sm:h-[160px] rounded-[1rem] bg-slate-100 dark:bg-slate-800 overflow-hidden shrink-0">
                        <img :src="course.thumbnail_url" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
                        <div v-if="course.category_name" class="absolute top-3 left-3 bg-white/95 dark:bg-slate-900/95 backdrop-blur-md text-[#3B6BE8] dark:text-blue-400 font-bold text-[10px] px-3.5 py-1.5 rounded-full shadow-sm" style="border-radius: 9999px; padding: 4px 12px;">
                           {{ course.category_name }}
                        </div>
                     </div>
                     <div class="flex flex-col flex-1 py-1">
                        <div class="flex-1">
                            <h3 class="font-bold text-slate-900 dark:text-white text-[16px] md:text-[18px] leading-snug line-clamp-2 md:line-clamp-1 mb-2 group-hover:text-blue-600 transition-colors">{{ getLocalizedText(course.title) }}</h3>
                            <div class="flex items-center gap-2 mb-3">
                               <span class="text-[13px] text-slate-500 font-medium">{{ $t('discovery.byInstructor') }} {{ course.instructor_name }}</span>
                            </div>
                            <div class="flex items-center gap-1.5 mb-2">
                                 <q-icon name="star" class="text-amber-400" size="16px" />
                                 <span class="text-[13px] font-bold text-slate-800 dark:text-slate-200">{{ course.rating }}</span>
                                 <span class="text-[12px] text-slate-400">({{ course.reviews_count.toLocaleString() }} {{ $t('discovery.students') }})</span>
                            </div>
                        </div>
                        <div class="mt-4 sm:mt-auto flex items-center justify-between">
                            <div class="font-[900] text-[20px]" :class="course.is_free ? 'text-green-500' : 'text-[#2563EB] dark:text-blue-400'">
                                {{ course.formatted_price }}
                            </div>
                            <button class="px-6 py-2 rounded-full bg-slate-50 text-slate-600 dark:bg-slate-800 dark:text-slate-300 font-bold text-[13px] flex items-center gap-2 hover:bg-blue-50 border border-slate-100 dark:border-slate-700 hover:text-blue-600 transition-colors">
                                <q-icon name="visibility" size="16px" /> {{ $t('discovery.viewDetails') }}
                            </button>
                        </div>
                     </div>
                  </NuxtLink>
               </div>
            </div>

            <!-- กรณีไม่พบข้อมูลคอร์ส (Empty State) -->
            <div v-else class="flex flex-col items-center justify-center py-20 bg-white dark:bg-slate-900/40 rounded-3xl border border-dashed border-slate-200 dark:border-slate-800">
               <q-icon name="search_off" size="64px" class="text-slate-300 dark:text-slate-600 mb-4" />
               <h3 class="text-xl font-bold text-slate-900 dark:text-white mb-2">{{ $t('discovery.emptyTitle') }}</h3>
               <p class="text-slate-500 dark:text-slate-400 text-center max-w-md">{{ $t('discovery.emptyDesc') }}</p>
               <button class="mt-6 font-bold text-blue-600 hover:text-blue-700 transition-colors" @click="searchQuery = ''; selectedCategory = 'all';">
                  {{ $t('discovery.showAll') }}
               </button>
            </div>
        </div>
    </div>
  </div>
</template>

<style scoped>
/* ปิดการแสดงแถบเลื่อนบนคอนเทนเนอร์ของตัวกรอง (Disable default scrollbar for filter container) */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
</style>
