dramaling-vocab-learning/frontend/app/review-dev/page.tsx

'use client'

import { Navigation } from '@/components/shared/Navigation'
import { FlipMemory } from '@/components/review/quiz/FlipMemory'
import { VocabChoiceQuiz } from '@/components/review/quiz/VocabChoiceQuiz'
import { QuizProgress } from '@/components/review/ui/QuizProgress'
import { QuizResult } from '@/components/review/quiz/QuizResult'
import { useReviewSession } from '@/hooks/review/useReviewSession'

export default function ReviewDevPage() {
  // 使用重構後的 Hook 管理線性複習狀態
  const {
    quizItems,
    score,
    isComplete,
    currentQuizItem,
    currentCard,
    vocabOptions,
    totalQuizItems,
    completedQuizItems,
    handleAnswer,
    handleSkip,
    handleRestart,
    isLoading,
    error,
    flashcards
  } = useReviewSession()

  // 顯示載入狀態
  if (isLoading) {
    return (
      <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
        <Navigation />
        <div className="py-8">
          <div className="max-w-4xl mx-auto px-4">
            <div className="bg-white rounded-xl shadow-lg p-8 text-center">
              <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
              <h2 className="text-xl font-semibold text-gray-700">載入詞卡中...</h2>
              <p className="text-gray-500 mt-2">正在從後端獲取您的複習詞卡</p>
            </div>
          </div>
        </div>
      </div>
    )
  }

  // 顯示錯誤狀態
  if (error) {
    return (
      <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
        <Navigation />
        <div className="py-8">
          <div className="max-w-4xl mx-auto px-4">
            <div className="bg-white rounded-xl shadow-lg p-8 text-center">
              <div className="text-red-500 text-4xl mb-4">⚠️</div>
              <h2 className="text-xl font-semibold text-red-700 mb-2">載入失敗</h2>
              <p className="text-gray-600 mb-6">{error}</p>
              <button
                onClick={handleRestart}
                className="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
              >
                重新載入
              </button>
            </div>
          </div>
        </div>
      </div>
    )
  }

  // 顯示結果頁面
  if (isComplete) {
    return (
      <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
        <Navigation />
        <div className="py-8">
          <div className="max-w-4xl mx-auto px-4">
            <QuizResult
              score={score}
              totalCards={flashcards.length}
              onRestart={handleRestart}
            />

            {/* 線性測驗完成統計 */}
            <div className="mt-6 bg-white rounded-lg shadow p-6">
              <h3 className="text-lg font-semibold text-gray-900 mb-4">測驗統計</h3>
              <div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-center">
                <div>
                  <div className="text-2xl font-bold text-blue-600">{completedQuizItems}</div>
                  <div className="text-sm text-gray-600">完成測驗項目</div>
                </div>
                <div>
                  <div className="text-2xl font-bold text-green-600">{flashcards.length}</div>
                  <div className="text-sm text-gray-600">練習詞卡數</div>
                </div>
                <div>
                  <div className="text-2xl font-bold text-purple-600">
                    {score.total > 0 ? Math.round((score.correct / score.total) * 100) : 0}%
                  </div>
                  <div className="text-sm text-gray-600">正確率</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }

  // 主要線性測驗頁面
  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
      <Navigation />

      <div className="py-8">
        <div className="max-w-4xl mx-auto px-4">
          {/* 使用修改後的 SimpleProgress 組件 */}
          <QuizProgress
            currentQuizItem={currentQuizItem}
            totalQuizItems={totalQuizItems}
            completedQuizItems={completedQuizItems}
            score={score}
            quizItems={quizItems}
          />

          {/* 根據當前測驗項目類型渲染對應組件 */}
          {currentQuizItem && currentCard && (
            <>
              {currentQuizItem.quizType === 'flip-card' && (
                <FlipMemory
                  card={currentCard}
                  onAnswer={handleAnswer}
                  onSkip={handleSkip}
                />
              )}

              {currentQuizItem.quizType === 'vocab-choice' && (
                <VocabChoiceQuiz
                  card={currentCard}
                  options={vocabOptions}
                  onAnswer={handleAnswer}
                  onSkip={handleSkip}
                />
              )}
            </>
          )}

          {/* 控制按鈕 */}
          <div className="mt-6 text-center">
            <button
              onClick={handleRestart}
              className="px-4 py-2 bg-gray-500 text-white rounded-lg hover:bg-gray-600"
            >
              重新開始
            </button>
          </div>
        </div>
      </div>
    </div>
  )
}