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

import { requirePermission } from "@/shared/lib/auth-guard"
import { Permissions } from "@/shared/types/permissions"
import { EmptyState } from "@/shared/components/ui/empty-state"
import { Skeleton } from "@/shared/components/ui/skeleton"
import { WidgetBoundary } from "@/shared/components/widget-boundary"
import { getParam, type SearchParams } from "@/shared/lib/search-params"
import { getStudentIdsByClassIds, getClassIdsByGradeIds } from "@/modules/classes/data-access"

import {
  getStudentErrorBookSummaries,
  getTopWrongQuestionsByStudentIds,
  getKnowledgePointWeakness,
  getStudentNameMap,
  getSubjectErrorOverviews,
  getClassErrorOverviews,
  getChapterWeakness,
} from "@/modules/error-book/data-access-analytics"
import { TopWrongQuestions } from "@/modules/error-book/components/top-wrong-questions"
import { SubjectTabs } from "@/modules/error-book/components/subject-tabs"
import { ClassFilter } from "@/modules/error-book/components/class-filter"
import { AnalyticsStatsCards } from "@/modules/error-book/components/analytics-stats-cards"
import { ClassErrorBarChart } from "@/modules/error-book/components/class-error-bar-chart"
import { KnowledgePointWeaknessChart } from "@/modules/error-book/components/knowledge-point-weakness-chart"
import { ChapterWeaknessChart } from "@/modules/error-book/components/chapter-weakness-chart"
import { GroupedStudentErrorTable } from "@/modules/error-book/components/grouped-student-error-table"

export const dynamic = "force-dynamic"

async function TeacherErrorBookContent({
  searchParams,
}: {
  searchParams: Promise<SearchParams>
}): Promise<JSX.Element> {
  const t = await getTranslations("errorBook")
  const ctx = await requirePermission(Permissions.ERROR_BOOK_ANALYTICS_READ)

  const params = await searchParams
  const classIds = ctx.dataScope.type === "class_taught" ? ctx.dataScope.classIds : []
  const gradeIds = ctx.dataScope.type === "grade_managed" ? ctx.dataScope.gradeIds : []
  const teacherSubjectIds = ctx.dataScope.type === "class_taught" ? (ctx.dataScope.subjectIds ?? []) : []

  if (classIds.length === 0 && gradeIds.length === 0 && ctx.dataScope.type !== "all") {
    return (
      <div className="flex h-full flex-col space-y-8 p-8">
        <div>
          <h1 className="text-2xl font-bold tracking-tight">{t("teacher.title")}</h1>
          <p className="text-muted-foreground">{t("teacher.descriptionShort")}</p>
        </div>
        <EmptyState
          icon={BarChart3}
          title={t("teacher.noClass")}
          description={t("teacher.noClassDesc")}
          className="h-[360px] bg-card"
        />
      </div>
    )
  }

  // 年级主任/教研组长：展开年级为班级
  let targetClassIds = classIds
  if (gradeIds.length > 0) {
    const gradeClassIds = await getClassIdsByGradeIds(gradeIds)
    targetClassIds = [...new Set([...classIds, ...gradeClassIds])]
  }

  // 获取所有学生 ID（用于学科概览查询）
  const allStudentIds = await getStudentIdsByClassIds(targetClassIds)

  if (allStudentIds.length === 0) {
    return (
      <div className="flex h-full flex-col space-y-8 p-8">
        <div>
          <h1 className="text-2xl font-bold tracking-tight">{t("teacher.title")}</h1>
          <p className="text-muted-foreground">{t("teacher.descriptionShort")}</p>
        </div>
        <EmptyState
          icon={BarChart3}
          title={t("teacher.noStudent")}
          description={t("teacher.noStudentDesc")}
          className="h-[360px] bg-card"
        />
      </div>
    )
  }

  // 解析 URL 参数：学科筛选 + 班级筛选
  const subjectParam = getParam(params, "subject")
  const classParam = getParam(params, "classId")

  // 学科概览（用于 Tab 显示，不受学科筛选影响）
  const subjectOverviews = await getSubjectErrorOverviews(allStudentIds)

  // 班级概览（用于班级筛选器显示，受学科筛选影响）
  const classOverviews = await getClassErrorOverviews(targetClassIds, subjectParam)

  // 确定实际查询的学科和班级
  // 如果教师有所教学科，默认只显示所教学科；否则显示全部
  const effectiveSubjectId =
    subjectParam ?? (teacherSubjectIds.length === 1 ? teacherSubjectIds[0] : null)
  const effectiveClassId = classParam ?? "all"

  // 确定查询的学生范围（按班级筛选）
  const queryClassIds = effectiveClassId === "all" ? targetClassIds : [effectiveClassId]
  const queryStudentIds = await getStudentIdsByClassIds(queryClassIds)

  // 并行查询所有统计数据（按学科+班级过滤）
  const [summaries, topWrongQuestions, weakKps, chapterWeakness, nameMap] = await Promise.all([
    getStudentErrorBookSummaries(queryStudentIds, effectiveSubjectId),
    getTopWrongQuestionsByStudentIds(queryStudentIds, 10, effectiveSubjectId),
    getKnowledgePointWeakness(queryStudentIds, 10, effectiveSubjectId),
    getChapterWeakness(queryStudentIds, 10, effectiveSubjectId),
    getStudentNameMap(queryStudentIds),
  ])

  const studentsWithErrorBook = summaries.filter((s) => s.totalCount > 0)
  const totalErrorItems = summaries.reduce((sum, s) => sum + s.totalCount, 0)
  const totalDueReview = summaries.reduce((sum, s) => sum + s.dueReviewCount, 0)
  const averageMasteryRate = studentsWithErrorBook.length > 0
    ? studentsWithErrorBook.reduce((sum, s) => sum + s.masteredRate, 0) / studentsWithErrorBook.length
    : 0
  const knowledgePointCount = weakKps.length

  // 按错题数降序排列
  const sortedSummaries = [...summaries].sort((a, b) => b.totalCount - a.totalCount)

  return (
    <div className="flex h-full flex-col space-y-6 p-8">
      <div>
        <h1 className="text-2xl font-bold tracking-tight">{t("teacher.title")}</h1>
        <p className="text-muted-foreground">
          {t("teacher.description")}
        </p>
      </div>

      {/* 学科 Tab */}
      {subjectOverviews.length > 0 ? (
        <Suspense fallback={<Skeleton className="h-10 w-full" />}>
          <SubjectTabs
            subjects={subjectOverviews}
            currentSubjectId={effectiveSubjectId}
          />
        </Suspense>
      ) : null}

      {/* 班级筛选器 */}
      {classOverviews.length > 0 ? (
        <Suspense fallback={<Skeleton className="h-10 w-full" />}>
          <ClassFilter
            classes={classOverviews}
            currentClassId={effectiveClassId}
          />
        </Suspense>
      ) : null}

      {/* 统计卡片 */}
      <WidgetBoundary title={t("teacher.title")} skeletonHeight={120}>
        <AnalyticsStatsCards
          totalStudents={queryStudentIds.length}
          studentsWithErrorBook={studentsWithErrorBook.length}
          totalErrorItems={totalErrorItems}
          averageMasteryRate={averageMasteryRate}
          dueReviewCount={totalDueReview}
          knowledgePointCount={knowledgePointCount}
        />
      </WidgetBoundary>

      {/* 班级错题对比图（仅在"全部班级"视图下显示） */}
      {effectiveClassId === "all" && classOverviews.length > 1 ? (
        <WidgetBoundary title={t("teacher.subjectDist")} skeletonHeight={300}>
          <ClassErrorBarChart data={classOverviews} />
        </WidgetBoundary>
      ) : null}

      {/* 章节错题分布 + 知识点薄弱度（并排） */}
      <div className="grid gap-4 lg:grid-cols-2">
        <WidgetBoundary title={t("teacher.weakPoints")} skeletonHeight={300}>
          {chapterWeakness.length > 0 ? (
            <ChapterWeaknessChart data={chapterWeakness} />
          ) : (
            <EmptyState
              icon={BarChart3}
              title={t("teacher.noChapterDataTitle")}
              description={t("teacher.noChapterDataDesc")}
              className="h-[300px] bg-card"
            />
          )}
        </WidgetBoundary>
        <WidgetBoundary title={t("teacher.weakPoints")} skeletonHeight={300}>
          {weakKps.length > 0 ? (
            <KnowledgePointWeaknessChart data={weakKps} />
          ) : (
            <EmptyState
              icon={BarChart3}
              title={t("teacher.noKpDataTitle")}
              description={t("teacher.noKpDataDesc")}
              className="h-[300px] bg-card"
            />
          )}
        </WidgetBoundary>
      </div>

      {/* 学生错题详情（按班级分组） */}
      <div className="space-y-3">
        <div className="flex items-center justify-between">
          <h2 className="text-lg font-semibold">{t("teacher.studentDetail")}</h2>
          <span className="text-sm text-muted-foreground">
            {t("teacher.studentsCount", {
              total: queryStudentIds.length,
              withErrors: studentsWithErrorBook.length,
            })}
          </span>
        </div>
        <WidgetBoundary title={t("teacher.studentDetail")} skeletonHeight={300}>
          {sortedSummaries.length > 0 ? (
            <GroupedStudentErrorTable
              students={sortedSummaries}
              studentNames={nameMap}
              basePath="/teacher/error-book"
            />
          ) : (
            <EmptyState
              icon={BarChart3}
              title={t("teacher.noStudentErrorsTitle")}
              description={t("teacher.noStudentErrorsDesc")}
              className="h-[200px] bg-card"
            />
          )}
        </WidgetBoundary>
      </div>

      {/* 高频错题 Top 10 */}
      {topWrongQuestions.length > 0 ? (
        <WidgetBoundary title={t("teacher.topWrong")} skeletonHeight={300}>
          <TopWrongQuestions questions={topWrongQuestions} />
        </WidgetBoundary>
      ) : null}
    </div>
  )
}

export default async function TeacherErrorBookPage({
  searchParams,
}: {
  searchParams: Promise<SearchParams>
}): Promise<JSX.Element> {
  return (
    <Suspense
      fallback={
        <div className="flex h-full flex-col space-y-8 p-8">
          <Skeleton className="h-10 w-48" />
          <Skeleton className="h-10 w-full" />
          <Skeleton className="h-10 w-full" />
          <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-5">
            {Array.from({ length: 5 }).map((_, i) => (
              <Skeleton key={i} className="h-[100px]" />
            ))}
          </div>
          <Skeleton className="h-[300px] w-full" />
        </div>
      }
    >
      <TeacherErrorBookContent searchParams={searchParams} />
    </Suspense>
  )
}
