"use client"

import Link from "next/link"
import { ChevronRight, FileText } from "lucide-react"
import { useTranslations } from "next-intl"

import { Badge } from "@/shared/components/ui/badge"
import { Button } from "@/shared/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/shared/components/ui/card"
import { formatDate } from "@/shared/lib/utils"

interface AssignmentSummary {
  id: string
  title: string
  status: string
  isActive: boolean
  isOverdue: boolean
  dueAt: Date | null
  submittedCount: number
  targetCount: number
  avgScore: number | null
  medianScore: number | null
}

interface ClassAssignmentsWidgetProps {
  classId: string
  assignments: AssignmentSummary[]
}

export function ClassAssignmentsWidget({ classId, assignments }: ClassAssignmentsWidgetProps) {
  const t = useTranslations("classes")
  const activeAssignments = assignments.filter((a) => a.isActive)

  return (
    <Card className="h-fit">
      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
        <div className="space-y-1">
          <CardTitle className="text-base font-semibold">{t("detail.widgets.recentHomework")}</CardTitle>
          <CardDescription>
            {t("detail.assignments.activeCount", { count: activeAssignments.length })}
          </CardDescription>
        </div>
        <Button variant="ghost" size="sm" asChild>
          <Link href={`/teacher/homework/assignments?classId=${encodeURIComponent(classId)}`}>
            {t("detail.assignments.viewAll")}
            <ChevronRight className="ml-2 h-4 w-4" />
          </Link>
        </Button>
      </CardHeader>
      <CardContent className="pt-4">
        {assignments.length === 0 ? (
          <div className="flex flex-col items-center justify-center space-y-3 py-8 text-center">
            <div className="rounded-full bg-muted p-3">
              <FileText className="h-6 w-6 text-muted-foreground" />
            </div>
            <div className="space-y-1">
              <p className="text-sm font-medium">{t("detail.empty.noAssignments")}</p>
              <p className="text-xs text-muted-foreground">
                {t("detail.empty.noAssignmentsDescription")}
              </p>
            </div>
            <Button size="sm" asChild>
              <Link href={`/teacher/homework/assignments/create?classId=${encodeURIComponent(classId)}`}>
                {t("detail.assignments.createHomework")}
              </Link>
            </Button>
          </div>
        ) : (
          <div className="space-y-4">
            {assignments.slice(0, 5).map((assignment) => (
              <div
                key={assignment.id}
                className="flex items-start justify-between space-x-4 rounded-md border p-3 transition-all hover:bg-muted/50"
              >
                <div className="space-y-1">
                  <Link
                    href={`/teacher/homework/assignments/${assignment.id}`}
                    className="block font-medium hover:underline line-clamp-1"
                  >
                    {assignment.title}
                  </Link>
                  <div className="flex items-center gap-2 text-xs text-muted-foreground">
                    <span className={assignment.isOverdue ? "text-destructive font-medium" : ""}>
                      {assignment.dueAt
                        ? t("detail.assignments.due", { date: formatDate(assignment.dueAt) })
                        : t("detail.assignments.noDueDate")}
                    </span>
                    <span>•</span>
                    <span>
                      {t("detail.assignments.submittedCount", {
                        submitted: assignment.submittedCount,
                        total: assignment.targetCount,
                      })}
                    </span>
                  </div>
                </div>
                <div className="flex flex-col items-end gap-2">
                  <Badge
                    variant={assignment.isActive ? "default" : "secondary"}
                    className="rounded-sm px-1.5 py-0.5 text-[10px] uppercase"
                  >
                    {assignment.status}
                  </Badge>
                  {typeof assignment.avgScore === "number" && (
                    <span className="text-xs font-medium tabular-nums">
                      {t("detail.assignments.avgLabel")}: {assignment.avgScore.toFixed(0)}%
                    </span>
                  )}
                </div>
              </div>
            ))}
          </div>
        )}
      </CardContent>
    </Card>
  )
}
