'use client'

import { Navigation } from '@/components/shared/Navigation'
import './globals.css'
import { SimpleFlipCard } from './components/SimpleFlipCard'
import { SimpleProgress } from './components/SimpleProgress'
import { SimpleResults } from './components/SimpleResults'
import { SIMPLE_CARDS, CardState } from './data'
import { useReviewSession } from './hooks/useReviewSession'

export default function SimpleReviewPage() {
  // 使用自定義 Hook 管理複習狀態
  const {
    cards,
    score,
    isComplete,
    currentCard,
    sortedCards,
    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">
          <SimpleResults
            score={score}
            totalCards={SIMPLE_CARDS.length}
            onRestart={handleRestart}
          />
        </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
            current={cards.filter((card: CardState) => card.isCompleted).length + 1}
            total={cards.length}
            score={score}
            cards={cards}
            sortedCards={sortedCards}
            currentCard={currentCard}
          />

          {/* 翻卡組件 */}
          {currentCard && (
            <SimpleFlipCard
              card={currentCard}
              onAnswer={handleAnswer}
              onSkip={handleSkip}
            />
          )}

        </div>
      </div>
    </div>
  )
}