import React from "react";
import { ArrowLeft, CheckCircle2, XCircle } from "lucide-react";

interface Question {
  id: number;
  text: string;
  options: string[];
}

interface ReviewAnswersProps {
  questions: Question[];
  userAnswers: Record<number, number>;
  onBack: () => void;
}

export function ReviewAnswers({ questions, userAnswers, onBack }: ReviewAnswersProps) {
  // Mock correct answers mapping (same logic as MockInterviewClient: even idx = 1, odd = 2)
  const getCorrectAnswer = (qIdx: number) => qIdx % 2 === 0 ? 1 : 2;

  return (
    <div className="min-h-screen bg-[#f8f9fa] py-12 px-6">
      <div className="max-w-4xl mx-auto">
        <button 
          onClick={onBack}
          className="flex items-center gap-2 text-sm text-gray-500 font-semibold hover:text-[#fc6123] transition-colors mb-8"
        >
          <ArrowLeft className="w-4 h-4" /> Back to Results
        </button>

        <h1 className="text-3xl font-bold text-gray-900 mb-8">Review Your Answers</h1>

        <div className="flex flex-col gap-6">
          {questions.map((q, qIdx) => {
            const userAnswer = userAnswers[qIdx];
            const correctAnswer = getCorrectAnswer(qIdx);
            const isCorrect = userAnswer === correctAnswer;
            const isUnanswered = userAnswer === undefined;

            return (
              <div key={qIdx} className="bg-white rounded-2xl p-8 shadow-sm border border-gray-100">
                <div className="flex items-start justify-between gap-4 mb-6">
                  <h2 className="text-lg font-bold text-gray-900">
                    <span className="text-gray-400 mr-2">{String(qIdx + 1).padStart(2, '0')}.</span>
                    {q.text}
                  </h2>
                  
                  {isUnanswered ? (
                    <span className="bg-gray-100 text-gray-600 px-3 py-1 rounded-full text-xs font-bold whitespace-nowrap">Unanswered</span>
                  ) : isCorrect ? (
                    <span className="bg-green-50 text-green-600 px-3 py-1 rounded-full text-xs font-bold whitespace-nowrap flex items-center gap-1">
                      <CheckCircle2 className="w-3.5 h-3.5" /> Correct
                    </span>
                  ) : (
                    <span className="bg-red-50 text-red-600 px-3 py-1 rounded-full text-xs font-bold whitespace-nowrap flex items-center gap-1">
                      <XCircle className="w-3.5 h-3.5" /> Incorrect
                    </span>
                  )}
                </div>

                <div className="flex flex-col gap-3">
                  {q.options.map((opt, optIdx) => {
                    const letters = ['A', 'B', 'C', 'D'];
                    const isSelected = userAnswer === optIdx;
                    const isActualCorrect = correctAnswer === optIdx;

                    let borderClass = "border-gray-100";
                    let bgClass = "bg-white";
                    let icon = null;

                    if (isActualCorrect) {
                      borderClass = "border-green-400";
                      bgClass = "bg-green-50";
                      icon = <CheckCircle2 className="w-5 h-5 text-green-500 absolute right-4" />;
                    } else if (isSelected && !isCorrect) {
                      borderClass = "border-red-400";
                      bgClass = "bg-red-50";
                      icon = <XCircle className="w-5 h-5 text-red-500 absolute right-4" />;
                    } else if (isSelected) {
                      // fallback if correct but somehow missed above
                      borderClass = "border-[#fc6123]";
                    }

                    return (
                      <div 
                        key={optIdx} 
                        className={`relative flex items-center gap-4 p-4 rounded-xl border-2 transition-all ${borderClass} ${bgClass}`}
                      >
                        <div className={`w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold ${
                          isSelected ? (isCorrect ? 'bg-green-500 text-white' : 'bg-red-500 text-white') 
                          : isActualCorrect ? 'bg-green-500 text-white' 
                          : 'bg-gray-100 text-gray-500'
                        }`}>
                          {letters[optIdx]}
                        </div>
                        <span className={`font-medium ${isActualCorrect ? 'text-green-900' : isSelected && !isCorrect ? 'text-red-900' : 'text-gray-700'}`}>
                          {opt}
                        </span>
                        {icon}
                      </div>
                    );
                  })}
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}