'use client'

import { Navigation } from '@/components/shared/Navigation'
import './globals.css'
import { SimpleFlipCard } from '@/components/review/simple/SimpleFlipCard'
import { VocabChoiceTest } from '@/components/review/simple/VocabChoiceTest'
import { SimpleProgress } from '@/components/review/simple/SimpleProgress'
import { SimpleResults } from '@/components/review/simple/SimpleResults'
import { SIMPLE_CARDS } from '@/lib/data/reviewSimpleData'
import { useReviewSession } from '@/hooks/review/useReviewSession'

export default function SimpleReviewPage() {
  // 使用重構後的 Hook 管理線性複習狀態
  const {
    testItems,
    score,
    isComplete,
    currentTestItem,
    currentCard,
    vocabOptions,
    totalTestItems,
    completedTestItems,
    handleAnswer,
    handleSkip,
    handleRestart
  } = useReviewSession()

  // 顯示結果頁面
  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">
            <SimpleResults
              score={score}
              totalCards={SIMPLE_CARDS.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">{completedTestItems}</div>
                  <div className="text-sm text-gray-600">完成測驗項目</div>
                </div>
                <div>
                  <div className="text-2xl font-bold text-green-600">{SIMPLE_CARDS.length}</div>
                  <div className="text-sm text-gray-600">練習詞卡數</div>
                </div>
                <div>
                  <div className="text-2xl font-bold text-purple-600">
                    {Math.round((score.correct / score.total) * 100)}%
                  </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 組件 */}
          <SimpleProgress
            currentTestItem={currentTestItem}
            totalTestItems={totalTestItems}
            completedTestItems={completedTestItems}
            score={score}
            testItems={testItems}
          />

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

              {currentTestItem.testType === 'vocab-choice' && (
                <VocabChoiceTest
                  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>
  )
}