"use client";

interface ScoreSummaryProps {
  scores: number[];
  onRestart: () => void;
  onClose: () => void;
}

export default function ScoreSummary({
  scores,
  onRestart,
  onClose,
}: ScoreSummaryProps) {
  // Calculate statistics
  const avgScore =
    scores.length > 0 ? scores.reduce((a, b) => a + b, 0) / scores.length : 0;

  const maxScore = scores.length > 0 ? Math.max(...scores) : 0;
  const minScore = scores.length > 0 ? Math.min(...scores) : 0;

  // Convert average to stars
  const getStars = (score: number): number => {
    if (score >= 90) return 5;
    if (score >= 80) return 4;
    if (score >= 70) return 3;
    if (score >= 60) return 2;
    return 1;
  };

  const stars = getStars(avgScore);

  // Get rating text
  const getRating = (stars: number): string => {
    switch (stars) {
      case 5:
        return "Perfect! 🔥";
      case 4:
        return "Excellent! 💃";
      case 3:
        return "Good Job! 👍";
      case 2:
        return "Not Bad! 😊";
      default:
        return "Keep Practicing! 💪";
    }
  };

  return (
    <div className="fixed inset-0 bg-black/80 backdrop-blur-sm flex items-center justify-center z-50 p-4">
      <div className="bg-linear-to-br from-purple-900 via-blue-900 to-pink-900 rounded-2xl p-8 max-w-lg w-full shadow-2xl border-4 border-purple-400">
        {/* Title */}
        <h2 className="text-4xl font-bold text-white text-center mb-8">
          Final Score
        </h2>

        {/* Star Display */}
        <div className="flex justify-center gap-3 mb-6">
          {Array.from({ length: stars }).map((_, index) => (
            <div
              key={index}
              className="text-6xl text-yellow-400 animate-bounce"
              style={{ animationDelay: `${index * 0.1}s` }}
            >
              ⭐
            </div>
          ))}
        </div>

        {/* Rating Text */}
        <p className="text-3xl font-bold text-center text-white mb-8">
          {getRating(stars)}
        </p>

        {/* Stats */}
        <div className="space-y-4 mb-8">
          <div className="bg-white/10 rounded-lg p-4">
            <div className="flex justify-between items-center">
              <span className="text-purple-200">Average Score:</span>
              <span className="text-2xl font-bold text-white">
                {avgScore.toFixed(1)}
              </span>
            </div>
          </div>

          <div className="bg-white/10 rounded-lg p-4">
            <div className="flex justify-between items-center">
              <span className="text-purple-200">Best Score:</span>
              <span className="text-xl font-bold text-green-400">
                {maxScore.toFixed(1)}
              </span>
            </div>
          </div>
        </div>

        {/* Buttons */}
        <div className="flex gap-4">
          <button
            onClick={onRestart}
            className="flex-1 bg-green-600 hover:bg-green-700 text-white font-bold py-4 px-6 rounded-lg transition-colors hover:cursor-pointer"
          >
            Play Again
          </button>
          <button
            onClick={onClose}
            className="flex-1 bg-gray-600 hover:bg-gray-700 text-white font-bold py-4 px-6 rounded-lg transition-colors hover:cursor-pointer"
          >
            Close
          </button>
        </div>
      </div>
    </div>
  );
}