"use client";

import { useRouter } from "next/navigation";
import React, { useCallback, useEffect } from "react";
import { ArrowLeft } from "lucide-react";
import { useExamStore } from "@/stores/examStore";
import QuestionItem from "@/components/QuestionItem";
import SlidingGallery from "@/components/SlidingGallery";
import { getResultViews } from "@/lib/gallery-views";

export default function ResultsPage() {
  const router = useRouter();
  const { result, clearResult, setStatus, status } = useExamStore();

  const handleBackToHome = useCallback(() => {
    clearResult();
    router.replace("/categories");
  }, [clearResult, router]);

  useEffect(() => {
    const handlePopState = () => {
      if (status !== "finished") {
        handleBackToHome();
      }
    };

    window.addEventListener("popstate", handlePopState);
    return () => {
      window.removeEventListener("popstate", handlePopState);
    };
  }, [status, router, setStatus, handleBackToHome]);

  if (!result) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <p className="text-lg font-medium">Redirecting...</p>
      </div>
    );
  }

  const views = getResultViews(result);

  return (
    <div className="min-h-screen bg-white">
      <button className="px-10 pt-10" onClick={handleBackToHome}>
        <ArrowLeft size={30} color="black" />
      </button>

      <div className="bg-white rounded-lg shadow-lg px-10 pb-20">
        <h1 className="text-2xl font-bold text-[#113768]  text-center">
          You did great!
        </h1>

        <SlidingGallery views={views} height={"26vh"} />

        {/* Render questions with correctness */}
        {result.user_questions.map((q, idx) => {
          const userAnswer = result.user_answers[idx];
          const correctAnswer = result.correct_answers[idx];

          return (
            <div key={q.question_id} className="rounded-3xl mb-6">
              <QuestionItem
                question={q}
                index={idx}
                selectedAnswer={userAnswer}
                onSelect={() => {}}
                userAnswer={userAnswer}
                correctAnswer={correctAnswer}
                showResults={true}
              />

              {/* Optional answer feedback below the question */}
              {/* <div className="mt-2 text-sm">
                {userAnswer === null ? (
                  <span className="text-yellow-600 font-medium">
                    Skipped — Correct: {String.fromCharCode(65 + correctAnswer)}
                  </span>
                ) : userAnswer === correctAnswer ? (
                  <span className="text-green-600 font-medium">Correct</span>
                ) : (
                  <span className="text-red-600 font-medium">
                    Your Answer: {String.fromCharCode(65 + userAnswer)} |
                    Correct Answer: {String.fromCharCode(65 + correctAnswer)}
                  </span>
                )}
              </div> */}
            </div>
          );
        })}
      </div>

      <button
        onClick={handleBackToHome}
        className="fixed bottom-0 w-full bg-blue-900 text-white h-[74px] font-bold text-lg hover:bg-blue-800 transition-colors"
      >
        Finish
      </button>
    </div>
  );
}