'use client'

import { useState } from 'react'
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 } from './data'

export default function SimpleReviewPage() {
  // 極簡狀態管理 - 只用 React useState
  const [currentCardIndex, setCurrentCardIndex] = useState(0)
  const [score, setScore] = useState({ correct: 0, total: 0 })
  const [isComplete, setIsComplete] = useState(false)

  const currentCard = SIMPLE_CARDS[currentCardIndex]
  const isLastCard = currentCardIndex >= SIMPLE_CARDS.length - 1

  // 處理答題 - 極簡邏輯
  const handleAnswer = (confidence: number) => {
    // 信心度3以上算答對
    const isCorrect = confidence >= 3

    // 更新分數
    setScore(prevScore => ({
      correct: prevScore.correct + (isCorrect ? 1 : 0),
      total: prevScore.total + 1
    }))

    // 判斷是否完成
    if (isLastCard) {
      setIsComplete(true)
    } else {
      // 下一張卡片
      setCurrentCardIndex(prevIndex => prevIndex + 1)
    }
  }

  // 重新開始 - 重置所有狀態
  const handleRestart = () => {
    setCurrentCardIndex(0)
    setScore({ correct: 0, total: 0 })
    setIsComplete(false)
  }

  // 顯示結果頁面
  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={currentCardIndex + 1}
            total={SIMPLE_CARDS.length}
            score={score}
          />

          {/* 翻卡組件 */}
          <SimpleFlipCard
            card={currentCard}
            onAnswer={handleAnswer}
          />

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