'use client';

import { useRouter } from 'next/navigation';

interface LearningCompleteProps {
  score: {
    correct: number;
    total: number;
  };
  mode: string;
  onRestart?: () => void;
  onBackToDashboard?: () => void;
}

export default function LearningComplete({
  score,
  mode,
  onRestart,
  onBackToDashboard
}: LearningCompleteProps) {
  const router = useRouter();
  const percentage = score.total > 0 ? Math.round((score.correct / score.total) * 100) : 0;

  const getGradeEmoji = (percentage: number) => {
    if (percentage >= 90) return '🏆';
    if (percentage >= 80) return '🎉';
    if (percentage >= 70) return '👍';
    if (percentage >= 60) return '😊';
    return '💪';
  };

  const getGradeMessage = (percentage: number) => {
    if (percentage >= 90) return '太棒了！你是學習高手！';
    if (percentage >= 80) return '做得很好！繼續保持！';
    if (percentage >= 70) return '不錯的表現！';
    if (percentage >= 60) return '還不錯，繼續努力！';
    return '加油！多練習會更好的！';
  };

  const getModeDisplayName = (mode: string) => {
    switch (mode) {
      case 'flip': return '翻卡模式';
      case 'quiz': return '選擇題模式';
      case 'fill': return '填空題模式';
      case 'listening': return '聽力測試模式';
      case 'speaking': return '口說練習模式';
      default: return '學習模式';
    }
  };

  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
      <div className="bg-white rounded-2xl shadow-2xl max-w-md w-full p-8 text-center">
        {/* Celebration Icon */}
        <div className="text-6xl mb-4">
          {getGradeEmoji(percentage)}
        </div>

        {/* Title */}
        <h2 className="text-2xl font-bold text-gray-900 mb-2">
          學習完成！
        </h2>

        {/* Mode */}
        <div className="text-sm text-gray-600 mb-6">
          {getModeDisplayName(mode)}
        </div>

        {/* Score Display */}
        <div className="bg-gray-50 rounded-xl p-6 mb-6">
          <div className="text-4xl font-bold text-blue-600 mb-2">
            {percentage}%
          </div>
          <div className="text-gray-600 mb-3">
            正確率
          </div>
          <div className="text-sm text-gray-500">
            答對 <span className="font-semibold text-green-600">{score.correct}</span> 題，
            共 <span className="font-semibold">{score.total}</span> 題
          </div>
        </div>

        {/* Encouragement Message */}
        <div className="text-gray-700 mb-8">
          {getGradeMessage(percentage)}
        </div>

        {/* Action Buttons */}
        <div className="space-y-3">
          {onRestart && (
            <button
              onClick={onRestart}
              className="w-full py-3 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 transition-colors"
            >
              再練習一次
            </button>
          )}

          <button
            onClick={() => {
              onBackToDashboard?.();
              router.push('/dashboard');
            }}
            className="w-full py-3 bg-gray-200 text-gray-700 rounded-lg font-medium hover:bg-gray-300 transition-colors"
          >
            回到首頁
          </button>

          <button
            onClick={() => router.push('/flashcards')}
            className="w-full py-3 border border-gray-300 text-gray-700 rounded-lg font-medium hover:bg-gray-50 transition-colors"
          >
            管理詞卡
          </button>
        </div>

        {/* Tips */}
        <div className="mt-6 text-xs text-gray-500">
          💡 提示：定期複習可以提高記憶效果
        </div>
      </div>
    </div>
  );
}