"use client";

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { type ExamQuestionSummary } from "@/lib/api/exams";
import { useLocaleFunction } from "@/hooks/use-localed";
import { cn } from "@/lib/utils";

interface QuestionNavProps {
  summaries: ExamQuestionSummary[];
  current: number | null;
  answeredQuestions: Set<number>;
  onNavigateToQuestion: (displayOrder: number) => void;
}

export default function QuestionNav({
  summaries,
  current,
  answeredQuestions,
  onNavigateToQuestion,
}: QuestionNavProps) {
  const t = useLocaleFunction();

  return (
    <div className="lg:col-span-1">
      <Card>
        <CardHeader className="pb-2">
          <CardTitle className="text-lg mb-2">
            {t("exam.question.question_overview")}
          </CardTitle>
          <div className="mb-4 text-sm text-muted-foreground">
            {t(
              "exam.question.answered_questions",
              answeredQuestions.size,
              summaries.length
            )}
          </div>
        </CardHeader>
        <CardContent className="space-y-6">
          <div className="grid grid-cols-5 gap-2">
            {summaries.map((question) => {
              const isAnswered = answeredQuestions.has(question.id);
              const isCurrent = question.display_order + 1 === current;

              const buttonVariant = isCurrent ? "default" : "outline";

              const buttonClasses = cn(
                "flex h-10 w-10 items-center justify-center rounded border text-sm font-medium transition-all duration-200 cursor-pointer",
                isCurrent
                  ? "border-primary bg-primary text-primary-foreground shadow-md transform scale-105"
                  : isAnswered
                    ? "border-green-500 bg-green-50 text-green-700 hover:bg-green-100 dark:bg-green-950 dark:text-green-300 dark:hover:bg-green-900"
                    : "border-border hover:bg-accent"
              );

              return (
                <Button
                  key={question.id}
                  variant={buttonVariant}
                  size="icon"
                  onClick={() =>
                    onNavigateToQuestion(question.display_order)
                  }
                  className={buttonClasses}
                  aria-label={`Go to question ${question.display_order + 1}`}
                  tabIndex={0}
                >
                  {question.display_order + 1}
                </Button>
              );
            })}
          </div>

          <div className="flex flex-wrap gap-3 text-sm">
            <div className="flex items-center gap-1">
              <div className="h-3 w-3 rounded border border-primary bg-primary text-primary-foreground flex items-center justify-center shadow-md" />
              <span className="text-muted-foreground text-xs">
                {t("exam.question.current")}
              </span>
            </div>
            <div className="flex items-center gap-1">
              <div className="h-3 w-3 rounded border border-green-500 bg-green-50 text-green-700 dark:bg-green-950 dark:text-green-300 flex items-center justify-center" />
              <span className="text-muted-foreground text-xs">
                {t("exam.question.answered")}
              </span>
            </div>
            <div className="flex items-center gap-1">
              <div className="h-3 w-3 rounded border border-border bg-transparent flex items-center justify-center" />
              <span className="text-muted-foreground text-xs">
                {t("exam.question.unanswered")}
              </span>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}