import type { JSX } from "react"
import { notFound } from "next/navigation"
import { ExamAssembly } from "@/modules/exams/components/exam-assembly"
import { getExamById } from "@/modules/exams/data-access"
import { getQuestions } from "@/modules/questions/data-access"
import { normalizeStructure } from "@/modules/exams/utils/normalize-structure"
import type { Question } from "@/modules/questions/types"
import type { ExamNode } from "@/modules/exams/components/assembly/selected-question-list"
import { createId } from "@paralleldrive/cuid2"

export const dynamic = "force-dynamic"

export default async function BuildExamPage({ params }: { params: Promise<{ id: string }> }): Promise<JSX.Element> {
  const { id } = await params

  const exam = await getExamById(id)
  if (!exam) return notFound()

  // Fetch initial questions for the bank (pagination handled by client)
  // Run both queries in parallel since the second depends on exam.questions IDs
  const initialSelected = (exam.questions || []).map(q => ({
    id: q.id,
    score: q.score || 0
  }))

  const selectedQuestionIds = initialSelected.map((s) => s.id)
  const [bankResult, selectedResult] = await Promise.all([
    getQuestions({ pageSize: 20 }),
    selectedQuestionIds.length
      ? getQuestions({ ids: selectedQuestionIds, pageSize: Math.max(10, selectedQuestionIds.length) })
      : Promise.resolve({ data: [] as Awaited<ReturnType<typeof getQuestions>>["data"] }),
  ])

  const questionsData = bankResult.data
  const selectedQuestionsData = selectedResult.data

  type RawQuestion = (typeof questionsData)[number]

  const toQuestionOption = (q: RawQuestion): Question => ({
    id: q.id,
    content: q.content,
    type: q.type,
    difficulty: q.difficulty ?? 1,
    createdAt: new Date(q.createdAt),
    updatedAt: new Date(q.updatedAt),
    author: q.author
      ? {
          id: q.author.id,
          name: q.author.name || "Unknown",
          image: q.author.image || null,
        }
      : null,
    knowledgePoints: q.knowledgePoints ?? [],
  })

  const questionOptionsById = new Map<string, Question>()
  for (const q of questionsData) questionOptionsById.set(q.id, toQuestionOption(q))
  for (const q of selectedQuestionsData) questionOptionsById.set(q.id, toQuestionOption(q))
  const questionOptions = Array.from(questionOptionsById.values())

  let initialStructure: ExamNode[] = normalizeStructure(exam.structure)

  if (initialStructure.length === 0 && initialSelected.length > 0) {
    initialStructure = initialSelected.map((s) => ({
      id: createId(),
      type: "question",
      questionId: s.id,
      score: s.score,
    }))
  }

  return (
    <div className="flex h-full flex-col space-y-4 p-4">
      <div>
        <h1 className="text-2xl font-bold tracking-tight">Build Exam</h1>
        <p className="text-muted-foreground">Assemble questions for your exam.</p>
      </div>
      <ExamAssembly
        examId={exam.id}
        title={exam.title}
        subject={exam.subject}
        grade={exam.grade}
        difficulty={exam.difficulty}
        totalScore={exam.totalScore}
        durationMin={exam.durationMin}
        initialSelected={initialSelected}
        initialStructure={initialStructure}
        questionOptions={questionOptions}
      />
    </div>
  )
}
