update flash card, test

src/features/toeic/components/TestSession.tsx

@@ -3,205 +3,149 @@ import { useNavigate } from '@tanstack/react-router'
 import { cn } from '@/lib/utils'
 import { useTestStore } from '@/store/test-store'
 import { useRequireAuth } from '@/hooks/use-require-auth'
+import { TestSessionHeader } from './TestSessionHeader'
+import { TestSessionSidebar } from './TestSessionSidebar'
+import { TestSessionFooter } from './TestSessionFooter'
+import type { Question } from '@/types'
 
-const TOTAL_SECONDS = 600 // 10 minutes
 const ANSWER_LABELS = ['A', 'B', 'C', 'D']
 
-function formatTime(s: number) {
-  return `${String(Math.floor(s / 60)).padStart(2, '0')}:${String(s % 60).padStart(2, '0')}`
-}
-
-export function TestSession() {
-  const navigate = useNavigate()
-  const { partId, partName, questions, answers, setAnswer, submitExam } = useTestStore()
-  const [currentQ, setCurrentQ] = useState(0)
-  const [timeLeft, setTimeLeft] = useState(TOTAL_SECONDS)
-  const { isAuthenticated, isLoading } = useRequireAuth()
-
-  const handleSubmit = useCallback(() => {
-    submitExam(TOTAL_SECONDS - timeLeft)
-    navigate({ to: '/toeic/result' })
-  }, [submitExam, navigate, timeLeft])
-
-  // Countdown
-  useEffect(() => {
-    if (questions.length === 0) return
-    const id = setInterval(() => {
-      setTimeLeft((t) => {
-        if (t <= 1) { clearInterval(id); handleSubmit(); return 0 }
-        return t - 1
-      })
-    }, 1000)
-    return () => clearInterval(id)
-  }, [questions.length, handleSubmit])
-
-  // Redirect if no exam started or not authenticated (wait for auth init)
-  useEffect(() => {
-    if (isLoading) return
-    if (!isAuthenticated || questions.length === 0) navigate({ to: '/toeic' })
-  }, [isLoading, isAuthenticated, questions.length, navigate])
-
-  if (questions.length === 0) return null
-
-  const question = questions[currentQ]
-  const answeredCount = answers.filter((a) => a !== null).length
-  const isUrgent = timeLeft < 60
-
+function QuestionCard({
+  question, globalNum, answer, onSelect,
+}: {
+  question: Question
+  globalNum: number
+  answer: number | null
+  onSelect: (idx: number) => void
+}) {
   return (
-    <div className="px-4 lg:px-6 py-6 max-w-6xl mx-auto page-enter">
-      {/* Mobile progress bar */}
-      <div className="lg:hidden mb-4">
-        <div className="flex justify-between text-sm font-semibold mb-2">
-          <span className="text-slate-700">Part {partId} — Câu {currentQ + 1}/{questions.length}</span>
-          <span className={cn('font-bold tabular-nums', isUrgent ? 'text-red-600 timer-urgent' : 'text-blue-600')}>
-            {formatTime(timeLeft)}
-          </span>
+    <div className="bg-white rounded-2xl border border-slate-200 p-6 mb-4">
+      <span className="inline-block bg-blue-600 text-white text-xs font-bold px-3 py-1 rounded-full mb-4">
+        Câu {globalNum}
+      </span>
+
+      {question.passageText && (
+        <div className="bg-slate-50 border border-slate-200 rounded-xl p-4 mb-4 text-sm text-slate-700 leading-relaxed whitespace-pre-wrap">
+          {question.passageText}
         </div>
-        <div className="h-1.5 w-full rounded-full bg-slate-200">
-          <div
-            className="h-full bg-blue-600 rounded-full transition-all"
-            style={{ width: `${((currentQ + 1) / questions.length) * 100}%` }}
-          />
-        </div>
-      </div>
-
-      <div className="flex gap-5">
-        {/* Left: Question */}
-        <div className="flex-1 min-w-0">
-          <div className="bg-white rounded-2xl p-6 border border-slate-200 mb-4">
-            <div className="flex items-center gap-2 mb-4">
-              <span className="bg-blue-600 text-white text-xs font-bold px-3 py-1 rounded-full">
-                Câu {currentQ + 1}
-              </span>
-              <span className="text-xs text-slate-400">Part {partId} — {partName}</span>
-            </div>
-            <p className="text-base font-medium text-slate-800 leading-relaxed mb-6">
-              {question.text}
-            </p>
-            <div className="space-y-3">
-              {question.options.map((opt, i) => {
-                const selected = answers[currentQ] === i
-                return (
-                  <button
-                    key={i}
-                    onClick={() => setAnswer(currentQ, i)}
-                    className={cn(
-                      'w-full flex items-center gap-3 p-4 border-2 rounded-xl text-sm font-medium text-left transition-all',
-                      selected
-                        ? 'border-blue-600 bg-blue-50 text-blue-700'
-                        : 'border-slate-200 hover:border-blue-300 hover:bg-blue-50/50 text-slate-700',
-                    )}
-                  >
-                    <span
-                      className={cn(
-                        'w-8 h-8 rounded-full flex items-center justify-center text-xs font-bold flex-shrink-0',
-                        selected ? 'bg-blue-600 text-white' : 'bg-slate-100 text-slate-500',
-                      )}
-                    >
-                      {ANSWER_LABELS[i]}
-                    </span>
-                    {opt}
-                  </button>
-                )
-              })}
-            </div>
-          </div>
-
-          {/* Navigation */}
-          <div className="flex items-center justify-between">
-            <button
-              onClick={() => setCurrentQ((q) => Math.max(0, q - 1))}
-              disabled={currentQ === 0}
-              className="flex items-center gap-2 px-5 py-2.5 border border-slate-200 rounded-xl text-sm font-semibold text-slate-600 hover:bg-slate-50 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
-            >
-              <span className="material-symbols-outlined" style={{ fontSize: 18 }}>chevron_left</span>
-              Câu trước
-            </button>
-            <span className="text-xs text-slate-400 tabular-nums">{currentQ + 1} / {questions.length}</span>
-            {currentQ < questions.length - 1 ? (
-              <button
-                onClick={() => setCurrentQ((q) => q + 1)}
-                className="flex items-center gap-2 px-5 py-2.5 bg-blue-600 text-white rounded-xl text-sm font-semibold hover:bg-blue-700 transition-colors"
-              >
-                Câu tiếp theo
-                <span className="material-symbols-outlined" style={{ fontSize: 18 }}>chevron_right</span>
-              </button>
-            ) : (
-              <button
-                onClick={handleSubmit}
-                className="flex items-center gap-2 px-5 py-2.5 bg-red-600 text-white rounded-xl text-sm font-semibold hover:bg-red-700 transition-colors"
-              >
-                Nộp bài
-                <span className="material-symbols-outlined" style={{ fontSize: 18 }}>send</span>
-              </button>
-            )}
-          </div>
-        </div>
-
-        {/* Right panel — desktop only */}
-        <div className="hidden lg:flex flex-col gap-4 w-60 flex-shrink-0">
-          {/* Timer */}
-          <div className="bg-white rounded-2xl p-5 border border-slate-200 text-center">
-            <div className="text-xs text-slate-400 font-medium mb-2">Thời gian còn lại</div>
-            <div
-              className={cn(
-                'text-5xl font-extrabold tabular-nums mb-1',
-                isUrgent ? 'text-red-600 timer-urgent' : 'text-blue-600',
-              )}
-            >
-              {formatTime(timeLeft)}
-            </div>
-            <div className="text-xs text-slate-400">phút : giây</div>
-          </div>
-
-          {/* Question dots */}
-          <div className="bg-white rounded-2xl p-5 border border-slate-200">
-            <div className="text-xs text-slate-400 font-medium mb-3">
-              Danh sách câu · {answeredCount}/{questions.length} đã trả lời
-            </div>
-            <div className="grid grid-cols-5 gap-2">
-              {questions.map((_, i) => (
-                <button
-                  key={i}
-                  onClick={() => setCurrentQ(i)}
-                  className={cn(
-                    'w-8 h-8 rounded-full flex items-center justify-center text-[11px] font-semibold transition-all',
-                    i === currentQ
-                      ? 'border-2 border-blue-600 text-blue-600 shadow-sm shadow-blue-600/20'
-                      : answers[i] !== null
-                        ? 'bg-blue-600 text-white'
-                        : 'border-2 border-slate-200 text-slate-400 hover:border-blue-300',
-                  )}
-                >
-                  {i + 1}
-                </button>
-              ))}
-            </div>
-            <div className="flex items-center gap-3 mt-4 text-xs text-slate-400">
-              <span className="w-4 h-4 rounded-full bg-blue-600 inline-block" /> Đã trả lời
-              <span className="w-4 h-4 rounded-full border-2 border-slate-200 inline-block" /> Chưa làm
-            </div>
-          </div>
+      )}
+      {question.audioUrl && (
+        <audio controls src={question.audioUrl} className="w-full mb-4 rounded-lg" />
+      )}
+      {question.imageUrl && (
+        <img src={question.imageUrl} alt="" className="max-h-64 rounded-xl mb-4 object-contain" />
+      )}
+      {question.text && (
+        <p className="text-base font-medium text-slate-800 leading-relaxed mb-5">{question.text}</p>
+      )}
 
+      <div className="space-y-2.5">
+        {question.options.map((opt, i) => (
           <button
-            onClick={handleSubmit}
-            className="w-full py-3 bg-red-600 text-white rounded-xl font-bold text-sm hover:bg-red-700 transition-colors flex items-center justify-center gap-2"
+            key={i}
+            onClick={() => onSelect(i)}
+            className={cn(
+              'w-full flex items-center gap-3 p-3.5 border-2 rounded-xl text-sm font-medium text-left transition-all',
+              answer === i
+                ? 'border-blue-600 bg-blue-50 text-blue-700'
+                : 'border-slate-200 hover:border-blue-300 hover:bg-blue-50/50 text-slate-700',
+            )}
           >
-            <span className="material-symbols-outlined" style={{ fontSize: 18 }}>send</span>
-            Nộp bài
+            <span className={cn(
+              'w-8 h-8 rounded-full flex items-center justify-center text-xs font-bold flex-shrink-0',
+              answer === i ? 'bg-blue-600 text-white' : 'bg-slate-100 text-slate-500',
+            )}>
+              {ANSWER_LABELS[i]}
+            </span>
+            {opt}
           </button>
-        </div>
-      </div>
-
-      {/* Mobile submit */}
-      <div className="lg:hidden mt-4">
-        <button
-          onClick={handleSubmit}
-          className="w-full py-3.5 bg-red-600 text-white rounded-xl font-bold text-sm hover:bg-red-700 transition-colors"
-        >
-          Nộp bài ngay
-        </button>
+        ))}
       </div>
     </div>
   )
 }
+
+export function TestSession() {
+  const navigate = useNavigate()
+  const { testName, parts, currentPartIndex, answers, totalSeconds, setAnswer, setCurrentPart, submitExam } = useTestStore()
+  const { isAuthenticated, isLoading } = useRequireAuth()
+  const [timeLeft, setTimeLeft] = useState(() => totalSeconds > 0 ? totalSeconds : -1)
+  const [timeUsed, setTimeUsed] = useState(0)
+
+  const handleSubmit = useCallback(() => {
+    submitExam(totalSeconds > 0 ? totalSeconds - timeLeft : timeUsed)
+    navigate({ to: '/toeic/result' })
+  }, [submitExam, navigate, totalSeconds, timeLeft, timeUsed])
+
+  // Timer
+  useEffect(() => {
+    if (parts.length === 0) return
+    const id = setInterval(() => {
+      if (timeLeft > 0) {
+        setTimeLeft(t => { if (t <= 1) { clearInterval(id); handleSubmit(); return 0 } return t - 1 })
+      } else {
+        setTimeUsed(t => t + 1)
+      }
+    }, 1000)
+    return () => clearInterval(id)
+  }, [parts.length, timeLeft, handleSubmit])
+
+  useEffect(() => {
+    if (isLoading) return
+    if (!isAuthenticated || parts.length === 0) navigate({ to: '/toeic' })
+  }, [isLoading, isAuthenticated, parts.length, navigate])
+
+  if (parts.length === 0) return null
+
+  const currentPart = parts[currentPartIndex]
+
+  // Compute global question offset for current part
+  let globalOffset = 0
+  for (let i = 0; i < currentPartIndex; i++) globalOffset += parts[i].questions.length
+
+  return (
+    <div className="flex flex-col" style={{ height: 'calc(100vh - var(--app-header-height, 0px))' }}>
+      <TestSessionHeader
+        testName={testName}
+        timeLeft={timeLeft}
+        timeUsed={timeUsed}
+        onSubmit={handleSubmit}
+      />
+
+      <div className="flex flex-1 overflow-hidden">
+        <TestSessionSidebar
+          parts={parts}
+          currentPartIndex={currentPartIndex}
+          answers={answers}
+          onSelectPart={setCurrentPart}
+        />
+
+        {/* Main scrollable content */}
+        <main className="flex-1 overflow-y-auto bg-[#F8FAFC] px-6 py-6">
+          <div className="max-w-3xl mx-auto">
+            <h2 className="text-lg font-extrabold text-slate-700 mb-5">
+              Part {currentPart.partNumber}: {currentPart.partName}
+            </h2>
+            {currentPart.questions.map((q, idx) => (
+              <QuestionCard
+                key={q.id}
+                question={q}
+                globalNum={globalOffset + idx + 1}
+                answer={answers[q.id] ?? null}
+                onSelect={(i) => setAnswer(q.id, i)}
+              />
+            ))}
+          </div>
+        </main>
+      </div>
+
+      <TestSessionFooter
+        currentPartIndex={currentPartIndex}
+        totalParts={parts.length}
+        currentPartName={currentPart.partName}
+        onPrev={() => setCurrentPart(currentPartIndex - 1)}
+        onNext={() => setCurrentPart(currentPartIndex + 1)}
+      />
+    </div>
+  )
+}