@hed-hog/lms 0.0.304 → 0.0.306

package/hedhog/frontend/app/exams/[id]/attempt/page.tsx.ejs

@@ -1,6 +1,6 @@
 'use client';
 
-import { EmptyState, Page, PageHeader } from '@/components/entity-list';
+import { Page, PageHeader } from '@/components/entity-list';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
@@ -12,7 +12,10 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/dialog';
+import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
 import { Progress } from '@/components/ui/progress';
+import { Textarea } from '@/components/ui/textarea';
+import { useApp } from '@hed-hog/next-app-provider';
 import { AnimatePresence, motion } from 'framer-motion';
 import {
   AlertTriangle,
@@ -30,6 +33,7 @@ import {
 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import Link from 'next/link';
+import { useParams } from 'next/navigation';
 import { useEffect, useRef, useState } from 'react';
 import { toast } from 'sonner';
 
@@ -214,22 +218,101 @@ const examQuestions: Questao[] = [
 const EXAM_TITLE = 'Prova Final - React Avancado';
 const EXAM_TIME_MINUTES = 120;
 
+interface ExamInfo {
+  id: number;
+  title: string;
+  questionCount: number;
+  maxPoints: number;
+  timeLimitMinutes: number | null;
+  passingScore: number;
+  passingPercent: number;
+}
+
+interface AttemptsInfo {
+  allowed: number;
+  used: number;
+  remaining: number;
+  canStart: boolean;
+}
+
+interface AttemptResult {
+  totalPoints: number;
+  maxPoints: number;
+  score: number;
+  scoreDisplay: number;
+  percent: number;
+  passed: boolean | null;
+  hasPendingReview: boolean;
+  pendingReviewCount: number;
+  answersSummary: {
+    questionId: number;
+    hasAnswer: boolean;
+    isCorrect: boolean | null;
+    pointsAwarded: number;
+    requiresManualReview: boolean;
+  }[];
+}
+
+type ExamQuestionType =
+  | 'multiple_choice'
+  | 'true_false'
+  | 'essay'
+  | 'fill_blank'
+  | 'matching';
+
+interface ExamQuestion {
+  id: number;
+  order: number;
+  questionType: ExamQuestionType;
+  statement: string;
+  points: number;
+  alternatives: { id: number; text: string }[];
+  fillBlankAnswers?: Array<{ answer: string; alternatives?: string[] }>;
+  matchingPairs?: Array<{ id: string; leftText: string; rightText: string }>;
+  matchingOptions?: Array<{ id: string; text: string }>;
+}
+
+type ExamAnswerValue = {
+  examOptionId: number | null;
+  answerText: string | null;
+  matchingPairs: Array<{ leftId: string; rightId: string }>;
+};
+
+interface ExamAttemptState {
+  exam: ExamInfo;
+  attempts: AttemptsInfo;
+  questions: ExamQuestion[];
+  attempt: {
+    id: number;
+    status: string;
+    timeRemainingSeconds: number | null;
+    answeredCount: number;
+    answers: {
+      questionId: number;
+      examOptionId: number | null;
+      answerText: string | null;
+      matchingPairs: Array<{ leftId: string; rightId: string }>;
+    }[];
+    result: AttemptResult | null;
+  } | null;
+}
+
 export default function TentativaPage() {
   const t = useTranslations('lms.AttemptPage');
+  const { id } = useParams<{ id: string }>();
+  const examId = Number(id);
+  const { request } = useApp();
+  const [examState, setExamState] = useState<ExamAttemptState | null>(null);
+  const [isLoadingExam, setIsLoadingExam] = useState(true);
   const [started, setStarted] = useState(false);
   const [finished, setFinished] = useState(false);
   const [currentIndex, setCurrentIndex] = useState(0);
-  const [answers, setAnswers] = useState<Record<string, string>>({});
+  const [answers, setAnswers] = useState<Record<string, ExamAnswerValue>>({});
   const [flagged, setFlagged] = useState<Set<string>>(new Set());
   const [timeLeft, setTimeLeft] = useState(EXAM_TIME_MINUTES * 60);
   const [submitDialogOpen, setSubmitDialogOpen] = useState(false);
   const [timeUpDialogOpen, setTimeUpDialogOpen] = useState(false);
   const [showNav, setShowNav] = useState(false);
-  const [score, setScore] = useState<{
-    total: number;
-    max: number;
-    percent: number;
-  } | null>(null);
   const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);
 
   // Timer
@@ -255,15 +338,90 @@ export default function TentativaPage() {
   useEffect(() => {
     if (started && !finished && Object.keys(answers).length > 0) {
       const timeout = setTimeout(() => {
-        // simulate auto-save
+        saveAnswers();
       }, 2000);
       return () => clearTimeout(timeout);
     }
   }, [answers, started, finished]);
 
-  const currentQuestion = examQuestions[currentIndex];
-  const answeredCount = Object.keys(answers).length;
-  const progressPercent = (answeredCount / examQuestions.length) * 100;
+  function isObjectiveQuestion(questionType?: ExamQuestionType) {
+    return questionType === 'multiple_choice' || questionType === 'true_false';
+  }
+
+  function hasAnswerValue(answer?: ExamAnswerValue) {
+    if (!answer) {
+      return false;
+    }
+
+    if (answer.examOptionId != null) {
+      return true;
+    }
+
+    if ((answer.answerText ?? '').trim().length > 0) {
+      return true;
+    }
+
+    return (answer.matchingPairs ?? []).length > 0;
+  }
+
+  function mapAnswersPayload() {
+    return Object.entries(answers)
+      .filter(([, answer]) => hasAnswerValue(answer))
+      .map(([questionId, answer]) => ({
+        questionId: Number(questionId),
+        examOptionId: answer.examOptionId,
+        answerText: answer.answerText?.trim() || undefined,
+        matchingPairs: answer.matchingPairs,
+      }));
+  }
+
+  // Load exam state on mount
+  useEffect(() => {
+    async function load() {
+      try {
+        const { data } = await request<ExamAttemptState>({
+          url: `/lms/exams/${examId}/attempt`,
+          method: 'GET',
+        });
+        setExamState(data);
+        if (data.attempt?.timeRemainingSeconds != null) {
+          setTimeLeft(data.attempt.timeRemainingSeconds);
+        }
+        if (data.attempt?.answers) {
+          const restoredAnswers: Record<string, ExamAnswerValue> = {};
+          for (const answer of data.attempt.answers) {
+            restoredAnswers[String(answer.questionId)] = {
+              examOptionId: answer.examOptionId,
+              answerText: answer.answerText,
+              matchingPairs: answer.matchingPairs ?? [],
+            };
+          }
+          setAnswers(restoredAnswers);
+        }
+        if (data.attempt?.status === 'in_progress') {
+          setStarted(true);
+        }
+      } finally {
+        setIsLoadingExam(false);
+      }
+    }
+    load();
+  }, [examId]);
+
+  const apiQuestions = examState?.questions ?? [];
+  const currentQuestion = apiQuestions[currentIndex];
+  const answeredCount = Object.values(answers).filter((answer) =>
+    hasAnswerValue(answer)
+  ).length;
+  const progressPercent =
+    apiQuestions.length > 0 ? (answeredCount / apiQuestions.length) * 100 : 0;
+  const hasCompletedAttempt = examState?.attempt?.status === 'completed';
+  const hasActiveAttempt = examState?.attempt?.status === 'in_progress';
+  const hasRemainingAttempts = examState?.attempts.canStart !== false;
+  const shouldShowCompletedNotice =
+    hasCompletedAttempt &&
+    !hasRemainingAttempts &&
+    Boolean(examState?.attempt?.result);
 
   if (!currentQuestion) {
     return (
@@ -298,7 +456,47 @@ export default function TentativaPage() {
   }
 
   function selectAnswer(questionId: string, alternativaId: string) {
-    setAnswers((prev) => ({ ...prev, [questionId]: alternativaId }));
+    setAnswers((prev) => ({
+      ...prev,
+      [questionId]: {
+        examOptionId: Number(alternativaId),
+        answerText: null,
+        matchingPairs: [],
+      },
+    }));
+  }
+
+  function updateTextAnswer(questionId: string, answerText: string) {
+    setAnswers((prev) => ({
+      ...prev,
+      [questionId]: {
+        examOptionId: null,
+        answerText,
+        matchingPairs: [],
+      },
+    }));
+  }
+
+  function updateMatchingAnswer(
+    questionId: string,
+    leftId: string,
+    rightId: string
+  ) {
+    setAnswers((prev) => {
+      const currentPairs = prev[questionId]?.matchingPairs ?? [];
+      const nextPairs = currentPairs
+        .filter((pair) => pair.leftId !== leftId)
+        .concat(rightId ? [{ leftId, rightId }] : []);
+
+      return {
+        ...prev,
+        [questionId]: {
+          examOptionId: null,
+          answerText: null,
+          matchingPairs: nextPairs,
+        },
+      };
+    });
   }
 
   function toggleFlag(questionId: string) {
@@ -315,35 +513,104 @@ export default function TentativaPage() {
     setShowNav(false);
   }
 
-  function handleSaveProgress() {
-    toast.success(t('examInProgress.progressSaved'));
+  async function saveAnswers() {
+    const attemptId = examState?.attempt?.id;
+    if (!attemptId) return;
+    await request({
+      url: `/lms/exams/${examId}/attempt/${attemptId}/answers`,
+      method: 'PATCH',
+      data: {
+        answers: mapAnswersPayload(),
+      },
+    });
   }
 
-  function calculateScore() {
-    let total = 0;
-    let max = 0;
-    examQuestions.forEach((q) => {
-      max += q.pontuacao;
-      const selectedAltId = answers[q.id];
-      if (selectedAltId) {
-        const alt = q.alternativas.find((a) => a.id === selectedAltId);
-        if (alt?.correta) total += q.pontuacao;
-      }
-    });
-    return { total, max, percent: Math.round((total / max) * 100) };
+  async function handleSaveProgress() {
+    await saveAnswers();
+    toast.success(t('examInProgress.progressSaved'));
   }
 
-  function handleSubmit() {
+  async function handleSubmit(force = false) {
     if (timerRef.current) clearInterval(timerRef.current);
-    const result = calculateScore();
-    setScore(result);
-    setFinished(true);
     setSubmitDialogOpen(false);
     setTimeUpDialogOpen(false);
+    try {
+      const attemptId = examState?.attempt?.id;
+      if (!attemptId) return;
+      const { data } = await request<ExamAttemptState>({
+        url: `/lms/exams/${examId}/attempt/${attemptId}/submit`,
+        method: 'POST',
+        data: {
+          force,
+          answers: mapAnswersPayload(),
+        },
+      });
+      setExamState(data);
+      setFinished(true);
+    } catch {
+      toast.error(t('examInProgress.submitError'));
+    }
   }
 
   function handleForceSubmit() {
-    handleSubmit();
+    handleSubmit(true);
+  }
+
+  async function handleStartAttempt() {
+    const { data } = await request<ExamAttemptState>({
+      url: `/lms/exams/${examId}/attempt/start`,
+      method: 'POST',
+      data: {},
+    });
+    setExamState(data);
+    if (data.attempt?.timeRemainingSeconds != null) {
+      setTimeLeft(data.attempt.timeRemainingSeconds);
+    }
+    if (data.attempt?.answers) {
+      const restoredAnswers: Record<string, ExamAnswerValue> = {};
+      for (const a of data.attempt.answers) {
+        restoredAnswers[String(a.questionId)] = {
+          examOptionId: a.examOptionId,
+          answerText: a.answerText,
+          matchingPairs: a.matchingPairs ?? [],
+        };
+      }
+      setAnswers(restoredAnswers);
+    }
+    setStarted(true);
+  }
+
+  // Loading screen
+  if (isLoadingExam) {
+    return (
+      <Page>
+        <PageHeader
+          title={t('breadcrumbs.attemptExam')}
+          breadcrumbs={[
+            { label: t('breadcrumbs.home'), href: '/' },
+            { label: t('breadcrumbs.exams'), href: '/lms/exams' },
+            { label: t('breadcrumbs.attemptExam') },
+          ]}
+        />
+        <div className="flex justify-center">
+          <Card className="w-full max-w-3xl animate-pulse border-border/70">
+            <CardHeader className="text-center">
+              <div className="mx-auto mb-4 size-16 rounded-2xl bg-muted" />
+              <div className="mx-auto h-7 w-48 rounded bg-muted" />
+            </CardHeader>
+            <CardContent className="flex flex-col gap-4">
+              <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
+                {[...Array(4)].map((_, i) => (
+                  <div key={i} className="h-16 rounded-lg bg-muted" />
+                ))}
+              </div>
+              <div className="h-32 rounded-lg bg-muted" />
+              <div className="h-10 rounded bg-muted" />
+            </CardContent>
+          </Card>
+        </div>
+      </Page>
+    );
   }
 
   // Start screen
@@ -351,6 +618,8 @@ export default function TentativaPage() {
     return (
       <Page>
         <PageHeader
+          title={examState?.exam.title ?? EXAM_TITLE}
+          description={t('breadcrumbs.attemptExam')}
           breadcrumbs={[
             {
               label: t('breadcrumbs.home'),
@@ -370,45 +639,71 @@ export default function TentativaPage() {
             initial={{ opacity: 0, y: 20 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.5 }}
+            className="w-full max-w-4xl"
           >
-            <Card className="w-full max-w-lg">
+            <Card className="border-border/70">
               <CardHeader className="text-center">
-                <div className="mx-auto mb-4 flex size-16 items-center justify-center rounded-2xl bg-orange-500">
-                  <GraduationCap className="size-8 text-background" />
+                <div className="mx-auto mb-4 flex size-16 items-center justify-center rounded-2xl bg-orange-100 text-orange-700">
+                  <GraduationCap className="size-8" />
                 </div>
-                <CardTitle className="text-2xl">{EXAM_TITLE}</CardTitle>
+                <CardTitle className="text-2xl">
+                  {examState?.exam.title ?? EXAM_TITLE}
+                </CardTitle>
               </CardHeader>
-              <CardContent className="flex flex-col gap-4">
-                <div className="grid grid-cols-2 gap-3">
-                  <div className="rounded-lg bg-muted p-3 text-center">
-                    <p className="text-2xl font-bold">{examQuestions.length}</p>
-                    <p className="text-xs text-muted-foreground">
-                      {t('startScreen.questions')}
-                    </p>
-                  </div>
-                  <div className="rounded-lg bg-muted p-3 text-center">
-                    <p className="text-2xl font-bold">{EXAM_TIME_MINUTES}</p>
-                    <p className="text-xs text-muted-foreground">
-                      {t('startScreen.minutes')}
-                    </p>
-                  </div>
-                  <div className="rounded-lg bg-muted p-3 text-center">
-                    <p className="text-2xl font-bold">
-                      {examQuestions.reduce((a, q) => a + q.pontuacao, 0)}
-                    </p>
-                    <p className="text-xs text-muted-foreground">
-                      {t('startScreen.points')}
-                    </p>
-                  </div>
-                  <div className="rounded-lg bg-muted p-3 text-center">
-                    <p className="text-2xl font-bold">7.0</p>
-                    <p className="text-xs text-muted-foreground">
-                      {t('startScreen.minGrade')}
-                    </p>
-                  </div>
-                </div>
+              <CardContent className="flex flex-col gap-5">
+                <KpiCardsGrid
+                  items={[
+                    {
+                      key: 'questions',
+                      title: t('startScreen.questions'),
+                      value:
+                        examState?.exam.questionCount ?? examQuestions.length,
+                      icon: GraduationCap,
+                      layout: 'compact',
+                      accentClassName:
+                        'from-orange-500/25 via-amber-500/15 to-transparent',
+                      iconContainerClassName: 'bg-orange-100 text-orange-700',
+                    },
+                    {
+                      key: 'minutes',
+                      title: t('startScreen.minutes'),
+                      value:
+                        examState?.exam.timeLimitMinutes ?? EXAM_TIME_MINUTES,
+                      icon: Clock,
+                      layout: 'compact',
+                      accentClassName:
+                        'from-sky-500/25 via-blue-500/15 to-transparent',
+                      iconContainerClassName: 'bg-sky-100 text-sky-700',
+                    },
+                    {
+                      key: 'points',
+                      title: t('startScreen.points'),
+                      value:
+                        examState?.exam.maxPoints ??
+                        examQuestions.reduce((a, q) => a + q.pontuacao, 0),
+                      icon: CheckCircle2,
+                      layout: 'compact',
+                      accentClassName:
+                        'from-emerald-500/25 via-green-500/15 to-transparent',
+                      iconContainerClassName: 'bg-emerald-100 text-emerald-700',
+                    },
+                    {
+                      key: 'min-grade',
+                      title: t('startScreen.minGrade'),
+                      value:
+                        examState != null
+                          ? examState.exam.passingScore.toFixed(1)
+                          : '7.0',
+                      icon: BookmarkCheck,
+                      layout: 'compact',
+                      accentClassName:
+                        'from-violet-500/25 via-indigo-500/15 to-transparent',
+                      iconContainerClassName: 'bg-violet-100 text-violet-700',
+                    },
+                  ]}
+                />
 
-                <div className="rounded-lg border p-4">
+                <div className="rounded-xl border border-border/70 p-5">
                   <h3 className="mb-2 text-sm font-medium">
                     {t('startScreen.instructions')}
                   </h3>
@@ -421,14 +716,39 @@ export default function TentativaPage() {
                   </ul>
                 </div>
 
-                <div className="flex gap-3">
-                  <Button
-                    className="flex-1 gap-2"
-                    onClick={() => setStarted(true)}
-                  >
-                    {t('startScreen.startButton')}
-                  </Button>
-                </div>
+                {shouldShowCompletedNotice ? (
+                  <div className="rounded-xl border border-primary/20 bg-primary/5 p-5">
+                    <p className="text-sm font-semibold text-primary">
+                      VOCE JA REALIZOU ESSE TESTE
+                    </p>
+                    <p className="mt-1 text-sm text-muted-foreground">
+                      Sua tentativa ja foi concluida e nao ha novas tentativas
+                      disponiveis.
+                    </p>
+                    <div className="mt-4 flex gap-3">
+                      <Button
+                        className="flex-1 gap-2"
+                        onClick={() => {
+                          setStarted(true);
+                          setFinished(true);
+                        }}
+                      >
+                        VEJA SEU RESULTADO
+                      </Button>
+                    </div>
+                  </div>
+                ) : (
+                  <div className="flex gap-3">
+                    <Button
+                      className="flex-1 gap-2"
+                      onClick={handleStartAttempt}
+                    >
+                      {hasActiveAttempt
+                        ? 'Continuar teste'
+                        : t('startScreen.startButton')}
+                    </Button>
+                  </div>
+                )}
               </CardContent>
             </Card>
           </motion.div>
@@ -438,11 +758,17 @@ export default function TentativaPage() {
   }
 
   // Results screen
-  if (finished && score) {
-    const passed = score.percent >= 70;
+  const result = examState?.attempt?.result;
+  if (finished && result) {
+    const passed = result.passed === true;
+    const apiAnsweredCount = examState?.attempt?.answeredCount ?? 0;
+    const totalQuestions = examState?.exam.questionCount ?? 0;
+    const questions = examState?.questions ?? [];
     return (
       <Page>
         <PageHeader
+          title={examState?.exam.title ?? EXAM_TITLE}
+          description={t('breadcrumbs.examResult')}
           breadcrumbs={[
             {
               label: t('breadcrumbs.home'),
@@ -463,8 +789,9 @@ export default function TentativaPage() {
             initial={{ opacity: 0, scale: 0.95 }}
             animate={{ opacity: 1, scale: 1 }}
             transition={{ duration: 0.5 }}
+            className="w-full max-w-4xl"
           >
-            <Card className="w-full max-w-lg">
+            <Card className="border-border/70">
               <CardHeader className="text-center">
                 <motion.div
                   initial={{ scale: 0 }}
@@ -479,13 +806,17 @@ export default function TentativaPage() {
                   )}
                 </motion.div>
                 <CardTitle className="text-2xl">
-                  {passed ? t('resultScreen.passed') : t('resultScreen.failed')}
+                  {result.hasPendingReview
+                    ? t('resultScreen.pendingReview')
+                    : passed
+                      ? t('resultScreen.passed')
+                      : t('resultScreen.failed')}
                 </CardTitle>
                 <p className="mt-1 text-sm text-muted-foreground">
-                  {EXAM_TITLE}
+                  {examState?.exam.title ?? EXAM_TITLE}
                 </p>
               </CardHeader>
-              <CardContent className="flex flex-col gap-4">
+              <CardContent className="flex flex-col gap-5">
                 <div className="text-center">
                   <motion.p
                     initial={{ opacity: 0 }}
@@ -493,63 +824,78 @@ export default function TentativaPage() {
                     transition={{ delay: 0.4 }}
                     className="text-5xl font-bold"
                   >
-                    {score.percent}%
+                    {result.hasPendingReview
+                      ? t('resultScreen.pendingBadge')
+                      : `${result.percent}%`}
                   </motion.p>
                   <p className="mt-1 text-sm text-muted-foreground">
-                    {t('resultScreen.scoreText', {
-                      total: score.total,
-                      max: score.max,
-                    })}
+                    {result.hasPendingReview
+                      ? t('resultScreen.pendingDescription', {
+                          count: result.pendingReviewCount,
+                        })
+                      : t('resultScreen.scoreText', {
+                          total: result.totalPoints,
+                          max: result.maxPoints,
+                        })}
                   </p>
                 </div>
 
-                <div className="grid grid-cols-3 gap-3">
-                  <div className="rounded-lg bg-muted p-3 text-center">
-                    <p className="text-lg font-bold">{answeredCount}</p>
-                    <p className="text-xs text-muted-foreground">
-                      {t('resultScreen.answered')}
-                    </p>
-                  </div>
-                  <div className="rounded-lg bg-muted p-3 text-center">
-                    <p className="text-lg font-bold">
-                      {examQuestions.length - answeredCount}
-                    </p>
-                    <p className="text-xs text-muted-foreground">
-                      {t('resultScreen.blank')}
-                    </p>
-                  </div>
-                  <div className="rounded-lg bg-muted p-3 text-center">
-                    <p className="text-lg font-bold">
-                      {formatTime(EXAM_TIME_MINUTES * 60 - timeLeft)}
-                    </p>
-                    <p className="text-xs text-muted-foreground">
-                      {t('resultScreen.timeUsed')}
-                    </p>
-                  </div>
-                </div>
+                <KpiCardsGrid
+                  items={[
+                    {
+                      key: 'answered',
+                      title: t('resultScreen.answered'),
+                      value: apiAnsweredCount,
+                      icon: CheckCircle2,
+                      layout: 'compact',
+                      accentClassName:
+                        'from-emerald-500/25 via-green-500/15 to-transparent',
+                      iconContainerClassName: 'bg-emerald-100 text-emerald-700',
+                    },
+                    {
+                      key: 'blank',
+                      title: t('resultScreen.blank'),
+                      value: totalQuestions - apiAnsweredCount,
+                      icon: X,
+                      layout: 'compact',
+                      accentClassName:
+                        'from-slate-500/25 via-zinc-500/15 to-transparent',
+                      iconContainerClassName: 'bg-slate-100 text-slate-700',
+                    },
+                    {
+                      key: 'time-used',
+                      title: t('resultScreen.timeUsed'),
+                      value: formatTime(EXAM_TIME_MINUTES * 60 - timeLeft),
+                      icon: Clock,
+                      layout: 'compact',
+                      accentClassName:
+                        'from-sky-500/25 via-blue-500/15 to-transparent',
+                      iconContainerClassName: 'bg-sky-100 text-sky-700',
+                    },
+                  ]}
+                  columns={3}
+                />
 
                 {/* Review answers */}
-                <div className="h-auto rounded-lg border p-3">
+                <div className="h-auto rounded-xl border border-border/70 p-4">
                   <p className="mb-2 text-sm font-medium">
                     {t('resultScreen.answersSummary')}
                   </p>
                   <div className="flex flex-col gap-2">
-                    {examQuestions.map((q, i) => {
-                      const selectedAltId = answers[q.id];
-                      const selectedAlt = q.alternativas.find(
-                        (a) => a.id === selectedAltId
+                    {result.answersSummary.map((summary, i) => {
+                      const q = questions.find(
+                        (q) => q.id === summary.questionId
                       );
-                      const isCorrect = selectedAlt?.correta;
                       return (
                         <div
-                          key={q.id}
+                          key={summary.questionId}
                           className="flex items-center gap-2 text-sm"
                         >
                           <span
                             className={`flex size-6 shrink-0 items-center justify-center rounded-full text-xs font-medium ${
-                              !selectedAltId
+                              !summary.hasAnswer
                                 ? 'bg-muted text-muted-foreground'
-                                : isCorrect
+                                : summary.isCorrect
                                   ? 'bg-primary text-primary-foreground'
                                   : 'bg-destructive/10 text-destructive'
                             }`}
@@ -557,14 +903,18 @@ export default function TentativaPage() {
                             {i + 1}
                           </span>
                           <span className="flex-1 truncate text-muted-foreground">
-                            {q.enunciado.substring(0, 50)}...
+                            {q
+                              ? `${q.statement.substring(0, 50)}...`
+                              : `#${summary.questionId}`}
                           </span>
                           <span className="shrink-0 text-xs font-medium">
-                            {!selectedAltId
+                            {!summary.hasAnswer
                               ? t('resultScreen.noAnswer')
-                              : isCorrect
-                                ? `+${q.pontuacao}`
-                                : '0'}
+                              : summary.requiresManualReview
+                                ? t('resultScreen.pendingAnswer')
+                                : summary.isCorrect
+                                  ? `+${summary.pointsAwarded}`
+                                  : '0'}
                           </span>
                         </div>
                       );
@@ -591,6 +941,11 @@ export default function TentativaPage() {
   return (
     <Page>
       <PageHeader
+        title={examState?.exam.title ?? EXAM_TITLE}
+        description={t('examInProgress.answeredCount', {
+          count: answeredCount,
+          total: apiQuestions.length,
+        })}
         breadcrumbs={[
           {
             label: t('breadcrumbs.home'),
@@ -643,38 +998,45 @@ export default function TentativaPage() {
         }
       />
 
-      {/* Progress bar */}
-      <div className="px-4 pb-2">
-        <Progress value={progressPercent} className="h-1.5" />
-      </div>
-
-      {/* Top bar */}
-      <header className="sticky top-0 z-50 border-b bg-background/95 backdrop-blur">
-        <div className="flex h-14 items-center justify-between px-4">
-          <div className="flex items-center gap-3">
+      <Card className="mb-6 border-border/70">
+        <CardContent className="space-y-4 p-4">
+          <div className="flex flex-wrap items-center justify-between gap-3">
             <div>
-              <p className="text-sm font-medium leading-none">{EXAM_TITLE}</p>
-              <p className="mt-0.5 text-xs text-muted-foreground">
+              <p className="text-sm font-medium">
                 {t('examInProgress.question')} {currentIndex + 1}{' '}
-                {t('examInProgress.of')} {examQuestions.length}
+                {t('examInProgress.of')} {apiQuestions.length}
+              </p>
+              <p className="text-xs text-muted-foreground">
+                {currentQuestion?.questionType
+                  ? t(`examInProgress.types.${currentQuestion.questionType}`)
+                  : ''}
               </p>
             </div>
+            <div className="flex items-center gap-2">
+              <Badge variant="outline" className="font-mono">
+                {formatTime(timeLeft)}
+              </Badge>
+              <Badge variant="secondary">
+                {answeredCount}/{apiQuestions.length}
+              </Badge>
+            </div>
           </div>
-        </div>
-      </header>
+          <Progress value={progressPercent} className="h-1.5" />
+        </CardContent>
+      </Card>
 
       <div className="flex gap-6">
         {/* Question area */}
         <div className="flex-1">
           <AnimatePresence mode="wait">
             <motion.div
-              key={currentQuestion.id}
+              key={currentQuestion?.id ?? currentIndex}
               initial={{ opacity: 0, x: 20 }}
               animate={{ opacity: 1, x: 0 }}
               exit={{ opacity: 0, x: -20 }}
               transition={{ duration: 0.25 }}
             >
-              <Card>
+              <Card className="border-border/70">
                 <CardContent className="p-6">
                   {/* Question header */}
                   <div className="mb-6 flex items-start justify-between gap-4">
@@ -682,16 +1044,23 @@ export default function TentativaPage() {
                       <div className="flex size-10 shrink-0 items-center justify-center rounded-full bg-primary text-base font-bold text-primary-foreground">
                         {currentIndex + 1}
                       </div>
-                      <div>
+                      <div className="space-y-2">
                         <p className="text-base font-medium leading-relaxed">
-                          {currentQuestion.enunciado}
+                          {currentQuestion?.statement}
                         </p>
                         <div className="mt-2 flex items-center gap-2">
                           <Badge variant="outline" className="text-xs">
-                            {currentQuestion.pontuacao} pt
-                            {currentQuestion.pontuacao !== 1 ? 's' : ''}
+                            {currentQuestion?.points} pt
+                            {currentQuestion?.points !== 1 ? 's' : ''}
                           </Badge>
-                          {flagged.has(currentQuestion.id) && (
+                          {currentQuestion?.questionType && (
+                            <Badge variant="secondary" className="text-xs">
+                              {t(
+                                `examInProgress.types.${currentQuestion.questionType}`
+                              )}
+                            </Badge>
+                          )}
+                          {flagged.has(String(currentQuestion?.id)) && (
                             <Badge variant="secondary" className="text-xs">
                               {t('examInProgress.marked')}
                             </Badge>
@@ -702,51 +1071,128 @@ export default function TentativaPage() {
                     <Button
                       variant="ghost"
                       size="icon"
-                      className={`shrink-0 ${flagged.has(currentQuestion.id) ? 'text-primary' : 'text-muted-foreground'}`}
-                      onClick={() => toggleFlag(currentQuestion.id)}
+                      className={`shrink-0 ${flagged.has(String(currentQuestion?.id)) ? 'text-primary' : 'text-muted-foreground'}`}
+                      onClick={() => toggleFlag(String(currentQuestion?.id))}
                       aria-label={t('examInProgress.markQuestion')}
                     >
                       <Flag
-                        className={`size-5 ${flagged.has(currentQuestion.id) ? 'fill-current' : ''}`}
+                        className={`size-5 ${flagged.has(String(currentQuestion?.id)) ? 'fill-current' : ''}`}
                       />
                     </Button>
                   </div>
 
                   {/* Alternatives */}
-                  <div className="flex flex-col gap-3">
-                    {currentQuestion.alternativas.map((alt, i) => {
-                      const isSelected = answers[currentQuestion.id] === alt.id;
-                      return (
-                        <motion.button
-                          key={alt.id}
-                          whileHover={{ scale: 1.01 }}
-                          whileTap={{ scale: 0.99 }}
-                          onClick={() =>
-                            selectAnswer(currentQuestion.id, alt.id)
-                          }
-                          className={`flex items-center gap-3 rounded-xl border p-4 text-left text-sm transition-all ${
-                            isSelected
-                              ? 'border-primary bg-primary/5 font-medium'
-                              : 'border-border hover:border-primary/30 hover:bg-muted/50'
-                          }`}
-                        >
-                          <span
-                            className={`flex size-7 shrink-0 items-center justify-center rounded-full border text-xs font-medium transition-colors ${
+                  {isObjectiveQuestion(currentQuestion?.questionType) ? (
+                    <div className="flex flex-col gap-3">
+                      {(currentQuestion?.alternatives ?? []).map((alt, i) => {
+                        const isSelected =
+                          answers[String(currentQuestion?.id)]?.examOptionId ===
+                          alt.id;
+                        return (
+                          <motion.button
+                            key={alt.id}
+                            whileHover={{ scale: 1.01 }}
+                            whileTap={{ scale: 0.99 }}
+                            onClick={() =>
+                              selectAnswer(
+                                String(currentQuestion?.id),
+                                String(alt.id)
+                              )
+                            }
+                            className={`flex items-center gap-3 rounded-xl border p-4 text-left text-sm transition-all ${
                               isSelected
-                                ? 'border-primary bg-primary text-primary-foreground'
-                                : 'border-border'
+                                ? 'border-primary bg-primary/5 font-medium'
+                                : 'border-border hover:border-primary/30 hover:bg-muted/50'
                             }`}
                           >
-                            {String.fromCharCode(65 + i)}
-                          </span>
-                          <span className="flex-1">{alt.texto}</span>
-                          {isSelected && (
-                            <CircleDot className="size-5 shrink-0" />
-                          )}
-                        </motion.button>
-                      );
-                    })}
-                  </div>
+                            <span
+                              className={`flex size-7 shrink-0 items-center justify-center rounded-full border text-xs font-medium transition-colors ${
+                                isSelected
+                                  ? 'border-primary bg-primary text-primary-foreground'
+                                  : 'border-border'
+                              }`}
+                            >
+                              {String.fromCharCode(65 + i)}
+                            </span>
+                            <span className="flex-1">{alt.text}</span>
+                            {isSelected && (
+                              <CircleDot className="size-5 shrink-0" />
+                            )}
+                          </motion.button>
+                        );
+                      })}
+                    </div>
+                  ) : currentQuestion?.questionType === 'matching' ? (
+                    <div className="space-y-3">
+                      <p className="text-sm text-muted-foreground">
+                        {t('examInProgress.matchingDescription')}
+                      </p>
+                      {(currentQuestion?.matchingPairs ?? []).map((pair) => {
+                        const selectedRightId = (
+                          answers[String(currentQuestion?.id)]?.matchingPairs ??
+                          []
+                        ).find((item) => item.leftId === pair.id)?.rightId;
+
+                        return (
+                          <div
+                            key={pair.id}
+                            className="grid gap-2 rounded-lg border p-3 md:grid-cols-2"
+                          >
+                            <p className="text-sm font-medium">
+                              {pair.leftText}
+                            </p>
+                            <select
+                              value={selectedRightId ?? ''}
+                              onChange={(event) =>
+                                updateMatchingAnswer(
+                                  String(currentQuestion?.id),
+                                  pair.id,
+                                  event.target.value
+                                )
+                              }
+                              className="h-9 rounded-md border bg-background px-3 text-sm"
+                            >
+                              <option value="">
+                                {t('examInProgress.matchingSelectPlaceholder')}
+                              </option>
+                              {(currentQuestion?.matchingOptions ?? []).map(
+                                (option) => (
+                                  <option key={option.id} value={option.id}>
+                                    {option.text}
+                                  </option>
+                                )
+                              )}
+                            </select>
+                          </div>
+                        );
+                      })}
+                    </div>
+                  ) : (
+                    <div className="space-y-3">
+                      <p className="text-sm text-muted-foreground">
+                        {currentQuestion?.questionType === 'fill_blank'
+                          ? t('examInProgress.fillBlankDescription')
+                          : t('examInProgress.essayDescription')}
+                      </p>
+                      <Textarea
+                        rows={10}
+                        value={
+                          answers[String(currentQuestion?.id)]?.answerText ?? ''
+                        }
+                        onChange={(event) =>
+                          updateTextAnswer(
+                            String(currentQuestion?.id),
+                            event.target.value
+                          )
+                        }
+                        placeholder={
+                          currentQuestion?.questionType === 'fill_blank'
+                            ? t('examInProgress.fillBlankPlaceholder')
+                            : t('examInProgress.essayPlaceholder')
+                        }
+                      />
+                    </div>
+                  )}
 
                   {/* Navigation */}
                   <div className="mt-8 flex items-center justify-between">
@@ -761,12 +1207,12 @@ export default function TentativaPage() {
                     </Button>
                     <Button
                       variant="ghost"
-                      className={`shrink-0 lg:hidden ${flagged.has(currentQuestion.id) ? 'text-primary' : 'text-muted-foreground'}`}
+                      className="lg:hidden"
                       onClick={() => setShowNav(!showNav)}
                     >
-                      {currentIndex + 1}/{examQuestions.length}
+                      {currentIndex + 1}/{apiQuestions.length}
                     </Button>
-                    {currentIndex < examQuestions.length - 1 ? (
+                    {currentIndex < apiQuestions.length - 1 ? (
                       <Button
                         className="gap-2"
                         onClick={() => setCurrentIndex((p) => p + 1)}
@@ -792,7 +1238,7 @@ export default function TentativaPage() {
 
         {/* Side navigation - desktop */}
         <div className="hidden w-64 shrink-0 lg:block">
-          <Card className="sticky top-20">
+          <Card className="sticky top-20 border-border/70">
             <CardHeader className="pb-3">
               <CardTitle className="text-sm font-medium">
                 {t('examInProgress.navigation')}
@@ -800,15 +1246,15 @@ export default function TentativaPage() {
               <p className="text-xs text-muted-foreground">
                 {t('examInProgress.answeredCount', {
                   count: answeredCount,
-                  total: examQuestions.length,
+                  total: apiQuestions.length,
                 })}
               </p>
             </CardHeader>
             <CardContent className="pb-4">
               <div className="grid grid-cols-5 gap-2">
-                {examQuestions.map((q, i) => {
-                  const isAnswered = !!answers[q.id];
-                  const isFlagged = flagged.has(q.id);
+                {apiQuestions.map((q, i) => {
+                  const isAnswered = hasAnswerValue(answers[String(q.id)]);
+                  const isFlagged = flagged.has(String(q.id));
                   const isCurrent = i === currentIndex;
                   return (
                     <button
@@ -819,7 +1265,7 @@ export default function TentativaPage() {
                           ? 'bg-primary text-primary-foreground ring-1 ring-primary ring-offset-2'
                           : isAnswered
                             ? 'bg-primary/10 text-primary'
-                            : 'bg-muted text-muted-foreground hover:bg-muted/80'
+                            : 'bg-muted/80 text-muted-foreground hover:bg-muted'
                       }`}
                       aria-label={`${t('examInProgress.questionLabel', { number: i + 1 })}${isAnswered ? ` ${t('examInProgress.questionAnswered')}` : ''}${isFlagged ? ` ${t('examInProgress.questionMarked')}` : ''}`}
                     >
@@ -885,13 +1331,13 @@ export default function TentativaPage() {
               <p className="mb-3 text-sm font-medium">
                 {t('examInProgress.navigationMobile', {
                   count: answeredCount,
-                  total: examQuestions.length,
+                  total: apiQuestions.length,
                 })}
               </p>
               <div className="grid grid-cols-8 gap-2">
-                {examQuestions.map((q, i) => {
-                  const isAnswered = !!answers[q.id];
-                  const isFlagged = flagged.has(q.id);
+                {apiQuestions.map((q, i) => {
+                  const isAnswered = hasAnswerValue(answers[String(q.id)]);
+                  const isFlagged = flagged.has(String(q.id));
                   const isCurrent = i === currentIndex;
                   return (
                     <button
@@ -932,16 +1378,16 @@ export default function TentativaPage() {
             <DialogDescription asChild>
               <div>
                 <p>{t('submitDialog.description')}</p>
-                <div className="mt-3 flex gap-4 rounded-lg bg-muted p-3 text-sm">
+                <div className="mt-3 grid gap-3 rounded-xl bg-muted p-4 text-sm md:grid-cols-3">
                   <div>
                     <p className="font-medium text-primary">
-                      {answeredCount}/{examQuestions.length}
+                      {answeredCount}/{apiQuestions.length}
                     </p>
                     <p className="text-xs">{t('submitDialog.answeredLabel')}</p>
                   </div>
                   <div>
                     <p className="font-medium text-primary">
-                      {examQuestions.length - answeredCount}
+                      {apiQuestions.length - answeredCount}
                     </p>
                     <p className="text-xs">{t('submitDialog.blankLabel')}</p>
                   </div>
@@ -950,10 +1396,10 @@ export default function TentativaPage() {
                     <p className="text-xs">{t('submitDialog.markedLabel')}</p>
                   </div>
                 </div>
-                {examQuestions.length - answeredCount > 0 && (
+                {apiQuestions.length - answeredCount > 0 && (
                   <p className="mt-2 text-sm text-destructive">
                     {t('submitDialog.warning', {
-                      count: examQuestions.length - answeredCount,
+                      count: apiQuestions.length - answeredCount,
                     })}
                   </p>
                 )}
@@ -967,7 +1413,7 @@ export default function TentativaPage() {
             >
               {t('submitDialog.continueButton')}
             </Button>
-            <Button onClick={handleSubmit}>
+            <Button onClick={() => handleSubmit()}>
               {t('submitDialog.submitButton')}
             </Button>
           </DialogFooter>