import type { JSX } from "react"
import { Suspense } from "react"
import { ClipboardList } from "lucide-react"
import { getTranslations } from "next-intl/server"

import { QuestionFilters } from "@/modules/questions/components/question-filters"
import { CreateQuestionButton } from "@/modules/questions/components/create-question-button"
import { QuestionBankResultsClient } from "@/modules/questions/components/question-bank-results-client"
import { ImportExportButtons } from "@/modules/questions/components/import-export-buttons"
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 { requirePermission } from "@/shared/lib/auth-guard"
import { Permissions } from "@/shared/types/permissions"
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> {
  await requirePermission(Permissions.QUESTION_READ)

  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 textbookId = getParam(params, "tb")
  const chapterId = getParam(params, "ch")

  const questionType = parseQuestionType(type)

  const difficultyNum = difficulty && difficulty !== "all" ? Number(difficulty) : undefined
  const safeDifficulty = difficultyNum !== undefined && Number.isFinite(difficultyNum) ? difficultyNum : undefined

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

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

  if (questions.length === 0) {
    const t = await getTranslations("questions")
    return (
      <EmptyState
        icon={ClipboardList}
        title={hasFilters ? t("empty.withFilters") : t("empty.withoutFilters")}
        description={
          hasFilters
            ? t("empty.withFiltersDesc")
            : t("empty.withoutFiltersDesc")
        }
        action={hasFilters ? { label: t("filters.clear"), href: "/teacher/questions" } : undefined}
        className="h-[360px] bg-card"
      />
    )
  }

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

export default async function QuestionBankPage({
  searchParams,
}: {
  searchParams: Promise<SearchParams>
}): Promise<JSX.Element> {
  const t = await getTranslations("questions")

  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">{t("title")}</h1>
          <p className="text-muted-foreground">{t("subtitle")}</p>
        </div>
        <div className="flex items-center space-x-2">
          <ImportExportButtons />
          <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>
  )
}

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>
  )
}