@tinyweb_dev/oe-exam-sdk 0.1.28 → 0.1.29

package/dist/components/exams/take/ExamTakingPageContainer.js

@@ -1 +1,955 @@
-"use client";import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import{useEffect as i,useRef as s,useState as r,useMemo as a,useCallback as o}from"react";import d from"next/image";import l from"../../../components/themes/summer-sky/assets/images/clock.png";import c from"../../../components/themes/summer-sky/assets/images/submit.png";import m from"../../../components/themes/summer-sky/assets/images/has_answered.png";import{toast as p}from"sonner";import{Loader2 as u}from"lucide-react";import{t as g}from"../../../shared/lib/i18n";import{transformAnswersForSubmission as h}from"./utils/answer-transformers";import{getThemeForLevel as x,normalizeExamTheme as b}from"../../../shared/lib/themes";import{useExamTakingStore as f}from"../../../shared/lib/stores/examTakingStore";import{useGradingTransientStore as I}from"../../../shared/lib/stores/gradingTransientStore";import{AlertDialog as w,AlertDialogAction as E,AlertDialogCancel as S,AlertDialogContent as y,AlertDialogDescription as _,AlertDialogFooter as v,AlertDialogHeader as N,AlertDialogTitle as A}from"../../../components/ui/alert-dialog";import{useExamTimer as T}from"./hooks/useExamTimer";import{useAutoSave as C}from"./hooks/useAutoSave";import{useProctoringCamera as k}from"./hooks/useProctoringCamera";import{getStandardExamTheme as P}from"../../../components/themes";import{QuestionRenderer as q}from"./components/QuestionRenderer";import{FullscreenLoading as M}from"../entry/fullscreen-loading";import{SummerSkySubmitModal as R}from"../../../components/themes/summer-sky/SummerSkySubmitModal";import{SummerSkyExitModal as D}from"../../../components/themes/summer-sky/SummerSkyExitModal";import{EnglishCertificationExamLayout as L,EnglishCertificationQuestionRenderer as G,scrollToEnglishCertQuestion as Q}from"../../../components/themes/english-certification";import{groupQuestionsByPart as B}from"./utils/question-transformers";import{unwrap as O,unwrapAttempt as Y}from"./exam-taking.utils";import{ExamTakingApiProvider as F}from"./ExamTakingApiContext";function K({roomId:F,api:K,onNavigate:U,resultPath:$=e=>`/student/results/${e}`,fallbackPath:V="/student/contests/discover",proctoringEnabled:j=!1,achieversExamTitle:H,onSubmitted:z}){const W=f(),J=s(!1),X=o((e,t=!1)=>{U?U(e,{replace:t}):"undefined"!=typeof window&&(t?window.location.replace(e):window.location.href=e)},[U]),{isCameraActive:Z}=k({api:K,attemptId:W.attemptId,intervalMs:1e4,enabled:j}),[ee,te]=r(!0),ne=W.currentPartIndex,ie=W.currentQuestionGlobalIndex,se=o(e=>{const t=f.getState().currentPartIndex,n="function"==typeof e?e(t):e;f.getState().setCurrentPartIndex(n)},[]),re=o(e=>{const t=f.getState().currentQuestionGlobalIndex,n="function"==typeof e?e(t):e;f.getState().setCurrentQuestionGlobalIndex(n)},[]),[ae,oe]=r([]),[de,le]=r("SUMMER_SKY"),[ce,me]=r(""),[pe,ue]=r(!1),[ge,he]=r(!1),[xe,be]=r(null),[fe,Ie]=r(""),we=o(e=>{f.getState().markIntroPlayed(e)},[]),Ee="TOEIC"===W.examType||"ENGLISH_CERTIFICATION"===ce,Se=a(()=>{if(!Ee||0===W.parts.length)return ne;const e=W.currentIndex;for(let t=0;t<W.parts.length;t++){const n=W.parts[t],i=n.startIndex??0,s=n.endIndex??i;if(e>=i&&e<=s)return t}return 0},[Ee,W.currentIndex,W.parts,ne]);i(()=>{(async()=>{try{te(!0);let e=O(await K.getActiveAttempt(F));e||(e=Y(O(await K.startAttempt(F))));let t=null;try{t=K.getRoom?O(await K.getRoom(F)):null,t&&be(t)}catch{}const{examTemplate:n,questions:i}=O(await K.getQuestions(e.id));n?.title&&Ie(n.title);const s=n?.parts??e.exam?.template?.parts,r=B(i,s),a=n?.subTitle??null,o=(r.every(e=>e.questions.every(e=>"SPEAKING"===e.question_skill_type)),r.some(e=>"SPEAKING"===e.category||e.questions.every(e=>"SPEAKING"===e.question_skill_type)));oe(r);const d=n?.theme||e?.exam?.template?.theme||e?.exam?.theme||t?.exam?.template?.theme||t?.exam?.theme||"",l=b(d);if(o){const e=["SUMMER_SKY"].includes(d);le(e?d:"SUMMER_SKY")}const c=new Date(e.startedAt),m=60*e.durationMinutes*1e3,u=c.getTime()+m,h=Date.now();if(0===Math.max(0,u-h)){p.info(g("student.exam.take.timeExpired"));try{await K.submitAttempt(e.id)}catch{}return f.persist.clearStorage(),void X($(e.id))}W.hydrateFromServer({attemptId:e.id,examRoomId:F,questions:i.map(e=>({id:e.id,question_type:e.question_type,content:e.content,is_example:e.is_example,total_points:e.total_points,part_id:e.part_id,part_no:e.part_no,question_number:e.question_number})),durationMinutes:e.durationMinutes,startedAt:e.startedAt,examType:a??void 0,examTitle:n?.title??void 0,parts:s}),a&&W.setExamType(a),me(l),s&&W.setParts(s),te(!1)}catch(e){const t=e?.response?.data?.errorCode;if("ATTEMPT_ALREADY_SUBMITTED"===t)return p.info(g("student.exam.take.submitted")),void X(V,!0);console.error("Failed to load exam data:",e),p.error(g("student.exam.take.loadError")),X(V,!0)}})()},[F]);const ye=a(()=>ae.length>0&&ae.every(e=>e.questions.every(e=>"SPEAKING"===e.question_skill_type)),[ae]),_e=a(()=>{const e=ae[ne];return!!e&&(("SPEAKING_DESCRIBE_IMAGE"!==e.questionType&&"SPONTANEOUS_QA"!==e.questionType&&"SPEAKING_CUE_CARD"!==e.questionType&&"READ_DISPLAYED_CONTENT"!==e.questionType||"CAMBRIDGE_YLE"!==ce)&&("SPEAKING"===e.category||e.questions.every(e=>"SPEAKING"===e.question_skill_type)))},[ae,ne,ce]),{remainingSeconds:ve,warningLevel:Ne}=T({onTimeExpired:async()=>{p.info(g("student.exam.take.autoSubmit")),await ke()},onWarningThreshold:ye||Ee?void 0:()=>{p.warning(g("student.exam.take.timeWarning"))},warningThresholdSeconds:ye||Ee?void 0:300,warningThresholds:Ee?[{seconds:900,level:"warning",callback:()=>p.warning("Còn 15 phút!",{duration:3e3})},{seconds:300,level:"critical",callback:()=>p.warning("Còn 5 phút! Hãy nộp bài ngay!",{duration:5e3})}]:ye?[{seconds:300,level:"warning",callback:()=>p.warning("Còn 5 phút! Hãy hoàn thành bài thi.",{duration:5e3})},{seconds:120,level:"critical",callback:()=>p.warning("Còn 2 phút! Bài thi sẽ được tự động nộp.",{duration:5e3})}]:void 0}),Ae=C({api:K,attemptId:W.attemptId||"",parts:ae,intervalMs:Ee?15e3:3e4,onSaveError:e=>{console.error("Save error:",e)}}),Te=s(Ae.saveNow),Ce=s(ae);i(()=>{Te.current=Ae.saveNow,Ce.current=ae}),i(()=>{const e=()=>{const e=f.getState();if(!e.attemptId||!e.isDirty||e.isSubmitting)return;const t=h(e.answers,Ce.current);if(0!==t.length)try{K.saveAnswers?.({attemptId:e.attemptId,answers:t,keepalive:!0})}catch{}},t=()=>{"hidden"===document.visibilityState&&e()},n=()=>{const e=f.getState();e.isDirty&&!e.isSubmitting&&Te.current()};return document.addEventListener("visibilitychange",t),window.addEventListener("pagehide",e),window.addEventListener("online",n),()=>{document.removeEventListener("visibilitychange",t),window.removeEventListener("pagehide",e),window.removeEventListener("online",n)}},[]),i(()=>{ye||Te.current()},[W.currentIndex,ne,ie,ye]);const ke=async()=>{if(!J.current){J.current=!0,W.setIsSubmitting(!0),ue(!1);try{W.isDirty&&await Ae.saveNow();const e=O(await K.submitAttempt(W.attemptId)),t=e?.pendingAnswerIds??[];W.attemptId&&(I.getState().setPending(W.attemptId,t),z?.({attemptId:W.attemptId,pendingAnswerIds:t})),0===t.length?p.success(g("student.exam.take.submitSuccess")):p.success(g("student.exam.take.submittedAIGradingInProgress")),f.persist.clearStorage(),X($(W.attemptId),!0)}catch(e){console.error("Failed to submit exam:",e);const t=e?.response?.data?.errorCode;if("ATTEMPT_ALREADY_SUBMITTED"===t)return f.persist.clearStorage(),void X($(W.attemptId),!0);p.warning(g("student.exam.take.submitError")),J.current=!1,W.setIsSubmitting(!1)}}},Pe=o(()=>{ue(!0)},[]),qe=s(new Map),Me=s([]),Re=o((e,t)=>{W.setAnswer(e,t);const n=qe.current.get(e)||e,i=Me.current.findIndex(e=>e.questionId===n);-1!==i&&re(e=>e!==i?i:e)},[]),De=s("forward"),Le=e=>{if("CAMBRIDGE_YLE"!==ce)return!1;const t=ae[e];return"SPEAKING_DESCRIBE_IMAGE"===t?.questionType||"SPONTANEOUS_QA"===t?.questionType||"SPEAKING_CUE_CARD"===t?.questionType||"READ_DISPLAYED_CONTENT"===t?.questionType},Ge=()=>{const e=()=>{window.scrollTo({top:0,behavior:"smooth"});const e=document.getElementById("exam-main-scroll-area");if(e){e.scrollTo({top:0,behavior:"smooth"});e.querySelectorAll(".overflow-y-auto").forEach(e=>{e.scrollTo({top:0,behavior:"smooth"})})}};requestAnimationFrame(e),setTimeout(e,100),setTimeout(e,250)},Qe=()=>{if("ENGLISH_CERTIFICATION"===ce){const e=W.parts[Se+1];e&&W.goToQuestion(e.startIndex??0)}else if(Ee)W.goToQuestion(Math.min(W.currentIndex+1,W.questions.length-1));else if("CAMBRIDGE_YLE"===ce&&Le(ne)){const e=ie+1,t=We[e];t&&(t.partIndex!==ne&&(De.current="forward",se(t.partIndex)),re(e))}else De.current="forward",se(e=>{const t=Math.min(e+1,ae.length-1);if("CAMBRIDGE_YLE"===ce){const e=We.find(e=>e.partIndex===t);e&&re(e.globalIndex)}return t});Ge()},Be=()=>{if("ENGLISH_CERTIFICATION"===ce){const e=W.parts[Se-1];e&&W.goToQuestion(e.startIndex??0)}else if(Ee)W.goToQuestion(Math.max(W.currentIndex-1,0));else if("CAMBRIDGE_YLE"===ce&&Le(ne)){const e=ie-1,t=We[e];t&&(t.partIndex!==ne&&(De.current="backward",se(t.partIndex)),re(e))}else De.current="backward",se(e=>{const t=Math.max(e-1,0);if("CAMBRIDGE_YLE"===ce){const e=We.find(e=>e.partIndex===t);e&&re(e.globalIndex)}return t});Ge()},[Oe,Ye]=r(!1),Fe=()=>{he(!0)},Ke=a(()=>ae.reduce((e,t)=>e+("CAMBRIDGE_YLE"===ce?t.questions.length:t.questions.filter(e=>!e.is_example).length),0),[ae,ce]),Ue=a(()=>{const e=new Map;return ae.forEach(t=>{t.questions.forEach(n=>{if(n.is_example)return;const i=n.content;if("FILL_MISSING_WORDS_IN_GRID"===t.questionType&&i?.grid&&i.grid.forEach((t,i)=>{t.forEach((t,s)=>{e.set(`${i}-${s}`,n.id)})}),"LABEL_THE_PICTURE"===t.questionType&&i?.labels&&i.labels.forEach(t=>{t.id&&e.set(t.id,n.id)}),"READ_AND_COLOR_OBJECTS"===t.questionType){const t=i?.regions||i?.regionNodes;t?.forEach(t=>{t.id&&e.set(t.id,n.id)})}if("IMAGE_OBJECT_MATCHING"===t.questionType){const t=i?.regions||i?.regionNodes;t?.forEach(t=>{t.id&&e.set(t.id,n.id)})}if("LOOK_PICTURE_FILL_WORD_HINT"===t.questionType){const t=i?.word;if(t&&"string"==typeof t){const i=/\{(\d+)\}/g;let s;for(;null!==(s=i.exec(t));){const t=s[1];e.set(`${n.id}-blank-${t}`,n.id)}}}})}),e},[ae]);i(()=>{qe.current=Ue},[Ue]);const $e=a(()=>{if(!W.answers)return new Set;const e=new Set(ae.flatMap(e=>e.questions.filter(e=>!e.is_example).map(e=>e.id))),t=new Set;return Object.keys(W.answers).forEach(n=>{const i=W.answers[n];if(void 0===i||""===i)return;if(e.has(n))return void t.add(n);const s=Ue.get(n);s&&e.has(s)&&t.add(s)}),t},[W.answers,ae,Ue]),Ve=$e.size+("CAMBRIDGE_YLE"===ce?ae.reduce((e,t)=>e+t.questions.filter(e=>e.is_example).length,0):0),je=a(()=>xe?.exam?.name||xe?.name||(Ee?"TOEIC Listening and Reading Test":"Bài thi"),[xe,Ee]),He=a(()=>x(xe?.exam?.level).displayName,[xe?.exam?.level]),{sidebarParts:ze,sidebarQuestions:We}=a(()=>{const e=[],t=[];let n=0;return ae.forEach((i,s)=>{const r="CAMBRIDGE_YLE"===ce?i.questions:i.questions.filter(e=>!e.is_example);let a=0;r.forEach(e=>{const r=!("CAMBRIDGE_YLE"!==ce||!e.is_example)||$e.has(e.id);r&&a++;const o=i.questions.findIndex(t=>t.id===e.id);t.push({globalIndex:n,partIndex:s,indexInPart:o,questionNumber:e.question_number,isAnswered:r,questionId:e.id,isExample:e.is_example}),n++}),e.push({partIndex:s,partNo:i.partNo,name:i.name,category:i.category,points:i.points,totalQuestions:"CAMBRIDGE_YLE"===ce?i.questions.length:i.questions.filter(e=>!e.is_example).length,answeredCount:a})}),{sidebarParts:e,sidebarQuestions:t}},[ae,$e,ce]);if(i(()=>{Me.current=We},[We]),ee)return e(M,{});const Je=ne,Xe=ae[Je];if(!Xe)return e("div",{className:"flex min-h-screen items-center justify-center",children:t("div",{className:"text-center",children:[e("p",{className:"text-lg font-semibold text-red-500",children:"Không tìm thấy câu hỏi"}),e("button",{type:"button",onClick:()=>X(V),className:"mt-4 rounded-lg bg-blue-500 px-4 py-2 text-white hover:bg-blue-600",children:"Quay lại"})]})});if(_e)return t(n,{children:[e(q,{part:Xe,answers:W.answers||{},onAnswerChange:Re,isReviewMode:!1,onExit:Fe,onPartComplete:Je<ae.length-1?Qe:Pe,onPartBack:Je>0?Be:void 0,speakingTheme:de,initialQuestionIndex:"backward"===De.current?Xe.questions.length-1:0,skipTeacherVideo:W.playedIntroParts.has(Je)||fe!==H,onTeacherIntroPlayed:()=>we(Je)},`${Xe.partId}-${Je}`),"SUMMER_SKY"===de?pe&&e(R,{onClose:()=>ue(!1),onSubmit:ke,isSubmitting:W.isSubmitting}):e(w,{open:pe,onOpenChange:ue,children:t(y,{children:[t(N,{children:[e(A,{children:"Nộp bài thi"}),e(_,{children:"Bạn có chắc chắn muốn nộp bài không? Sau khi nộp, bạn sẽ không thể thay đổi câu trả lời."})]}),t(v,{children:[e(S,{disabled:W.isSubmitting,children:"Quay lại"}),e(E,{onClick:ke,disabled:W.isSubmitting,children:W.isSubmitting?t(n,{children:[e(u,{className:"mr-2 h-4 w-4 animate-spin"}),"Đang nộp..."]}):"Nộp bài"})]})]})}),t("div",{className:"fixed top-8 right-6 z-[100] flex flex-col items-end gap-4 sm:gap-6 lg:top-10 lg:right-16",children:[t("div",{className:"flex items-center gap-4 sm:gap-6",children:[ve>0&&t("div",{className:"flex items-center w-[130px] sm:w-[170px] h-[40px] sm:h-[50px] rounded-[33.5px] backdrop-blur-[8px] transition-all duration-300 ease-in-out border-none shadow-[0_4px_20px_rgba(0,0,0,0.25)] "+("critical"===Ne?"bg-[rgba(220,38,38,0.85)] shadow-[0_0_24px_rgba(220,38,38,0.5)] animate-pulse":"warning"===Ne?"bg-[rgba(180,120,0,0.85)]":"bg-[#001590]"),children:[e(d,{src:l,alt:"clock",width:75,height:75,className:"w-[50px] h-[50px] sm:w-[75px] sm:h-[75px] -ml-[5px] sm:-ml-[10px] -mt-[10px] sm:-mt-[15px] shrink-0 drop-shadow-[0_2px_6px_rgba(0,0,0,0.2)] pointer-events-none z-10"}),t("span",{className:"flex-1 text-center font-bold text-[18px] sm:text-[25px] leading-none tracking-[-0.03em] uppercase text-white pr-[10px] sm:pr-[16px]",style:{fontFamily:"'SVN-Volte Rounded', 'Quicksand', sans-serif",textShadow:"0 2px 4px rgba(0, 0, 0, 0.2)"},children:[Math.floor(ve/60).toString().padStart(2,"0"),":",(ve%60).toString().padStart(2,"0")]})]}),t("div",{className:"flex items-center w-[130px] sm:w-[170px] h-[40px] sm:h-[50px] rounded-[33.5px] bg-[#FF9900] shadow-[0_4px_20px_rgba(0,0,0,0.25)] border-none shrink-0",title:"Số câu hỏi đã hoàn thành",children:[e(d,{src:m,alt:"Progress",width:75,height:75,className:"w-[50px] h-[50px] sm:w-[75px] sm:h-[75px] -ml-[5px] sm:-ml-[10px] -mt-[10px] sm:-mt-[15px] shrink-0 drop-shadow-[0_2px_6px_rgba(0,0,0,0.2)] pointer-events-none z-10"}),t("span",{className:"flex-1 text-center font-bold text-[18px] sm:text-[25px] leading-none tracking-[-0.03em] uppercase text-white pr-[10px] sm:pr-[16px]",style:{fontFamily:'"SVN-Volte Rounded", "Quicksand", sans-serif',textShadow:"0 2px 4px rgba(0,0,0,0.2)"},children:[Ve,"/",Ke]})]})]}),t("button",{onClick:Pe,disabled:W.isSubmitting,className:"group cursor-pointer flex items-center h-[40px] sm:h-[50px] w-[130px] sm:w-[170px] rounded-[33.5px] shadow-[0_4px_20px_rgba(0,0,0,0.25)] transition-all duration-300 hover:scale-105 active:scale-95 disabled:pointer-events-none disabled:opacity-60 border-none "+(W.isSubmitting?"bg-slate-400":"bg-[#16CA3B] hover:bg-[#15b736]"),children:[e(d,{src:c,alt:"Submit",width:75,height:75,className:"w-[50px] h-[50px] sm:w-[75px] sm:h-[75px] -ml-[5px] sm:-ml-[10px] -mt-[10px] sm:-mt-[15px] shrink-0 drop-shadow-[0_2px_6px_rgba(0,0,0,0.2)] pointer-events-none transition-transform duration-300 group-hover:scale-110 z-10"}),W.isSubmitting?e("div",{className:"flex-1 flex justify-center pr-[10px] sm:pr-[16px]",children:e(u,{className:"h-6 w-6 animate-spin text-white"})}):e("span",{className:"flex-1 text-center font-bold text-[18px] sm:text-[25px] leading-none tracking-[-0.03em] uppercase text-white pr-[10px] sm:pr-[16px]",style:{fontFamily:'"SVN-Volte Rounded", "Quicksand", sans-serif',textShadow:"0 2px 4px rgba(0,0,0,0.2)"},children:"Nộp bài"})]})]}),W.isSubmitting&&e("div",{className:"fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm",children:t("div",{className:"rounded-xl bg-white p-8 text-center shadow-2xl",children:[e(u,{className:"mx-auto h-12 w-12 animate-spin text-green-500"}),e("p",{className:"mt-4 text-lg font-semibold text-gray-700",children:"Đang nộp bài..."}),e("p",{className:"mt-2 text-sm text-gray-500",children:"Vui lòng đợi trong giây lát"})]})})]});if(Ee){const i=ae[Se],s=W.parts[Se],r=s?Math.max(0,W.currentIndex-(s.startIndex??0)):0,a=(s?.startIndex??0)+1,o=(s?.endIndex??a-1)+1,d={examName:je,remainingSeconds:W.remainingSeconds,totalQuestions:Ke,answeredCount:Ve,isSubmitting:W.isSubmitting,onSubmit:ke,onClose:Fe,lastSavedAt:W.lastSavedAt,isSaving:Ae.isSaving,partLabel:(s?.name||i?.name||"").toUpperCase()||void 0,partSubLabel:s?.category||void 0,questionRange:a===o?`${a}`:`${a}–${o}`},l=i?.questions?.[r],c="ENGLISH_CERTIFICATION"===ce,m={onPrevious:Be,onClear:c?void 0:()=>{l&&Re(l.id,{optionId:null})},onToggleMark:c?void 0:()=>{l&&W.toggleFlag(l.id)},onNext:Qe,isMarked:!!l&&W.flaggedQuestions.has(l.id),showSecondaryActions:!c,isPreviousDisabled:c?Se<=0:W.currentIndex<=0,isNextDisabled:c?Se>=W.parts.length-1:W.currentIndex>=W.questions.length-1},p={parts:W.parts,questions:W.questions,answers:W.answers,flaggedQuestions:W.flaggedQuestions,currentIndex:W.currentIndex,onQuestionClick:e=>{W.goToQuestion(e);const t=W.questions[e];t&&Q(t.id,{behavior:"smooth",block:"start"})},onPartClick:e=>{const t=W.parts[e];if(t){const n=t.startIndex??0;W.goToQuestion(n),W.setCurrentPartIndex(e);const i=W.questions[n];i&&Q(i.id,{behavior:"smooth",block:"start"})}}};if(i&&s)return t(n,{children:[e(L,{headerProps:d,navigationProps:p,footerProps:m,children:e(G,{part:i,partConfig:s,currentQuestionIndex:r,answers:W.answers,flaggedQuestions:W.flaggedQuestions,onAnswerChange:Re,onToggleFlag:e=>W.toggleFlag(e),isReviewMode:!1,isAudioPlayed:W.playedListeningAudioParts.has(i.partId),onAudioFirstPlay:()=>W.markListeningAudioPlayed(i.partId)})}),W.isSubmitting&&e("div",{className:"fixed inset-0 z-50 flex items-center justify-center bg-black/50",children:t("div",{className:"rounded-xl bg-white p-8 text-center shadow-2xl",children:[e(u,{className:"mx-auto h-12 w-12 animate-spin text-green-500"}),e("p",{className:"mt-4 text-lg font-semibold text-gray-700",children:"Đang nộp bài..."}),e("p",{className:"mt-2 text-sm text-gray-500",children:"Vui lòng đợi trong giây lát"})]})})]})}return t(n,{children:[(()=>{const{Layout:n,QuestionCard:i}=P(ce),s={headerProps:{examName:je,examType:"EXAM",levelLabel:He,totalQuestions:Ke,answeredCount:Ve,remainingSeconds:W.remainingSeconds,isSubmitting:W.isSubmitting,isCameraActive:Z,onSubmit:Pe},onPrevious:Be,onNext:Qe,onClose:Fe,isNavDisabled:W.isNavDisabled,partName:Xe?.name||(Xe?.partNo?`PART ${Xe.partNo}`:void 0)};if("CAMBRIDGE_YLE"===ce){const e=Le(Je);s.isFirstQuestion=e?0===ie:0===Je,s.isLastQuestion=e?ie===We.length-1:Je===ae.length-1,s.sidebarProps={parts:ze,questions:We,currentQuestionGlobalIndex:ie,isNavDisabled:W.isNavDisabled,onPartClick:e=>{if(W.isNavDisabled)return;De.current=e>Je?"forward":"backward",se(e);const t=We.find(t=>t.partIndex===e);t&&re(t.globalIndex),Ge()},onQuestionClick:e=>{if(W.isNavDisabled)return;const t=We[e];t&&t.partIndex!==Je&&(De.current=t.partIndex>Je?"forward":"backward",se(t.partIndex)),re(e),t&&setTimeout(()=>{const e=document.getElementById(`question-${t.questionId}`);e&&e.scrollIntoView({behavior:"smooth",block:"center"})},100)}}}else s.isFirstQuestion=0===Je,s.isLastQuestion=Je===ae.length-1;const r="CAMBRIDGE_YLE"===ce&&("SPEAKING_DESCRIBE_IMAGE"===Xe?.questionType||"SPONTANEOUS_QA"===Xe?.questionType||"SPEAKING_CUE_CARD"===Xe?.questionType||"READ_DISPLAYED_CONTENT"===Xe?.questionType),a=We[ie],o=r&&a?.partIndex===Je?a.indexInPart:void 0;return t(n,{...s,children:[e(i,{partName:Xe?.name||(Xe?.partNo?`PART ${Xe.partNo}`:void 0),children:e(q,{part:Xe,answers:W.answers||{},onAnswerChange:Re,isReviewMode:!1,currentQuestionIndex:o,onExit:Fe,onPartComplete:Je<ae.length-1?Qe:Pe,onPartBack:Je>0?Be:void 0,speakingTheme:"CAMBRIDGE_YLE"===ce?"CAMBRIDGE_YLE":de,initialQuestionIndex:"backward"===De.current?Xe?.questions.length-1:0,skipTeacherVideo:W.playedIntroParts.has(Je)||fe!==H,onTeacherIntroPlayed:()=>we(Je)})}),W.isSubmitting&&e("div",{className:"fixed inset-0 z-50 flex items-center justify-center bg-black/50",children:t("div",{className:"rounded-xl bg-white p-8 text-center shadow-2xl",children:[e(u,{className:"mx-auto h-12 w-12 animate-spin text-green-500"}),e("p",{className:"mt-4 text-lg font-semibold text-gray-700",children:"Đang nộp bài..."}),e("p",{className:"mt-2 text-sm text-gray-500",children:"Vui lòng đợi trong giây lát"})]})})]})})(),"CAMBRIDGE_YLE"===ce?pe&&e(R,{onClose:()=>ue(!1),onSubmit:ke,isSubmitting:W.isSubmitting}):e(w,{open:pe,onOpenChange:ue,children:t(y,{children:[t(N,{children:[e(A,{children:"Nộp bài thi"}),e(_,{children:"Bạn có chắc chắn muốn nộp bài không? Sau khi nộp, bạn sẽ không thể thay đổi câu trả lời."})]}),t(v,{children:[e(S,{disabled:W.isSubmitting,children:"Quay lại"}),e(E,{onClick:ke,disabled:W.isSubmitting,children:W.isSubmitting?t(n,{children:[e(u,{className:"mr-2 h-4 w-4 animate-spin"}),"Đang ná»™p..."]}):"Nộp bài"})]})]})}),ge&&e(D,{onClose:()=>he(!1),onConfirmExit:async()=>{if(!Oe){Ye(!0);try{const e=W.attemptId;e&&K.cancelAttempt&&await K.cancelAttempt(e)}catch(e){console.error("Failed to cancel attempt:",e)}finally{Ye(!1),he(!1),f.persist.clearStorage(),X(V)}}},isCancelling:Oe})]})}export function ExamTakingPageContainer(t){return e(F,{api:t.api,children:e(K,{...t})})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef, useState, useMemo, useCallback } from 'react';
+import Image from 'next/image';
+import summerSkyClockImg from '../../../components/themes/summer-sky/assets/images/clock.png';
+import submitImg from '../../../components/themes/summer-sky/assets/images/submit.png';
+import hasAnsweredImg from '../../../components/themes/summer-sky/assets/images/has_answered.png';
+import { toast } from 'sonner';
+import { Loader2 } from 'lucide-react';
+import { t } from '../../../shared/lib/i18n';
+import { transformAnswersForSubmission } from './utils/answer-transformers';
+import { getThemeForLevel, normalizeExamTheme } from '../../../shared/lib/themes';
+import { useExamTakingStore } from '../../../shared/lib/stores/examTakingStore';
+import { useGradingTransientStore } from '../../../shared/lib/stores/gradingTransientStore';
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, } from '../../../components/ui/alert-dialog';
+import { useExamTimer } from './hooks/useExamTimer';
+import { useAutoSave } from './hooks/useAutoSave';
+import { useProctoringCamera } from './hooks/useProctoringCamera';
+import { getStandardExamTheme } from '../../../components/themes';
+import { QuestionRenderer } from './components/QuestionRenderer';
+import { FullscreenLoading } from '../entry/fullscreen-loading';
+import { SummerSkySubmitModal } from '../../../components/themes/summer-sky/SummerSkySubmitModal';
+import { SummerSkyExitModal } from '../../../components/themes/summer-sky/SummerSkyExitModal';
+import { EnglishCertificationExamLayout, EnglishCertificationQuestionRenderer, scrollToEnglishCertQuestion, } from '../../../components/themes/english-certification';
+import { groupQuestionsByPart, } from './utils/question-transformers';
+import { findSidebarQuestionForPart, getCambridgeYlePartQuestionCount, getPartInitialQuestionIndex, isCambridgeYleInlineSpeakingType, listSpontaneousQaGroupChildIds, } from './utils/cambridge-yle-inline-speaking';
+import { unwrap, unwrapAttempt } from './exam-taking.utils';
+import { ExamTakingApiProvider } from './ExamTakingApiContext';
+function ExamTakingPageContainerInner({ roomId, api, onNavigate, resultPath = (attemptId) => `/student/results/${attemptId}`, fallbackPath = '/student/contests/discover', proctoringEnabled = false, achieversExamTitle, onSubmitted, }) {
+    const store = useExamTakingStore();
+    const submittingRef = useRef(false);
+    const navigate = useCallback((href, replace = false) => {
+        if (onNavigate)
+            onNavigate(href, { replace });
+        else if (typeof window !== 'undefined') {
+            if (replace)
+                window.location.replace(href);
+            else
+                window.location.href = href;
+        }
+    }, [onNavigate]);
+    // Proctoring camera: starts capturing automatically once attemptId is available
+    const { isCameraActive } = useProctoringCamera({
+        api,
+        attemptId: store.attemptId,
+        intervalMs: 10000,
+        enabled: proctoringEnabled,
+    });
+    const [isLoading, setIsLoading] = useState(true);
+    // Navigation position lives in the persisted store so it survives a reload.
+    // Wrappers accept either a value or an updater to match the previous
+    // useState-style call sites (e.g. setCurrentPartIndex(prev => prev + 1)).
+    const currentPartIndex = store.currentPartIndex;
+    const currentQuestionGlobalIndex = store.currentQuestionGlobalIndex;
+    const setCurrentPartIndex = useCallback((updater) => {
+        const prev = useExamTakingStore.getState().currentPartIndex;
+        const next = typeof updater === 'function' ? updater(prev) : updater;
+        useExamTakingStore.getState().setCurrentPartIndex(next);
+    }, []);
+    const setCurrentQuestionGlobalIndex = useCallback((updater) => {
+        const prev = useExamTakingStore.getState().currentQuestionGlobalIndex;
+        const next = typeof updater === 'function' ? updater(prev) : updater;
+        useExamTakingStore.getState().setCurrentQuestionGlobalIndex(next);
+    }, []);
+    const [parts, setParts] = useState([]);
+    const [speakingTheme, setSpeakingTheme] = useState('SUMMER_SKY');
+    const [examTheme, setExamTheme] = useState('CAMBRIDGE_YLE');
+    const [showSubmitConfirm, setShowSubmitConfirm] = useState(false);
+    const [showExitConfirm, setShowExitConfirm] = useState(false);
+    const [room, setRoom] = useState(null);
+    const [examTemplateTitle, setExamTemplateTitle] = useState('');
+    // Track which parts have already played their AI teacher intro video.
+    // Stored in the persisted store so a reload doesn't replay them.
+    const handleTeacherIntroPlayed = useCallback((partIndex) => {
+        useExamTakingStore.getState().markIntroPlayed(partIndex);
+    }, []);
+    // Use the branded English Certification layout when the exam is a TOEIC exam
+    // (detected via template subTitle) OR when the template explicitly selects the
+    // ENGLISH_CERTIFICATION theme (shared across TOEIC/IELTS certification exams).
+    const isToeicExam = store.examType === 'TOEIC' || examTheme === 'ENGLISH_CERTIFICATION';
+    // TOEIC: derive currentPartIndex from store.currentIndex and parts metadata
+    // This ensures the nav panel and question renderer stay in sync
+    const toeicCurrentPartIndex = useMemo(() => {
+        if (!isToeicExam || store.parts.length === 0)
+            return currentPartIndex;
+        const idx = store.currentIndex;
+        // Find which part contains the current question index
+        for (let i = 0; i < store.parts.length; i++) {
+            const p = store.parts[i];
+            const start = p.startIndex ?? 0;
+            const end = p.endIndex ?? start;
+            if (idx >= start && idx <= end)
+                return i;
+        }
+        return 0;
+    }, [isToeicExam, store.currentIndex, store.parts, currentPartIndex]);
+    // Load exam data with attempt validation
+    useEffect(() => {
+        const loadExamData = async () => {
+            try {
+                setIsLoading(true);
+                // Query the IN_PROGRESS attempt for THIS room specifically so a reload
+                // resumes the same attempt instead of creating a duplicate.
+                let activeAttempt = unwrap(await api.getActiveAttempt(roomId));
+                // No IN_PROGRESS attempt for this room → start a new one. (start() is
+                // idempotent server-side and rejects with ALREADY_SUBMITTED when the
+                // student has already submitted and re-takes aren't allowed.)
+                if (!activeAttempt) {
+                    activeAttempt = unwrapAttempt(unwrap(await api.startAttempt(roomId)));
+                }
+                // Fetch room data for title/level display
+                let fetchedRoom = null;
+                try {
+                    fetchedRoom = api.getRoom ? unwrap(await api.getRoom(roomId)) : null;
+                    if (fetchedRoom)
+                        setRoom(fetchedRoom);
+                }
+                catch {
+                    // Non-critical: fallback to defaults if room fetch fails
+                }
+                // Case 4: Valid IN_PROGRESS attempt - load questions
+                // Backend returns { examTemplate, questions } — destructure accordingly
+                const { examTemplate, questions: rawQuestions } = unwrap(await api.getQuestions(activeAttempt.id));
+                // Store examTemplate title for conditional logic (e.g. skip teacher AI video)
+                if (examTemplate?.title) {
+                    setExamTemplateTitle(examTemplate.title);
+                }
+                // Extract template parts from the questions response (preferred source)
+                // Falls back to attempt.exam.template.parts for backward compatibility
+                const templateParts = examTemplate?.parts ??
+                    activeAttempt.exam?.template?.parts;
+                // Group questions by part with template metadata
+                const groupedParts = groupQuestionsByPart(rawQuestions, templateParts);
+                // Detect exam type from template metadata
+                const detectedExamType = examTemplate?.subTitle ?? null;
+                // Detect speaking exam: all questions have skill type SPEAKING
+                // This covers LISTEN_AND_CHOOSE_* and LISTEN_AND_DRAG_* types in Starters Part 1
+                // which do NOT start with LISTEN_AND_SPEAK_ but are still part of speaking exams.
+                const isSpeakingExam = groupedParts.every((p) => p.questions.every((q) => q.question_skill_type === 'SPEAKING'));
+                const hasAnySpeakingParts = groupedParts.some((p) => p.category === 'SPEAKING' || p.questions.every((q) => q.question_skill_type === 'SPEAKING'));
+                setParts(groupedParts);
+                const resolvedExamTheme = examTemplate?.theme ||
+                    activeAttempt?.exam?.template?.theme ||
+                    activeAttempt?.exam?.theme ||
+                    fetchedRoom?.exam?.template?.theme ||
+                    fetchedRoom?.exam?.theme ||
+                    '';
+                const normalizedExamTheme = normalizeExamTheme(resolvedExamTheme) ||
+                    (detectedExamType === 'TOEIC' ? 'ENGLISH_CERTIFICATION' : 'CAMBRIDGE_YLE');
+                // Extract speakingTheme if this is a speaking exam
+                if (hasAnySpeakingParts) {
+                    // If the resolved theme isn't a known speaking theme, fallback to SUMMER_SKY
+                    const isKnownSpeakingTheme = ['SUMMER_SKY'].includes(resolvedExamTheme);
+                    const theme = isKnownSpeakingTheme ? resolvedExamTheme : 'SUMMER_SKY';
+                    setSpeakingTheme(theme);
+                }
+                // Calculate remaining time
+                const startedAt = new Date(activeAttempt.startedAt);
+                const durationMs = activeAttempt.durationMinutes * 60 * 1000;
+                const endTime = startedAt.getTime() + durationMs;
+                const now = Date.now();
+                const remainingMs = Math.max(0, endTime - now);
+                // If time already elapsed before the exam could load, auto-submit the
+                // attempt (the server no longer auto-submits on expiry, so we must never
+                // leave it IN_PROGRESS/ungraded) and send the student to their results
+                // instead of dropping them on the discover page.
+                if (remainingMs === 0) {
+                    toast.info(t('student.exam.take.timeExpired'));
+                    try {
+                        await api.submitAttempt(activeAttempt.id);
+                    }
+                    catch {
+                        // ALREADY_SUBMITTED / finalize race is fine — the attempt is
+                        // finalized either way; still route to the results page.
+                    }
+                    useExamTakingStore.persist.clearStorage();
+                    navigate(resultPath(activeAttempt.id));
+                    return;
+                }
+                store.hydrateFromServer({
+                    attemptId: activeAttempt.id,
+                    examRoomId: roomId,
+                    questions: rawQuestions.map((q) => ({
+                        id: q.id,
+                        question_type: q.question_type,
+                        content: q.content,
+                        is_example: q.is_example,
+                        total_points: q.total_points,
+                        part_id: q.part_id,
+                        part_no: q.part_no,
+                        question_number: q.question_number,
+                    })),
+                    durationMinutes: activeAttempt.durationMinutes,
+                    startedAt: activeAttempt.startedAt,
+                    examType: detectedExamType ?? undefined,
+                    examTitle: examTemplate?.title ?? undefined,
+                    parts: templateParts,
+                });
+                if (detectedExamType) {
+                    store.setExamType(detectedExamType);
+                }
+                // Store normalized exam theme for layout selection with fallback from room/attempt metadata
+                setExamTheme(normalizedExamTheme);
+                if (templateParts) {
+                    store.setParts(templateParts);
+                }
+                setIsLoading(false);
+            }
+            catch (error) {
+                const errorCode = error?.response?.data?.errorCode;
+                if (errorCode === 'ATTEMPT_ALREADY_SUBMITTED') {
+                    toast.info(t('student.exam.take.submitted'));
+                    navigate(fallbackPath, true);
+                    return;
+                }
+                console.error('Failed to load exam data:', error);
+                toast.error(t('student.exam.take.loadError'));
+                navigate(fallbackPath, true);
+            }
+        };
+        loadExamData();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [roomId]);
+    // Detect speaking exam from loaded parts: all questions must have skill type SPEAKING.
+    // This covers Starters Part 1 types (LISTEN_AND_CHOOSE_*, LISTEN_AND_DRAG_*)
+    // which are speaking exam parts but don't start with LISTEN_AND_SPEAK_.
+    const isSpeakingExam = useMemo(() => parts.length > 0 &&
+        parts.every((p) => p.questions.every((q) => q.question_skill_type === 'SPEAKING')), [parts]);
+    // Check if current part is a speaking part based on category or question skill type
+    // On CAMBRIDGE_YLE these speaking types are routed through CambridgeYleExamLayout instead of the
+    // full-page speaking flow, so we exclude them here. On other themes (e.g. SUMMER_SKY) they go
+    // through the normal speaking flow.
+    const isCurrentPartSpeaking = useMemo(() => {
+        const part = parts[currentPartIndex];
+        if (!part)
+            return false;
+        const currentTheme = examTheme || 'CAMBRIDGE_YLE';
+        if (isCambridgeYleInlineSpeakingType(part.questionType) && currentTheme === 'CAMBRIDGE_YLE')
+            return false;
+        if (part.category === 'SPEAKING')
+            return true;
+        return part.questions.every((q) => q.question_skill_type === 'SPEAKING');
+    }, [parts, currentPartIndex, examTheme]);
+    // Auto-submit handler
+    const handleAutoSubmit = async () => {
+        toast.info(t('student.exam.take.autoSubmit'));
+        await handleSubmit();
+    };
+    // Timer hook — always called (React rules).
+    // For TOEIC, we use multiple warning thresholds (15min + 5min).
+    // For Speaking, we use 5min + 2min warnings then auto-submit.
+    const { remainingSeconds, warningLevel } = useExamTimer({
+        onTimeExpired: handleAutoSubmit,
+        onWarningThreshold: isSpeakingExam || isToeicExam
+            ? undefined
+            : () => {
+                toast.warning(t('student.exam.take.timeWarning'));
+            },
+        warningThresholdSeconds: isSpeakingExam || isToeicExam ? undefined : 300,
+        warningThresholds: isToeicExam
+            ? [
+                {
+                    seconds: 900,
+                    level: 'warning',
+                    callback: () => toast.warning('Còn 15 phút!', { duration: 3000 }),
+                },
+                {
+                    seconds: 300,
+                    level: 'critical',
+                    callback: () => toast.warning('Còn 5 phút! Hãy nộp bài ngay!', { duration: 5000 }),
+                },
+            ]
+            : isSpeakingExam
+                ? [
+                    {
+                        seconds: 300,
+                        level: 'warning',
+                        callback: () => toast.warning('Còn 5 phút! Hãy hoàn thành bài thi.', { duration: 5000 }),
+                    },
+                    {
+                        seconds: 120,
+                        level: 'critical',
+                        callback: () => toast.warning('Còn 2 phút! Bài thi sẽ được tự động nộp.', { duration: 5000 }),
+                    },
+                ]
+                : undefined,
+    });
+    // Auto-save hook — 15s interval for TOEIC, 30s for others
+    const autoSave = useAutoSave({
+        api,
+        attemptId: store.attemptId || '',
+        parts,
+        intervalMs: isToeicExam ? 15000 : 30000,
+        // No success toast: saves run on every answer change / navigation, so a
+        // "Đã lưu" toast each time would disrupt the student. Errors still notify.
+        // No error toast: saves run continuously while the student is working, and a
+        // red toast mid-exam is disruptive. localStorage + the keepalive flush are the
+        // safety net, so a transient save failure is logged silently and retried.
+        onSaveError: (error) => {
+            console.error('Save error:', error);
+        },
+    });
+    // Flush pending answers to the server when the tab is hidden/closed or the
+    // network reconnects, to shrink the up-to-30s auto-save gap. localStorage is
+    // the primary safety net; this just minimizes server-side data loss.
+    // Refs keep the listeners bound once while always reading the latest values.
+    const saveNowRef = useRef(autoSave.saveNow);
+    const partsRef = useRef(parts);
+    useEffect(() => {
+        saveNowRef.current = autoSave.saveNow;
+        partsRef.current = parts;
+    });
+    useEffect(() => {
+        // Best-effort delivery that survives page unload (keepalive). Uses the same
+        // cookie-authenticated JSON endpoint as the regular auto-save.
+        const flushKeepalive = () => {
+            const s = useExamTakingStore.getState();
+            if (!s.attemptId || !s.isDirty || s.isSubmitting)
+                return;
+            const answersArray = transformAnswersForSubmission(s.answers, partsRef.current);
+            if (answersArray.length === 0)
+                return;
+            try {
+                // Best-effort delivery that survives page unload (keepalive) via the
+                // injected adapter's saveAnswers.
+                void api.saveAnswers?.({ attemptId: s.attemptId, answers: answersArray, keepalive: true });
+            }
+            catch {
+                /* ignore */
+            }
+        };
+        const handleVisibility = () => {
+            if (document.visibilityState === 'hidden')
+                flushKeepalive();
+        };
+        const handleOnline = () => {
+            const s = useExamTakingStore.getState();
+            if (s.isDirty && !s.isSubmitting)
+                saveNowRef.current();
+        };
+        document.addEventListener('visibilitychange', handleVisibility);
+        window.addEventListener('pagehide', flushKeepalive);
+        window.addEventListener('online', handleOnline);
+        return () => {
+            document.removeEventListener('visibilitychange', handleVisibility);
+            window.removeEventListener('pagehide', flushKeepalive);
+            window.removeEventListener('online', handleOnline);
+        };
+    }, []);
+    // Persist answers on every question navigation (Next / Previous / sidebar jump)
+    // so a device crash or network drop doesn't lose answers the student already
+    // entered. Speaking exams upload audio per question and are graded per answer,
+    // so they're excluded here. Grading itself still runs only on submit.
+    //
+    // Deps are the navigation position ONLY (not autoSave.saveNow) so this effect
+    // fires on navigation rather than on every render — the per-second timer
+    // re-render would otherwise reset an interval-based trigger. saveNowRef always
+    // holds the latest saveNow, which itself no-ops when there are no dirty answers
+    // or a save is already in flight.
+    useEffect(() => {
+        if (isSpeakingExam)
+            return;
+        void saveNowRef.current();
+    }, [store.currentIndex, currentPartIndex, currentQuestionGlobalIndex, isSpeakingExam]);
+    // Submit handler
+    const handleSubmit = async () => {
+        // Guard: use ref for synchronous mutex (store snapshot can be stale)
+        if (submittingRef.current)
+            return;
+        submittingRef.current = true;
+        store.setIsSubmitting(true);
+        setShowSubmitConfirm(false);
+        try {
+            // Save any pending changes first
+            if (store.isDirty) {
+                await autoSave.saveNow();
+            }
+            const submitResult = unwrap(await api.submitAttempt(store.attemptId));
+            const pendingAnswerIds = submitResult?.pendingAnswerIds ?? [];
+            // Stash pending IDs into transient store for the result page poller to pick up
+            if (store.attemptId) {
+                useGradingTransientStore.getState().setPending(store.attemptId, pendingAnswerIds);
+                onSubmitted?.({ attemptId: store.attemptId, pendingAnswerIds });
+            }
+            if (pendingAnswerIds.length === 0) {
+                toast.success(t('student.exam.take.submitSuccess'));
+            }
+            else {
+                toast.success(t('student.exam.take.submittedAIGradingInProgress'));
+            }
+            // Drop persisted progress so a reload after submit doesn't restore the
+            // already-submitted attempt. Clear storage only (keep in-memory state) to
+            // avoid flashing an empty exam before navigation completes.
+            useExamTakingStore.persist.clearStorage();
+            navigate(resultPath(store.attemptId), true);
+        }
+        catch (error) {
+            console.error('Failed to submit exam:', error);
+            // ALREADY_SUBMITTED is not a real error: the attempt is already finalized
+            // server-side (e.g. submitted in another tab, timer auto-submit, or a first
+            // submit that succeeded but the client saw a network blip). Treat it as done
+            // — drop persisted progress and send the student to their result page. No
+            // red toast to disrupt the exam experience.
+            const errorCode = error?.response?.data?.errorCode;
+            if (errorCode === 'ATTEMPT_ALREADY_SUBMITTED') {
+                useExamTakingStore.persist.clearStorage();
+                navigate(resultPath(store.attemptId), true);
+                return;
+            }
+            // Genuine failure (network / 500): keep the student on the page with their
+            // answers (auto-save + localStorage preserved them) and let them retry.
+            // Use a non-red warning toast so it informs without alarming mid-exam.
+            toast.warning(t('student.exam.take.submitError'));
+            submittingRef.current = false;
+            store.setIsSubmitting(false);
+        }
+    };
+    // Request submit handler — shows confirm dialog for speaking exams
+    const handleRequestSubmit = useCallback(() => {
+        setShowSubmitConfirm(true);
+    }, []);
+    const subItemToQuestionMapRef = useRef(new Map());
+    const sidebarQuestionsRef = useRef([]);
+    // Answer change handler - stores answer by questionId
+    // Memoized to prevent child re-renders from timer updates
+    const handleAnswerChange = useCallback((questionId, value) => {
+        store.setAnswer(questionId, value);
+        const actualQuestionId = subItemToQuestionMapRef.current.get(questionId) || questionId;
+        const qIndex = sidebarQuestionsRef.current.findIndex((q) => q.questionId === actualQuestionId);
+        if (qIndex !== -1) {
+            setCurrentQuestionGlobalIndex((prev) => prev !== qIndex ? qIndex : prev);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    // Track navigation direction to initialize the first question when moving backward
+    const navDirectionRef = useRef('forward');
+    // Navigation handlers
+    // Helper: check if a part renders one question per screen (speaking parts in CambridgeYLE)
+    const isOneQuestionPerScreen = (partIdx) => {
+        const currentTheme = examTheme || 'CAMBRIDGE_YLE';
+        if (currentTheme !== 'CAMBRIDGE_YLE')
+            return false;
+        const part = parts[partIdx];
+        return isCambridgeYleInlineSpeakingType(part?.questionType);
+    };
+    const scrollToTop = () => {
+        const doScroll = () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+            const mainScroll = document.getElementById('exam-main-scroll-area');
+            if (mainScroll) {
+                mainScroll.scrollTo({ top: 0, behavior: 'smooth' });
+                // The actual scrollable element may be a nested child (e.g. overflow-y-auto)
+                // when the outer wrapper itself doesn't overflow. We might have multiple (e.g. split layout)
+                const nestedScrolls = mainScroll.querySelectorAll('.overflow-y-auto');
+                nestedScrolls.forEach(el => {
+                    el.scrollTo({ top: 0, behavior: 'smooth' });
+                });
+            }
+        };
+        // Execute immediately, then after short delays to ensure DOM has updated
+        requestAnimationFrame(doScroll);
+        setTimeout(doScroll, 100);
+        setTimeout(doScroll, 250);
+    };
+    const handleNext = () => {
+        if (examTheme === 'ENGLISH_CERTIFICATION') {
+            // English Certification shows a whole part/section per screen — advance to
+            // the first question of the next part/section.
+            const nextPart = store.parts[toeicCurrentPartIndex + 1];
+            if (nextPart)
+                store.goToQuestion(nextPart.startIndex ?? 0);
+        }
+        else if (isToeicExam) {
+            store.goToQuestion(Math.min(store.currentIndex + 1, store.questions.length - 1));
+        }
+        else if (examTheme === 'CAMBRIDGE_YLE' && isOneQuestionPerScreen(currentPartIndex)) {
+            // Speaking: navigate question-by-question
+            const nextGlobalIdx = currentQuestionGlobalIndex + 1;
+            const nextQ = sidebarQuestions[nextGlobalIdx];
+            if (nextQ) {
+                if (nextQ.partIndex !== currentPartIndex) {
+                    // Crossed into next part
+                    navDirectionRef.current = 'forward';
+                    setCurrentPartIndex(nextQ.partIndex);
+                }
+                setCurrentQuestionGlobalIndex(nextGlobalIdx);
+            }
+            else {
+                // Last question in the entire exam — treat as submit
+                // (handled by isLastQuestion prop on the layout)
+            }
+        }
+        else {
+            navDirectionRef.current = 'forward';
+            setCurrentPartIndex((prev) => {
+                const nextPartIndex = Math.min(prev + 1, parts.length - 1);
+                if (examTheme === 'CAMBRIDGE_YLE') {
+                    const firstQ = findSidebarQuestionForPart(sidebarQuestions, nextPartIndex, 'forward');
+                    if (firstQ)
+                        setCurrentQuestionGlobalIndex(firstQ.globalIndex);
+                }
+                return nextPartIndex;
+            });
+        }
+        scrollToTop();
+    };
+    const handlePrevious = () => {
+        if (examTheme === 'ENGLISH_CERTIFICATION') {
+            // Move to the first question of the previous part/section.
+            const prevPart = store.parts[toeicCurrentPartIndex - 1];
+            if (prevPart)
+                store.goToQuestion(prevPart.startIndex ?? 0);
+        }
+        else if (isToeicExam) {
+            store.goToQuestion(Math.max(store.currentIndex - 1, 0));
+        }
+        else if (examTheme === 'CAMBRIDGE_YLE' && isOneQuestionPerScreen(currentPartIndex)) {
+            // Speaking: navigate question-by-question
+            const prevGlobalIdx = currentQuestionGlobalIndex - 1;
+            const prevQ = sidebarQuestions[prevGlobalIdx];
+            if (prevQ) {
+                if (prevQ.partIndex !== currentPartIndex) {
+                    // Crossed into previous part
+                    navDirectionRef.current = 'backward';
+                    setCurrentPartIndex(prevQ.partIndex);
+                }
+                setCurrentQuestionGlobalIndex(prevGlobalIdx);
+            }
+        }
+        else {
+            navDirectionRef.current = 'backward';
+            setCurrentPartIndex((prev) => {
+                const prevPartIndex = Math.max(prev - 1, 0);
+                if (examTheme === 'CAMBRIDGE_YLE') {
+                    const lastQ = findSidebarQuestionForPart(sidebarQuestions, prevPartIndex, 'backward');
+                    if (lastQ)
+                        setCurrentQuestionGlobalIndex(lastQ.globalIndex);
+                }
+                return prevPartIndex;
+            });
+        }
+        scrollToTop();
+    };
+    const [isCancelling, setIsCancelling] = useState(false);
+    // Close handler - show exit confirm modal before going back
+    const handleClose = () => {
+        setShowExitConfirm(true);
+    };
+    const handleConfirmExit = async () => {
+        if (isCancelling)
+            return;
+        setIsCancelling(true);
+        try {
+            const attemptId = store.attemptId;
+            if (attemptId && api.cancelAttempt) {
+                await api.cancelAttempt(attemptId);
+            }
+        }
+        catch (error) {
+            console.error('Failed to cancel attempt:', error);
+        }
+        finally {
+            setIsCancelling(false);
+            setShowExitConfirm(false);
+            useExamTakingStore.persist.clearStorage();
+            navigate(fallbackPath);
+        }
+    };
+    // Calculate totals (exclude example questions unless CAMBRIDGE_YLE)
+    const totalQuestions = useMemo(() => {
+        return parts.reduce((sum, part) => sum +
+            (examTheme === 'CAMBRIDGE_YLE'
+                ? getCambridgeYlePartQuestionCount(part)
+                : part.questions.filter((q) => !q.is_example).length), 0);
+    }, [parts, examTheme]);
+    // Build mapping: subItemKey -> questionId for complex question types
+    // This maps sub-item keys (grid cells, label IDs, region IDs) back to their parent question
+    const subItemToQuestionMap = useMemo(() => {
+        const map = new Map();
+        parts.forEach((part) => {
+            part.questions.forEach((question) => {
+                if (question.is_example)
+                    return;
+                const content = question.content;
+                // FILL_MISSING_WORDS_IN_GRID: keys are "row-col" like "4-5"
+                if (part.questionType === 'FILL_MISSING_WORDS_IN_GRID' && content?.grid) {
+                    content.grid.forEach((row, rowIdx) => {
+                        row.forEach((_, colIdx) => {
+                            map.set(`${rowIdx}-${colIdx}`, question.id);
+                        });
+                    });
+                }
+                // LABEL_THE_PICTURE: keys are label IDs
+                if (part.questionType === 'LABEL_THE_PICTURE' && content?.labels) {
+                    content.labels.forEach((label) => {
+                        if (label.id)
+                            map.set(label.id, question.id);
+                    });
+                }
+                // READ_AND_COLOR_OBJECTS: keys are region IDs
+                if (part.questionType === 'READ_AND_COLOR_OBJECTS') {
+                    const regions = content?.regions || content?.regionNodes;
+                    regions?.forEach((region) => {
+                        if (region.id)
+                            map.set(region.id, question.id);
+                    });
+                }
+                // IMAGE_OBJECT_MATCHING: same structure as READ_AND_COLOR_OBJECTS — keys are region IDs
+                if (part.questionType === 'IMAGE_OBJECT_MATCHING') {
+                    const regions = content?.regions || content?.regionNodes;
+                    regions?.forEach((region) => {
+                        if (region.id)
+                            map.set(region.id, question.id);
+                    });
+                }
+                // LOOK_PICTURE_FILL_WORD_HINT: single question with {0}, {1} placeholders → synthetic IDs
+                if (part.questionType === 'LOOK_PICTURE_FILL_WORD_HINT') {
+                    const word = content?.word;
+                    if (word && typeof word === 'string') {
+                        const placeholderRegex = /\{(\d+)\}/g;
+                        let match;
+                        while ((match = placeholderRegex.exec(word)) !== null) {
+                            const blankIndex = match[1];
+                            map.set(`${question.id}-blank-${blankIndex}`, question.id);
+                        }
+                    }
+                }
+                if (part.questionType === 'CROSS_OUT_WORD_GROUP' &&
+                    Array.isArray(content?.items)) {
+                    content.items.forEach((_, index) => {
+                        map.set(`${question.id}-item-${index}`, question.id);
+                    });
+                }
+            });
+        });
+        return map;
+    }, [parts]);
+    useEffect(() => {
+        subItemToQuestionMapRef.current = subItemToQuestionMap;
+    }, [subItemToQuestionMap]);
+    const answeredQuestionsSet = useMemo(() => {
+        if (!store.answers)
+            return new Set();
+        // Get IDs of non-example questions only
+        const countableQuestionIds = new Set();
+        parts.forEach((part) => {
+            if (part.questionType === 'SPONTANEOUS_QA_GROUP') {
+                const parent = part.questions[0];
+                if (parent && !parent.is_example) {
+                    listSpontaneousQaGroupChildIds(parent.id, parent.content).forEach((id) => {
+                        countableQuestionIds.add(id);
+                    });
+                }
+                return;
+            }
+            part.questions
+                .filter((q) => !q.is_example)
+                .forEach((q) => countableQuestionIds.add(q.id));
+        });
+        // Track which questions have been answered
+        const answeredQuestions = new Set();
+        Object.keys(store.answers).forEach((key) => {
+            const answer = store.answers[key];
+            if (answer === undefined || answer === '')
+                return;
+            // Direct question ID match
+            if (countableQuestionIds.has(key)) {
+                answeredQuestions.add(key);
+                return;
+            }
+            // Check if it's a sub-item key that maps to a question
+            const questionId = subItemToQuestionMap.get(key);
+            if (questionId && countableQuestionIds.has(questionId)) {
+                answeredQuestions.add(questionId);
+            }
+        });
+        return answeredQuestions;
+    }, [store.answers, parts, subItemToQuestionMap]);
+    const answeredCount = answeredQuestionsSet.size + (examTheme === 'CAMBRIDGE_YLE'
+        ? parts.reduce((sum, part) => sum + part.questions.filter(q => q.is_example).length, 0)
+        : 0);
+    // Compute exam title: always prioritize the real exam name from room details API
+    const examTitle = useMemo(() => {
+        return room?.exam?.name || room?.name || (isToeicExam ? 'TOEIC Listening and Reading Test' : 'Bài thi');
+    }, [room, isToeicExam]);
+    // Compute level label from the exam level
+    const levelLabel = useMemo(() => {
+        return getThemeForLevel(room?.exam?.level).displayName;
+    }, [room?.exam?.level]);
+    const { sidebarParts, sidebarQuestions } = useMemo(() => {
+        const sParts = [];
+        const sQuestions = [];
+        let globalIndex = 0;
+        parts.forEach((part, partIdx) => {
+            const parent = part.questions[0];
+            const shouldFlattenGroup = examTheme === 'CAMBRIDGE_YLE' &&
+                part.questionType === 'SPONTANEOUS_QA_GROUP' &&
+                !!parent;
+            const questionsToList = shouldFlattenGroup
+                ? listSpontaneousQaGroupChildIds(parent.id, parent.content).map((childId, childIndex) => ({
+                    id: childId,
+                    is_example: false,
+                    question_number: parent.question_number,
+                    sub_question_number: childIndex + 1,
+                    indexInPart: childIndex,
+                }))
+                : (examTheme === 'CAMBRIDGE_YLE'
+                    ? part.questions
+                    : part.questions.filter((q) => !q.is_example)).map((q) => ({
+                    id: q.id,
+                    is_example: q.is_example,
+                    question_number: q.question_number,
+                    sub_question_number: undefined,
+                    indexInPart: part.questions.findIndex((partQ) => partQ.id === q.id),
+                }));
+            let partAnsweredCount = 0;
+            questionsToList.forEach((q) => {
+                const isAnswered = examTheme === 'CAMBRIDGE_YLE' && q.is_example
+                    ? true
+                    : answeredQuestionsSet.has(q.id);
+                if (isAnswered)
+                    partAnsweredCount++;
+                sQuestions.push({
+                    globalIndex,
+                    partIndex: partIdx,
+                    indexInPart: q.indexInPart,
+                    questionNumber: q.question_number,
+                    subQuestionNumber: q.sub_question_number,
+                    isAnswered,
+                    questionId: q.id,
+                    isExample: q.is_example,
+                });
+                globalIndex++;
+            });
+            sParts.push({
+                partIndex: partIdx,
+                partNo: part.partNo,
+                name: part.name,
+                category: part.category,
+                points: part.points,
+                totalQuestions: examTheme === 'CAMBRIDGE_YLE'
+                    ? getCambridgeYlePartQuestionCount(part)
+                    : part.questions.filter((q) => !q.is_example).length,
+                answeredCount: partAnsweredCount,
+            });
+        });
+        return { sidebarParts: sParts, sidebarQuestions: sQuestions };
+    }, [parts, answeredQuestionsSet, examTheme]);
+    useEffect(() => {
+        sidebarQuestionsRef.current = sidebarQuestions;
+    }, [sidebarQuestions]);
+    if (isLoading) {
+        return _jsx(FullscreenLoading, {});
+    }
+    // Determine actual part index based on exam theme
+    const activePartIndex = currentPartIndex;
+    const currentPart = parts[activePartIndex];
+    if (!currentPart) {
+        return (_jsx("div", { className: "flex min-h-screen items-center justify-center", children: _jsxs("div", { className: "text-center", children: [_jsx("p", { className: "text-lg font-semibold text-red-500", children: "Kh\u00C3\u00B4ng t\u00C3\u00ACm th\u00E1\u00BA\u00A5y c\u00C3\u00A2u h\u00E1\u00BB\u008Fi" }), _jsx("button", { type: "button", onClick: () => navigate(fallbackPath), className: "mt-4 rounded-lg bg-blue-500 px-4 py-2 text-white hover:bg-blue-600", children: "Quay l\u1EA1i" })] }) }));
+    }
+    // -------------------------------------------------------
+    // Speaking exam: renderers manage their own full-page layout.
+    // QuestionRenderer delegates to SpeakingQuestionRenderer →
+    // SpeakingExamLayout (full-screen, wooden-themed UI).
+    // We skip MoversExamLayout and MoversQuestionCard entirely.
+    // -------------------------------------------------------
+    if (isCurrentPartSpeaking) {
+        return (_jsxs(_Fragment, { children: [_jsx(QuestionRenderer, { part: currentPart, answers: store.answers || {}, onAnswerChange: handleAnswerChange, isReviewMode: false, onExit: handleClose, onPartComplete: activePartIndex < parts.length - 1 ? handleNext : handleRequestSubmit, onPartBack: activePartIndex > 0 ? handlePrevious : undefined, speakingTheme: speakingTheme, initialQuestionIndex: getPartInitialQuestionIndex(currentPart, navDirectionRef.current), skipTeacherVideo: store.playedIntroParts.has(activePartIndex) || examTemplateTitle !== achieversExamTitle, onTeacherIntroPlayed: () => handleTeacherIntroPlayed(activePartIndex) }, `${currentPart.partId}-${activePartIndex}`), speakingTheme === 'SUMMER_SKY' ? (showSubmitConfirm && (_jsx(SummerSkySubmitModal, { onClose: () => setShowSubmitConfirm(false), onSubmit: handleSubmit, isSubmitting: store.isSubmitting }))) : (_jsx(AlertDialog, { open: showSubmitConfirm, onOpenChange: setShowSubmitConfirm, children: _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: "N\u1ED9p b\u00E0i thi" }), _jsx(AlertDialogDescription, { children: "B\u1EA1n c\u00F3 ch\u1EAFc ch\u1EAFn mu\u1ED1n n\u1ED9p b\u00E0i kh\u00F4ng? Sau khi n\u1ED9p, b\u1EA1n s\u1EBD kh\u00F4ng th\u1EC3 thay \u0111\u1ED5i c\u00E2u tr\u1EA3 l\u1EDDi." })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { disabled: store.isSubmitting, children: "Quay l\u1EA1i" }), _jsx(AlertDialogAction, { onClick: handleSubmit, disabled: store.isSubmitting, children: store.isSubmitting ? (_jsxs(_Fragment, { children: [_jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), "\u0110ang n\u1ED9p..."] })) : ('Nộp bài') })] })] }) })), _jsxs("div", { className: "fixed top-8 right-6 z-[100] flex flex-col items-end gap-4 sm:gap-6 lg:top-10 lg:right-16", children: [_jsxs("div", { className: "flex items-center gap-4 sm:gap-6", children: [remainingSeconds > 0 && (_jsxs("div", { className: `flex items-center w-[130px] sm:w-[170px] h-[40px] sm:h-[50px] rounded-[33.5px] backdrop-blur-[8px] transition-all duration-300 ease-in-out border-none shadow-[0_4px_20px_rgba(0,0,0,0.25)] ${warningLevel === 'critical' ? 'bg-[rgba(220,38,38,0.85)] shadow-[0_0_24px_rgba(220,38,38,0.5)] animate-pulse' :
+                                        warningLevel === 'warning' ? 'bg-[rgba(180,120,0,0.85)]' :
+                                            'bg-[#001590]'}`, children: [_jsx(Image, { src: summerSkyClockImg, alt: "clock", width: 75, height: 75, className: "w-[50px] h-[50px] sm:w-[75px] sm:h-[75px] -ml-[5px] sm:-ml-[10px] -mt-[10px] sm:-mt-[15px] shrink-0 drop-shadow-[0_2px_6px_rgba(0,0,0,0.2)] pointer-events-none z-10" }), _jsxs("span", { className: "flex-1 text-center font-bold text-[18px] sm:text-[25px] leading-none tracking-[-0.03em] uppercase text-white pr-[10px] sm:pr-[16px]", style: {
+                                                fontFamily: "'SVN-Volte Rounded', 'Quicksand', sans-serif",
+                                                textShadow: "0 2px 4px rgba(0, 0, 0, 0.2)"
+                                            }, children: [Math.floor(remainingSeconds / 60).toString().padStart(2, '0'), ":", (remainingSeconds % 60).toString().padStart(2, '0')] })] })), _jsxs("div", { className: "flex items-center w-[130px] sm:w-[170px] h-[40px] sm:h-[50px] rounded-[33.5px] bg-[#FF9900] shadow-[0_4px_20px_rgba(0,0,0,0.25)] border-none shrink-0", title: "S\u1ED1 c\u00E2u h\u1ECFi \u0111\u00E3 ho\u00E0n th\u00E0nh", children: [_jsx(Image, { src: hasAnsweredImg, alt: "Progress", width: 75, height: 75, className: "w-[50px] h-[50px] sm:w-[75px] sm:h-[75px] -ml-[5px] sm:-ml-[10px] -mt-[10px] sm:-mt-[15px] shrink-0 drop-shadow-[0_2px_6px_rgba(0,0,0,0.2)] pointer-events-none z-10" }), _jsxs("span", { className: "flex-1 text-center font-bold text-[18px] sm:text-[25px] leading-none tracking-[-0.03em] uppercase text-white pr-[10px] sm:pr-[16px]", style: { fontFamily: '"SVN-Volte Rounded", "Quicksand", sans-serif', textShadow: '0 2px 4px rgba(0,0,0,0.2)' }, children: [answeredCount, "/", totalQuestions] })] })] }), _jsxs("button", { onClick: handleRequestSubmit, disabled: store.isSubmitting, className: `group cursor-pointer flex items-center h-[40px] sm:h-[50px] w-[130px] sm:w-[170px] rounded-[33.5px] shadow-[0_4px_20px_rgba(0,0,0,0.25)] transition-all duration-300 hover:scale-105 active:scale-95 disabled:pointer-events-none disabled:opacity-60 border-none ${store.isSubmitting ? 'bg-slate-400' : 'bg-[#16CA3B] hover:bg-[#15b736]'}`, children: [_jsx(Image, { src: submitImg, alt: "Submit", width: 75, height: 75, className: "w-[50px] h-[50px] sm:w-[75px] sm:h-[75px] -ml-[5px] sm:-ml-[10px] -mt-[10px] sm:-mt-[15px] shrink-0 drop-shadow-[0_2px_6px_rgba(0,0,0,0.2)] pointer-events-none transition-transform duration-300 group-hover:scale-110 z-10" }), store.isSubmitting ? (_jsx("div", { className: "flex-1 flex justify-center pr-[10px] sm:pr-[16px]", children: _jsx(Loader2, { className: "h-6 w-6 animate-spin text-white" }) })) : (_jsx("span", { className: "flex-1 text-center font-bold text-[18px] sm:text-[25px] leading-none tracking-[-0.03em] uppercase text-white pr-[10px] sm:pr-[16px]", style: { fontFamily: '"SVN-Volte Rounded", "Quicksand", sans-serif', textShadow: '0 2px 4px rgba(0,0,0,0.2)' }, children: "N\u1ED9p b\u00E0i" }))] })] }), store.isSubmitting && (_jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm", children: _jsxs("div", { className: "rounded-xl bg-white p-8 text-center shadow-2xl", children: [_jsx(Loader2, { className: "mx-auto h-12 w-12 animate-spin text-green-500" }), _jsx("p", { className: "mt-4 text-lg font-semibold text-gray-700", children: "\u0110ang n\u1ED9p b\u00E0i..." }), _jsx("p", { className: "mt-2 text-sm text-gray-500", children: "Vui l\u00F2ng \u0111\u1EE3i trong gi\u00E2y l\u00E1t" })] }) }))] }));
+    }
+    // -------------------------------------------------------
+    // TOEIC exam: use ToeicExamLayout with ToeicQuestionRenderer
+    // -------------------------------------------------------
+    if (isToeicExam) {
+        const toeicCurrentPart = parts[toeicCurrentPartIndex];
+        const toeicCurrentPartConfig = store.parts[toeicCurrentPartIndex];
+        // Index within current part (direct computation — no useMemo needed)
+        const toeicQuestionIndexInPart = toeicCurrentPartConfig
+            ? Math.max(0, store.currentIndex - (toeicCurrentPartConfig.startIndex ?? 0))
+            : 0;
+        const toeicPartStart = (toeicCurrentPartConfig?.startIndex ?? 0) + 1;
+        const toeicPartEnd = (toeicCurrentPartConfig?.endIndex ?? toeicPartStart - 1) + 1;
+        const toeicHeaderProps = {
+            examName: examTitle,
+            remainingSeconds: store.remainingSeconds,
+            totalQuestions: totalQuestions,
+            answeredCount,
+            isSubmitting: store.isSubmitting,
+            onSubmit: handleSubmit,
+            onClose: handleClose,
+            lastSavedAt: store.lastSavedAt,
+            isSaving: autoSave.isSaving,
+            partLabel: (toeicCurrentPartConfig?.name || toeicCurrentPart?.name || '').toUpperCase() || undefined,
+            partSubLabel: toeicCurrentPartConfig?.category || undefined,
+            questionRange: toeicPartStart === toeicPartEnd ? `${toeicPartStart}` : `${toeicPartStart}–${toeicPartEnd}`,
+        };
+        const toeicCurrentQuestion = toeicCurrentPart?.questions?.[toeicQuestionIndexInPart];
+        // English Certification shows a whole part/section per screen: footer keeps
+        // only Previous/Next (section navigation); marking happens per question card.
+        const isEnglishCert = examTheme === 'ENGLISH_CERTIFICATION';
+        const toeicFooterProps = {
+            onPrevious: handlePrevious,
+            onClear: isEnglishCert
+                ? undefined
+                : () => {
+                    if (toeicCurrentQuestion)
+                        handleAnswerChange(toeicCurrentQuestion.id, { optionId: null });
+                },
+            onToggleMark: isEnglishCert
+                ? undefined
+                : () => {
+                    if (toeicCurrentQuestion)
+                        store.toggleFlag(toeicCurrentQuestion.id);
+                },
+            onNext: handleNext,
+            isMarked: toeicCurrentQuestion
+                ? store.flaggedQuestions.has(toeicCurrentQuestion.id)
+                : false,
+            showSecondaryActions: !isEnglishCert,
+            isPreviousDisabled: isEnglishCert
+                ? toeicCurrentPartIndex <= 0
+                : store.currentIndex <= 0,
+            isNextDisabled: isEnglishCert
+                ? toeicCurrentPartIndex >= store.parts.length - 1
+                : store.currentIndex >= store.questions.length - 1,
+        };
+        const toeicNavProps = {
+            parts: store.parts,
+            questions: store.questions,
+            answers: store.answers,
+            flaggedQuestions: store.flaggedQuestions,
+            currentIndex: store.currentIndex,
+            onQuestionClick: (globalIdx) => {
+                store.goToQuestion(globalIdx);
+                // Scroll the chosen question card into view once the new part renders.
+                // Retries handle cross-part mounts; nested-scroll aware helper handles
+                // Reading split-view columns and sticky Listening audio clearance.
+                const targetQuestion = store.questions[globalIdx];
+                if (targetQuestion) {
+                    scrollToEnglishCertQuestion(targetQuestion.id, {
+                        behavior: 'smooth',
+                        block: 'start',
+                    });
+                }
+            },
+            onPartClick: (partIdx) => {
+                const partConfig = store.parts[partIdx];
+                if (partConfig) {
+                    const firstQuestionIdx = partConfig.startIndex ?? 0;
+                    store.goToQuestion(firstQuestionIdx);
+                    store.setCurrentPartIndex(partIdx);
+                    const targetQuestion = store.questions[firstQuestionIdx];
+                    if (targetQuestion) {
+                        scrollToEnglishCertQuestion(targetQuestion.id, {
+                            behavior: 'smooth',
+                            block: 'start',
+                        });
+                    }
+                }
+            },
+        };
+        if (toeicCurrentPart && toeicCurrentPartConfig) {
+            return (_jsxs(_Fragment, { children: [_jsx(EnglishCertificationExamLayout, { headerProps: toeicHeaderProps, navigationProps: toeicNavProps, footerProps: toeicFooterProps, children: _jsx(EnglishCertificationQuestionRenderer, { part: toeicCurrentPart, partConfig: toeicCurrentPartConfig, currentQuestionIndex: toeicQuestionIndexInPart, answers: store.answers, flaggedQuestions: store.flaggedQuestions, onAnswerChange: handleAnswerChange, onToggleFlag: (questionId) => store.toggleFlag(questionId), isReviewMode: false, isAudioPlayed: store.playedListeningAudioParts.has(toeicCurrentPart.partId), onAudioFirstPlay: () => store.markListeningAudioPlayed(toeicCurrentPart.partId) }) }), store.isSubmitting && (_jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50", children: _jsxs("div", { className: "rounded-xl bg-white p-8 text-center shadow-2xl", children: [_jsx(Loader2, { className: "mx-auto h-12 w-12 animate-spin text-green-500" }), _jsx("p", { className: "mt-4 text-lg font-semibold text-gray-700", children: "\u0110ang n\u1ED9p b\u00E0i..." }), _jsx("p", { className: "mt-2 text-sm text-gray-500", children: "Vui l\u00F2ng \u0111\u1EE3i trong gi\u00E2y l\u00E1t" })] }) }))] }));
+        }
+    }
+    // -------------------------------------------------------
+    // Standard exam (Reading / Listening / Writing)
+    // -------------------------------------------------------
+    return (_jsxs(_Fragment, { children: [(() => {
+                const { Layout: ExamLayout, QuestionCard } = getStandardExamTheme(examTheme);
+                const layoutProps = {
+                    headerProps: {
+                        examName: examTitle,
+                        examType: 'EXAM',
+                        levelLabel,
+                        totalQuestions,
+                        answeredCount,
+                        remainingSeconds: store.remainingSeconds,
+                        isSubmitting: store.isSubmitting,
+                        isCameraActive,
+                        onSubmit: handleRequestSubmit,
+                    },
+                    onPrevious: handlePrevious,
+                    onNext: handleNext,
+                    onClose: handleClose,
+                    isNavDisabled: store.isNavDisabled,
+                    partName: currentPart?.name || (currentPart?.partNo ? `PART ${currentPart.partNo}` : undefined),
+                };
+                if (examTheme === 'CAMBRIDGE_YLE') {
+                    const isOneQ = isOneQuestionPerScreen(activePartIndex);
+                    layoutProps.isFirstQuestion = isOneQ ? currentQuestionGlobalIndex === 0 : activePartIndex === 0;
+                    layoutProps.isLastQuestion = isOneQ ? currentQuestionGlobalIndex === sidebarQuestions.length - 1 : activePartIndex === parts.length - 1;
+                    layoutProps.sidebarProps = {
+                        parts: sidebarParts,
+                        questions: sidebarQuestions,
+                        currentQuestionGlobalIndex,
+                        isNavDisabled: store.isNavDisabled,
+                        onPartClick: (idx) => {
+                            if (store.isNavDisabled)
+                                return;
+                            navDirectionRef.current = idx > activePartIndex ? 'forward' : 'backward';
+                            setCurrentPartIndex(idx);
+                            const targetQ = findSidebarQuestionForPart(sidebarQuestions, idx, navDirectionRef.current);
+                            if (targetQ)
+                                setCurrentQuestionGlobalIndex(targetQ.globalIndex);
+                            scrollToTop();
+                        },
+                        onQuestionClick: (idx) => {
+                            if (store.isNavDisabled)
+                                return;
+                            const question = sidebarQuestions[idx];
+                            if (question && question.partIndex !== activePartIndex) {
+                                navDirectionRef.current = question.partIndex > activePartIndex ? 'forward' : 'backward';
+                                setCurrentPartIndex(question.partIndex);
+                            }
+                            setCurrentQuestionGlobalIndex(idx);
+                            // Scroll to the specific question
+                            if (question) {
+                                setTimeout(() => {
+                                    const el = document.getElementById(`question-${question.questionId}`);
+                                    if (el) {
+                                        // Add a small offset if there's a sticky header, but block: 'center' or 'start' usually works
+                                        el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                                    }
+                                }, 100);
+                            }
+                        }
+                    };
+                }
+                else {
+                    layoutProps.isFirstQuestion = activePartIndex === 0;
+                    layoutProps.isLastQuestion = activePartIndex === parts.length - 1;
+                }
+                // For speaking questions using the standard layout (like SPEAKING_DESCRIBE_IMAGE),
+                // we want to render them one-by-one according to the global index.
+                const isSpeakingUsingLayout = examTheme === 'CAMBRIDGE_YLE' && isCambridgeYleInlineSpeakingType(currentPart?.questionType);
+                const currentQuestionInSidebar = sidebarQuestions[currentQuestionGlobalIndex];
+                const currentQuestionIndexInPart = isSpeakingUsingLayout
+                    ? (currentQuestionInSidebar?.partIndex === activePartIndex ? currentQuestionInSidebar.indexInPart : undefined)
+                    : undefined; // Force all questions to render for Reading/Writing
+                return (_jsxs(ExamLayout, { ...layoutProps, children: [_jsx(QuestionCard, { partName: currentPart?.name || (currentPart?.partNo ? `PART ${currentPart.partNo}` : undefined), children: _jsx(QuestionRenderer, { part: currentPart, answers: store.answers || {}, onAnswerChange: handleAnswerChange, isReviewMode: false, currentQuestionIndex: currentQuestionIndexInPart, onExit: handleClose, onPartComplete: activePartIndex < parts.length - 1 ? handleNext : handleRequestSubmit, onPartBack: activePartIndex > 0 ? handlePrevious : undefined, speakingTheme: examTheme === 'CAMBRIDGE_YLE' ? 'CAMBRIDGE_YLE' : speakingTheme, initialQuestionIndex: getPartInitialQuestionIndex(currentPart, navDirectionRef.current), skipTeacherVideo: store.playedIntroParts.has(activePartIndex) || examTemplateTitle !== achieversExamTitle, onTeacherIntroPlayed: () => handleTeacherIntroPlayed(activePartIndex) }) }), store.isSubmitting && (_jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50", children: _jsxs("div", { className: "rounded-xl bg-white p-8 text-center shadow-2xl", children: [_jsx(Loader2, { className: "mx-auto h-12 w-12 animate-spin text-green-500" }), _jsx("p", { className: "mt-4 text-lg font-semibold text-gray-700", children: "\u0110ang n\u1ED9p b\u00E0i..." }), _jsx("p", { className: "mt-2 text-sm text-gray-500", children: "Vui l\u00F2ng \u0111\u1EE3i trong gi\u00E2y l\u00E1t" })] }) }))] }));
+            })(), examTheme === 'CAMBRIDGE_YLE' ? (showSubmitConfirm && (_jsx(SummerSkySubmitModal, { onClose: () => setShowSubmitConfirm(false), onSubmit: handleSubmit, isSubmitting: store.isSubmitting }))) : (_jsx(AlertDialog, { open: showSubmitConfirm, onOpenChange: setShowSubmitConfirm, children: _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: "N\u1ED9p b\u00E0i thi" }), _jsx(AlertDialogDescription, { children: "B\u1EA1n c\u00F3 ch\u1EAFc ch\u1EAFn mu\u1ED1n n\u1ED9p b\u00E0i kh\u00F4ng? Sau khi n\u1ED9p, b\u1EA1n s\u1EBD kh\u00F4ng th\u1EC3 thay \u0111\u1ED5i c\u00E2u tr\u1EA3 l\u1EDDi." })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { disabled: store.isSubmitting, children: "Quay l\u1EA1i" }), _jsx(AlertDialogAction, { onClick: handleSubmit, disabled: store.isSubmitting, children: store.isSubmitting ? (_jsxs(_Fragment, { children: [_jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), "\u00C4\u0090ang n\u00E1\u00BB\u2122p..."] })) : ('Nộp bài') })] })] }) })), showExitConfirm && (_jsx(SummerSkyExitModal, { onClose: () => setShowExitConfirm(false), onConfirmExit: handleConfirmExit, isCancelling: isCancelling }))] }));
+}
+/**
+ * SDK container for the student exam-taking screen. Wraps the orchestration in an
+ * {@link ExamTakingApiProvider} so descendants (e.g. the speaking recorder) can
+ * reach the injected API without prop-drilling.
+ */
+export function ExamTakingPageContainer(props) {
+    return (_jsx(ExamTakingApiProvider, { api: props.api, children: _jsx(ExamTakingPageContainerInner, { ...props }) }));
+}