<script setup lang="ts">
/**
 * @file quiz.vue
 * @description Quiz Interface.
 * Manages the entire quiz lifecycle: Start -> Taking -> Results -> Review.
 * Features a timer, question navigation, and detailed result analysis.
 */

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

const { t } = useI18n()
const route = useRoute()
const router = useRouter()
const { fetchCourseLearningInfo, fetchLessonContent } = useCourse()

// State Management
const currentScreen = ref<'start' | 'taking' | 'result' | 'review'>('start')
const timeLeft = ref(0) 
let timerInterval: ReturnType<typeof setInterval> | null = null

const courseId = Number(route.query.course_id)
const lessonId = Number(route.query.lesson_id)

const courseData = ref<any>(null)
const quizData = ref<any>(null)
const isLoading = ref(true)

// Helper for localization
const getLocalizedText = (text: any) => {
  if (!text) return ''
  if (typeof text === 'string') return text
  return text.th || text.en || ''
}

// Data Fetching
const loadData = async () => {
    isLoading.value = true
    try {
        if (courseId) {
            const courseRes = await fetchCourseLearningInfo(courseId)
            if (courseRes.success) courseData.value = courseRes.data
        }
        
        if (courseId && lessonId) {
            const lessonRes = await fetchLessonContent(courseId, lessonId)
            if (lessonRes.success) {
                quizData.value = lessonRes.data.quiz || lessonRes.data
                if (quizData.value?.time_limit) {
                    timeLeft.value = quizData.value.time_limit * 60
                }
            }
        }
    } catch (error) {
        console.error('Error loading quiz data:', error)
    } finally {
        isLoading.value = false
    }
}

// Timer Logic
const timerDisplay = computed(() => {
  const minutes = Math.floor(timeLeft.value / 60)
  const seconds = timeLeft.value % 60
  return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
})

const startQuiz = () => {
  currentScreen.value = 'taking'
  timerInterval = setInterval(() => {
    if (timeLeft.value > 0) timeLeft.value--
    else submitQuiz(true)
  }, 1000)
}

const submitQuiz = (auto = false) => {
  if (auto || confirm(t('quiz.submitConfirm'))) {
    if (timerInterval) clearInterval(timerInterval)
    currentScreen.value = 'result'
  }
}

const confirmExit = () => {
  const target = courseId ? `/classroom/learning?course_id=${courseId}` : '/dashboard/my-courses'

  if (currentScreen.value === 'taking') {
    if (confirm(t('quiz.exitConfirm'))) {
        router.push(target)
    }
  } else {
    router.push(target)
  }
}

onMounted(() => {
    loadData()
})

onUnmounted(() => {
  if (timerInterval) clearInterval(timerInterval)
})
</script>

<template>
  <div class="quiz-shell min-h-screen bg-slate-50 dark:bg-[#0b0f1a] text-slate-900 dark:text-slate-200 font-inter antialiased selection:bg-blue-500/20 transition-colors">
    <!-- Header -->
    <header class="h-14 bg-white dark:bg-[#161b22] fixed top-0 inset-x-0 z-[100] flex items-center px-6 border-b border-slate-200 dark:border-white/5 transition-colors">
      <div class="flex items-center w-full justify-between">
        <div class="flex items-center">
            <button class="flex items-center gap-2 text-sm font-bold text-slate-500 hover:text-slate-800 dark:text-slate-400 dark:hover:text-white transition-colors" @click="confirmExit">
              <q-icon name="arrow_back" />
              <span>{{ $t('quiz.exitTitle') }}</span>
            </button>
            <div class="w-[1px] h-4 bg-slate-300 dark:bg-white/10 mx-4"/>
            <h1 class="text-sm font-black text-slate-900 dark:text-white uppercase tracking-tight truncate max-w-[200px] md:max-w-md">
                {{ quizData ? getLocalizedText(quizData.title) : (courseData ? getLocalizedText(courseData.course.title) : $t('quiz.startTitle')) }}
            </h1>
        </div>
        
        <div v-if="currentScreen === 'taking'" class="flex items-center gap-3">
            <div class="hidden md:block text-[10px] font-black uppercase tracking-widest text-slate-400">{{ $t('quiz.timeLeft') }}</div>
            <div class="bg-blue-50 dark:bg-blue-500/10 text-blue-600 dark:text-blue-400 px-3 py-1 rounded-full font-mono font-bold text-sm border border-blue-100 dark:border-blue-500/20">
                {{ timerDisplay }}
            </div>
        </div>
      </div>
    </header>

    <!-- Main Content Area -->
    <main class="pt-14 h-screen flex items-center justify-center overflow-y-auto px-4 custom-scrollbar">
      
      <div v-if="isLoading" class="flex flex-col items-center gap-4">
          <q-spinner color="primary" size="3rem" />
          <p class="text-sm font-medium text-slate-500">{{ $t('classroom.loadingTitle') }}</p>
      </div>

      <template v-else>
          <!-- 1. START SCREEN -->
          <div v-if="currentScreen === 'start'" class="w-full max-w-[640px] animate-fade-in py-12">
            <div class="bg-white dark:bg-[#1e293b] border border-slate-200 dark:border-white/5 rounded-[32px] p-8 md:p-14 shadow-lg dark:shadow-2xl relative overflow-hidden transition-colors">
              
              <div class="flex justify-center mb-10">
                <div class="w-20 h-20 rounded-3xl bg-blue-50 dark:bg-blue-500/10 border border-blue-100 dark:border-blue-500/20 flex items-center justify-center shadow-inner">
                   <q-icon name="quiz" size="2rem" color="primary" />
                </div>
              </div>

              <div class="text-center mb-10">
                <h2 class="text-2xl font-black text-slate-900 dark:text-white mb-2 tracking-tight">
                    {{ quizData ? getLocalizedText(quizData.title) : $t('quiz.startTitle') }}
                </h2>
                <p class="text-[13px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-widest leading-none">
                    {{ $t('quiz.preparationTitle') }}
                </p>
              </div>

              <!-- Instruction Box -->
              <div class="bg-slate-50 dark:bg-[#0b121f]/80 p-8 rounded-3xl mb-8 border border-slate-100 dark:border-white/5">
                 <h3 class="text-[12px] font-black text-slate-500 dark:text-slate-400 mb-6 uppercase tracking-[0.2em] flex items-center gap-2">
                    {{ $t('quiz.instructionTitle') }}
                 </h3>
                 <ul class="space-y-4">
                    <li class="flex items-start gap-3">
                       <span class="w-1.5 h-1.5 rounded-full bg-blue-500 mt-1.5 flex-shrink-0"/>
                       <span class="text-sm text-slate-600 dark:text-slate-300 font-medium leading-relaxed">
                           {{ quizData?.description ? getLocalizedText(quizData.description) : $t('quiz.instruction1') }}
                       </span>
                    </li>
                 </ul>
              </div>

              <button 
                class="w-full py-5 bg-blue-600 hover:bg-blue-500 text-white rounded-[20px] font-black text-sm tracking-wider transition-all shadow-xl shadow-blue-600/20 active:scale-[0.98]"
                @click="startQuiz"
              >
                {{ $t('quiz.startBtn') }}
              </button>
            </div>
          </div>

          <!-- 2. TAKING SCREEN -->
          <div v-if="currentScreen === 'taking'" class="w-full max-w-[840px] animate-fade-in py-12 text-center">
             <div class="bg-white dark:bg-[#1e293b] border border-slate-200 dark:border-white/5 rounded-[32px] p-10 shadow-xl">
                 <div v-if="quizData?.questions && quizData.questions.length > 0">
                    <!-- Questions iterate here if available -->
                    <div class="text-slate-500">{{ $t('quiz.underDevelopment') }}</div>
                 </div>
                 <div v-else class="mb-10">
                     <h2 class="text-xl font-bold mb-2 text-slate-900 dark:text-white">{{ $t('quiz.noQuizData') }}</h2>
                     <p class="text-slate-500 dark:text-slate-400">{{ $t('quiz.noQuizDesc') }}</p>
                 </div>
                 
                 <div class="pt-8 border-t border-slate-100 dark:border-white/5">
                    <button @click="confirmExit" class="px-8 py-4 bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300 rounded-2xl font-bold hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors">
                        {{ $t('quiz.backToLesson') }}
                    </button>
                 </div>
             </div>
          </div>

           <!-- 3. RESULT SCREEN -->
          <div v-if="currentScreen === 'result'" class="w-full max-w-[640px] animate-fade-in py-12">
             <div class="bg-white dark:bg-[#1e293b] border border-slate-200 dark:border-white/5 rounded-[40px] p-10 shadow-2xl text-center">
                 <div class="mb-8">
                     <div class="w-24 h-24 bg-emerald-50 dark:bg-emerald-500/10 rounded-full flex items-center justify-center mx-auto mb-6">
                         <q-icon name="check_circle" size="3rem" class="text-emerald-500" />
                     </div>
                     <h2 class="text-2xl font-black mb-2 text-slate-900 dark:text-white">{{ $t('quiz.scoreTitle') }}</h2>
                     <p class="text-slate-500 dark:text-slate-400">{{ $t('quiz.passMessage') }}</p>
                 </div>

                 <div class="space-y-4 mt-8">
                    <button 
                      @click="confirmExit"
                      class="w-full py-5 bg-blue-600 text-white rounded-[24px] font-black text-sm shadow-lg shadow-blue-500/20"
                    >
                       {{ $t('quiz.backToLesson') }}
                    </button>
                 </div>
             </div>
          </div>
      </template>
    </main>
  </div>
</template>

<style scoped>
.custom-scrollbar::-webkit-scrollbar {
  width: 4px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
}
.animate-fade-in {
  animation: fadeIn 0.4s ease-out forwards;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
</style>
