examjam-frontend/app/exam/pretest/page.tsx

"use client";

import { useRouter, useSearchParams } from "next/navigation";
import { Suspense, useEffect, useState } from "react";
import { ArrowLeft, HelpCircle, Clock, XCircle, OctagonX } from "lucide-react";
import DestructibleAlert from "@/components/DestructibleAlert";
import BackgroundWrapper from "@/components/BackgroundWrapper";
import { API_URL, getToken } from "@/lib/auth";
import { useExam } from "@/context/ExamContext";
import { Test } from "@/types/exam";
import { Metadata, MockMeta, SubjectMeta, TopicMeta } from "@/types/exam";

type MetadataType = "mock" | "subject" | "topic";

type MetadataMap = {
  mock: MockMeta;
  subject: SubjectMeta;
  topic: TopicMeta;
};

function PretestPageContent() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const { startExam, setCurrentExam } = useExam();

  // Get params from URL search params
  const id = searchParams.get("test_id") || "";
  const typeParam = searchParams.get("type");
  const type =
    typeParam === "mock" || typeParam === "subject" || typeParam === "topic"
      ? typeParam
      : null;

  const [metadata, setMetadata] = useState<MetadataMap[MetadataType] | null>(
    null
  );
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string>();

  function fetchMetadata<T extends MetadataType>(
    type: T,
    data: unknown
  ): MetadataMap[T] {
    return data as MetadataMap[T]; // you'd validate in real code
  }

  useEffect(() => {
    async function fetchQuestions() {
      if (!id || !type) return;

      try {
        setLoading(true);
        const token = await getToken();
        const questionResponse = await fetch(`${API_URL}/tests/${type}/${id}`, {
          method: "GET",
          headers: {
            authorization: `Bearer ${token}`,
          },
        });

        if (!questionResponse.ok) {
          throw new Error("Failed to fetch questions");
        }

        const data = await questionResponse.json();
        const fetchedMetadata = fetchMetadata(type, data.metadata);

        setMetadata(fetchedMetadata);
      } catch (error) {
        console.error(error);
        setError(error instanceof Error ? error.message : "An error occurred");
      } finally {
        setLoading(false);
      }
    }

    fetchQuestions();
  }, [id, type]);

  if (error) {
    return (
      <BackgroundWrapper>
        <div className="min-h-screen">
          <div className="mx-10 pt-10">
            <button
              onClick={() => router.push("/categories/subjects")}
              className="mb-4"
            >
              <ArrowLeft size={30} color="black" />
            </button>
            <div className="">
              <DestructibleAlert
                text={error}
                icon={<OctagonX size={150} color="red" />}
              />
            </div>
          </div>
        </div>
      </BackgroundWrapper>
    );
  }

  if (loading) {
    return (
      <BackgroundWrapper>
        <div className="min-h-screen">
          <div className="mx-10 pt-10">
            <button
              onClick={() => router.push(`/categories/${type}s`)}
              className="mb-4"
            >
              <ArrowLeft size={30} color="black" />
            </button>
            <div className="flex flex-col items-center justify-center">
              <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500 mb-4"></div>
              <p className="text-lg font-medium text-gray-900">Loading...</p>
            </div>
          </div>
        </div>
      </BackgroundWrapper>
    );
  }

  // function handleStartExam() {
  //   if (!examData) return;

  //   setCurrentExam(examData);
  //   startExam(examData);
  //   router.push(`/exam/${id}?time=${metadata?.metadata.duration}`);
  // }
  return (
    <BackgroundWrapper>
      <div className="min-h-screen flex flex-col justify-between">
        <div className="flex-1 overflow-y-auto mb-20">
          {metadata ? (
            <div className="mx-10 mt-10 gap-6 pb-6 space-y-6">
              <button onClick={() => router.back()}>
                <ArrowLeft size={30} color="black" />
              </button>

              <h1 className="text-4xl font-semibold text-[#113768]">
                {metadata.name}
              </h1>

              <p className="text-xl font-medium text-[#113768]">
                Rating: 8 / 10
              </p>

              <div className="border-[1.5px] border-[#226DCE]/30 rounded-[25px] gap-8 py-7 px-5 space-y-8">
                <div className="flex gap-5 items-center">
                  <HelpCircle size={40} color="#113768" />
                  <div className="space-y-2">
                    <p className="font-bold text-4xl text-[#113768]">
                      {metadata.num_questions}
                    </p>
                    <p className="font-normal text-lg">
                      Multiple Choice Questions
                    </p>
                  </div>
                </div>

                <div className="flex gap-5 items-center">
                  <Clock size={40} color="#113768" />
                  <div className="space-y-2">
                    <p className="font-bold text-4xl text-[#113768]">
                      {String(metadata.time_limit_minutes)} mins
                    </p>
                    <p className="font-normal text-lg">Time Taken</p>
                  </div>
                </div>

                <div className="flex gap-5 items-center">
                  <XCircle size={40} color="#113768" />
                  <div className="space-y-2">
                    <p className="font-bold text-4xl text-[#113768]">
                      {metadata.deduction} marks
                    </p>
                    <p className="font-normal text-lg">
                      From each wrong answer
                    </p>
                  </div>
                </div>
              </div>

              <div className="border-[1.5px] border-[#226DCE]/30 rounded-[25px] gap-4 py-7 px-5 space-y-4">
                <h2 className="text-xl font-bold">Ready yourself!</h2>

                <div className="flex pr-4">
                  <span className="mx-4">•</span>
                  <p className="font-normal text-lg">
                    You must complete this test in one session - make sure your
                    internet connection is reliable.
                  </p>
                </div>

                <div className="flex pr-4">
                  <span className="mx-4">•</span>
                  <p className="font-normal text-lg">
                    There is negative marking for the wrong answer.
                  </p>
                </div>

                <div className="flex pr-4">
                  <span className="mx-4">•</span>
                  <p className="font-normal text-lg">
                    The more you answer correctly, the better chance you have of
                    winning a badge.
                  </p>
                </div>

                <div className="flex pr-4">
                  <span className="mx-4">•</span>
                  <p className="font-normal text-lg">
                    You can retake this test however many times you want. But,
                    you will earn points only once.
                  </p>
                </div>
              </div>
            </div>
          ) : (
            <div className="mt-60 flex flex-col items-center">
              <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500 mb-4"></div>
              <p className="text-xl font-medium text-center">Loading...</p>
            </div>
          )}
        </div>

        <button
          onClick={() => console.log("Exam started")}
          className="fixed bottom-0 w-full bg-[#113768] h-[78px] justify-center items-center flex text-white text-2xl font-bold"
        >
          Start Test
        </button>

        {/* <CustomBackHandler fallbackRoute="paper" /> */}
      </div>
    </BackgroundWrapper>
  );
}

export default function PretestPage() {
  return (
    <Suspense
      fallback={
        <BackgroundWrapper>
          <div className="min-h-screen">
            <div className="mx-10 mt-10 flex flex-col justify-center items-center">
              <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-900 mb-4"></div>
              <p className="text-lg font-medium text-gray-900">Loading...</p>
            </div>
          </div>
        </BackgroundWrapper>
      }
    >
      <PretestPageContent />
    </Suspense>
  );
}