import type { AnswerResult } from "@lila/shared";
import { ConfettiBurst } from "../ui/ConfettiBurst";

type ScoreScreenProps = { results: AnswerResult[]; onPlayAgain: () => void };

export const ScoreScreen = ({ results, onPlayAgain }: ScoreScreenProps) => {
  const score = results.filter((r) => r.isCorrect).length;
  const total = results.length;
  const percentage = Math.round((score / total) * 100);

  const getMessage = () => {
    if (percentage === 100) return "Perfect! 🎉";
    if (percentage >= 80) return "Great job! 🌟";
    if (percentage >= 60) return "Not bad! 💪";
    if (percentage >= 40) return "Keep practicing! 📚";
    return "Don't give up! 🔄";
  };

  return (
    <div className="flex flex-col items-center gap-8 w-full max-w-md mx-auto">
      <div className="relative overflow-hidden w-full rounded-3xl border border-(--color-primary-light) bg-white/40 dark:bg-black/10 backdrop-blur shadow-sm p-10 text-center">
        {percentage === 100 && <ConfettiBurst />}
        <div className="absolute -top-20 -left-24 h-56 w-56 rounded-full bg-(--color-accent) opacity-[0.10] blur-3xl" />
        <div className="absolute -bottom-24 -right-20 h-64 w-64 rounded-full bg-(--color-primary) opacity-[0.12] blur-3xl" />

        <p className="relative inline-flex items-center gap-2 rounded-full bg-(--color-surface) border border-(--color-primary-light) px-4 py-1 text-xs font-bold tracking-widest uppercase text-(--color-primary) mb-3">
          Results
        </p>
        <h2 className="relative text-6xl font-black tracking-tight text-(--color-text) mb-1">
          {score}/{total}
        </h2>
        <p className="relative text-2xl mb-6">{getMessage()}</p>

        <div className="relative w-full bg-(--color-surface) border border-(--color-primary-light) rounded-full h-4 mb-2 overflow-hidden">
          <div
            className="bg-linear-to-r from-pink-400 to-purple-500 h-4 rounded-full transition-all duration-700"
            style={{ width: `${percentage}%` }}
          />
        </div>
        <p className="relative text-sm text-(--color-text-muted)">
          {percentage}% correct
        </p>
      </div>

      <div className="flex flex-col gap-2 w-full">
        {results.map((result, index) => (
          <div
            key={result.questionId}
            className={`flex items-center gap-3 py-2 px-4 rounded-xl text-sm border ${
              result.isCorrect
                ? "bg-emerald-50/60 text-emerald-700 border-emerald-200"
                : "bg-pink-50/60 text-pink-700 border-pink-200"
            }`}
          >
            <span className="font-bold">{index + 1}.</span>
            <span>{result.isCorrect ? "✓ Correct" : "✗ Wrong"}</span>
          </div>
        ))}
      </div>

      <button
        onClick={onPlayAgain}
        className="w-full py-3 px-10 rounded-2xl text-lg font-black bg-(--color-primary) text-white shadow-sm hover:shadow-md hover:bg-(--color-primary-dark) hover:-translate-y-0.5 active:translate-y-0 transition-all duration-200 cursor-pointer"
      >
        Play again
      </button>
    </div>
  );
};
