elearning/Frontend-Learner/pages/classroom/quiz.vue

<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 { locale, t } = useI18n()
const route = useRoute()
const router = useRouter()
const $q = useQuasar()
const { fetchCourseLearningInfo, fetchLessonContent, submitQuiz: apiSubmitQuiz, markLessonComplete } = 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)
const isSubmitting = ref(false)

// Quiz Taking State
const currentQuestionIndex = ref(0)
const userAnswers = ref<Record<number, number>>({}) // questionId -> choiceId
const visitedQuestions = ref<Set<number>>(new Set()) // Track visited indices
const quizResult = ref<any>(null)

// Tracking visited questions
watch(currentQuestionIndex, (newVal) => {
    visitedQuestions.value.add(newVal)
}, { immediate: true })

// Helper: Get Status Color Class
const getQuestionStatusClass = (index: number, questionId: number) => {
    // 1. Current = Blue
    if (index === currentQuestionIndex.value) {
        return 'bg-blue-500 text-white border-blue-600 ring-2 ring-blue-200 dark:ring-blue-900'
    }

    const hasAnswer = userAnswers.value[questionId] !== undefined
    const isVisited = visitedQuestions.value.has(index)

    // 2. Completed = Green
    if (hasAnswer) {
        return 'bg-emerald-500 text-white border-emerald-600'
    }

    // 3. Skipped = Orange (Visited but no answer)
    // Note: If we are strictly following "Skipped" definition:
    // "user pressed Skip or moved forward on a skippable question without saving an answer"
    // In this linear flow, merely visiting and leaving empty counts as skipped.
    if (isVisited && !hasAnswer) {
        return 'bg-orange-500 text-white border-orange-600'
    }

    // 4. Not Started = Grey
    return 'bg-slate-200 text-slate-400 border-slate-300 dark:bg-white/5 dark:border-white/5 dark:text-slate-600 hover:bg-slate-300 dark:hover:bg-white/10'
}

const jumpToQuestion = (targetIndex: number) => {
    if (targetIndex === currentQuestionIndex.value) return
    
    // Validation before leaving current (same logic as Next)
    if (targetIndex > currentQuestionIndex.value) {
         // If jumping forward, we must validate the CURRENT question requirements
         // unless we treat grid jumps as free navigation? 
         // Req: "user cannot go Next until the question is answered and saved" (if not skippable).
         // So we must check restriction on the current spot before leaving.
         const isAnswered = userAnswers.value[currentQuestion.value.id] !== undefined
         const isSkippable = quizData.value?.is_skippable
         
         if (!isAnswered && !isSkippable) {
            $q.notify({
                type: 'warning',
                message: t('quiz.pleaseSelectAnswer'),
                position: 'top',
                timeout: 2000
            })
            return
         }
    }
    
    // If jumping backward? Usually allowed freely.
    
    currentQuestionIndex.value = targetIndex
}

// Computed
const currentQuestion = computed(() => {
    if (!quizData.value || !quizData.value.questions) return null
    return quizData.value.questions[currentQuestionIndex.value]
})

const totalQuestions = computed(() => {
    return quizData.value?.questions?.length || 0
})

const hasQuestions = computed(() => totalQuestions.value > 0)

const showQuestionMap = computed(() => $q.screen.gt.sm)

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

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

const lessonProgress = ref<any>(null)

// 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) {
                // Determine if data is directly the quiz or nested
                quizData.value = lessonRes.data.quiz || lessonRes.data
                lessonProgress.value = lessonRes.progress // Capture progress
                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
    }
}

// Helper for shuffling
const shuffleArray = <T>(array: T[]): T[] => {
    return array
        .map(value => ({ value, sort: Math.random() }))
        .sort((a, b) => a.sort - b.sort)
        .map(({ value }) => value)
}

// Quiz Actions
const startQuiz = () => {
  // Deep copy to reset and apply shuffle
  const rawQuiz = JSON.parse(JSON.stringify(quizData.value))
  
  if (rawQuiz) {
      // Shuffle Questions
      if (rawQuiz.shuffle_questions && rawQuiz.questions) {
          rawQuiz.questions = shuffleArray(rawQuiz.questions)
      }
      
      // Shuffle Choices
      if (rawQuiz.shuffle_choices && rawQuiz.questions) {
          rawQuiz.questions.forEach((q: any) => {
              if (q.choices) {
                  q.choices = shuffleArray(q.choices)
              }
          })
      }
      // Update state with shuffled data
      quizData.value = rawQuiz
  }

  currentScreen.value = 'taking'
  currentQuestionIndex.value = 0
  userAnswers.value = {}
  
  if (quizData.value?.time_limit) {
      timeLeft.value = quizData.value.time_limit * 60
      timerInterval = setInterval(() => {
        if (timeLeft.value > 0) timeLeft.value--
        else submitQuiz(true)
      }, 1000)
  }
  
  // Mark first as visited
  visitedQuestions.value = new Set([0])
}

const selectAnswer = (choiceId: number) => {
    if (currentQuestion.value) {
        userAnswers.value[currentQuestion.value.id] = choiceId
    }
}

const nextQuestion = () => {
    if (!currentQuestion.value) return

    // Allow skip if quiz is skippable or question is answered
    const isAnswered = userAnswers.value[currentQuestion.value.id] !== undefined
    const isSkippable = quizData.value?.is_skippable

    if (!isAnswered && !isSkippable) {
        // Show warning
        $q.notify({
            type: 'warning',
            message: t('quiz.pleaseSelectAnswer', 'กรุณาเลือกคำตอบ'),
            position: 'top',
            timeout: 2000
        })
        return
    }

    if (currentQuestionIndex.value < totalQuestions.value - 1) {
        currentQuestionIndex.value++
    }
}

const prevQuestion = () => {
    if (currentQuestionIndex.value > 0) {
        currentQuestionIndex.value--
    }
}

const retryQuiz = () => {
    currentScreen.value = 'start'
    quizResult.value = null
}

const submitQuiz = async (auto = false) => {
  // 1. Manual Validation: Check if all questions are answered
  if (!auto) {
     const answeredCount = Object.keys(userAnswers.value).length
     if (answeredCount < totalQuestions.value) {
        $q.notify({
            type: 'warning',
            message: t('quiz.alertIncomplete', 'กรุณาเลือกคำตอบให้ครบทุกข้อ'),
            position: 'top',
            timeout: 2000
        })
        return
     }

     // Premium Confirmation before submission
     $q.dialog({
         title: `<div class="text-slate-900 dark:text-white font-black text-xl">${t('quiz.warningTitle')}</div>`,
         message: `<div class="text-slate-600 dark:text-slate-300 text-base leading-relaxed mt-2">${t('quiz.submitConfirm')}</div>`,
         html: true,
         persistent: true,
         class: 'rounded-[24px]',
         ok: {
             label: t('common.ok'),
             color: 'primary',
             unelevated: true,
             rounded: true,
             class: 'px-8 font-black'
         },
         cancel: {
             label: t('common.cancel'),
             color: 'grey-7',
             flat: true,
             rounded: true,
             class: 'font-bold'
         }
     }).onOk(() => {
         processSubmitQuiz(auto)
     })
     return
  }

  processSubmitQuiz(auto)
}

const processSubmitQuiz = async (auto = false) => {
  // 2. Start Submission Process
  if (timerInterval) clearInterval(timerInterval)
  
  isSubmitting.value = true
  currentScreen.value = 'result' // Switch to result screen to show progress
  
  try {
      // Prepare Payload
      const answersPayload = Object.entries(userAnswers.value).map(([qId, cId]) => ({
          question_id: Number(qId),
          choice_id: cId
      }))

      // Check if already passed
      const alreadyPassed = lessonProgress.value?.is_passed || lessonProgress.value?.is_completed || false

      // Call API
      const res = await apiSubmitQuiz(courseId, lessonId, answersPayload, alreadyPassed)
      
      if (res.success && res.data) {
          quizResult.value = res.data
          // Update local progress if passed and not previously passed
          if (res.data.is_passed && !alreadyPassed) {
             if (lessonProgress.value) lessonProgress.value.is_passed = true
          }
      } else {
          // Fallback error handling
          $q.notify({
              type: 'negative',
              message: res.error || 'Failed to submit quiz'
          })
      }
  } catch (err) {
      console.error('Submit quiz error:', err)
  } finally {
      isSubmitting.value = false
  }
}

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

  if (currentScreen.value === 'taking') {
      $q.dialog({
          title: `<div class="text-slate-900 dark:text-white font-black text-xl">${t('quiz.exitTitle')}</div>`,
          message: `<div class="text-slate-600 dark:text-slate-300 text-base leading-relaxed mt-2">${t('quiz.exitConfirm')}</div>`,
          html: true,
          persistent: true,
          class: 'rounded-[24px]',
          ok: {
              label: t('common.ok'),
              color: 'primary',
              unelevated: true,
              rounded: true,
              class: 'px-8 font-black'
          },
          cancel: {
              label: t('common.cancel'),
              color: 'grey-7',
              flat: true,
              rounded: true,
              class: 'font-bold'
          }
      }).onOk(() => {
          router.push(target)
      })
  } else {
    router.push(target)
  }
}

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

const reviewQuiz = () => {
    currentScreen.value = 'review'
}

// Helper to get choice label (A, B, C...)
const getChoiceLabel = (index: number) => {
    return String.fromCharCode(65 + index) // 65 is 'A'
}

const getCorrectChoiceId = (questionId: number) => {
    if (!quizResult.value?.answers_review) return null
    // Type checking for safety
    const review = Array.isArray(quizResult.value.answers_review) 
        ? quizResult.value.answers_review.find((r: any) => r.question_id === questionId)
        : null
    return review ? review.correct_choice_id : null
}
</script>

<template>
  <q-layout view="hHh lpR fFf" class="bg-slate-50 dark:bg-[#0b0f1a]"> <!-- Ensure background matches -->
    <q-page-container>
      <q-page>
        <div class="quiz-shell min-h-screen bg-slate-50 dark:bg-[#0b0f1a] text-slate-900 dark:text-slate-200 antialiased selection:bg-blue-500/20 transition-colors">
    <!-- Header -->
    <header class="h-14 bg-white dark:!bg-[var(--bg-surface)] 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="inline-flex items-center gap-2 text-slate-900 dark:text-white hover:text-blue-600 dark:hover:text-blue-300 transition-all font-black text-sm md:text-base group mr-4" 
              @click="confirmExit"
            >
              <q-icon name="arrow_back" size="24px" class="transition-transform group-hover:-translate-x-1" />
              <span>{{ $t('quiz.exitTitle') }}</span>
            </button>
            <div class="w-[1px] h-4 bg-slate-300 dark:bg-white/10 mx-4"/>
            <h1 class="text-base font-bold text-slate-900 dark:text-white truncate max-w-[200px] md:max-w-md hidden md:block">
                {{ currentScreen === 'review' ? $t('quiz.reviewAnswers') : (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>

      <div v-else-if="!quizData || !hasQuestions" 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 text-center">
              <div class="w-20 h-20 rounded-3xl bg-amber-50 dark:bg-amber-500/10 border border-amber-100 dark:border-amber-500/20 flex items-center justify-center mx-auto mb-6">
                  <q-icon name="warning" size="2.5rem" color="warning" />
              </div>
              <h2 class="text-2xl font-black text-slate-900 dark:text-white mb-2">{{ $t('quiz.noQuizData') }}</h2>
              <p class="text-slate-500 dark:text-slate-400 mb-8">{{ $t('quiz.noQuizDesc') }}</p>
              <button 
                class="px-8 py-3 bg-blue-600 text-white rounded-xl hover:bg-blue-500 transition-all font-black"
                @click="confirmExit"
              >
                {{ $t('quiz.backToLesson') }}
              </button>
          </div>
      </div>

      <template v-else>
          <!-- 1. START SCREEN -->
          <div v-if="currentScreen === 'start'" class="w-full max-w-[640px] animate-fade-in py-12">
             <!-- ... (Start Screen is unchanged but needs to be here for context) ... -->
             <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="2.5rem" color="primary" class="dark:text-blue-400" />
                 </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>
                 <div class="flex justify-center gap-4 text-sm text-slate-500 dark:text-slate-400 mt-2">
                      <span v-if="quizData?.questions?.length"><q-icon name="format_list_numbered" /> {{ quizData.questions.length }} {{ $t('quiz.questions') }}</span>
                      <span v-if="quizData?.time_limit"><q-icon name="schedule" /> {{ quizData.time_limit }} {{ $t('quiz.minutes') }}</span>
                 </div>
                 <p class="text-[13px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-widest leading-none mt-6">
                     {{ $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 -->
          <!-- 2. TAKING SCREEN -->
          <div v-if="currentScreen === 'taking'" class="w-full max-w-[840px] animate-fade-in py-12">
             <div v-if="currentQuestion" class="bg-white dark:!bg-[#1e293b] border border-slate-200 dark:border-white/5 rounded-[32px] p-8 md:p-12 shadow-xl relative overflow-hidden">

                 <!-- Progress Bar -->
                 <div class="absolute top-0 left-0 right-0 h-1.5 bg-slate-100 dark:bg-white/5">
                     <div class="h-full bg-blue-500 transition-all duration-300" :style="{ width: ((currentQuestionIndex + 1) / totalQuestions) * 100 + '%' }"></div>
                 </div>

                 <!-- Question Map / Pagination -->
                 <div class="flex flex-wrap gap-2 mb-8 mt-4">
                     <button
                         v-for="(q, idx) in quizData?.questions"
                         :key="q.id"
                         @click="jumpToQuestion(Number(idx))"
                         class="w-8 h-8 md:w-10 md:h-10 rounded-lg flex items-center justify-center text-xs md:text-sm font-bold transition-all border"
                         :class="getQuestionStatusClass(Number(idx), q.id)"
                     >
                         {{ Number(idx) + 1 }}
                     </button>
                 </div>

                 <!-- Question Title -->
                 <h3 class="text-xl md:text-2xl font-bold text-slate-900 dark:text-white mb-10 leading-relaxed">
                     {{ getLocalizedText(currentQuestion.question) }}
                 </h3>

                 <!-- Choices -->
                 <div class="flex flex-col gap-4 mb-12">
                     <button 
                         v-for="choice in currentQuestion.choices" 
                         :key="choice.id"
                         @click="selectAnswer(choice.id)"
                         class="group relative w-full p-5 rounded-2xl border-2 text-left transition-all duration-200 flex items-center gap-4"
                         :class="userAnswers[currentQuestion.id] === choice.id 
                             ? 'border-blue-500 bg-blue-50 dark:bg-blue-500/10' 
                             : 'border-slate-100 dark:border-white/10 hover:border-blue-200 dark:hover:border-blue-500/30 bg-transparent'"
                     >
                         <div class="w-6 h-6 rounded-full border-2 flex items-center justify-center flex-shrink-0 transition-colors"
                             :class="userAnswers[currentQuestion.id] === choice.id ? 'border-blue-500 bg-blue-500' : 'border-slate-300 dark:border-white/20 group-hover:border-blue-400'"
                         >
                             <q-icon v-if="userAnswers[currentQuestion.id] === choice.id" name="check" size="xs" class="text-white" />
                         </div>
                         <span class="text-slate-700 dark:text-slate-200 font-medium text-lg">{{ getLocalizedText(choice.text) }}</span>
                     </button>
                 </div>



                 <!-- Controls -->
                 <div class="flex justify-between items-center pt-8 border-t border-slate-100 dark:border-white/5">
                     <button 
                         @click="prevQuestion" 
                         :disabled="currentQuestionIndex === 0"
                         class="px-6 py-3 rounded-xl font-bold text-slate-600 dark:text-slate-300 bg-slate-100 dark:bg-white/5 hover:bg-slate-200 dark:hover:bg-white/10 disabled:opacity-30 disabled:cursor-not-allowed transition-all flex items-center gap-2"
                     >
                         <q-icon name="arrow_back" /> {{ $t('common.back') }}
                     </button>

                     <button 
                         v-if="currentQuestionIndex < totalQuestions - 1"
                         @click="nextQuestion"
                         class="px-8 py-3 bg-blue-600 hover:bg-blue-500 text-white rounded-xl font-bold transition-all shadow-lg shadow-blue-500/20 flex items-center gap-2"
                     >
                         {{ $t('common.next') }} <q-icon name="arrow_forward" />
                     </button>
                     <button 
                         v-else
                         @click="submitQuiz(false)"
                         class="px-8 py-3 bg-blue-600 text-white rounded-xl font-bold hover:bg-blue-500 transition-all shadow-lg shadow-blue-500/30 flex items-center gap-2"
                     >
                         {{ $t('quiz.submitValues') }} <q-icon name="check" />
                     </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 relative overflow-hidden">
                 
                 <div v-if="isSubmitting" class="absolute inset-0 bg-white/80 dark:bg-slate-900/80 z-20 flex flex-col items-center justify-center">
                    <q-spinner color="primary" size="3em" />
                    <p class="mt-4 font-bold animate-pulse">{{ $t('quiz.submitting') }}</p>
                 </div>

                 <div class="mb-8 relative z-10">
                     <div class="w-28 h-28 rounded-full flex items-center justify-center mx-auto mb-6 shadow-xl border-4"
                        :class="quizResult?.is_passed ? 'bg-emerald-50 dark:bg-emerald-500/10 border-emerald-100 dark:border-emerald-500/20' : 'bg-red-50 dark:bg-red-500/10 border-red-100 dark:border-red-500/20'"
                     >
                         <q-icon :name="quizResult?.is_passed ? 'emoji_events' : 'close'" size="4rem" :color="quizResult?.is_passed ? 'positive' : 'negative'" />
                     </div>
                     <h2 class="text-3xl font-black mb-2 text-slate-900 dark:text-white uppercase tracking-tight">
                         {{ quizResult?.is_passed ? $t('quiz.resultPassed') : $t('quiz.resultFailed') }}
                     </h2>
                     <p class="text-slate-500 dark:text-slate-400 font-medium text-lg">
                         {{ quizResult?.is_passed ? $t('quiz.passMessage') : $t('quiz.failMessage') }}
                     </p>
                 </div>

                 <!-- Score Card -->
                 <div class="bg-slate-50 dark:bg-[#0b121f] rounded-3xl p-6 mb-8 flex items-center justify-around border border-slate-100 dark:border-white/5">
                     <div class="text-center">
                         <div class="text-xs font-black text-slate-400 uppercase tracking-widest mb-1">{{ $t('quiz.scoreLabel') }}</div>
                         <div class="text-4xl font-black text-blue-600 dark:text-blue-400">{{ quizResult?.score }}<span class="text-lg text-slate-400 font-bold">/{{ quizResult?.total_score }}</span></div>
                     </div>
                     <div class="w-[1px] h-12 bg-slate-200 dark:bg-white/10"></div>
                     <div class="text-center">
                         <div class="text-xs font-black text-slate-400 uppercase tracking-widest mb-1">{{ $t('quiz.correctLabel') }}</div>
                         <div class="text-4xl font-black text-emerald-500">{{ quizResult?.correct_answers }}<span class="text-lg text-slate-400 font-bold">/{{ quizResult?.total_questions }}</span></div>
                     </div>
                 </div>

                 <div class="space-y-4 relative z-10">
                    <button 
                      @click="confirmExit"
                      class="w-full py-4 bg-blue-600 hover:bg-blue-500 text-white rounded-[20px] font-black text-sm shadow-xl shadow-blue-600/20 hover:scale-[1.02] active:scale-[0.98] transition-all"
                    >
                       {{ $t('quiz.backToLesson') }}
                    </button>
                    
                    <button 
                      v-if="!quizResult?.is_passed"
                      @click="retryQuiz"
                      class="w-full py-4 text-slate-500 hover:text-slate-800 dark:hover:text-white font-bold text-sm transition-colors"
                    >
                       {{ $t('quiz.retryBtn') }}
                    </button>

                    <button 
                      v-if="quizResult?.is_passed"
                      @click="reviewQuiz"
                      class="w-full py-2 text-blue-500 hover:text-blue-700 dark:hover:text-blue-400 font-bold text-sm transition-colors mt-2"
                    >
                       {{ $t('quiz.reviewAnswers') }}
                    </button>
                 </div>
             </div>
          </div>

          <!-- 4. REVIEW SCREEN -->
          <div v-if="currentScreen === 'review'" class="w-full max-w-[840px] animate-fade-in py-12 pb-24">
             <div class="space-y-6">
                 <div 
                   v-for="(question, qIndex) in quizData?.questions" 
                   :key="question.id"
                   class="bg-white dark:!bg-[#1e293b] border border-slate-200 dark:border-white/5 rounded-[24px] p-8 shadow-sm"
                 >
                    <div class="flex items-start gap-4">
                        <span class="flex-shrink-0 w-8 h-8 rounded-lg bg-slate-100 dark:bg-white/10 flex items-center justify-center font-black text-slate-500 dark:text-slate-300 text-sm">
                            {{ Number(qIndex) + 1 }}
                        </span>
                        <div class="flex-1">
                            <h3 class="font-bold text-lg text-slate-900 dark:text-white mb-6">{{ getLocalizedText(question.question) }}</h3>
                            
                            <div class="grid gap-3">
                                <div 
                                  v-for="(choice, cIndex) in question.choices" 
                                  :key="choice.id"
                                  class="flex items-center gap-3 p-4 rounded-xl border-2 transition-all relative overflow-hidden"
                                  :class="{
                                      'border-emerald-500 bg-emerald-50 dark:bg-emerald-500/10': choice.id === getCorrectChoiceId(question.id),
                                      'border-red-500 bg-red-50 dark:bg-red-500/10': userAnswers[question.id] === choice.id && choice.id !== getCorrectChoiceId(question.id),
                                      'border-slate-100 dark:border-white/5 opacity-80 dark:opacity-40': userAnswers[question.id] !== choice.id && choice.id !== getCorrectChoiceId(question.id)
                                  }"
                                >
                                    <!-- Indicator Icon -->
                                    <div 
                                      class="w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0 font-bold text-sm border-2"
                                      :class="{
                                          'bg-emerald-500 border-emerald-500 text-white': choice.id === getCorrectChoiceId(question.id),
                                          'bg-red-500 border-red-500 text-white': userAnswers[question.id] === choice.id && choice.id !== getCorrectChoiceId(question.id),
                                          'border-slate-300 text-slate-400': choice.id !== getCorrectChoiceId(question.id) && userAnswers[question.id] !== choice.id
                                      }"
                                    >
                                        <q-icon v-if="choice.id === getCorrectChoiceId(question.id)" name="check" size="16px" />
                                        <q-icon v-else-if="userAnswers[question.id] === choice.id" name="close" size="16px" />
                                        <span v-else>{{ getChoiceLabel(Number(cIndex)) }}</span>
                                    </div>

                                    <span class="font-medium text-slate-700 dark:text-slate-300">{{ getLocalizedText(choice.text) }}</span>
                                    
                                    <!-- Label Badge -->
                                    <div v-if="choice.id === getCorrectChoiceId(question.id)" class="ml-auto px-2 py-0.5 bg-emerald-100 dark:bg-emerald-500/20 text-emerald-700 dark:text-emerald-300 text-xs font-bold rounded uppercase tracking-wider">
                                        {{ $t('quiz.correctLabel', 'Correct') }}
                                    </div>
                                    <div v-if="userAnswers[question.id] === choice.id && choice.id !== getCorrectChoiceId(question.id)" class="ml-auto px-2 py-0.5 bg-red-100 dark:bg-red-500/20 text-red-700 dark:text-red-300 text-xs font-bold rounded uppercase tracking-wider">
                                        {{ $t('quiz.yourAnswer', 'Your Answer') }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                 </div>

                 <div class="fixed bottom-0 left-0 right-0 p-4 bg-white/80 dark:bg-[#0b0f1a]/90 backdrop-blur-md border-t border-slate-200 dark:border-white/5 flex justify-center z-50">
                    <button 
                      @click="confirmExit"
                      class="px-8 py-3 bg-blue-600 hover:bg-blue-500 text-white rounded-xl font-bold shadow-lg shadow-blue-500/30"
                    >
                       {{ $t('quiz.backToLesson') }}
                    </button>
                 </div>
             </div>
          </div>
      </template>
    </main>


        </div> <!-- Close quiz-shell -->


       <!-- Question Navigator Sidebar/Floating (Desktop) - Outside Main Flow -->
       <!-- Using QPageSticky properly inside q-page/q-layout context we added -->
      <q-page-sticky
        v-if="false"
        position="top-right"
        :offset="[32, 110]" 
        class="z-[2000] flex animate-fade-in" 
      >
          <div class="w-64 bg-white dark:!bg-[#1e293b] border border-slate-200 dark:border-white/5 rounded-2xl p-4 shadow-xl">
            <h3 class="text-xs font-bold text-slate-400 uppercase tracking-widest mb-4 flex items-center gap-2">
                <q-icon name="grid_view" /> {{ $t('quiz.questionMap', 'Question Map') }}
            </h3>

            <div class="grid grid-cols-5 gap-2 max-h-[60vh] overflow-y-auto custom-scrollbar pr-1">
                <button
                    v-for="(q, idx) in quizData?.questions"
                    :key="q.id"
                    @click="jumpToQuestion(Number(idx))"
                    class="w-full aspect-square rounded-lg flex items-center justify-center text-xs font-bold transition-all border"
                    :class="getQuestionStatusClass(Number(idx), q.id)"
                >
                    {{ Number(idx) + 1 }}
                </button>
            </div>


          </div>
      </q-page-sticky>

      </q-page>
    </q-page-container>
  </q-layout>
</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>