interface SimpleResultsProps {
  score: { correct: number; total: number }
  totalCards: number
  onRestart: () => void
}

export function QuizResult({ score, totalCards, onRestart }: SimpleResultsProps) {
  const accuracy = Math.round((score.correct / score.total) * 100)

  const getPerformanceMessage = () => {
    if (accuracy >= 80) return { text: '太棒了！', emoji: '🎉', color: 'text-green-600' }
    if (accuracy >= 60) return { text: '不錯！', emoji: '👍', color: 'text-blue-600' }
    if (accuracy >= 40) return { text: '繼續努力！', emoji: '💪', color: 'text-yellow-600' }
    return { text: '加油！', emoji: '🌟', color: 'text-orange-600' }
  }

  const performance = getPerformanceMessage()

  return (
    <div className="max-w-md mx-auto text-center">
      <div className="bg-white rounded-xl shadow-lg p-8">
        {/* 完成慶祝 */}
        <div className="text-6xl mb-4">{performance.emoji}</div>

        <h1 className="text-2xl font-bold text-gray-900 mb-2">
          複習完成！
        </h1>

        <p className={`text-xl font-semibold mb-6 ${performance.color}`}>
          {performance.text}
        </p>

        {/* 詳細統計 */}
        <div className="grid grid-cols-3 gap-4 mb-6">
          <div className="bg-gray-50 rounded-lg p-4">
            <div className="text-2xl font-bold text-gray-900">{totalCards}</div>
            <div className="text-sm text-gray-600">總詞卡數</div>
          </div>

          <div className="bg-green-50 rounded-lg p-4">
            <div className="text-2xl font-bold text-green-600">{score.correct}</div>
            <div className="text-sm text-green-600">答對數</div>
          </div>

          <div className="bg-blue-50 rounded-lg p-4">
            <div className="text-2xl font-bold text-blue-600">{accuracy}%</div>
            <div className="text-sm text-blue-600">準確率</div>
          </div>
        </div>

        {/* 鼓勵訊息 */}
        <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6">
          <p className="text-blue-800 text-sm">
            {accuracy >= 80
              ? "您對這些詞彙掌握得很好！繼續保持！"
              : accuracy >= 60
              ? "表現不錯！多複習幾次會更熟練。"
              : "學習是個過程，多練習就會進步！"}
          </p>
        </div>

        {/* 操作按鈕 */}
        <div className="space-y-3">
          <button
            onClick={onRestart}
            className="w-full bg-blue-600 text-white py-3 px-6 rounded-lg font-medium hover:bg-blue-700 transition-colors"
          >
            再次複習
          </button>

          <a
            href="/flashcards"
            className="block w-full border border-gray-300 text-gray-700 py-3 px-6 rounded-lg font-medium hover:bg-gray-50 transition-colors"
          >
            管理詞卡
          </a>

          <a
            href="/dashboard"
            className="block w-full text-gray-500 py-2 px-6 rounded-lg hover:bg-gray-50 transition-colors"
          >
            回到主頁
          </a>
        </div>
      </div>
    </div>
  )
}