<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 levelModel = ref('ระดับทั้งหมด')
const levelOptions = ['ระดับทั้งหมด','ระดับเริ่มต้น', 'ระดับกลาง', 'ระดับสูง']

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 || topCourses.value.length === 0) 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: 12, 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: 12 }
        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">
    <!-- Section 1: Hero Section -->
    <section class="container mx-auto py-24 md:py-24 lg:py-28 px-6 lg:px-12 pb-16">
      <div class="flex flex-col lg:flex-row items-center gap-10 lg:gap-10 justify-between animate-fade-in">
        <!-- Left Content -->
        <div class="flex flex-col items-start gap-6 flex-1 max-w-2xl ">
          <!-- Heading -->
          <h1 class="text-4xl sm:text-5xl lg:text-[55px] font-bold leading-tight lg:leading-[66px] slide-up" style="animation-delay: 0.2s;">
            <span class="text-slate-900">ขยายขอบเขตความรู้ของคุณ</span><br>
            <span class="text-blue-600">ด้วยการเรียนรู้ออนไลน์</span>
          </h1>

          <!-- Subtitle -->
          <p class="text-slate-500 text-lg sm:text-xl leading-relaxed slide-up" style="animation-delay: 0.3s;">
            จุดประกายความรู้ของคุณ และเริ่มต้นอัปสกิลกับผู้เชี่ยวชาญ
            ในอุตสาหกรรมที่มีความรู้รอบด้านหลากหลายในหลายสาขา
            เรียนได้ทุกที่ ทุกเวลา
          </p>

        <!-- Buttons -->
          <div class=" w-full flex flex-col sm:flex-row items-center gap-4 pt-5 slide-up" style="animation-delay: 0.4s;">
            <q-btn 
              unelevated 
              rounded 
              color="blue-600" 
              label="ดูคอร์สเรียน" 
              class="px-10 py-4 w-full sm:w-auto rounded-3xl font-semibold text-white text-lg shadow-xl shadow-blue-600/20 transition-transform"
              no-caps
              to="/browse"
            />
            <q-btn 
              outline
              rounded 
              label="สมัครสมาชิกฟรี" 
              color="grey-8"
              class="px-10 py-4 w-full sm:w-auto btn-user rounded-3xl font-semibold text-lg hover:bg-blue-50 "
              no-caps
              to="/auth/register"
              v-if="!user"
            />
          </div>
        </div>

        <!-- Right - Hero Image -->
        <div class="flex-1 w-full max-w-lg md:max-w-md lg:max-w-xl pl-0 py-10">
          <div class="relative rounded-2xl overflow-hidden shadow-[0_25px_50px_-12px_rgba(0,0,0,0.25)] aspect-square">
            <img
              src="https://api.builder.io/api/v1/image/assets/TEMP/11ba9b46c799fac950967377f8158fa942c1a6b8?width=1184"
              alt="Students collaborating"
              class="w-full h-full object-cover"
            />
            <div class="absolute inset-0 bg-gradient-to-t from-black/40 via-transparent to-transparent" />

            <!-- Course Card Overlay -->
            <!-- <div class="absolute bottom-5 left-5 right-5">
              <div class="bg-white/85 backdrop-blur-sm border border-white/20 rounded-3xl px-6 py-5">
                <div class="flex items-center gap-4">
                  <div class="flex-shrink-0 w-9 h-9 flex items-center justify-center rounded-2xl bg-blue-600/20">
                    <q-icon name="o_play_circle" size="25px" class="text-blue-600" />
                  </div>
                  <div class="flex flex-col">
                    <span class="text-slate-900 font-bold text-sm leading-5">
                      เรียนรู้การออกแบบ UI/UX
                    </span>
                    <span class="text-slate-500 text-xs leading-4 mt-0.5">
                      คอร์สวิดีโอ • 12 บทเรียน
                    </span>
                  </div>
                </div>
              </div>
            </div> -->
          </div>
        </div>
      </div>
    </section>

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

        <!-- Horizontal Cards -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          <div v-for="(item, i) in whyChooseUs" :key="i"
               class="slide-up p-10 rounded-2xl bg-[#F8FAFC] border border-[#f1f2f9] hover:border-[#2463eb61] hover:bg-white transition-all duration-500 group"
               :style="`animation-delay: ${i * 0.1}s`"
          >
            <div class="w-14 h-14 rounded-full bg-[#E3EBFA] flex items-center justify-center mb-5 transition-transform group-hover:scale-110 duration-500">
              <q-icon :name="item.icon" size="28px" class="text-blue-600" />
            </div>
            <h3 class="text-[1.3rem] font-bold text-slate-900 group-hover:text-blue-600 transition-colors">
              {{ item.title }}
            </h3>
            <p class="text-slate-500 text-lg leading-relaxed ">
              {{ item.desc }}
            </p>
          </div>
        </div>
      </div>
    </section>

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

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

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

            <!-- Arrow -->
            <div class="gt-xs 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="py-12 md:py-24 bg-slate-50">
      <div class="container mx-auto px-6 lg:px-12">
        <!-- Heading -->
        <div class="flex flex-col md:flex-row items-start md:items-end justify-between mb-5 gap-8">
          <div class="slide-up">
            <h2 class="text-4xl md:text-[2.4rem] font-bold text-slate-900 mb-4">คอร์สออนไลน์</h2>
          </div>
          <NuxtLink to="/browse" class="flex items-center py-3 text-lg rounded-full font-bold ">
            <span class="text-blue-600 hover:text-blue-500 ">ดูคอร์สทั้งหมด</span>
            <q-icon name="arrow_forward" size="15px" class="text-blue-600 ml-2" />
          </NuxtLink>
        </div>

        <!-- Filters Row -->
        <div class="flex items-center gap-2 mb-8 overflow-x-auto no-scrollbar slide-up justify-between">
          <!-- Category Filters -->
          <div class="flex items-center gap-2">
            <button 
              class="py-2 px-5 rounded-full font-medium text-lg transition-all whitespace-nowrap border-2"
              :class="selectedCategory === 'all' ? 'bg-blue-600 text-white border-blue-600 font-semibold' : 'bg-white border-slate-100 text-slate-700 hover:border-slate-300'"
              @click="selectedCategory = 'all'"
            >
              <q-icon name="o_check_circle" size="20px" class="mr-1" />
              ทั้งหมด
            </button>

            <button 
              v-for="category in categories" 
              :key="category.id"
              class="py-2 px-5 rounded-full font-medium text-lg transition-all whitespace-nowrap border-[1.5px]"
              :class="selectedCategory === category.slug ? 'bg-blue-600 text-white border-blue-600 font-semibold' : 'bg-white border-slate-200 text-slate-700 hover:border-slate-300'"
              @click="selectedCategory = category.slug"
            >
              <q-icon :name="category.icon || 'o_label'" size="20px" class="mr-1" />
              {{ getLocalizedText(category.name) }}
            </button>
          </div>

          <!-- Level Dropdown -->
          <!-- <div class="flex items-center gap-2 font-medium">
            <q-select 
                borderless 
                v-model="levelModel" 
                :options="levelOptions" 
                dropdown-icon="o_keyboard_arrow_down"  
                class="text-lg" 
                popup-content-class="rounded-lg text-lg shadow-sm text-slate-700"
            >
              <template v-slot:before>
                <div class="text-slate-700 text-lg">ระดับความยาก:</div>
              </template>
            </q-select>
          </div> -->
        </div>

        <!-- Courses Carousel -->
        <div v-if="isLoading" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
          <div v-for="i in 4" :key="i" class="bg-white rounded-2xl h-[450px] 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-0"
            >
              <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                <div 
                  v-for="course in chunk" 
                  :key="course.id" 
                  class="flex flex-col flex-1 min-w-0 rounded-2xl border border-slate-100 bg-white shadow-sm overflow-hidden hover:shadow-lg hover:-translate-y-1 transition-all duration-300 cursor-pointer"
                  @click="navigateTo(`/course/${course.id}`)"
                >
                  <!-- Image-->
                  <div class="relative flex-shrink-0">
                    <img
                      v-if="course.thumbnail_url"
                      :src="course.thumbnail_url"
                      :alt="getLocalizedText(course.title)"
                      class="w-full h-[150px] sm:h-[180px] lg:h-[200px] object-cover"
                    />
                    <div v-else class="w-full h-[150px] sm:h-[180px] lg:h-[200px] bg-slate-100 flex items-center justify-center">
                        <q-icon name="o_image" size="40px" class="text-slate-300" />
                    </div>
                  </div>

                  <!-- Content -->
                  <div class="flex flex-col flex-1 p-6">


                    <!-- Title -->
                    <h3 class="text-[#0F172A] font-semibold text-lg leading-snug mb-2 line-clamp-2">
                      {{ getLocalizedText(course.title) }}
                    </h3>

                    <!-- Description -->
                    <p class="text-slate-500 text-sm leading-relaxed mb-4 flex-1 line-clamp-2">
                      {{ getLocalizedText(course.description) }}
                    </p>



                   <!-- Price + Button -->
                    <div class="flex items-center justify-between pt-6 border-t border-slate-100 gap-2">
                        <div class="flex flex-col">
                            <span v-if="course.price > 0" class="text-[#0F172A] font-bold text-xl">
                                {{ course.price.toLocaleString() }}.-
                            </span>
                            <span v-else class="text-green-600 font-bold text-xl">
                                ฟรี
                            </span>
                        </div>
                      <button class="flex items-center gap-2 px-4 py-2 rounded-full bg-[#2463EB]/10 hover:bg-[#2463EB]/20 transition-colors">
                        <q-icon name="o_remove_red_eye" size="18px" class="text-[#2463EB]" />
                        <span class="text-[#2463EB] font-medium text-sm">
                          รายละเอียด
                        </span>
                      </button>
                    </div>
                  </div>
                </div>
              </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>

    <!-- Section 5: "พร้อมเริ่มต้นการเรียนรู้แล้วหรือยัง" -->
    <section class="py-16 md:py-24 bg-white">
      <div class="max-w-7xl mx-auto px-6 lg:px-12">
        <div class="bg-blue-600 rounded-3xl px-8 py-20 md:px-18 text-center relative overflow-hidden">
          <div class="gradient-background">
            <div class="gradient-sphere sphere-1"></div>
            <div class="gradient-sphere sphere-2"></div>
            <div class="gradient-sphere sphere-3"></div>
          </div>
          <div class="grid-overlay"></div>
          <div class="relative z-10">
            <h2 class="text-3xl sm:text-4xl font-bold text-white mb-4">
              พร้อมเริ่มต้นการเรียนรู้แล้วหรือยัง?
            </h2>
            <p class="text-blue-100 text-lg mb-8 max-w-xl mx-auto">
              อัปสกิลและรับทักษะที่คุณต้องการเพื่อก้าวหน้าในระดับมืออาชีพ 
              เปิดประสบการณ์การเรียนรู้รูปแบบใหม่ สมัครเลยวันนี้เพื่อเริ่มต้นเข้าสู่บทเรียน
            </p>
            <div class="flex flex-wrap justify-center gap-4">
              <q-btn 
                unelevated 
                rounded 
                class="px-8 py-4 bg-white font-bold rounded-3xl hover:bg-slate-50 transition-colors"
                no-caps
                size="18px"
                to="/browse"
              >
                <div class="text-blue-600">สำรวจคอร์สเรียน</div>
              </q-btn>
              <q-btn 
                outline
                rounded 
                label="สมัครฟรีวันนี้" 
                color="white"
                class="px-8 py-4 font-bold rounded-3xl hover:bg-white/10 transition-colors"
                no-caps
                size="18px"
                to="/auth/register"
                v-if="!user"
              />
            </div>
          </div>
        </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 fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

/* Hero Right Hover State */
.hero-right:hover .relative {
    transform: translateY(-10px);
    transition: transform 0.5s ease;
}

.gradient-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
}

.gradient-sphere {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
}

.sphere-1 {
  width: 30vw;
  height: 30vw;
  background: linear-gradient(40deg, rgba(255, 255, 255, 0.41), rgba(255, 255, 255, 0.164));
  top: 10%;
  left: -30%;
  animation: float-1 15s ease-in-out infinite alternate;
}

.sphere-2 {
  width: 45vw;
  height: 45vw;
  background: linear-gradient(240deg, rgba(16, 33, 121, 0.245), rgba(155, 169, 239, 0.263));
  bottom: -20%;
  right: -35%;
  animation: float-2 18s ease-in-out infinite alternate;
}

.sphere-3 {
  width: 30vw;
  height: 30vw;
  background: linear-gradient(120deg, rgba(133, 89, 255, 0.5), rgba(98, 216, 249, 0.3));
  top: 60%;
  left: 20%;
  animation: float-3 20s ease-in-out infinite alternate;
}

@keyframes float-1 {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(10%, 10%) scale(1.1); }
}

@keyframes float-2 {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-10%, -5%) scale(1.15); }
}

@keyframes float-3 {
  0% { transform: translate(0, 0) scale(1); opacity: 0.3; }
  100% { transform: translate(-5%, 10%) scale(1.05); opacity: 0.6; }
}

.grid-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: 40px 40px;
  background-image: 
      linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  z-index: 2;
}
</style>
