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 type { QuestionType } from "@/modules/questions/types"

type SearchParams = { [key: string]: string | string[] | undefined }

const getParam = (params: SearchParams, key: string) => {
  const v = params[key]
  return Array.isArray(v) ? v[0] : v
}

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

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

  const questionType: QuestionType | undefined =
    type === "single_choice" ||
    type === "multiple_choice" ||
    type === "text" ||
    type === "judgment" ||
    type === "composite"
      ? type
      : undefined

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

  const hasFilters = Boolean(q || (type && type !== "all") || (difficulty && difficulty !== "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>
}) {
  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>
          <h2 className="text-2xl font-bold tracking-tight">Question Bank</h2>
          <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>
  )
}