Initial working commit

src/app/(protected)/[classSlug]/quizzes/[quizId]/page.tsx

@@ -0,0 +1,177 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import { useParams, useRouter } from "next/navigation";
+import { QuizViewer } from "@/components/quizzes/QuizViewer";
+import { AttemptHistory } from "@/components/quizzes/AttemptHistory";
+import { ShareMenu } from "@/components/ui/ShareMenu";
+
+
+interface Option {
+  id: string;
+  text: string;
+  isCorrect: boolean;
+}
+
+interface Question {
+  id: string;
+  type: string;
+  prompt: string;
+  rationale: string;
+  category: string;
+  options: Option[];
+}
+
+interface QuizAttempt {
+  id: string;
+  score: number;
+  maxScore: number;
+  answersJson: string;
+  isPartialRetake: boolean;
+  completedAt: string;
+}
+
+interface QuizData {
+  id: string;
+  name: string;
+  description: string | null;
+  questions: Question[];
+  class: { slug: string; name: string };
+  progress: Array<{
+    mode: string;
+    currentIndex: number;
+    orderJson: string;
+    answersJson: string | null;
+  }>;
+}
+
+export default function QuizStudyPage() {
+  const params = useParams();
+  const router = useRouter();
+  const classSlug = params.classSlug as string;
+  const quizId = params.quizId as string;
+  
+  const [quiz, setQuiz] = useState<QuizData | null>(null);
+  const [attempts, setAttempts] = useState<QuizAttempt[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [view, setView] = useState<"history" | "take">("take");
+  const [retakeIds, setRetakeIds] = useState<string[] | null>(null);
+  
+  const fetchQuizAndAttempts = useCallback(async () => {
+    try {
+      const [quizRes, attemptsRes] = await Promise.all([
+        fetch(`/api/quizzes/${quizId}`),
+        fetch(`/api/quizzes/${quizId}/attempt`)
+      ]);
+      
+      if (!quizRes.ok) throw new Error("Not found");
+      
+      const [quizData, attemptsData] = await Promise.all([
+        quizRes.json(),
+        attemptsRes.ok ? attemptsRes.json() : []
+      ]);
+      
+      setQuiz(quizData);
+      setAttempts(attemptsData);
+      
+      // Optional: keep track of attempt count, but default view is already "take"
+      if (attemptsData.length > 0) {
+        // We can do something here if we wanted to auto-switch to history, but user wants take
+      }
+    } catch {
+      router.push(`/${classSlug}/quizzes`);
+    } finally {
+      setLoading(false);
+    }
+  }, [quizId, classSlug, router]);
+
+  useEffect(() => {
+    fetchQuizAndAttempts();
+  }, [fetchQuizAndAttempts]);
+
+  if (loading || !quiz) {
+    return (
+      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        <div className="animate-subtle-pulse">
+          <div className="h-8 bg-bg-surface-alt rounded w-1/3 mb-4" />
+          <div className="h-64 bg-bg-surface rounded-xl border border-border-light" />
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="max-w-4xl mx-auto w-full py-2 md:py-4">
+      {/* Header */}
+      <div className="flex items-center justify-between mb-6">
+        <div>
+          <button
+            onClick={() => router.push(`/${classSlug}/quizzes`)}
+            className="inline-flex items-center gap-1 text-sm text-text-muted hover:text-text-heading mb-2 transition-colors cursor-pointer"
+          >
+            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+            </svg>
+            Back to quizzes
+          </button>
+          <h1 className="text-xl font-bold text-text-heading">{quiz.name}</h1>
+          {quiz.description && (
+            <p className="text-sm text-text-secondary mt-1">{quiz.description}</p>
+          )}
+        </div>
+
+        {/* View toggle & Share */}
+        <div className="flex items-center gap-4">
+          <ShareMenu targetType="QUIZ" contentId={quiz.id} classSlug={classSlug} />
+          
+          {attempts.length > 0 && (
+            <div className="flex bg-bg-surface-alt rounded-lg p-0.5 border border-border-light">
+              <button
+                onClick={() => setView("history")}
+                className={`px-4 py-2 rounded-md text-sm font-medium transition-all duration-200 cursor-pointer ${
+                  view === "history"
+                    ? "bg-bg-surface text-text-heading shadow-sm"
+                    : "text-text-muted hover:text-text-heading"
+                }`}
+              >
+                History
+              </button>
+              <button
+                onClick={() => setView("take")}
+                className={`px-4 py-2 rounded-md text-sm font-medium transition-all duration-200 cursor-pointer ${
+                  view === "take"
+                    ? "bg-bg-surface text-text-heading shadow-sm"
+                    : "text-text-muted hover:text-text-heading"
+                }`}
+              >
+                Take Quiz
+              </button>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Content */}
+      {view === "history" && attempts.length > 0 ? (
+        <AttemptHistory 
+          quiz={quiz} 
+          attempts={attempts} 
+          onRetake={(missedIds) => {
+            setRetakeIds(missedIds);
+            setView("take");
+          }} 
+        />
+      ) : (
+        <QuizViewer 
+          quiz={quiz} 
+          retakeIds={retakeIds}
+          onFinished={() => {
+            setRetakeIds(null);
+            fetchQuizAndAttempts();
+            setView("history");
+          }} 
+        />
+      )}
+    </div>
+  );
+}