'use client'

interface ReviewTypeIndicatorProps {
  currentMode: string;
  userLevel?: number;
  wordLevel?: number;
}

export const ReviewTypeIndicator: React.FC<ReviewTypeIndicatorProps> = ({
  currentMode,
  userLevel,
  wordLevel
}) => {
  const modeLabels = {
    'flip-memory': '翻卡記憶',
    'vocab-choice': '詞彙選擇',
    'vocab-listening': '詞彙聽力',
    'sentence-listening': '例句聽力',
    'sentence-fill': '例句填空',
    'sentence-reorder': '例句重組',
    'sentence-speaking': '例句口說'
  }

  const getDifficultyLabel = (userLevel?: number, wordLevel?: number) => {
    if (!userLevel || !wordLevel) return '系統智能選擇';

    const difficulty = wordLevel - userLevel;
    if (userLevel <= 20) return 'A1學習者適配';
    if (difficulty < -10) return '簡單詞彙練習';
    if (difficulty >= -10 && difficulty <= 10) return '適中詞彙練習';
    return '困難詞彙練習';
  }

  const getModeIcon = (mode: string) => {
    const icons = {
      'flip-memory': '🔄',
      'vocab-choice': '✅',
      'vocab-listening': '🎧',
      'sentence-listening': '👂',
      'sentence-fill': '✏️',
      'sentence-reorder': '🔀',
      'sentence-speaking': '🗣️'
    }
    return icons[mode as keyof typeof icons] || '📝'
  }

  return (
    <div className="bg-white rounded-lg shadow-sm p-4 mb-6 border border-gray-200">
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-3">
          <span className="text-2xl">{getModeIcon(currentMode)}</span>
          <div>
            <h3 className="text-lg font-semibold text-gray-900">
              {modeLabels[currentMode as keyof typeof modeLabels] || currentMode}
            </h3>
            <p className="text-sm text-blue-600">
              {getDifficultyLabel(userLevel, wordLevel)}
            </p>
          </div>
        </div>
        <div className="text-right">
          <div className="bg-blue-50 text-blue-700 px-3 py-1 rounded-full text-xs font-medium">
            系統智能選擇
          </div>
          {userLevel && wordLevel && (
            <div className="text-xs text-gray-500 mt-1">
              學習者程度: {userLevel} | 詞彙難度: {wordLevel}
            </div>
          )}
        </div>
      </div>
    </div>
  )
}

export default ReviewTypeIndicator