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 { getActionLabelKey, getActionVariant, getDueUrgency } from "@/modules/dashboard/lib/dashboard-utils"
import type { StudentHomeworkAssignmentListItem } from "@/modules/homework/types"
import {
  STUDENT_HOMEWORK_PROGRESS_VARIANT,
  STUDENT_HOMEWORK_PROGRESS_LABEL,
} from "@/modules/homework/types"

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

  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, now)
                  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>
  )
}