NextEdu/src/app/(dashboard)/management/grade/insights/page.tsx

import { requireAuth } from "@/shared/lib/auth-guard"
import { getTeacherIdForMutations } from "@/modules/classes/data-access"
import { getGradeHomeworkInsights } from "@/modules/classes/data-access"
import { getGradesForStaff } from "@/modules/school/data-access"
import { EmptyState } from "@/shared/components/ui/empty-state"
import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"
import { Badge } from "@/shared/components/ui/badge"
import { Button } from "@/shared/components/ui/button"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/shared/components/ui/table"
import { BarChart3 } from "lucide-react"
import { formatDate } from "@/shared/lib/utils"

export const dynamic = "force-dynamic"

type SearchParams = { [key: string]: string | string[] | undefined }

const getParam = (params: SearchParams, key: string) => {
  const v = params[key]
  if (typeof v === "string") return v
  if (Array.isArray(v)) return v[0]
  return undefined
}

const fmt = (v: number | null, digits = 1) => (typeof v === "number" && Number.isFinite(v) ? v.toFixed(digits) : "-")

export default async function TeacherGradeInsightsPage({ searchParams }: { searchParams: Promise<SearchParams> }) {
  await requireAuth()
  const params = await searchParams
  const gradeId = getParam(params, "gradeId")

  const teacherId = await getTeacherIdForMutations()
  const grades = await getGradesForStaff(teacherId)
  const allowedIds = new Set(grades.map((g) => g.id))
  const selected = gradeId && gradeId !== "all" && allowedIds.has(gradeId) ? gradeId : ""

  const insights = selected ? await getGradeHomeworkInsights({ gradeId: selected, limit: 50 }) : null

  if (grades.length === 0) {
    return (
      <div className="flex h-full flex-col space-y-8 p-8">
        <div className="space-y-1">
          <h2 className="text-2xl font-bold tracking-tight">Grade Insights</h2>
          <p className="text-muted-foreground">View grade-level homework statistics for grades you lead.</p>
        </div>
        <EmptyState
          icon={BarChart3}
          title="No grades assigned"
          description="You are not assigned as a grade head or teaching head for any grade."
          className="h-[360px] bg-card"
        />
      </div>
    )
  }

  return (
    <div className="flex h-full flex-col space-y-8 p-8">
      <div className="space-y-1">
        <h2 className="text-2xl font-bold tracking-tight">Grade Insights</h2>
        <p className="text-muted-foreground">Homework statistics aggregated across all classes in a grade.</p>
      </div>

      <Card className="shadow-none">
        <CardHeader className="flex flex-row items-center justify-between space-y-0">
          <CardTitle className="text-base">Filters</CardTitle>
          <Badge variant="secondary" className="tabular-nums">
            {grades.length}
          </Badge>
        </CardHeader>
        <CardContent>
          <form action="/management/grade/insights" method="get" className="flex flex-col gap-3 md:flex-row md:items-center">
            <label className="text-sm font-medium">Grade</label>
            <select
              name="gradeId"
              defaultValue={selected || "all"}
              className="h-10 w-full rounded-md border bg-background px-3 text-sm md:w-[360px]"
            >
              <option value="all">Select a grade</option>
              {grades.map((g) => (
                <option key={g.id} value={g.id}>
                  {g.school.name} / {g.name}
                </option>
              ))}
            </select>
            <Button type="submit" className="md:ml-2">
              Apply
            </Button>
          </form>
        </CardContent>
      </Card>

      {!selected ? (
        <EmptyState
          icon={BarChart3}
          title="Select a grade to view insights"
          description="Pick a grade to see latest homework and historical score statistics."
          className="h-[360px] bg-card"
        />
      ) : !insights ? (
        <EmptyState
          icon={BarChart3}
          title="Grade not found"
          description="This grade may not exist or has no accessible data."
          className="h-[360px] bg-card"
        />
      ) : insights.assignments.length === 0 ? (
        <EmptyState
          icon={BarChart3}
          title="No homework data for this grade"
          description="No homework assignments were targeted to students in this grade yet."
          className="h-[360px] bg-card"
        />
      ) : (
        <div className="space-y-6">
          <div className="grid gap-4 md:grid-cols-4">
            <Card>
              <CardHeader className="pb-2">
                <CardTitle className="text-sm font-medium">Classes</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold tabular-nums">{insights.classCount}</div>
                <div className="text-xs text-muted-foreground">
                  {insights.grade.school.name} / {insights.grade.name}
                </div>
              </CardContent>
            </Card>
            <Card>
              <CardHeader className="pb-2">
                <CardTitle className="text-sm font-medium">Students</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold tabular-nums">{insights.studentCounts.total}</div>
                <div className="text-xs text-muted-foreground">
                  Active {insights.studentCounts.active} • Inactive {insights.studentCounts.inactive}
                </div>
              </CardContent>
            </Card>
            <Card>
              <CardHeader className="pb-2">
                <CardTitle className="text-sm font-medium">Overall Avg</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold tabular-nums">{fmt(insights.overallScores.avg)}</div>
                <div className="text-xs text-muted-foreground">Across graded homework</div>
              </CardContent>
            </Card>
            <Card>
              <CardHeader className="pb-2">
                <CardTitle className="text-sm font-medium">Latest Avg</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold tabular-nums">{fmt(insights.latest?.scoreStats.avg ?? null)}</div>
                <div className="text-xs text-muted-foreground">{insights.latest ? insights.latest.title : "-"}</div>
              </CardContent>
            </Card>
          </div>

          <Card className="shadow-none">
            <CardHeader className="flex flex-row items-center justify-between space-y-0">
              <CardTitle className="text-base">Homework timeline</CardTitle>
              <Badge variant="secondary" className="tabular-nums">
                {insights.assignments.length}
              </Badge>
            </CardHeader>
            <CardContent>
              <div className="rounded-md border">
                <Table>
                  <TableHeader>
                    <TableRow className="bg-muted/50">
                      <TableHead>Assignment</TableHead>
                      <TableHead>Status</TableHead>
                      <TableHead>Created</TableHead>
                      <TableHead className="text-right">Targeted</TableHead>
                      <TableHead className="text-right">Submitted</TableHead>
                      <TableHead className="text-right">Graded</TableHead>
                      <TableHead className="text-right">Avg</TableHead>
                      <TableHead className="text-right">Median</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {insights.assignments.map((a) => (
                      <TableRow key={a.assignmentId}>
                        <TableCell className="font-medium">{a.title}</TableCell>
                        <TableCell>
                          <Badge variant="secondary" className="capitalize">
                            {a.status}
                          </Badge>
                        </TableCell>
                        <TableCell className="text-muted-foreground">{formatDate(a.createdAt)}</TableCell>
                        <TableCell className="text-right tabular-nums">{a.targetCount}</TableCell>
                        <TableCell className="text-right tabular-nums">{a.submittedCount}</TableCell>
                        <TableCell className="text-right tabular-nums">{a.gradedCount}</TableCell>
                        <TableCell className="text-right tabular-nums">{fmt(a.scoreStats.avg)}</TableCell>
                        <TableCell className="text-right tabular-nums">{fmt(a.scoreStats.median)}</TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              </div>
            </CardContent>
          </Card>

          <Card className="shadow-none">
            <CardHeader className="flex flex-row items-center justify-between space-y-0">
              <CardTitle className="text-base">Class ranking</CardTitle>
              <Badge variant="secondary" className="tabular-nums">
                {insights.classes.length}
              </Badge>
            </CardHeader>
            <CardContent>
              <div className="rounded-md border">
                <Table>
                  <TableHeader>
                    <TableRow className="bg-muted/50">
                      <TableHead>Class</TableHead>
                      <TableHead className="text-right">Students</TableHead>
                      <TableHead className="text-right">Latest Avg</TableHead>
                      <TableHead className="text-right">Prev Avg</TableHead>
                      <TableHead className="text-right">Δ</TableHead>
                      <TableHead className="text-right">Overall Avg</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {insights.classes.map((c) => (
                      <TableRow key={c.class.id}>
                        <TableCell className="font-medium">
                          {c.class.name}
                          {c.class.homeroom ? <span className="text-muted-foreground"> • {c.class.homeroom}</span> : null}
                        </TableCell>
                        <TableCell className="text-right tabular-nums">{c.studentCounts.total}</TableCell>
                        <TableCell className="text-right tabular-nums">{fmt(c.latestAvg)}</TableCell>
                        <TableCell className="text-right tabular-nums">{fmt(c.prevAvg)}</TableCell>
                        <TableCell className="text-right tabular-nums">{fmt(c.deltaAvg)}</TableCell>
                        <TableCell className="text-right tabular-nums">{fmt(c.overallScores.avg)}</TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              </div>
            </CardContent>
          </Card>
        </div>
      )}
    </div>
  )
}