<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
  }
})

// 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 // No status param = all
    : activeFilter.value === 'completed' 
      ? 'COMPLETED' 
      : 'IN_PROGRESS' // 'progress' -> IN_PROGRESS

  // Actually, 'all' in UI might mean showing everything locally, OR fetching everything.
  // The API supports status filter. Let's use clean fetching for simplicity and accuracy.
  // Although checking the previous mock, 'all' showed both. 
  // If we want 'all' to show everything, we should pass undefined status.
  // If we filter client side, we fetch ALL first.
  
  // Strategy: Fetch based on filter.
  // If 'all', do not send status.
  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, // CourseCard might expect course id for links, or enrollment id? Usually CourseCard links to course detail.
      // Wait, CourseCard likely needs course ID to link to /classroom/learning/:id
      enrollment_id: item.id,
      title: getLocalizedText(item.course.title),
      progress: item.progress_percentage,
      completed: item.status === 'COMPLETED',
      thumbnail_url: item.course.thumbnail_url // CourseCard might need this
    }))
  }
  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>
    <!-- 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">{{ $t('sidebar.myCourses') }}</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="activeFilter = 'all'"
        >
          {{ $t('myCourses.filterAll') }}
        </button>
        <button 
          :class="activeFilter === 'progress' ? 'btn btn-primary' : 'btn btn-secondary'" 
          style="white-space: nowrap;"
          @click="activeFilter = 'progress'"
        >
          {{ $t('myCourses.filterProgress') }}
        </button>
        <button 
          :class="activeFilter === 'completed' ? 'btn btn-primary' : 'btn btn-secondary'" 
          style="white-space: nowrap;"
          @click="activeFilter = 'completed'"
        >
          {{ $t('myCourses.filterCompleted') }}
        </button>
      </div>
    </div>

    <!-- Courses Grid -->
    <div v-if="isLoading" class="flex justify-center py-20">
       <div class="spinner-border animate-spin inline-block w-8 h-8 border-4 rounded-full" role="status">
          <span class="visually-hidden">Loading...</span>
       </div>
    </div>
    <div v-else class="my-courses-grid">
      <template v-for="course in enrolledCourses" :key="course.id">
        <!-- In Progress Course Card -->
        <CourseCard 
          v-if="!course.completed"
          :title="course.title"
          :progress="course.progress"
          :image="course.thumbnail_url"
          show-continue
        />
        <!-- Completed Course Card -->
        <CourseCard 
          v-else
          :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="empty-state">
      <div class="empty-state-icon">📚</div>
      <h3 class="empty-state-title">{{ $t('myCourses.emptyTitle') }}</h3>
      <p class="empty-state-description">{{ $t('myCourses.emptyDesc') }}</p>
      <NuxtLink to="/browse/discovery" class="btn btn-primary">{{ $t('myCourses.goToDiscovery') }}</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">{{ $t('enrollment.successTitle') }}</h2>
        <p class="text-muted mb-6">{{ $t('enrollment.successDesc') }}</p>
        <div class="flex flex-col gap-2">
          <NuxtLink to="/classroom/learning" class="btn btn-primary w-full">{{ $t('enrollment.startNow') }}</NuxtLink>
          <button class="btn btn-secondary w-full" @click="showEnrollModal = false">{{ $t('enrollment.later') }}</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">{{ $t('certificate.title') }}</h1>
          <div style="width: 100px; height: 2px; background: #D4AF37; margin: 0 auto 24px;"/>
          
          <p style="color: #64748B; margin-bottom: 16px; font-size: 16px;">{{ $t('certificate.presentedTo') }}</p>
          
          <h2 class="cert-name">{{ $t('userMenu.home') === 'Home' ? 'Somchai Jaidee' : 'สมชาย ใจดี' }}</h2>
          
          <p style="color: #64748B; margin-bottom: 16px; font-size: 16px;">{{ $t('certificate.completedDesc') }}</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;">{{ $t('certificate.directorSignature') }}</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;">{{ $t('certificate.passed') }}</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/12/2026</div>
              <div style="font-size: 12px; color: #64748B;">{{ $t('certificate.issueDate') }}</div>
            </div>
          </div>
          
          <!-- Download Button -->
          <div style="margin-top: 32px; text-align: center;">
            <button class="btn btn-primary" @click="downloadCertificate">
              ⬇ {{ $t('certificate.downloadPDF') }}
            </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>
