"use client";

import QuestionNav from "@/components/exam/question-nav";
import QuestionCard from "@/components/exam/question-card";
import { type ExamQuestionSummary, type ExamQuestion } from "@/lib/api/exams";
import { useExamQuestionController } from "@/components/exam/use-exam-question-controller";

interface QuestionContentProps {
  examId: number;
  examAttemptId: number;
  sectionId: number;
  initialQuestion: ExamQuestion;
  summaries: ExamQuestionSummary[];
  initialIndex: number;
}

export default function QuestionContent({
  examId,
  examAttemptId,
  sectionId,
  initialQuestion,
  summaries,
  initialIndex
}: QuestionContentProps) {

  const controller = useExamQuestionController({
    examId,
    examAttemptId,
    sectionId,
    summaries,
    initialQuestion,
    initialIndex,
  });

  const total = summaries.length;

  return (
    <div className="grid gap-8 lg:grid-cols-[1fr_300px]">
      <QuestionCard
        question={controller.currentQuestion}
        answer={controller.currentAnswer}
        onAnswerChange={(value) =>
          controller.handleAnswerChange(controller.currentQuestion.id, value)
        }
        questionNum={controller.index + 1}
        isLoading={controller.isQuestionLoading}
        total={total}
        onSubmitExam={controller.submitExam}
        onPreviousQuestion={controller.goPrev}
        onNextQuestion={controller.goNext}
      />
      <div className="lg:sticky lg:top-[80px] lg:self-start">
        <QuestionNav
          summaries={summaries}
          current={controller.index + 1}
          answeredQuestions={controller.answeredSet}
          onNavigateToQuestion={controller.goToIndex}
        />
      </div>
    </div>
  );
}