import { useSearchParams } from "react-router-dom"

import { NewLibraryItemForm } from "@/components/new-library-item-form"
import {
  DEFAULT_LIBRARY_FOLDERS,
  type LibraryFolder,
} from "@/lib/mock/library-folders"
import { generateDraftQuestionId } from "@/lib/library-authoring"
import { newQuestionBackNav } from "@/lib/library-nav"

/**
 * `/library/new` — focused authoring page for a new question.
 *
 * Reads `?folderId=<id>` from the URL via `useSearchParams` (RR DOM
 * v7 — same shape as the Next equivalent). The Next variant used the
 * Next 15 async server-component `searchParams: Promise<...>` API; in
 * the Vite SPA we read params synchronously on every render.
 */
export default function NewQuestionPage() {
  const [searchParams] = useSearchParams()
  const folders: LibraryFolder[] = DEFAULT_LIBRARY_FOLDERS

  const requested = searchParams.get("folderId") ?? undefined
  const matched = requested ? folders.find(f => f.id === requested) : undefined
  const defaultFolderId = matched?.id

  const back = newQuestionBackNav(folders, defaultFolderId)
  const draftQuestionId = generateDraftQuestionId()

  return (
    <NewLibraryItemForm
      draftQuestionId={draftQuestionId}
      defaultFolderId={defaultFolderId}
      backHref={back.href}
      backLabel={back.label}
      folders={folders}
    />
  )
}
