<script setup lang="ts">
/**
 * @file courses.vue
 * @description Page displaying all available courses in a public catalog format.
 * Matches the premium dark theme of the landing page.
 */

// Define page metadata using the landing layout (dark theme default)
definePageMeta({
  layout: 'landing'
})

// Set the HTML head title for SEO
useHead({
  title: 'คอร์สทั้งหมด - E-Learning System'
})

// Reactive state for the search input
const searchQuery = ref('')
const { fetchCourses } = useCourse()

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

// Fetch courses from API
const { data: coursesResponse, error } = await useAsyncData('courses-list', () => fetchCourses())

// Computed property for courses list from API response
const courses = computed(() => {
  if (coursesResponse.value?.success) {
    return coursesResponse.value.data
  }
  return []
})

/**
 * @computed filteredCourses
 * @description Filters the courses list based on the search query.
 * Checks both the course title and description (case-insensitive).
 */
const filteredCourses = computed(() => {
  const list = courses.value || []
  if (!searchQuery.value) return list
  
  const query = searchQuery.value.toLowerCase()
  return list.filter(c => {
    const title = getLocalizedText(c.title).toLowerCase()
    const desc = getLocalizedText(c.description).toLowerCase()
    return title.includes(query) || desc.includes(query)
  })
})
</script>

<template>
  <!-- Main Container: Dark Theme Base -->
  <div class="relative min-h-screen text-slate-200 bg-slate-900 transition-colors">
     
     <!-- ==========================================
          BACKGROUND EFFECTS
          Ambient glows matching the index.vue theme
     ========================================== -->
     <div class="fixed inset-0 overflow-hidden pointer-events-none -z-10">
      <div class="absolute top-[-20%] right-[-10%] w-[60%] h-[60%] rounded-full bg-blue-600/10 blur-[140px] animate-pulse-slow"/>
      <div class="absolute bottom-[-20%] left-[-10%] w-[60%] h-[60%] rounded-full bg-indigo-600/10 blur-[140px] animate-pulse-slow" style="animation-delay: 3s;"/>
    </div>

    <!-- ==========================================
          HERO SECTION
          Title and subtitle area
     ========================================== -->
    <section class="relative pt-32 pb-20 px-6 overflow-hidden">
      <div class="container mx-auto max-w-6xl text-center relative z-10">
        <!-- Tagline Badge -->
        <div class="mb-6 slide-up">
           <span class="px-5 py-2 rounded-full glass border border-blue-400/20 text-blue-400 text-[11px] font-black tracking-[0.25em] uppercase shadow-[0_0_20px_rgba(59,130,246,0.15)]">
             EXPLORE COURSES
           </span>
        </div>
        <!-- Main Title -->
        <h1 class="text-4xl md:text-6xl font-black text-white mb-6 tracking-tight slide-up" style="animation-delay: 0.1s;">
          คอร์สเรียน<span class="text-gradient-cyan">ทั้งหมด</span>
        </h1>
        <!-- Subtitle -->
        <p class="text-slate-400 text-xl max-w-2xl mx-auto leading-relaxed slide-up" style="animation-delay: 0.2s;">
          เริ่มต้นอัปสกิลของคุณวันนี้ด้วยหลักสูตรคุณภาพที่ออกแบบโดยผู้เชี่ยวชาญในอุตสาหกรรม
        </p>
      </div>
    </section>

    <!-- ==========================================
          SEARCH & GRID SECTION
     ========================================== -->
    <section class="container mx-auto max-w-6xl px-6 pb-32">
      <!-- Search Bar -->
      <div class="mb-20 relative max-w-2xl mx-auto slide-up" style="animation-delay: 0.3s;">
        <div class="relative group">
          <div class="absolute inset-y-0 left-5 flex items-center pointer-events-none">
            
          </div>
          <input 
            v-model="searchQuery" 
            type="text" 
            class="w-full h-16 pl-14 pr-6 bg-white/5 border border-white/10 rounded-2xl text-white placeholder-slate-500 focus:outline-none focus:border-blue-500/50 focus:bg-white/10 focus:ring-4 focus:ring-blue-500/10 transition-all font-medium text-lg backdrop-blur-md" 
            placeholder="ค้นหาบทเรียนที่คุณสนใจ..." 
          >
          <!-- Hover Glow Effect on Input -->
          <div class="absolute inset-0 rounded-2xl ring-1 ring-inset ring-transparent group-hover:ring-white/20 pointer-events-none transition-all" />
        </div>
      </div>

      <!-- Course Grid -->
      <div v-if="filteredCourses.length > 0" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-20">
        <div 
          v-for="(course, index) in filteredCourses" 
          :key="course.id" 
          class="glass-card group flex flex-col h-full hover:-translate-y-2 transition-transform duration-500 slide-up"
          :style="{ animationDelay: `${0.1 * (index + 1)}s` }"
        >
          <!-- Card Image -->
          <div class="h-56 bg-gradient-to-br from-slate-800 to-slate-900 relative overflow-hidden group-hover:opacity-90 transition-opacity">
            <img 
              v-if="course.thumbnail_url" 
              :src="course.thumbnail_url" 
              :alt="getLocalizedText(course.title)"
              class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
              @error="(e) => (e.target as HTMLImageElement).style.display = 'none'" 
            />
            <div 
              v-else 
              class="absolute inset-0 flex items-center justify-center bg-gradient-to-br from-slate-800 to-slate-900"
            >
            </div>
            <!-- Level Badge (Neutral/Warning/Success variants) - Optional based on data -->
             <div v-if="course.levelType" class="absolute top-4 right-4">
                <!-- Add badge logic if needed -->
             </div>
          </div>

          <!-- Card Content Body -->
          <div class="p-8 flex-1 flex flex-col border-t border-white/5">
            <h3 class="text-2xl font-bold text-white mb-3 leading-tight group-hover:text-blue-400 transition-colors">
              {{ getLocalizedText(course.title) }}
            </h3>
            <p class="text-slate-400 text-sm mb-8 line-clamp-2 leading-relaxed flex-1">
              {{ getLocalizedText(course.description) }}
            </p>

            <!-- Meta Information (Rating, Lessons) -->
            <div class="flex items-center gap-6 mb-8 text-sm font-medium text-slate-500">
              <div class="flex items-center gap-2">
                <span class="text-amber-400">⭐</span>
                <span class="text-slate-300">{{ course.rating || 'N/A' }}</span>
              </div>
              <div class="w-1 h-1 rounded-full bg-slate-700" />
              <div class="flex items-center gap-2">
                <span class="opacity-70">📖</span>
                <span class="text-slate-300">{{ course.lessons || 0 }} บทเรียน</span>
              </div>
            </div>

            <!-- Card Footer (Price & Action) -->
            <div class="pt-6 border-t border-white/5 flex items-center justify-between mt-auto">
              <span class="text-2xl font-black text-blue-400 tracking-tight">
                {{ course.is_free ? 'ฟรี' : course.price }}
              </span>
              <NuxtLink 
                :to="`/course/${course.id}`" 
                class="px-6 py-3 bg-white/10 hover:bg-blue-600 text-white rounded-xl text-sm font-bold transition-all border border-white/10 hover:border-blue-500/50"
              >
                ดูรายละเอียด
              </NuxtLink>
            </div>
          </div>
        </div>
      </div>

      <!-- Empty State (No Results) -->
      <div v-else class="text-center py-32 glass-premium rounded-[3rem]">
        <div class="text-7xl mb-8 opacity-50 animate-bounce">🔭</div>
        <h2 class="text-3xl font-black text-white mb-4">ไม่พบคอร์สที่คุณค้นหา</h2>
        <p class="text-slate-400 mb-10 max-w-md mx-auto text-lg">
          ลองใช้คำค้นหาอื่น หรือดูคอร์สทั้งหมดที่เรามีให้บริการในขณะนี้
        </p>
        <button 
          class="px-8 py-4 bg-blue-600 hover:bg-blue-500 text-white rounded-2xl font-black transition-all shadow-lg shadow-blue-600/20 hover:-translate-y-1" 
          @click="searchQuery = ''"
        >
          แสดงคอร์สทั้งหมด
        </button>
      </div>
    </section>

    <!-- ==========================================
          CTA SECTION
          Call to action to register
     ========================================== -->
    <section class="py-32 relative overflow-hidden">
       <!-- Gradient Overlay -->
       <div class="absolute inset-0 bg-gradient-to-t from-black/40 to-transparent pointer-events-none"/>
      
      <div class="container mx-auto max-w-4xl text-center relative z-10 px-6">
        <h2 class="text-4xl md:text-5xl font-black text-white mb-8 tracking-tight">
          พร้อมจะเริ่มต้นแล้วหรือยัง?
        </h2>
        <p class="text-slate-400 text-xl mb-12 max-w-2xl mx-auto leading-relaxed">
          ลงทะเบียนฟรีวันนี้เพื่อเข้าถึงบทเรียนพื้นฐาน และติดตามความคืบหน้าการเรียนของคุณได้ทันที ไม่มีค่าใช้จ่ายแอบแฝง
        </p>
        <NuxtLink 
          to="/auth/register" 
          class="inline-flex items-center gap-3 px-10 py-5 bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-500 hover:to-indigo-500 text-white rounded-2xl text-lg font-black shadow-2xl shadow-blue-900/40 hover:scale-105 transition-all duration-300"
        >
          <span></span>
          <span>สมัครสมาชิกฟรี</span>
        </NuxtLink>
      </div>
    </section>
  </div>
</template>

<style scoped>
/* 
  MATCHING INDEX.VUE STYLES
  These styles ensure consistency with the landing page theme.
*/

/* Gradient Text Effect (Cyan to Blue) */
.text-gradient-cyan {
  background: linear-gradient(135deg, #22d3ee 0%, #3b82f6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Premium Glass Effect for Containers */
.glass-premium {
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(40px);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Glass Card Style for Course Items */
.glass-card {
  background: rgba(30, 41, 59, 0.4); /* Slate-800 with opacity */
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 2rem;
  overflow: hidden;
}

/* Slow Pulse Animation for Background Glows */
@keyframes pulse-slow {
  0%, 100% { opacity: 0.1; transform: scale(1); }
  50% { opacity: 0.15; transform: scale(1.15); }
}

.animate-pulse-slow {
  animation: pulse-slow 10s linear infinite;
}

/* Slide Up Entrance Animation */
@keyframes slide-up {
  from { opacity: 0; transform: translateY(30px); }
  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;
}
</style>
