fix(ui): fix exam and result screen ui

app/exam/results/page.tsx

@@ -1,277 +1,141 @@
 "use client";
 
-import { useRouter, useSearchParams } from "next/navigation";
-import { ArrowLeft, LocateIcon } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { useExam, useExamResults } from "@/context/ExamContext";
 import { useEffect } from "react";
+import React from "react";
 
-// Types
 interface Question {
+  solution: string;
+  id: number;
   question: string;
   options: Record<string, string>;
-  correctAnswer: string;
-  userAnswer: string | null;
-  isCorrect: boolean;
-  solution: string;
 }
 
-interface ResultSheet {
-  score: number;
-  questions: Question[];
+interface QuestionItemProps {
+  question: Question;
+  selectedAnswer: string | undefined;
 }
 
-const ResultsPage = () => {
+const QuestionItem = React.memo<QuestionItemProps>(
+  ({ question, selectedAnswer }) => (
+    <div className="border border-[#8abdff]/50 rounded-2xl p-4 flex flex-col gap-7">
+      <h3 className="text-xl font-medium">
+        {question.id}. {question.question}
+      </h3>
+      <div className="flex flex-col gap-4 items-start">
+        {Object.entries(question.options).map(([key, value]) => (
+          <button key={key} className="flex items-center gap-3">
+            <span
+              className={`flex items-center rounded-full border px-1.5 ${
+                selectedAnswer === key
+                  ? "text-white bg-[#113768] border-[#113768]"
+                  : ""
+              }`}
+            >
+              {key.toUpperCase()}
+            </span>
+            <span className="option-description">{value}</span>
+          </button>
+        ))}
+      </div>
+      <div className="flex flex-col gap-4">
+        <h3 className="text-xl font-bold text-black/40">Solution:</h3>
+        <p className="text-lg font-medium">{question.solution}</p>
+      </div>
+    </div>
+  )
+);
+
+export default function ResultsPage() {
   const router = useRouter();
-  const searchParams = useSearchParams();
-  const answersParam = searchParams.get("answers");
+  const { clearExam, isExamCompleted, getApiResponse } = useExam();
 
-  if (!answersParam) {
+  useEffect(() => {
+    // Redirect if no completed exam
+    if (!isExamCompleted()) {
+      router.push("/exam/select");
+      return;
+    }
+  }, [isExamCompleted, router]);
+
+  let examResults;
+  try {
+    examResults = useExamResults();
+  } catch (error) {
+    // Handle case where there's no completed exam
     return (
       <div className="min-h-screen bg-gray-50 flex items-center justify-center">
         <div className="text-center">
-          <h2 className="text-2xl font-bold text-gray-900 mb-4">
-            No results found
-          </h2>
+          <h1 className="text-2xl font-bold text-gray-900 mb-4">
+            No exam results found
+          </h1>
           <button
-            onClick={() => router.push("/unit")}
-            className="bg-blue-900 text-white px-6 py-3 rounded-lg font-semibold hover:bg-blue-800 transition-colors"
+            onClick={() => router.push("/exam/select")}
+            className="bg-blue-900 text-white px-6 py-3 rounded-lg hover:bg-blue-800"
           >
-            Go Back
+            Take an Exam
           </button>
         </div>
       </div>
     );
   }
 
-  const resultSheet: ResultSheet = JSON.parse(decodeURIComponent(answersParam));
+  // Get API response data
+  const apiResponse = getApiResponse();
 
-  const getScoreMessage = (score: number) => {
-    if (score < 30) return "Try harder!";
-    if (score < 70) return "Getting Better";
-    return "You did great!";
+  const handleBackToHome = () => {
+    router.push("/unit");
+    clearExam();
   };
 
-  const getStatusColor = (question: Question) => {
-    if (question.userAnswer === null) return "bg-yellow-500";
-    return question.isCorrect ? "bg-green-500" : "bg-red-500";
-  };
-
-  const getStatusText = (question: Question) => {
-    if (question.userAnswer === null) return "Skipped";
-    return question.isCorrect ? "Correct" : "Incorrect";
-  };
-
-  const getOptionClassName = (key: string, question: Question): string => {
-    const isCorrectAnswer = key === question.correctAnswer;
-    const isUserAnswer = key === question.userAnswer;
-    const isCorrectAndUserAnswer = isCorrectAnswer && isUserAnswer;
-    const isUserAnswerWrong = isUserAnswer && !isCorrectAnswer;
-
-    if (isCorrectAndUserAnswer) {
-      return "bg-blue-900 text-white border-blue-900";
-    } else if (isCorrectAnswer) {
-      return "bg-green-500 text-white border-green-500";
-    } else if (isUserAnswerWrong) {
-      return "bg-red-500 text-white border-red-500";
-    }
-    return "border-gray-300";
-  };
-
-  // Handle browser back button
-  useEffect(() => {
-    const handlePopState = () => {
-      router.push("/unit");
-    };
-
-    window.addEventListener("popstate", handlePopState);
-    return () => window.removeEventListener("popstate", handlePopState);
-  }, [router]);
+  const timeTaken =
+    examResults.endTime && examResults.startTime
+      ? Math.round(
+          (examResults.endTime.getTime() - examResults.startTime.getTime()) /
+            1000 /
+            60
+        )
+      : 0;
 
   return (
-    <div className="min-h-screen bg-gray-50">
-      <div className="container mx-auto px-4 py-8 max-w-4xl">
-        {/* Header */}
-        <div className="mb-8">
-          <button
-            onClick={() => router.push("/unit")}
-            className="flex items-center text-gray-700 hover:text-gray-900 transition-colors mb-6"
-          >
-            <ArrowLeft size={30} />
-          </button>
+    <div className="min-h-screen bg-white">
+      <div className="bg-white rounded-lg shadow-lg px-10 py-20">
+        <h1 className="text-2xl font-bold text-gray-900 mb-2 text-center">
+          Keep up the good work!
+        </h1>
+
+        {/* Score Display */}
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
+          <div className="bg-blue-50 rounded-lg p-6 text-center">
+            <div className="text-3xl font-bold text-blue-900 mb-2">
+              {examResults.score}%
+            </div>
+            <div className="text-sm text-gray-600">Final Score</div>
+          </div>
         </div>
 
-        {/* Main Content */}
-        <div className="space-y-8">
-          {/* Score Message */}
-          <h1 className="text-3xl font-bold text-blue-900 text-center mb-6">
-            {getScoreMessage(resultSheet.score)}
-          </h1>
-
-          {/* Score Card */}
-          <div className="score-card">
-            <p className="text-2xl font-medium mb-4">Score:</p>
-            <div className="flex items-center justify-center gap-4">
-              <div className="w-15 h-15 bg-blue-900 rounded-full flex items-center justify-center">
-                <div className="w-6 h-6 bg-white rounded-full"></div>
-              </div>
-              <span className="text-6xl font-bold text-blue-900">
-                {resultSheet.score}
-              </span>
-            </div>
-          </div>
-
-          {/* Solutions Section */}
-          <div className="mt-10">
-            <h2 className="text-3xl font-bold text-blue-900 mb-6">Solutions</h2>
-
-            <div className="space-y-6">
-              {resultSheet.questions.map((question, idx) => (
-                <div key={idx} className="question-card">
-                  {/* Question Header */}
-                  <div className="flex justify-between items-start mb-4">
-                    <h3 className="text-xl font-medium flex-1">
-                      {idx + 1}. {question.question}
-                    </h3>
-                    <span
-                      className={`status-badge ${getStatusColor(question)}`}
-                    >
-                      {getStatusText(question)}
-                    </span>
-                  </div>
-
-                  {/* Options */}
-                  <div className="space-y-3 mb-6">
-                    {Object.entries(question.options).map(([key, option]) => (
-                      <div key={key} className="flex items-center gap-4">
-                        <span
-                          className={`option-letter ${getOptionClassName(
-                            key,
-                            question
-                          )}`}
-                        >
-                          {key.toUpperCase()}
-                        </span>
-                        <span className="text-lg">{option}</span>
-                      </div>
-                    ))}
-                  </div>
-
-                  {/* Solution Divider */}
-                  <div className="solution-divider"></div>
-
-                  {/* Solution */}
-                  <div>
-                    <h4 className="text-xl font-semibold text-gray-500 mb-3">
-                      Solution:
-                    </h4>
-                    <p className="text-lg leading-relaxed text-gray-800">
-                      {question.solution}
-                    </p>
-                  </div>
-                </div>
+        {apiResponse && (
+          <div className="mb-8">
+            <h3 className="text-2xl font-bold text-[#113768]  mb-4">
+              Solutions
+            </h3>
+            <div className="flex flex-col gap-7">
+              {apiResponse.questions?.map((question) => (
+                <QuestionItem key={question.id} question={question} />
               ))}
             </div>
           </div>
-        </div>
+        )}
 
-        {/* Bottom Button */}
-        <div className="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 p-4">
-          <div className="container mx-auto max-w-4xl">
-            <button
-              onClick={() => router.push("/unit")}
-              className="w-full bg-blue-900 text-white py-4 px-6 rounded-lg font-bold text-xl hover:bg-blue-800 transition-colors"
-            >
-              Next
-            </button>
-          </div>
-        </div>
-
-        {/* Spacer for fixed button */}
-        <div className="h-24"></div>
+        {/* Action Buttons */}
       </div>
-
-      <style jsx>{`
-        .score-card {
-          height: 170px;
-          width: 100%;
-          border: 2px solid #c1dcff;
-          border-radius: 25px;
-          padding: 24px;
-          display: flex;
-          flex-direction: column;
-          justify-content: center;
-          align-items: center;
-          gap: 12px;
-          background: white;
-        }
-
-        .question-card {
-          border: 2px solid #abd0ff;
-          padding: 24px;
-          border-radius: 20px;
-          background: white;
-          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-        }
-
-        .status-badge {
-          padding: 6px 16px;
-          border-radius: 12px;
-          color: white;
-          font-weight: bold;
-          font-size: 14px;
-          white-space: nowrap;
-        }
-
-        .option-letter {
-          min-width: 32px;
-          height: 32px;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          border-radius: 50%;
-          border: 1px solid;
-          font-size: 14px;
-          font-weight: 500;
-        }
-
-        .solution-divider {
-          width: 100%;
-          height: 1px;
-          border-top: 1px dashed #000;
-          margin: 20px 0;
-        }
-
-        @media (max-width: 768px) {
-          .score-card {
-            height: 150px;
-            padding: 20px;
-          }
-
-          .question-card {
-            padding: 20px;
-            border-radius: 16px;
-          }
-
-          .status-badge {
-            font-size: 12px;
-            padding: 4px 12px;
-          }
-
-          .option-letter {
-            min-width: 28px;
-            height: 28px;
-            font-size: 12px;
-          }
-        }
-
-        @media (max-width: 640px) {
-          .container {
-            padding-left: 16px;
-            padding-right: 16px;
-          }
-        }
-      `}</style>
+      <button
+        onClick={handleBackToHome}
+        className="fixed bottom-0 w-full bg-blue-900 text-white h-[74px] font-bold text-lg  disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+      >
+        Finish
+      </button>
     </div>
   );
-};
-
-export default ResultsPage;
+}