export default function ResultPage({
  score,
  total,
  onRestart,
  onRepeatWrong,
  onBack,
}) {
  const wrongFromSession = JSON.parse(sessionStorage.getItem("quiz_wrong_questions")) || [];
  const correctCount = total - wrongFromSession.length;

  return (
    <div className="min-h-screen flex flex-col items-center justify-center bg-gray-100 dark:bg-gray-900 px-4">
      <div className="bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 p-6 rounded shadow-md max-w-md w-full text-center">
        <h1 className="text-2xl font-bold mb-4">Auswertung</h1>
        <p className="text-lg mb-6">
          Du hast <strong>{correctCount}</strong> von <strong>{total}</strong> Fragen korrekt beantwortet.
        </p>

        {wrongFromSession.length > 0 ? (
          <>
            <p className="mb-4 text-gray-600 dark:text-gray-300">
              Du hast <strong>{wrongFromSession.length}</strong> Frage(n) falsch beantwortet.
              Möchtest du sie nochmal versuchen?
            </p>
            <div className="flex flex-col gap-3">
              <button
                onClick={onRepeatWrong}
                className="bg-yellow-500 hover:bg-yellow-600 text-white px-4 py-2 rounded"
              >
                Falsche Fragen wiederholen
              </button>
              <button
                onClick={onRestart}
                className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded"
              >
                Neuer Durchlauf mit 30 Fragen
              </button>
              <button
                onClick={onBack}
                className="text-sm text-blue-600 underline mt-2"
              >
                Zurück zur Modusauswahl
              </button>
            </div>
          </>
        ) : (
          <>
            <p className="mb-4 text-green-600 font-semibold">
              Mega! Du hast alle Fragen korrekt beantwortet! 
            </p>
            <button
              onClick={onRestart}
              className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded"
            >
              Nochmals testen mit neuen Fragen
            </button>
            <button
              onClick={onBack}
              className="text-sm text-blue-600 underline mt-2"
            >
              Zurück zur Modusauswahl
            </button>
          </>
        )}
      </div>
    </div>
  );
}
