import Link from "next/link"
import { PenTool, Calendar, Plus } from "lucide-react"
import { 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 { cn, formatDate } from "@/shared/lib/utils"
import type { HomeworkAssignmentListItem } from "@/modules/homework/types"

export async function TeacherHomeworkCard({ assignments }: { assignments: HomeworkAssignmentListItem[] }) {
  const t = await getTranslations("dashboard")

  return (
    <Card>
      <CardHeader className="flex flex-row items-center justify-between pb-3">
        <CardTitle className="text-base flex items-center gap-2">
          <PenTool className="h-4 w-4 text-muted-foreground" />
          {t("sections.homework")}
        </CardTitle>
        <Button asChild size="icon" variant="ghost" className="h-8 w-8" title={t("quickActions.createNewAssignment")}>
          <Link href="/teacher/homework/assignments/create">
            <Plus className="h-4 w-4" />
          </Link>
        </Button>
      </CardHeader>
      <CardContent>
        {assignments.length === 0 ? (
          <EmptyState
            icon={PenTool}
            title={t("empty.noAssignments")}
            description={t("empty.noAssignmentsDesc")}
            action={{ label: t("quickActions.create"), href: "/teacher/homework/assignments/create" }}
            className="border-none h-48"
          />
        ) : (
          <div className="space-y-1">
            {assignments.slice(0, 6).map((a) => {
              const isPublished = a.status === "published"
              const isDraft = a.status === "draft"

              return (
                <Link
                  key={a.id}
                  href={`/teacher/homework/assignments/${encodeURIComponent(a.id)}`}
                  className="group flex items-center justify-between rounded-md border border-transparent px-3 py-2 hover:bg-muted/50 hover:border-border transition-colors"
                >
                  <div className="min-w-0 flex-1 mr-3">
                    <div className="flex items-center gap-2 mb-0.5">
                      <div className={cn(
                        "h-2 w-2 rounded-full",
                        isPublished ? "bg-emerald-500" :
                        isDraft ? "bg-amber-400" : "bg-muted-foreground"
                      )} />
                      <div className="font-medium truncate text-sm group-hover:text-primary transition-colors">
                        {a.title}
                      </div>
                    </div>
                    <div className="text-xs text-muted-foreground truncate pl-4">
                      {a.sourceExamTitle}
                    </div>
                  </div>

                  <div className="flex flex-col items-end gap-1">
                    {a.dueAt ? (
                      <div className="flex items-center text-xs text-muted-foreground tabular-nums">
                        <Calendar className="mr-1 h-3 w-3 opacity-70" />
                        {formatDate(a.dueAt)}
                      </div>
                    ) : (
                      <span className="text-[10px] text-muted-foreground italic">{t("schedule.noDueDate")}</span>
                    )}
                    <Badge
                      variant="outline"
                      className={cn(
                        "text-[10px] h-4 px-1.5 capitalize font-normal border-transparent bg-muted/50",
                        isPublished && "text-emerald-600 bg-emerald-500/10",
                        isDraft && "text-amber-600 bg-amber-500/10"
                      )}
                    >
                      {a.status}
                    </Badge>
                  </div>
                </Link>
              )
            })}
            <div className="pt-2">
              <Button asChild variant="link" size="sm" className="w-full text-muted-foreground h-auto py-1 text-xs">
                <Link href="/teacher/homework/assignments">{t("quickActions.viewAllAssignments")}</Link>
              </Button>
            </div>
          </div>
        )}
      </CardContent>
    </Card>
  )
}