'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-2xl mx-auto px-4">
          {/* 頁面標題 */}
          <div className="text-center mb-8">
            <h1 className="text-3xl font-bold text-gray-900 mb-2">詞彙複習</h1>
            <p className="text-gray-600">翻卡學習，測試您的詞彙記憶</p>
          </div>

          {/* 進度顯示 */}
          <SimpleProgress
            current={currentCardIndex + 1}
            total={SIMPLE_CARDS.length}
            score={score}
          />

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

          {/* 導航提示 */}
          <div className="mt-8 text-center">
            <div className="bg-white/70 rounded-lg p-4">
              <p className="text-sm text-gray-600">
                💡 提示：先翻卡查看詞意，再根據您的熟悉程度選擇信心度
              </p>
            </div>
          </div>

          {/* 快捷操作 */}
          <div className="mt-6 flex justify-center space-x-4">
            <button
              onClick={handleRestart}
              className="px-4 py-2 text-gray-600 hover:text-gray-900 transition-colors"
            >
              重新開始
            </button>
            <span className="text-gray-400">|</span>
            <a
              href="/flashcards"
              className="px-4 py-2 text-blue-600 hover:text-blue-700 transition-colors"
            >
              管理詞卡
            </a>
          </div>
        </div>
      </div>
    </div>
  )
}