NextEdu/src/app/(dashboard)/teacher/questions/page.tsx

import type { JSX } from "react"
import { Suspense } from "react"
import { ClipboardList } from "lucide-react"

import { QuestionDataTable } from "@/modules/questions/components/question-data-table"
import { columns } from "@/modules/questions/components/question-columns"
import { QuestionFilters } from "@/modules/questions/components/question-filters"
import { CreateQuestionButton } from "@/modules/questions/components/create-question-button"
import { EmptyState } from "@/shared/components/ui/empty-state"
import { Skeleton } from "@/shared/components/ui/skeleton"
import { getQuestions } from "@/modules/questions/data-access"
import { getParam, type SearchParams } from "@/shared/lib/search-params"
import type { QuestionType } from "@/modules/questions/types"

export const dynamic = "force-dynamic"

const VALID_QUESTION_TYPES: ReadonlySet<string> = new Set([
  "single_choice",
  "multiple_choice",
  "text",
  "judgment",
  "composite",
])

function parseQuestionType(v?: string): QuestionType | undefined {
  return v && VALID_QUESTION_TYPES.has(v) ? (v as QuestionType) : undefined
}

async function QuestionBankResults({ searchParams }: { searchParams: Promise<SearchParams> }): Promise<JSX.Element> {
  const params = await searchParams

  const q = getParam(params, "q")
  const type = getParam(params, "type")
  const difficulty = getParam(params, "difficulty")
  const knowledgePointId = getParam(params, "kp")

  const questionType = parseQuestionType(type)

  const { data: questions } = await getQuestions({
    q: q || undefined,
    type: questionType,
    difficulty: difficulty && difficulty !== "all" ? Number(difficulty) : undefined,
    knowledgePointId: knowledgePointId && knowledgePointId !== "all" ? knowledgePointId : undefined,
    pageSize: 200,
  })

  const hasFilters = Boolean(
    q ||
      (type && type !== "all") ||
      (difficulty && difficulty !== "all") ||
      (knowledgePointId && knowledgePointId !== "all")
  )

  if (questions.length === 0) {
    return (
      <EmptyState
        icon={ClipboardList}
        title={hasFilters ? "No questions match your filters" : "No questions yet"}
        description={
          hasFilters
            ? "Try clearing filters or adjusting keywords."
            : "Create your first question to start building exams and assignments."
        }
        action={hasFilters ? { label: "Clear filters", href: "/teacher/questions" } : undefined}
        className="h-[360px] bg-card"
      />
    )
  }

  return (
    <div className="rounded-md border bg-card">
      <QuestionDataTable columns={columns} data={questions} />
    </div>
  )
}

function QuestionBankResultsFallback() {
  return (
    <div className="rounded-md border bg-card">
      <div className="p-4">
        <Skeleton className="h-8 w-full" />
      </div>
      <div className="space-y-2 p-4 pt-0">
        {Array.from({ length: 6 }).map((_, idx) => (
          <Skeleton key={idx} className="h-10 w-full" />
        ))}
      </div>
    </div>
  )
}

export default async function QuestionBankPage({
  searchParams,
}: {
  searchParams: Promise<SearchParams>
}): Promise<JSX.Element> {
  return (
    <div className="flex h-full flex-col space-y-8 p-8">
      <div className="flex flex-col justify-between space-y-4 md:flex-row md:items-center md:space-y-0">
        <div>
          <h1 className="text-2xl font-bold tracking-tight">Question Bank</h1>
          <p className="text-muted-foreground">
            Manage your question repository for exams and assignments.
          </p>
        </div>
        <div className="flex items-center space-x-2">
          <CreateQuestionButton />
        </div>
      </div>

      <div className="space-y-4">
        <Suspense fallback={<div className="h-10 w-full animate-pulse rounded-md bg-muted" />}>
          <QuestionFilters />
        </Suspense>

        <Suspense fallback={<QuestionBankResultsFallback />}>
          <QuestionBankResults searchParams={searchParams} />
        </Suspense>
      </div>
    </div>
  )
}