"use client"

import { useRouter } from "next/navigation"

import { PracticeStarter, type PracticeStarterProps } from "./practice-starter"

type PracticeStarterWithNavProps = Omit<PracticeStarterProps, "onSessionCreated"> & {
  /**
   * 会话创建成功后跳转的路径前缀，sessionId 会被自动拼接。
   *
   * 例如：`/student/practice` → 跳转到 `/student/practice/{sessionId}`。
   * 不同角色可传不同前缀：学生 `/student/practice`、家长 `/parent/practice`。
   */
  routePrefix: string
}

/**
 * PracticeStarter 的路由导航包装器。
 *
 * 职责：将 `onSessionCreated` 回调与 `useRouter` 路由跳转绑定。
 *
 * 解耦设计：
 * - `PracticeStarter` 本身不感知路由结构，仅暴露 `onSessionCreated` 回调
 * - 此包装器在 Client Component 中使用 `useRouter`，由页面层渲染
 * - Server Component 页面可直接渲染此包装器（无需额外客户端中间层）
 *
 * @example
 * // app/(dashboard)/student/practice/page.tsx (Server Component)
 * <PracticeStarterWithNav
 *   knowledgePoints={knowledgePoints}
 *   routePrefix="/student/practice"
 * />
 */
export function PracticeStarterWithNav({
  routePrefix,
  ...rest
}: PracticeStarterWithNavProps): React.ReactNode {
  const router = useRouter()

  function handleSessionCreated(sessionId: string): void {
    router.push(`${routePrefix}/${sessionId}`)
  }

  return <PracticeStarter {...rest} onSessionCreated={handleSessionCreated} />
}
