import type { JSX } from "react"
import { notFound } from "next/navigation"
import { Stethoscope } from "lucide-react"
import { requirePermission } from "@/shared/lib/auth-guard"
import { Permissions } from "@/shared/types/permissions"
import { getClassMasterySummary } from "@/modules/diagnostic/data-access"
import { ClassDiagnosticView } from "@/modules/diagnostic/components/class-diagnostic-view"

export const dynamic = "force-dynamic"

export default async function ClassDiagnosticPage({
  params,
}: {
  params: Promise<{ classId: string }>
}): Promise<JSX.Element> {
  const { classId } = await params
  const ctx = await requirePermission(Permissions.DIAGNOSTIC_READ)

  // DataScope 校验：教师只能查看所教班级，学生/家长不可访问
  if (ctx.dataScope.type === "class_taught" && !ctx.dataScope.classIds.includes(classId)) {
    notFound()
  }
  if (ctx.dataScope.type === "class_members" || ctx.dataScope.type === "children") {
    notFound()
  }

  const summary = await getClassMasterySummary(classId)

  if (!summary) {
    notFound()
  }

  return (
    <div className="h-full flex-1 flex-col space-y-8 p-8 md:flex">
      <div>
        <h1 className="flex items-center gap-2 text-2xl font-bold tracking-tight">
          <Stethoscope className="h-6 w-6" aria-hidden="true" />
          Class Diagnostic
        </h1>
        <p className="text-muted-foreground">
          Class-level knowledge point mastery overview and student attention list.
        </p>
      </div>
      <ClassDiagnosticView summary={summary} />
    </div>
  )
}