import { QuizItem } from '@/lib/data/reviewSimpleData'

interface ReviewProgressProps {
  currentQuizItem?: QuizItem
  totalQuizItems: number
  completedQuizItems: number
  score: { correct: number; total: number }
}

export function QuizProgressDev({ currentQuizItem, totalQuizItems, completedQuizItems, score }: ReviewProgressProps) {
  const progress = (completedQuizItems / totalQuizItems) * 100
  const accuracy = score.total > 0 ? Math.round((score.correct / score.total) * 100) : 0

  return (
    <div className="mb-8">
      <div className="flex justify-between items-center mb-3">
        <div>
          <span className="text-sm font-medium text-gray-600">複習進度</span>
          {currentQuizItem && (
            <div className="flex items-center mt-1">
              <span className="text-lg mr-2">
                {currentQuizItem.quizType === 'flip-card' ? '🔄' : '🎯'}
              </span>
              <span className="text-sm text-gray-500">
                {currentQuizItem.quizType === 'flip-card' ? '翻卡記憶' : '詞彙選擇'} • {currentQuizItem.cardData.word}
              </span>
            </div>
          )}
        </div>
        <div className="flex items-center gap-4 text-sm text-right">
          <span className="text-gray-600">
            {completedQuizItems}/{totalQuizItems} 項目
          </span>
          {score.total > 0 && (
            <span className="text-green-600 font-medium">
              準確率 {accuracy}%
            </span>
          )}
        </div>
      </div>

      {/* 進度條 */}
      <div className="w-full bg-gray-200 rounded-full h-3">
        <div
          className="bg-blue-500 h-3 rounded-full transition-all duration-300"
          style={{ width: `${progress}%` }}
        />
      </div>

      {/* 基本統計 */}
      <div className="flex justify-center gap-4 mt-3 text-sm">
        {score.total > 0 && (
          <>
            <div className="flex items-center gap-1">
              <span className="w-2 h-2 bg-green-500 rounded-full"></span>
              <span className="text-green-700">答對 {score.correct}</span>
            </div>
            <div className="flex items-center gap-1">
              <span className="w-2 h-2 bg-red-500 rounded-full"></span>
              <span className="text-red-700">答錯 {score.total - score.correct}</span>
            </div>
          </>
        )}
      </div>
    </div>
  )
}