NextEdu/src/app/(dashboard)/teacher/classes/my/[id]/page.tsx

import type { JSX } from "react"
import { notFound } from "next/navigation"

import { requirePermission } from "@/shared/lib/auth-guard"
import { Permissions } from "@/shared/types/permissions"
import { getClassHomeworkInsights, getClassSchedule, getClassStudentSubjectScoresV2, getClassStudents } from "@/modules/classes/data-access"
import { ClassAssignmentsWidget } from "@/modules/classes/components/class-detail/class-assignments-widget"
import { ClassTrendsWidget } from "@/modules/classes/components/class-detail/class-trends-widget"
import { ClassHeader } from "@/modules/classes/components/class-detail/class-header"
import { ClassOverviewStats } from "@/modules/classes/components/class-detail/class-overview-stats"
import { ClassScheduleWidget } from "@/modules/classes/components/class-detail/class-schedule-widget"
import { ClassStudentsWidget } from "@/modules/classes/components/class-detail/class-students-widget"

export const dynamic = "force-dynamic"

export default async function ClassDetailPage({
  params,
}: {
  params: Promise<{ id: string }>
}): Promise<JSX.Element> {
  const { id } = await params
  await requirePermission(Permissions.CLASS_READ)

  // Parallel data fetching
  const [insights, students, schedule, studentScores] = await Promise.all([
    getClassHomeworkInsights({ classId: id, limit: 20 }),
    getClassStudents({ classId: id }),
    getClassSchedule({ classId: id }),
    getClassStudentSubjectScoresV2({ classId: id }),
  ])

  if (!insights) return notFound()

  // Data mapping for widgets
  const assignmentSummaries = insights.assignments.map(a => ({
    id: a.assignmentId,
    title: a.title,
    status: a.status,
    subject: a.subject,
    isActive: a.isActive,
    isOverdue: a.isOverdue,
    dueAt: a.dueAt ? new Date(a.dueAt) : null,
    submittedCount: a.submittedCount,
    targetCount: a.targetCount,
    avgScore: a.scoreStats.avg,
    medianScore: a.scoreStats.median
  }))

  const studentSummaries = students.map(s => ({
    id: s.id,
    name: s.name,
    email: s.email,
    image: s.image,
    status: s.status,
    subjectScores: studentScores.get(s.id) ?? {}
  }))

  // Calculate advanced stats
  const activeAssignments = insights.assignments.filter(a => a.isActive)
  const papersToGrade = activeAssignments.reduce((acc, a) => acc + (a.submittedCount - a.gradedCount), 0)
  const overdueCount = activeAssignments.filter(a => a.isOverdue).length

  const totalSubmissionRate = activeAssignments.length > 0
    ? activeAssignments.reduce((acc, a) => acc + (a.targetCount > 0 ? a.submittedCount / a.targetCount : 0), 0) / activeAssignments.length
    : 0

  return (
    <div className="flex min-h-screen flex-col bg-muted/10">
      <ClassHeader
        classId={insights.class.id}
        name={insights.class.name}
        grade={insights.class.grade}
        homeroom={insights.class.homeroom}
        room={insights.class.room}
        schoolName={insights.class.schoolName}
        studentCount={insights.studentCounts.total}
      />

      <div className="flex-1 space-y-6 p-6">
        {/* Key Metrics */}
        <ClassOverviewStats
          averageScore={insights.overallScores.avg}
          submissionRate={totalSubmissionRate * 100}
          papersToGrade={papersToGrade}
          overdueCount={overdueCount}
        />

        <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
          {/* Main Content Area (Left 2/3) */}
          <div className="min-w-0 space-y-6 lg:col-span-2">
            <ClassTrendsWidget assignments={assignmentSummaries} />
            <ClassStudentsWidget
              classId={insights.class.id}
              students={studentSummaries}
            />
          </div>

          {/* Sidebar Area (Right 1/3) */}
          <div className="min-w-0 space-y-6">
            <ClassScheduleWidget classId={insights.class.id} schedule={schedule} />
            <ClassAssignmentsWidget
              classId={insights.class.id}
              assignments={assignmentSummaries}
            />
          </div>
        </div>
      </div>
    </div>
  )
}