import { use } from "react"
import { getTranslations } from "next-intl/server"
import { UserX } from "lucide-react"

import type { ActionState } from "@/shared/types/action-state"
import type { StudentDashboardProps } from "@/modules/dashboard/types"
import { EmptyState } from "@/shared/components/ui/empty-state"

import { DashboardSection } from "../dashboard-section"
import { StudentDashboardHeader } from "./student-dashboard-header"
import { StudentGradesCard } from "./student-grades-card"
import { StudentStatsGrid } from "./student-stats-grid"
import { StudentTodayScheduleCard } from "./student-today-schedule-card"
import { StudentUpcomingAssignmentsCard } from "./student-upcoming-assignments-card"

type StudentDashboardResult = ActionState<{
  student: { id: string; name: string } | null
  dashboardProps: Omit<StudentDashboardProps, "studentName"> | null
}>

/**
 * 学生仪表盘视图（P2-1 流式架构）
 *
 * 接收未解析的 Promise，用 React `use()` 消费。
 * 页面外壳立即渲染，数据到达后在 DashboardSection 的 Suspense 边界内填充。
 */
export function StudentDashboard({ dataPromise }: { dataPromise: Promise<StudentDashboardResult> }) {
  const result = use(dataPromise)
  if (!result.success || !result.data) {
    throw new Error(result.message ?? "Failed to load student dashboard")
  }

  return <StudentDashboardBody result={result.data} />
}

async function StudentDashboardBody({
  result,
}: {
  result: NonNullable<StudentDashboardResult["data"]>
}) {
  const t = await getTranslations("dashboard")

  if (!result.student || !result.dashboardProps) {
    return (
      <EmptyState
        title={t("empty.noStudent")}
        description={t("empty.noStudentDesc")}
        icon={UserX}
        className="border-none shadow-none h-auto"
      />
    )
  }

  const { student, dashboardProps } = result

  return (
    <div className="space-y-6">
      <header>
        <StudentDashboardHeader studentName={student.name} />
      </header>

      <DashboardSection variant="stats">
        <StudentStatsGrid
          enrolledClassCount={dashboardProps.enrolledClassCount}
          dueSoonCount={dashboardProps.dueSoonCount}
          overdueCount={dashboardProps.overdueCount}
          gradedCount={dashboardProps.gradedCount}
          ranking={dashboardProps.grades.ranking}
        />
      </DashboardSection>

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <section
          aria-label={t("sections.upcomingAssignments")}
          className="lg:col-span-2 space-y-6"
        >
          <DashboardSection variant="list">
            <StudentUpcomingAssignmentsCard upcomingAssignments={dashboardProps.upcomingAssignments} />
          </DashboardSection>
          <DashboardSection variant="card">
            <StudentGradesCard grades={dashboardProps.grades} />
          </DashboardSection>
        </section>
        <aside aria-label={t("sections.todaySchedule")} className="space-y-6">
          <DashboardSection variant="card">
            <StudentTodayScheduleCard items={dashboardProps.todayScheduleItems} />
          </DashboardSection>
        </aside>
      </div>
    </div>
  )
}