<script setup lang="ts">
/**
 * @file index.vue
 * @description หน้า Landing Page (หน้าแรกของเว็บสำหรับ Guest)
 * ใช้ Layout: 'landing' (ไม่มี Sidebar / Navbar แบบ Dashboard)
 */
definePageMeta({
  layout: 'landing',
  middleware: 'auth'
})

useHead({
  title: 'E-Learning System - ระบบการเรียนการสอนออนไลน์'
})

import { CATEGORY_CARDS, WHY_CHOOSE_US } from '@/constants/landing'

const { fetchCategories } = useCategory()
const { fetchCourses, getLocalizedText } = useCourse()
const { user } = useAuth()

const categoryCards = CATEGORY_CARDS
const whyChooseUs = WHY_CHOOSE_US

const categories = ref<any[]>([])
const topCourses = ref<any[]>([])
const selectedCategory = ref('all')
const isLoading = ref(false)
const currentSlide = ref(0)
const courseChunks = computed(() => {
  const chunkSize = 4
  const chunks = []
  if (!topCourses.value) return []
  for (let i = 0; i < topCourses.value.length; i += chunkSize) {
    chunks.push(topCourses.value.slice(i, i + chunkSize))
  }
  return chunks
})

const loadData = async () => {
    isLoading.value = true
    try {
        const [catRes, courseRes] = await Promise.all([
            fetchCategories(),
            fetchCourses({ limit: 8, forceRefresh: true })
        ])
        
        if (catRes.success) categories.value = catRes.data || []
        if (courseRes.success) topCourses.value = courseRes.data || []
    } catch (err) {
        console.error('Failed to load landing page data:', err)
    } finally {
        isLoading.value = false
    }
}

const goBrowse = (slug: string) => {
    navigateTo({ path: '/browse', query: { category: slug } })
}

watch(selectedCategory, async (newVal) => {
    isLoading.value = true
    try {
        const params: any = { limit: 8 }
        if (newVal !== 'all') {
            const category = categories.value.find(c => c.slug === newVal)
            if (category) {
                params.category_id = category.id
            }
        }
        const res = await fetchCourses(params)
        if (res.success) {
            topCourses.value = res.data || []
            currentSlide.value = 0 // Reset carousel on filter change
        }
    } catch (err) {
        console.error('Error filtering courses:', err)
    } finally {
        isLoading.value = false
    }
})

onMounted(() => {
    loadData()
})
</script>

<template>
  <div class="landing-page bg-white min-h-screen">
    <!-- Hero Section -->
    <header class="relative pt-32 pb-16 md:pt-40 md:pb-20 overflow-hidden bg-white">
      <!-- Decorative Background -->
      <div class="absolute top-0 right-0 w-[45%] h-[105%] bg-blue-50/50 rounded-bl-[12rem] -z-10 animate-fade-in"/>
      
      <div class="container mx-auto px-6 md:px-12 grid grid-cols-1 md:grid-cols-2 items-center gap-16">
        <div class="hero-left slide-up">
          <div class="flex items-center gap-3 mb-8 text-blue-600">
            <q-icon name="stars" size="28px" />
            <span class="text-sm font-black tracking-widest uppercase">E-Learning Platform</span>
          </div>
          <h1 class="text-4xl md:text-5xl lg:text-7xl font-bold text-slate-900 leading-[1.2] mb-8 tracking-normal">
            คอร์สเรียนออนไลน์<br><span class="text-blue-600">เพิ่มทักษะ</span>ยุคดิจิทัล
          </h1>
          <p class="text-slate-500 text-lg md:text-xl font-medium mb-12 leading-relaxed max-w-xl slide-up" style="animation-delay: 0.1s;">
            แหล่งรวมคอร์สออนไลน์คุณภาพสูงที่จะช่วยอัปสกิลให้คุณทำงานเก่งขึ้น พัฒนาทักษะที่ตลาดต้องการ พร้อมให้คุณก้าวไปข้างหน้าได้อย่างมั่นใจ!
          </p>

          <!-- Search Bar Pill -->
          <div class="flex flex-col sm:flex-row gap-4 mb-10 slide-up" style="animation-delay: 0.2s;">
            <q-btn 
              unelevated 
              rounded 
              color="primary" 
              label="ดูคอร์สเรียนทั้งหมด" 
              class="px-10 h-16 font-black text-white text-xl shadow-xl shadow-blue-600/20 hover:scale-105 transition-transform"
              no-caps
              to="/browse"
            />
            <q-btn 
              outline
              rounded 
              color="primary" 
              label="สมัครสมาชิกฟรี" 
              class="px-10 h-16 font-black text-xl border-2 hover:bg-blue-50"
              no-caps
              to="/auth/register"
              v-if="!user"
            />
          </div>
        </div>

        <!-- Hero Visual Showcase -->
        <div class="hero-right flex justify-center md:justify-end items-center slide-up" style="animation-delay: 0.2s;">
          <div class="relative w-full max-w-xl">
            <!-- Main Illustration -->
            <div class="relative z-10 animate-float">
              <img 
                src="/img/elearning.png" 
                alt="E-Learning Illustration"
                class="w-full h-auto drop-shadow-2xl"
              />
            </div>

            <!-- Decorative shapes behind the image -->
            <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[120%] h-[120%] bg-blue-50/50 rounded-full blur-3xl -z-10" />
            <div class="absolute -top-10 -left-10 w-32 h-32 bg-amber-100 rounded-[3rem] -z-10 animate-pulse" />
            <div class="absolute -bottom-10 -right-10 w-48 h-48 bg-blue-100 rounded-full -z-10 animate-pulse" style="animation-delay: -2s;" />
          </div>
        </div>
      </div>
    </header>

    <!-- Why Choose Us Section -->
    <section class="pt-20 pb-12 bg-white relative">
      <div class="container mx-auto px-6 lg:px-12">
        <div class="text-center mb-16 slide-up">
          <h2 class="text-3xl md:text-5xl font-black text-slate-900 mb-6">
            ทำไมต้องเลือกแพลตฟอร์มของเรา?
          </h2>
          <p class="text-slate-500 text-lg md:text-xl font-medium max-w-3xl mx-auto leading-relaxed">
            เรามีเครื่องมือและความเชี่ยวชาญที่จะช่วยให้คุณประสบความสำเร็จในการเปลี่ยนสายอาชีพและการสร้างทักษะระดับมืออาชีพ
          </p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
          <div v-for="(item, i) in whyChooseUs" :key="i"
               class="slide-up p-10 rounded-[2.5rem] bg-slate-50/50 border border-slate-100 hover:bg-white hover:shadow-2xl hover:shadow-blue-600/5 transition-all duration-500 group"
               :style="`animation-delay: ${i * 0.1}s`"
          >
            <div class="w-16 h-16 rounded-3xl flex items-center justify-center mb-8 transition-transform group-hover:scale-110 duration-500"
                 :class="item.iconBg"
            >
              <q-icon :name="item.icon" size="32px" :class="item.iconColor" />
            </div>
            <h3 class="text-2xl font-black text-slate-900 mb-4 group-hover:text-blue-600 transition-colors">
              {{ item.title }}
            </h3>
            <p class="text-slate-500 text-lg leading-relaxed font-medium">
              {{ item.desc }}
            </p>
          </div>
        </div>
      </div>
    </section>

    <section class="pt-16 pb-12 md:pt-24 md:pb-20 bg-white">
      <div class="container mx-auto px-6 lg:px-12">
        <div class="mb-12 slide-up">
          <h2 class="text-3xl md:text-4xl font-black text-slate-900 px-4">
            เลือกเรียนตามเรื่องที่คุณสนใจ
          </h2>
        </div>

        <!-- Horizontal Cards (New Layout - Image 2) -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 px-4">
          <div v-for="(card, i) in categoryCards" :key="i"
               class="group cursor-pointer bg-white rounded-[2rem] p-6 border border-slate-100/80 shadow-sm hover:shadow-2xl hover:shadow-blue-600/5 hover:-translate-y-1 transition-all duration-500 relative flex items-center gap-5"
               @click="goBrowse(card.slug)"
          >
            <!-- Icon Box -->
            <div class="flex-shrink-0 w-16 h-16 rounded-[1.5rem] flex items-center justify-center bg-blue-50/50 group-hover:scale-110 transition-transform duration-500"
            >
              <q-icon :name="card.icon" size="28px" class="text-blue-600" />
            </div>

            <!-- Content -->
            <div class="flex-grow pr-2">
              <h3 class="text-lg md:text-xl font-black text-slate-900 mb-1 group-hover:text-blue-600 transition-colors leading-tight">
                {{ card.title }}
              </h3>
              <p class="text-slate-500 text-xs md:text-sm font-medium leading-relaxed opacity-70">
                {{ card.desc }}
              </p>
            </div>

            <!-- Arrow -->
            <div class="flex-shrink-0 text-slate-300 group-hover:text-blue-600 transition-colors transform group-hover:translate-x-1 duration-300">
              <q-icon name="chevron_right" size="24px" />
            </div>
          </div>
        </div>
      </div>
    </section>




    <!-- Section 4: "คอร์สออนไลน์" -->
    <section class="pt-12 pb-24 md:pt-20 md:pb-40 bg-slate-50/50">
      <div class="container mx-auto px-6 lg:px-12">
        <div class="flex flex-col md:flex-row items-start md:items-end justify-between mb-12 gap-8">
          <div class="slide-up">
            <h2 class="text-3xl md:text-5xl font-bold text-slate-900 mb-4">คอร์สออนไลน์</h2>
            <p class="text-slate-500 font-bold text-lg">เริ่มต้นเรียนรู้ทักษะใหม่ด้วยคอร์สคุณภาพจากผู้เชี่ยวชาญ</p>
          </div>
          <NuxtLink to="/browse" class="flex items-center gap-3 px-8 py-3 rounded-full border-2 border-blue-600 text-blue-700 font-bold hover:bg-blue-600 hover:text-white transition-all slide-up">
            คอร์สออนไลน์ทั้งหมด <q-icon name="arrow_forward" size="20px" />
          </NuxtLink>
        </div>

        <!-- Filter Tabs / Pills -->
        <div class="flex items-center gap-4 mb-8 overflow-x-auto pb-6 no-scrollbar slide-up">
          <button 
            class="px-8 py-3 rounded-full font-black text-base transition-all whitespace-nowrap border-2"
            :class="selectedCategory === 'all' ? 'bg-blue-600 text-white border-blue-600 shadow-lg shadow-blue-600/30' : 'bg-white border-slate-100 text-slate-500 hover:border-slate-300'"
            @click="selectedCategory = 'all'"
          >
            ทั้งหมด
          </button>
          <button 
            v-for="category in categories" 
            :key="category.id"
            class="px-8 py-3 rounded-full font-black text-base transition-all whitespace-nowrap border-2"
            :class="selectedCategory === category.slug ? 'bg-blue-600 text-white border-blue-600 shadow-lg shadow-blue-600/30' : 'bg-white border-slate-100 text-slate-500 hover:border-slate-300'"
            @click="selectedCategory = category.slug"
          >
            {{ getLocalizedText(category.name) }}
          </button>
        </div>

        <!-- Courses Carousel -->
        <div v-if="isLoading" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10">
          <div v-for="i in 4" :key="i" class="bg-white rounded-[3rem] h-[480px] animate-pulse" />
        </div>
        
        <div v-else class="relative group/carousel slide-up">
          <q-carousel
            v-model="currentSlide"
            transition-prev="slide-right"
            transition-next="slide-left"
            swipeable
            animated
            control-color="primary"
            padding
            height="auto"
            class="bg-transparent rounded-none"
          >
            <q-carousel-slide 
              v-for="(chunk, pageIndex) in courseChunks" 
              :key="pageIndex" 
              :name="pageIndex" 
              class="p-4"
            >
              <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10">
                <CourseCard 
                  v-for="course in chunk" 
                  :key="course.id" 
                  v-bind="{ ...course, image: course.thumbnail_url }"
                />
              </div>
            </q-carousel-slide>
          </q-carousel>

           <!-- Custom Carousel Navigation -->
            <button 
              v-if="courseChunks.length > 1"
              class="absolute -left-4 md:-left-12 top-1/2 -translate-y-1/2 z-10 w-12 h-12 rounded-full bg-white shadow-xl border border-slate-100 flex items-center justify-center text-slate-500 hover:text-blue-600 transition-all hover:scale-110"
              @click="currentSlide = Math.max(0, currentSlide - 1)"
              :disabled="currentSlide === 0"
              :class="{ 'opacity-50 cursor-not-allowed': currentSlide === 0 }"
            >
              <q-icon name="chevron_left" size="32px" />
            </button>
            <button 
              v-if="courseChunks.length > 1"
              class="absolute -right-4 md:-right-12 top-1/2 -translate-y-1/2 z-10 w-12 h-12 rounded-full bg-white shadow-xl border border-slate-100 flex items-center justify-center text-slate-500 hover:text-blue-600 transition-all hover:scale-110"
              @click="currentSlide = Math.min(courseChunks.length - 1, currentSlide + 1)"
              :disabled="currentSlide === courseChunks.length - 1"
              :class="{ 'opacity-50 cursor-not-allowed': currentSlide === courseChunks.length - 1 }"
            >
              <q-icon name="chevron_right" size="32px" />
            </button>
        </div>
      </div>
    </section>
  </div>
</template>



<style scoped>
.landing-page {
  font-family: var(--font-main);
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Animations */
@keyframes slide-up {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}

.slide-up {
  animation: slide-up 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  opacity: 0;
}

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-20px) rotate(5deg); }
}

.animate-float {
  animation: float 6s ease-in-out infinite;
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.animate-fade-in {
  animation: fade-in 1s ease-out forwards;
}

/* Typography Overrides */
h1, h2, h3 {
  letter-spacing: normal;
}

/* Hover effects */
.hero-right:hover .animate-float {
  animation-play-state: paused;
}

/* Responsive Grid Adjustments */
@media (max-width: 1200px) {
  .career-cards-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 768px) {
  .career-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
</style>
