"use client";

import { X } from "lucide-react";
import { getTranslation } from "@/src/hooks/useTranslation";
import { useLanguage } from "@/src/hooks/LanguageContext";

interface Props {
  qlist: any[];
  answers: number[];
  marked: boolean[];
  currentQuestion: number;
  setCurrentQuestion: (i: number) => void;
  setConfirmSubmit: (v: boolean) => void;
  showSolution: boolean;
  title?: string;
}

export default function QuizSidebar({
  title,
  qlist,
  answers,
  marked,
  currentQuestion,
  setCurrentQuestion,
  setConfirmSubmit,
  showSolution,
}: Props) {
  const { language } = useLanguage();
  const text = getTranslation(language).quizSidebar;
  const totalQuestions = qlist.length;
  const answeredCount = answers.filter((a) => a !== undefined).length;
  const unansweredCount = totalQuestions - answeredCount;
  const markedCount = marked.filter((m) => m).length;

  return (
    <div
      className={`bg-white p-6 overflow-y-auto rounded-xl h-[85vh] ${
        showSolution ? "border-0" : "border-1 shadow"
      }`}
    >
      <div className="flex justify-between items-center mb-6">
        <h2 className="text-xl font-semibold text-gray-900">
          {title || text.title}
        </h2>
        {!showSolution && (
          <button
            onClick={() => setConfirmSubmit(true)}
            className="text-sm text-gray-500 hover:text-gray-700"
          >
            <X size={30} />
          </button>
        )}
      </div>

      <div className="bg-white border shadow-sm rounded-xl p-4 mb-6">
        <div className="flex justify-between py-2 border-b">
          <p className="text-gray-700 font-medium">{text.answeredQuestions}</p>
          <span className="font-semibold text-green-600">{answeredCount}</span>
        </div>

        <div className="flex justify-between py-2">
          <p className="text-gray-700 font-medium">
            {text.unansweredQuestions}
          </p>
          <span className="font-semibold text-blue-600">{unansweredCount}</span>
        </div>

        <div className="flex justify-between py-2">
          <p className="text-gray-700 font-medium">{text.markedForReview}</p>
          <span className="font-semibold text-orange-500">{markedCount}</span>
        </div>
      </div>

      <div className="flex flex-wrap items-center gap-4 mb-6">
        <div className="flex items-center gap-2">
          <span className="w-3 h-3 rounded-full bg-orange-500"></span>
          <p className="text-gray-700 text-sm font-medium">
            {text.markedForReview}
          </p>
        </div>

        <div className="flex items-center gap-2">
          <span className="w-3 h-3 rounded-full bg-green-600"></span>
          <p className="text-gray-700 text-sm font-medium">{text.answered}</p>
        </div>

        <div className="flex items-center gap-2">
          <span className="w-3 h-3 rounded-full bg-blue-600"></span>
          <p className="text-gray-700 text-sm font-medium">
            {text.unanswered}
          </p>
        </div>
        {/* {!showSolution && ( */}
        <div className="flex items-center gap-2">
          <span className="w-3 h-3 rounded-full bg-white border border-black"></span>
          <p className="text-gray-700 text-sm font-medium">
            {text.currentQuestion}
          </p>
        </div>
        {/* )} */}
      </div>

      <div className="grid grid-cols-5 gap-3 mb-8">
        {qlist.map((_: any, index: any) => {
          const num = index + 1;

          const isAnswered =
            answers[index] !== undefined && answers[index] !== -1;

          const isMarked = marked[index];
          const isCurrent = currentQuestion === index;

          return (
            <div
              key={num}
              onClick={() => setCurrentQuestion(index)}
              className={`
    w-10 h-10 flex items-center justify-center rounded-lg
    font-semibold cursor-pointer transition

    ${
      isCurrent
        ? "bg-white text-black border-2 border-black"
        : isMarked
          ? "bg-orange-500 text-white"
          : isAnswered
            ? "bg-green-600 text-white"
            : "bg-blue-600 text-white"
    }
  `}
            >
              {num}
            </div>
          );
        })}
      </div>

      {!showSolution && (
        <div className="space-y-4">
          {/* <button className="w-full py-3 border-2 border-orange-500 text-orange-500 rounded-xl font-semibold">
            Cancel
          </button> */}

          <button
            onClick={() => setConfirmSubmit(true)}
            className="w-full py-3 bg-orange-500 text-white rounded-xl font-semibold"
          >
            {text.submitQuiz}
          </button>
        </div>
      )}
    </div>
  );
}