NextEdu/src/modules/dashboard/components/student-dashboard/student-upcoming-assignments-card.tsx

import Link from "next/link"
import { PenTool } from "lucide-react"
import { getLocale, getTranslations } from "next-intl/server"

import { Badge } from "@/shared/components/ui/badge"
import { Button } from "@/shared/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"
import { EmptyState } from "@/shared/components/ui/empty-state"
import { StatusBadge } from "@/shared/components/ui/status-badge"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/shared/components/ui/table"
import { formatDate, cn } from "@/shared/lib/utils"
import type { StudentHomeworkAssignmentListItem } from "@/modules/homework/types"
import {
  STUDENT_HOMEWORK_PROGRESS_VARIANT,
  STUDENT_HOMEWORK_PROGRESS_LABEL,
} from "@/modules/homework/types"

const getActionLabelKey = (status: string): "action.review" | "action.view" | "action.continue" | "action.start" => {
  if (status === "graded") return "action.review"
  if (status === "submitted") return "action.view"
  if (status === "in_progress") return "action.continue"
  return "action.start"
}

const getActionVariant = (status: string): "default" | "secondary" | "outline" => {
  if (status === "graded" || status === "submitted") return "outline"
  return "default"
}

const getDueUrgency = (dueAt: string | null): "overdue" | "urgent" | "warning" | "normal" | null => {
  if (!dueAt) return null
  const now = new Date()
  const due = new Date(dueAt)
  const diffHours = (due.getTime() - now.getTime()) / (1000 * 60 * 60)

  if (diffHours < 0) return "overdue"
  if (diffHours < 48) return "urgent"
  if (diffHours < 120) return "warning"
  return "normal"
}

export async function StudentUpcomingAssignmentsCard({ upcomingAssignments }: { upcomingAssignments: StudentHomeworkAssignmentListItem[] }) {
  const t = await getTranslations("dashboard")
  const locale = await getLocale()
  const hasAssignments = upcomingAssignments.length > 0

  return (
    <Card>
      <CardHeader className="flex flex-row items-center justify-between">
        <CardTitle className="text-base flex items-center gap-2">
          <PenTool className="h-4 w-4 text-muted-foreground" />
          {t("sections.upcomingAssignments")}
        </CardTitle>
        <Button asChild variant="outline" size="sm">
          <Link href="/student/learning/assignments">{t("quickActions.viewAll")}</Link>
        </Button>
      </CardHeader>
      <CardContent>
        {!hasAssignments ? (
          <EmptyState
            icon={PenTool}
            title={t("empty.noAssignmentsStudent")}
            description={t("empty.noAssignmentsStudentDesc")}
            action={{ label: t("quickActions.viewAll"), href: "/student/learning/assignments" }}
            className="border-none h-72"
          />
        ) : (
          <div className="rounded-md border bg-card">
            <Table>
              <TableHeader>
                <TableRow className="bg-muted/50">
                  <TableHead className="text-xs font-medium uppercase text-muted-foreground">{t("table.title")}</TableHead>
                  <TableHead className="text-xs font-medium uppercase text-muted-foreground">{t("table.status")}</TableHead>
                  <TableHead className="text-xs font-medium uppercase text-muted-foreground">{t("table.due")}</TableHead>
                  <TableHead className="text-xs font-medium uppercase text-muted-foreground">{t("table.score")}</TableHead>
                  <TableHead className="text-xs font-medium uppercase text-muted-foreground text-right">{t("table.action")}</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {upcomingAssignments.map((a) => {
                  const urgency = getDueUrgency(a.dueAt)
                  const isGraded = a.progressStatus === "graded"

                  return (
                    <TableRow key={a.id} className="h-12">
                      <TableCell className="font-medium">
                        <div className="flex items-center gap-2">
                          <Link href={`/student/learning/assignments/${a.id}`} className="truncate hover:underline">
                            {a.title}
                          </Link>
                          {!isGraded && urgency === "overdue" && (
                             <Badge variant="destructive" className="h-5 px-1.5 text-[10px] uppercase">{t("badge.late")}</Badge>
                          )}
                        </div>
                      </TableCell>
                      <TableCell>
                        <StatusBadge
                          status={a.progressStatus}
                          variantMap={STUDENT_HOMEWORK_PROGRESS_VARIANT}
                          labelMap={STUDENT_HOMEWORK_PROGRESS_LABEL}
                        />
                      </TableCell>
                      <TableCell className={cn(
                        "text-muted-foreground",
                        !isGraded && urgency === "overdue" && "text-destructive font-medium",
                        !isGraded && urgency === "urgent" && "text-orange-500 font-medium"
                      )}>
                        {a.dueAt ? formatDate(a.dueAt, locale) : "-"}
                      </TableCell>
                      <TableCell className="tabular-nums">{a.latestScore ?? "-"}</TableCell>
                      <TableCell className="text-right">
                        <Button asChild size="sm" variant={getActionVariant(a.progressStatus)} className="h-7 text-xs">
                          <Link href={`/student/learning/assignments/${a.id}`}>
                            {t(getActionLabelKey(a.progressStatus))}
                          </Link>
                        </Button>
                      </TableCell>
                    </TableRow>
                  )
                })}
              </TableBody>
            </Table>
          </div>
        )}
      </CardContent>
    </Card>
  )
}