import type { JSX } from "react"
import Link from "next/link"
import { EmptyState } from "@/shared/components/ui/empty-state"
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 { Progress } from "@/shared/components/ui/progress"
import { ListPagination, computePagination, paginate } from "@/shared/components/ui/list-pagination"
import { formatDate, formatNumber } from "@/shared/lib/utils"
import { getParam, type SearchParams } from "@/shared/lib/search-params"
import { getHomeworkAssignments } from "@/modules/homework/data-access"
import { getTeacherClasses } from "@/modules/classes/data-access"
import { PenTool, PlusCircle, AlertCircle } from "lucide-react"
import { getTeacherIdForMutations } from "@/modules/classes/data-access"
import { getTranslations } from "next-intl/server"

export const dynamic = "force-dynamic"

const PAGE_SIZE = 10

export default async function AssignmentsPage({ searchParams }: { searchParams: Promise<SearchParams> }): Promise<JSX.Element> {
  const t = await getTranslations("examHomework")
  const sp = await searchParams
  const rawClassId = getParam(sp, "classId")
  const creatorId = await getTeacherIdForMutations()

  // Only fetch classes list when a class filter is active — needed to resolve
  // the class name for display. When no filter is applied, skip the query to
  // avoid an unnecessary DB round-trip.
  const filteredClassId = rawClassId && rawClassId !== "all" ? rawClassId : null
  const [assignments, classes] = await Promise.all([
    getHomeworkAssignments({ creatorId, classId: filteredClassId ?? undefined }),
    filteredClassId ? getTeacherClasses() : Promise.resolve([]),
  ])
  const hasAssignments = assignments.length > 0
  const className = filteredClassId ? classes.find((c) => c.id === filteredClassId)?.name : undefined

  // 分页计算
  const { page } = computePagination(sp, PAGE_SIZE)
  const total = assignments.length
  const totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE))
  const currentPage = Math.min(page, totalPages)
  const pagedAssignments = paginate(assignments, currentPage, PAGE_SIZE)

  return (
    <div className="h-full flex-1 flex-col space-y-8 p-8 md:flex">
      <div className="flex items-center justify-between space-y-2">
        <div>
          <h1 className="text-2xl font-bold tracking-tight">{t("homework.list.title")}</h1>
          <p className="text-muted-foreground">
            {filteredClassId ? t("homework.list.filterByClass", { className: className ?? filteredClassId }) : t("homework.list.description")}
          </p>
        </div>
        <div className="flex items-center gap-2">
          {filteredClassId ? (
            <Button asChild variant="outline">
              <Link href="/teacher/homework/assignments">{t("homework.list.clearFilters")}</Link>
            </Button>
          ) : null}
          <Button asChild>
            <Link
              href={
                filteredClassId
                  ? `/teacher/homework/assignments/create?classId=${encodeURIComponent(filteredClassId)}`
                  : "/teacher/homework/assignments/create"
              }
            >
              <PlusCircle className="mr-2 h-4 w-4" aria-hidden="true" />
              {t("homework.list.create")}
            </Link>
          </Button>
        </div>
      </div>

      {!hasAssignments ? (
        <EmptyState
          title={t("homework.list.empty")}
          description={filteredClassId ? t("homework.list.emptyFiltered") : t("homework.list.emptyDescription")}
          icon={PenTool}
          action={{
            label: t("homework.list.create"),
            href:
              filteredClassId
                ? `/teacher/homework/assignments/create?classId=${encodeURIComponent(filteredClassId)}`
                : "/teacher/homework/assignments/create",
          }}
        />
      ) : (
        <div className="rounded-md border bg-card">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead className="w-[260px]">{t("homework.list.columns.title")}</TableHead>
                <TableHead>{t("homework.list.columns.status")}</TableHead>
                <TableHead>{t("homework.list.columns.dueAt")}</TableHead>
                <TableHead className="w-[180px]">{t("homework.list.columns.submissionRate")}</TableHead>
                <TableHead className="text-right">{t("homework.list.columns.averageScore")}</TableHead>
                <TableHead className="text-right">{t("homework.list.columns.overdue")}</TableHead>
                <TableHead>{t("homework.list.columns.sourceExam")}</TableHead>
                <TableHead>{t("homework.list.columns.createdAt")}</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {pagedAssignments.map((a) => {
                const submissionRate = a.targetCount > 0 ? (a.submittedCount / a.targetCount) * 100 : 0
                const hasOverdue = a.overdueCount > 0
                return (
                  <TableRow key={a.id}>
                    <TableCell className="font-medium">
                      <Link
                        href={`/teacher/homework/assignments/${a.id}`}
                        className="hover:underline line-clamp-2 max-w-[240px]"
                      >
                        {a.title}
                      </Link>
                    </TableCell>
                    <TableCell>
                      <Badge variant="outline" className="capitalize">
                        {t(`homework.status.${a.status}`)}
                      </Badge>
                    </TableCell>
                    <TableCell className="text-muted-foreground tabular-nums">{a.dueAt ? formatDate(a.dueAt) : "-"}</TableCell>
                    <TableCell>
                      <div className="flex items-center gap-2">
                        <Progress value={submissionRate} className="h-2 w-24" aria-label={t("homework.list.columns.submissionRate")} />
                        <span className="text-xs text-muted-foreground tabular-nums whitespace-nowrap">
                          {a.submittedCount}/{a.targetCount}
                        </span>
                      </div>
                    </TableCell>
                    <TableCell className="text-right tabular-nums">
                      {a.averageScore !== null ? formatNumber(a.averageScore, 1) : "-"}
                    </TableCell>
                    <TableCell className="text-right">
                      {hasOverdue ? (
                        <Badge variant="destructive" className="gap-1">
                          <AlertCircle className="h-3 w-3" aria-hidden="true" />
                          {a.overdueCount}
                        </Badge>
                      ) : (
                        <span className="text-muted-foreground tabular-nums">0</span>
                      )}
                    </TableCell>
                    <TableCell className="text-muted-foreground truncate max-w-[160px]">{a.sourceExamTitle}</TableCell>
                    <TableCell className="text-muted-foreground tabular-nums">{formatDate(a.createdAt)}</TableCell>
                  </TableRow>
                )
              })}
            </TableBody>
          </Table>
          <ListPagination
            page={currentPage}
            pageSize={PAGE_SIZE}
            total={total}
            totalPages={totalPages}
            basePath="/teacher/homework/assignments"
            searchParams={sp}
            itemLabel={t("homework.list.pagination.itemLabel")}
          />
        </div>
      )}
    </div>
  )
}