<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">

    <!-- ═══════════════════════════════════════════════════════════════
         ExamApp — Main full-screen exam orchestrator
         ═══════════════════════════════════════════════════════════════ -->

    <t t-name="encoach_exam_session.ExamApp">
        <div class="ec-exam-fullscreen" t-ref="root">

            <!-- Loading State -->
            <t t-if="state.loading">
                <div class="ec-loading">
                    <div class="ec-spinner"/>
                    <div class="ec-loading-text">Loading your exam...</div>
                </div>
            </t>

            <!-- Submitted State -->
            <t t-elif="state.submitted">
                <div class="ec-submitted-overlay">
                    <div class="ec-submitted-icon">✓</div>
                    <div class="ec-submitted-text" t-esc="state.submitMessage"/>
                </div>
            </t>

            <!-- Exam Active State -->
            <t t-else="">

                <!-- ── Top Bar ──────────────────────────────────────── -->
                <div class="ec-topbar">
                    <div class="ec-topbar-title"
                         t-esc="state.examData?.title or 'Exam Session'"/>

                    <!-- Section tabs -->
                    <div class="ec-section-tabs">
                        <t t-foreach="sections" t-as="section" t-key="section_index">
                            <button t-att-class="'ec-section-tab' + (section_index === state.currentSectionIdx ? ' ec-section-tab--active' : '')"
                                    t-on-click="() => this.switchSection(section_index)">
                                <t t-esc="section.name or section.skill or ('Section ' + (section_index + 1))"/>
                            </button>
                        </t>
                    </div>

                    <div class="ec-topbar-spacer"/>

                    <!-- Progress -->
                    <div class="ec-progress-info">
                        <t t-esc="answeredCount"/> / <t t-esc="totalQuestions"/> answered
                    </div>

                    <!-- Timer -->
                    <div t-att-class="timerClass">
                        <span class="ec-timer-icon">⏱</span>
                        <span t-esc="formatTime(state.timeRemaining)"/>
                    </div>
                </div>

                <!-- ── Content Area ─────────────────────────────────── -->
                <div class="ec-content">

                    <!-- Passage panel (only if current question has a passage) -->
                    <t t-if="currentQuestion?.passage">
                        <div class="ec-passage-panel">
                            <div class="ec-passage-title"
                                 t-esc="currentQuestion.passage.title or 'Reading Passage'"/>
                            <div class="ec-passage-body"
                                 t-esc="currentQuestion.passage.content or currentQuestion.passage"/>
                        </div>
                    </t>

                    <!-- Question panel -->
                    <div t-att-class="'ec-question-panel' + (currentQuestion?.passage ? '' : ' ec-question-panel--full')">
                        <t t-if="currentQuestion">

                            <!-- Question header -->
                            <div class="ec-question-header">
                                <div class="ec-question-number"
                                     t-esc="state.currentQuestionIdx + 1"/>
                                <div class="ec-question-type"
                                     t-esc="currentQuestion.question_type or 'question'"/>
                            </div>

                            <!-- Question stem -->
                            <div class="ec-question-stem"
                                 t-esc="currentQuestion.stem"/>

                            <!-- Question Renderer (dispatched by type) -->
                            <t t-if="currentQuestion.question_type === 'mcq'">
                                <ExamMCQ question="currentQuestion"
                                         answer="state.answers[currentQuestion.id]"
                                         onAnswer.bind="setAnswer"/>
                            </t>
                            <t t-elif="currentQuestion.question_type === 'mcq_multi'">
                                <ExamMCQMulti question="currentQuestion"
                                              answer="state.answers[currentQuestion.id]"
                                              onAnswer.bind="setAnswer"/>
                            </t>
                            <t t-elif="currentQuestion.question_type === 'gap_fill'">
                                <ExamGapFill question="currentQuestion"
                                             answer="state.answers[currentQuestion.id]"
                                             onAnswer.bind="setAnswer"/>
                            </t>
                            <t t-elif="currentQuestion.question_type === 'tfng'">
                                <ExamTFNG question="currentQuestion"
                                          answer="state.answers[currentQuestion.id]"
                                          onAnswer.bind="setAnswer"/>
                            </t>
                            <t t-elif="currentQuestion.question_type === 'audio_recording'">
                                <ExamAudioRecorder question="currentQuestion"
                                                   answer="state.answers[currentQuestion.id]"
                                                   onAnswer.bind="setAnswer"/>
                            </t>
                            <t t-elif="currentQuestion.question_type === 'writing'">
                                <ExamRichEditor question="currentQuestion"
                                                answer="state.answers[currentQuestion.id]"
                                                onAnswer.bind="setAnswer"/>
                            </t>
                            <t t-elif="currentQuestion.question_type === 'numerical'">
                                <ExamNumericalInput question="currentQuestion"
                                                    answer="state.answers[currentQuestion.id]"
                                                    onAnswer.bind="setAnswer"/>
                            </t>
                            <t t-elif="currentQuestion.question_type === 'code'">
                                <ExamCodeEditor question="currentQuestion"
                                                answer="state.answers[currentQuestion.id]"
                                                onAnswer.bind="setAnswer"/>
                            </t>
                            <!-- Fallback: plain MCQ -->
                            <t t-else="">
                                <ExamMCQ question="currentQuestion"
                                         answer="state.answers[currentQuestion.id]"
                                         onAnswer.bind="setAnswer"/>
                            </t>
                        </t>
                    </div>
                </div>

                <!-- ── Bottom Bar ───────────────────────────────────── -->
                <div class="ec-bottombar">
                    <button class="ec-nav-btn"
                            t-att-disabled="!hasPrev"
                            t-on-click="prevQuestion">
                        ← Prev
                    </button>
                    <button class="ec-nav-btn"
                            t-att-disabled="!hasNext"
                            t-on-click="nextQuestion">
                        Next →
                    </button>

                    <button t-att-class="'ec-flag-btn' + (isCurrentFlagged ? ' ec-flag-btn--active' : '')"
                            t-on-click="toggleFlag">
                        <span>⚑</span>
                        <span t-if="isCurrentFlagged">Flagged</span>
                        <span t-else="">Flag</span>
                    </button>

                    <div class="ec-dots">
                        <t t-foreach="questionDots" t-as="dot" t-key="dot.idx">
                            <div t-att-class="'ec-dot'
                                + (dot.current ? ' ec-dot--current' : '')
                                + (dot.answered ? ' ec-dot--answered' : '')
                                + (dot.flagged ? ' ec-dot--flagged' : '')"
                                 t-on-click="() => this.goToQuestion(dot.idx)">
                                <t t-esc="dot.idx + 1"/>
                            </div>
                        </t>
                    </div>

                    <div class="ec-bottombar-spacer"/>

                    <button class="ec-review-btn" t-on-click="showReviewPanel">
                        Review All
                    </button>

                    <t t-if="isLastSection">
                        <button class="ec-submit-btn" t-on-click="confirmSubmit">
                            Submit Exam
                        </button>
                    </t>
                    <t t-else="">
                        <button class="ec-submit-btn" t-on-click="nextSection">
                            Next Section →
                        </button>
                    </t>
                </div>

                <!-- ── Review Overlay ───────────────────────────────── -->
                <t t-if="state.showReview">
                    <div class="ec-review-overlay" t-on-click.self="hideReviewPanel">
                        <div class="ec-review-panel">
                            <div class="ec-review-header">
                                <div class="ec-review-title">Review Your Answers</div>
                                <button class="ec-review-close"
                                        t-on-click="hideReviewPanel">✕</button>
                            </div>

                            <!-- Stats -->
                            <div class="ec-review-stats">
                                <div class="ec-review-stat">
                                    <div class="ec-review-stat-val"
                                         t-esc="totalAnswered"/>
                                    <div class="ec-review-stat-label">Answered</div>
                                </div>
                                <div class="ec-review-stat">
                                    <div class="ec-review-stat-val"
                                         t-esc="totalAllQuestions - totalAnswered"/>
                                    <div class="ec-review-stat-label">Unanswered</div>
                                </div>
                                <div class="ec-review-stat">
                                    <div class="ec-review-stat-val"
                                         t-esc="totalFlagged"/>
                                    <div class="ec-review-stat-label">Flagged</div>
                                </div>
                            </div>

                            <!-- Legend -->
                            <div class="ec-review-legend">
                                <div class="ec-legend-item">
                                    <div class="ec-legend-dot ec-legend-dot--answered"/>
                                    <span>Answered</span>
                                </div>
                                <div class="ec-legend-item">
                                    <div class="ec-legend-dot ec-legend-dot--flagged"/>
                                    <span>Flagged</span>
                                </div>
                                <div class="ec-legend-item">
                                    <div class="ec-legend-dot ec-legend-dot--unanswered"/>
                                    <span>Unanswered</span>
                                </div>
                            </div>

                            <!-- Section grids -->
                            <t t-foreach="reviewSections" t-as="section" t-key="section.sIdx">
                                <div class="ec-review-section">
                                    <div class="ec-review-section-title"
                                         t-esc="section.name or section.skill or ('Section ' + (section.sIdx + 1))"/>
                                    <div class="ec-review-grid">
                                        <t t-foreach="section.questions" t-as="q" t-key="q.id">
                                            <div t-att-class="'ec-review-cell'
                                                + (q.answered ? ' ec-review-cell--answered' : ' ec-review-cell--unanswered')
                                                + (q.flagged ? ' ec-review-cell--flagged' : '')"
                                                 t-on-click="() => this.reviewGoTo(q.sIdx, q.qIdx)">
                                                <t t-esc="q.qIdx + 1"/>
                                            </div>
                                        </t>
                                    </div>
                                </div>
                            </t>

                            <div class="ec-review-footer">
                                <button class="ec-modal-cancel"
                                        t-on-click="hideReviewPanel">
                                    Back to Exam
                                </button>
                                <button class="ec-modal-confirm"
                                        t-on-click="confirmSubmit">
                                    Submit Exam
                                </button>
                            </div>
                        </div>
                    </div>
                </t>

                <!-- ── Submit Confirmation Modal ────────────────────── -->
                <t t-if="state.showConfirmSubmit">
                    <div class="ec-modal-overlay" t-on-click.self="cancelSubmit">
                        <div class="ec-modal">
                            <div class="ec-modal-icon">📝</div>
                            <div class="ec-modal-title">Submit Exam?</div>
                            <div class="ec-modal-body">
                                You have answered <b t-esc="totalAnswered"/> out of
                                <b t-esc="totalAllQuestions"/> questions.
                                <t t-if="totalAllQuestions - totalAnswered > 0">
                                    <br/>
                                    <span style="color: var(--ec-warning);">
                                        <t t-esc="totalAllQuestions - totalAnswered"/>
                                        question(s) are still unanswered.
                                    </span>
                                </t>
                                <br/><br/>
                                Once submitted, you cannot change your answers.
                            </div>
                            <div class="ec-modal-actions">
                                <button class="ec-modal-cancel"
                                        t-on-click="cancelSubmit">
                                    Go Back
                                </button>
                                <button class="ec-modal-confirm"
                                        t-on-click="submitExam">
                                    Submit Now
                                </button>
                            </div>
                        </div>
                    </div>
                </t>
            </t>
        </div>
    </t>

</templates>
