<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')
const { currentUser } = useAuth()

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

// Helper to get 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 || ''
}

// Data Handling
const { fetchEnrolledCourses } = useCourse()
const enrolledCourses = ref<any[]>([])
const isLoading = ref(false)

const loadEnrolledCourses = async () => {
  isLoading.value = true
  const apiStatus = activeFilter.value === 'all' 
    ? undefined 
    : activeFilter.value === 'completed' 
      ? 'COMPLETED' 
      : 'IN_PROGRESS' 

  const res = await fetchEnrolledCourses({ 
    status: activeFilter.value === 'all' ? undefined : (activeFilter.value === 'completed' ? 'COMPLETED' : 'IN_PROGRESS')
  })

  if (res.success) {
    enrolledCourses.value = (res.data || []).map(item => ({
      id: item.course_id, 
      enrollment_id: item.id,
      title: getLocalizedText(item.course.title),
      progress: 0, 
      completed: item.status === 'COMPLETED',
      thumbnail_url: item.course.thumbnail_url 
    }))
  }
  isLoading.value = false
}

// Watch filter changes to reload
watch(activeFilter, () => {
  loadEnrolledCourses()
})

onMounted(() => {
  if (route.query.enrolled) {
    showEnrollModal.value = true
  }
  loadEnrolledCourses()
})

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

<template>
  <div class="p-8 max-w-6xl mx-auto">


    <!-- Page Header & Filters -->
    <div class="flex flex-col items-start mb-12">
       <h1 class="text-3xl font-extrabold text-slate-900 dark:text-white mb-8">{{ $t('sidebar.myCourses') }}</h1>

       <!-- Filter Tabs -->
       <div class="flex gap-2">
         <q-btn
           v-for="filter in ['all', 'progress', 'completed']"
           :key="filter"
           @click="activeFilter = filter as any"
           rounded
           unelevated
           :color="activeFilter === filter ? 'primary' : 'white'"
           :text-color="activeFilter === filter ? 'white' : 'grey-8'"
           class="font-bold px-6"
           :label="$t(`myCourses.filter${filter.charAt(0).toUpperCase() + filter.slice(1)}`)"
         />
       </div>
    </div>

    <!-- Courses Grid -->
    <div v-if="isLoading" class="flex justify-center py-20">
       <q-spinner size="3rem" color="primary" />
    </div>
    <div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
      <template v-for="course in enrolledCourses" :key="course.id">
        <!-- In Progress Course Card -->
        <CourseCard 
          v-if="!course.completed"
          :id="course.id"
          :title="course.title"
          :progress="course.progress"
          :image="course.thumbnail_url"
          show-continue
        />
        <!-- Completed Course Card -->
        <CourseCard 
          v-else
          :id="course.id"
          :title="course.title"
          :progress="100"
          :image="course.thumbnail_url"
          :completed="true"
          show-certificate
          show-study-again
          @view-certificate="showCertModal = true"
        />
      </template>
    </div>

    <!-- Empty State -->
    <div v-if="!isLoading && enrolledCourses.length === 0" class="flex flex-col items-center justify-center py-20 bg-slate-50 dark:bg-slate-800/50 rounded-3xl border-2 border-dashed border-slate-200 dark:border-slate-700 mt-4">
      <div class="text-6xl mb-4">📚</div>
      <h3 class="text-xl font-bold text-slate-900 dark:text-white mb-2">{{ $t('myCourses.emptyTitle') }}</h3>
      <p class="text-slate-500 dark:text-slate-400 text-center max-w-md">{{ $t('myCourses.emptyDesc') }}</p>
      <NuxtLink to="/browse/discovery" class="mt-6 px-6 py-2 bg-blue-600 text-white rounded-lg font-bold hover:bg-blue-700 transition-colors">{{ $t('myCourses.goToDiscovery') }}</NuxtLink>
    </div>

    <!-- MODAL: Enrollment Success -->
    <q-dialog v-model="showEnrollModal" backdrop-filter="blur(4px)">
      <q-card class="rounded-[1.5rem] shadow-2xl p-8 max-w-sm w-full text-center relative overflow-hidden bg-white dark:bg-slate-800">
        <div class="absolute top-0 left-0 w-full h-2 bg-gradient-to-r from-green-400 to-emerald-600"></div>
        <div class="w-16 h-16 bg-green-100 dark:bg-green-900/30 text-green-600 dark:text-green-400 rounded-full flex items-center justify-center text-3xl mx-auto mb-6">
          ✓
        </div>
        <h2 class="text-2xl font-bold mb-2 text-slate-900 dark:text-white">{{ $t('enrollment.successTitle') }}</h2>
        <p class="text-slate-500 dark:text-slate-400 mb-8">{{ $t('enrollment.successDesc') }}</p>
        <div class="flex flex-col gap-3">
          <q-btn
            :to="`/classroom/learning?course_id=${route.query.course_id}`"
            unelevated
            rounded
            color="primary"
            class="w-full py-3 text-lg font-bold shadow-lg"
            :label="$t('enrollment.startNow')"
          />
          <q-btn
            flat
            rounded
            color="grey-7"
            class="w-full py-3 font-bold"
            :label="$t('enrollment.later')"
            @click="showEnrollModal = false"
          />
        </div>
      </q-card>
    </q-dialog>

    <!-- MODAL: Certificate Preview -->
    <q-dialog v-model="showCertModal" backdrop-filter="blur(8px)" full-width full-height>
      <div class="relative bg-white text-slate-900 w-full max-w-5xl aspect-[1.414/1] shadow-2xl rounded-sm p-12 flex flex-col items-center text-center overflow-hidden m-auto">
        <!-- Close Button -->
        <q-btn icon="close" flat round dense class="absolute top-4 right-4 text-slate-400" @click="showCertModal = false" />
        
        <!-- Border Decoration -->
        <div class="absolute inset-4 border-4 border-double border-slate-200 pointer-events-none"></div>

        <div class="relative z-10 w-full h-full flex flex-col justify-center">
          <div class="w-16 h-16 mx-auto mb-6 bg-blue-600 text-white flex items-center justify-center rounded-full font-serif font-bold text-3xl">E</div>
          
          <h1 class="text-4xl font-serif font-bold mb-2 uppercase tracking-widest text-slate-800">{{ $t('certificate.title') }}</h1>
          <div class="w-32 h-1 bg-amber-400 mx-auto mb-8"></div>
          
          <p class="text-slate-500 mb-4 text-lg italic font-serif">{{ $t('certificate.presentedTo') }}</p>
          
          <h2 class="text-5xl font-serif font-bold text-blue-900 mb-6 font-handwriting">{{ currentUser?.firstName }} {{ currentUser?.lastName }}</h2>
          
          <p class="text-slate-500 mb-6 text-lg italic font-serif">{{ $t('certificate.completedDesc') }}</p>
          
          <h3 class="text-2xl font-bold text-slate-800 mb-12">HTML5 Fundamentals</h3>

          <div class="flex justify-between items-end px-12 mt-auto">
            <div class="text-center">
              <div class="w-48 border-b border-slate-800 mb-2 pb-2 italic font-serif text-lg">Somchai K.</div>
              <div class="text-xs text-slate-500 uppercase tracking-wider">{{ $t('certificate.directorSignature') }}</div>
            </div>
            
            <div class="w-24 h-24 bg-gradient-to-br from-amber-300 to-amber-600 rounded-full flex flex-col items-center justify-center text-white border-4 border-white shadow-xl rotate-12 -mt-4">
               <span class="text-[10px] uppercase font-bold tracking-widest opacity-80">Certified</span>
               <span class="font-black text-xl">PASS</span>
            </div>

            <div class="text-center">
              <div class="w-48 border-b border-slate-800 mb-2 pb-2">{{ new Date().toLocaleDateString() }}</div>
              <div class="text-xs text-slate-500 uppercase tracking-wider">{{ $t('certificate.issueDate') }}</div>
            </div>
          </div>
        </div>

        <div class="absolute bottom-6 left-0 w-full text-center">
           <q-btn
             unelevated
             rounded
             color="primary"
             icon="download"
             :label="$t('certificate.downloadPDF')"
             class="font-bold px-6"
             @click="downloadCertificate"
           />
        </div>
      </div>
    </q-dialog>
  </div>
</template>

<style scoped>
/* Custom Font for Signature/Name if desired */
.font-handwriting {
  font-family: 'Dancing Script', cursive, serif; /* Fallback */
}
</style>
