<script setup lang="ts">
/**
 * @file my-courses.vue
 * @description My Courses Page.
 * Displays enrolled courses with filters for progress/completed.
 * Handles enrollment success modals and certificate downloads.
 */

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

useHead({
  title: 'คอร์สของฉัน - e-Learning'
})

const route = useRoute()
const showEnrollModal = ref(false)
const showCertModal = ref(false)
const activeFilter = ref<'all' | 'progress' | 'completed'>('all')

// Check URL query parameters to show 'Enrollment Success' modal
onMounted(() => {
  if (route.query.enrolled) {
    showEnrollModal.value = true
  }
})

// Mock Enrolled Courses Data
const courses = [
  {
    id: 1,
    title: 'เบื้องต้นการออกแบบ UX/UI',
    progress: 65,
    category: 'progress'
  },
  {
    id: 2,
    title: 'การเข้าถึงเว็บ (WCAG)',
    progress: 10,
    category: 'progress'
  },
  {
    id: 3,
    title: 'HTML5 พื้นฐาน',
    progress: 100,
    completed: true,
    category: 'completed'
  }
]

// Computed property to filter courses
const filteredCourses = computed(() => {
  if (activeFilter.value === 'all') return courses
  return courses.filter(c => c.category === activeFilter.value)
})

const filterCourses = (filter: 'all' | 'progress' | 'completed') => {
  activeFilter.value = filter
}

// Mock certificate download action
const downloadCertificate = () => {
  showCertModal.value = false
  alert('เริ่มดาวน์โหลด PDF...')
}
</script>

<template>
  <div>
    <!-- Page Header & Filters -->
    <div class="flex justify-between items-center mb-6 mobile-stack">
      <h1 class="text-[28px] font-bold text-slate-900 dark:text-white">คอร์สของฉัน</h1>
      <!-- Filter Tabs -->
      <div class="flex gap-2" style="overflow-x: auto; padding-bottom: 4px; width: 100%; justify-content: flex-start;">
        <button 
          :class="activeFilter === 'all' ? 'btn btn-primary' : 'btn btn-secondary'" 
          style="white-space: nowrap;"
          @click="filterCourses('all')"
        >
          ทั้งหมด
        </button>
        <button 
          :class="activeFilter === 'progress' ? 'btn btn-primary' : 'btn btn-secondary'" 
          style="white-space: nowrap;"
          @click="filterCourses('progress')"
        >
          กำลังเรียน
        </button>
        <button 
          :class="activeFilter === 'completed' ? 'btn btn-primary' : 'btn btn-secondary'" 
          style="white-space: nowrap;"
          @click="filterCourses('completed')"
        >
          เรียนจบแล้ว
        </button>
      </div>
    </div>

    <!-- Courses Grid -->
    <div class="my-courses-grid">
      <template v-for="course in filteredCourses" :key="course.id">
        <!-- In Progress Course Card -->
        <CourseCard 
          v-if="!course.completed"
          :title="course.title"
          :progress="course.progress"
          show-continue
        />
        <!-- Completed Course Card -->
        <CourseCard 
          v-else
          :title="course.title"
          :completed="true"
          show-certificate
          show-study-again
          @view-certificate="showCertModal = true"
        />
      </template>
    </div>

    <!-- Empty State -->
    <div v-if="filteredCourses.length === 0" class="empty-state">
      <div class="empty-state-icon">📚</div>
      <h3 class="empty-state-title">ยังไม่มีคอร์สในหมวดหมู่นี้</h3>
      <p class="empty-state-description">คุณยังไม่มีคอร์สเรียนในส่วนนี้ ลองเลือกดูคอร์สที่น่าสนใจในระบบของเรา</p>
      <NuxtLink to="/browse/discovery" class="btn btn-primary">ไปที่รายการคอร์ส</NuxtLink>
    </div>

    <!-- MODAL: Enrollment Success -->
    <div 
      v-if="showEnrollModal" 
      style="display: flex; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 100; align-items: center; justify-content: center; padding: 20px;"
    >
      <div class="card" style="width: 400px; text-align: center; max-width: 90%;">
        <div style="width: 64px; height: 64px; background: var(--success); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 32px; margin: 0 auto 24px;">
          ✓
        </div>
        <h2 class="font-bold mb-2">ลงทะเบียนสำเร็จ!</h2>
        <p class="text-muted mb-6">คุณได้ลงทะเบียนคอร์ส <strong>เบื้องต้นการออกแบบ UX/UI</strong> เรียบร้อยแล้ว</p>
        <div class="flex flex-col gap-2">
          <NuxtLink to="/classroom/learning" class="btn btn-primary w-full">เริ่มเรียนทันที</NuxtLink>
          <button class="btn btn-secondary w-full" @click="showEnrollModal = false">ไว้ทีหลัง</button>
        </div>
      </div>
    </div>

    <!-- MODAL: Certificate Preview -->
    <div 
      v-if="showCertModal" 
      style="display: flex; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 1000; align-items: center; justify-content: center; padding: 20px;"
    >
      <div class="cert-container">
        <!-- Close Button -->
        <button style="position: absolute; top: 15px; right: 20px; border: none; background: none; font-size: 32px; cursor: pointer; color: #1E293B; z-index: 10;" @click="showCertModal = false">&times;</button>
        
        <div class="cert-inner">
          <h1 class="cert-title">ใบประกาศนียบัตรจบหลักสูตร</h1>
          <div style="width: 100px; height: 2px; background: #D4AF37; margin: 0 auto 24px;"/>
          
          <p style="color: #64748B; margin-bottom: 16px; font-size: 16px;">ขอมอบใบประกาศนี้เพื่อแสดงว่า</p>
          
          <h2 class="cert-name">สมชาย ใจดี</h2>
          
          <p style="color: #64748B; margin-bottom: 16px; font-size: 16px;">ได้ผ่านการอบรมและทดสอบความรู้ในหลักสูตร</p>
          
          <h3 style="font-size: 24px; font-weight: 700; color: #3B82F6; margin-bottom: 30px;">HTML5 พื้นฐาน</h3>

          <!-- Signature Section -->
          <div class="cert-footer">
            <div style="text-align: center;">
              <div style="width: 150px; border-bottom: 1px solid #1E293B; margin-bottom: 8px; padding-bottom: 8px; font-style: italic; margin-left: auto; margin-right: auto;">Somchai K.</div>
              <div style="font-size: 12px; color: #64748B;">ลายเซ็นผู้อำนวยการ</div>
            </div>
            
            <!-- Golden Seal -->
            <div style="width: 80px; height: 80px; background: #D4AF37; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; color: white; border: 4px double white; box-shadow: 0 0 0 4px #D4AF37; transform: rotate(-5deg); flex-shrink: 0;">
              <div style="font-size: 10px; font-weight: bold;">Certified</div>
              <div style="font-size: 16px; font-weight: 900;">ผ่าน</div>
            </div>

            <div style="text-align: center;">
              <div style="width: 150px; border-bottom: 1px solid #1E293B; margin-bottom: 8px; padding-bottom: 8px; margin-left: auto; margin-right: auto;">15 ธันวาคม 2024</div>
              <div style="font-size: 12px; color: #64748B;">วันที่ออกใบประกาศ</div>
            </div>
          </div>
          
          <!-- Download Button -->
          <div style="margin-top: 32px; text-align: center;">
            <button class="btn btn-primary" @click="downloadCertificate">
              ⬇ ดาวน์โหลด PDF
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.my-courses-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

@media (max-width: 768px) {
  .my-courses-grid {
    grid-template-columns: 1fr;
  }
}
</style>
