import Link from "next/link"
import { Users } from "lucide-react"
import { getTranslations } from "next-intl/server"

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 type { TeacherClass } from "@/modules/classes/types"

export async function TeacherClassesCard({ classes }: { classes: TeacherClass[] }) {
  const t = await getTranslations("dashboard")

  return (
    <Card>
      <CardHeader className="flex flex-row items-center justify-between">
        <CardTitle className="text-base flex items-center gap-2">
          <Users className="h-4 w-4 text-muted-foreground" />
          {t("sections.myClasses")}
        </CardTitle>
        <Button asChild variant="outline" size="sm">
          <Link href="/teacher/classes/my">{t("quickActions.viewAll")}</Link>
        </Button>
      </CardHeader>
      <CardContent className="grid gap-3">
        {classes.length === 0 ? (
          <EmptyState
            icon={Users}
            title={t("empty.noClassesYet")}
            description={t("empty.noClassesDesc")}
            action={{ label: t("quickActions.createClass"), href: "/teacher/classes/my" }}
            className="border-none h-72"
          />
        ) : (
          <div className="space-y-1">
            {classes.slice(0, 6).map((c) => (
              <Link
                key={c.id}
                href={`/teacher/classes/my/${encodeURIComponent(c.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="font-medium truncate group-hover:text-primary transition-colors">{c.name}</div>
                  <div className="text-xs text-muted-foreground truncate flex items-center gap-1.5">
                    <span className="inline-flex items-center rounded-sm bg-muted px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground">
                        {c.grade}
                    </span>
                    {c.homeroom && (
                        <>
                            <span>·</span>
                            <span>{t("schedule.homeroom")}: {c.homeroom}</span>
                        </>
                    )}
                    {c.room && (
                        <>
                            <span>·</span>
                            <span>{t("schedule.room")} {c.room}</span>
                        </>
                    )}
                  </div>
                </div>
                <div className="flex items-center text-xs text-muted-foreground tabular-nums">
                  <Users className="mr-1.5 h-3 w-3 opacity-70" />
                  {c.studentCount}
                </div>
              </Link>
            ))}
          </div>
        )}
      </CardContent>
    </Card>
  )
}