"use client"

import { BarChart3, GraduationCap, MoreHorizontal, Pencil, Trash2, UserCog, Users } from "lucide-react"
import { useRouter } from "next/navigation"
import { useTranslations } from "next-intl"

import type { GradeListItem } from "../types"
import type { GradeOverviewStats } from "../data-access"
import { Button } from "@/shared/components/ui/button"
import { Card, CardContent } from "@/shared/components/ui/card"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/shared/components/ui/dropdown-menu"

type GradeOverviewCardsProps = {
  grades: GradeListItem[]
  statsMap: Map<string, GradeOverviewStats>
  isWorking: boolean
  onEdit: (item: GradeListItem) => void
  onDelete: (item: GradeListItem) => void
}

/**
 * 年级概览卡片视图。
 *
 * 以卡片网格展示前 8 个年级，每张卡片包含年级名称、所属学校、
 * 班级/学生/教师统计、年级主任/教学主任以及快捷操作入口。
 */
export function GradeOverviewCards({
  grades,
  statsMap,
  isWorking,
  onEdit,
  onDelete,
}: GradeOverviewCardsProps) {
  const t = useTranslations("school")
  const router = useRouter()

  if (grades.length === 0) return null

  return (
    <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
      {grades.slice(0, 8).map((g) => {
        const stats = statsMap.get(g.id)
        return (
          <Card key={g.id} className="shadow-none">
            <CardContent className="space-y-3 p-4">
              <div className="flex items-start justify-between">
                <div className="min-w-0 flex-1">
                  <div className="truncate text-sm font-semibold">{g.name}</div>
                  <div className="truncate text-xs text-muted-foreground">{g.school.name}</div>
                </div>
                <DropdownMenu>
                  <DropdownMenuTrigger asChild>
                    <Button variant="ghost" size="icon" className="h-7 w-7 shrink-0" disabled={isWorking}>
                      <MoreHorizontal className="h-3.5 w-3.5" />
                    </Button>
                  </DropdownMenuTrigger>
                  <DropdownMenuContent align="end">
                    <DropdownMenuItem
                      onClick={() =>
                        router.push(`/admin/school/grades/insights?gradeId=${encodeURIComponent(g.id)}`)
                      }
                    >
                      <BarChart3 className="mr-2 h-3.5 w-3.5" />
                      {t("grades.gradeOverview.viewInsights")}
                    </DropdownMenuItem>
                    <DropdownMenuSeparator />
                    <DropdownMenuItem onClick={() => onEdit(g)}>
                      <Pencil className="mr-2 h-3.5 w-3.5" />
                      {t("grades.actions.edit")}
                    </DropdownMenuItem>
                    <DropdownMenuItem
                      className="text-destructive focus:text-destructive"
                      onClick={() => onDelete(g)}
                    >
                      <Trash2 className="mr-2 h-3.5 w-3.5" />
                      {t("grades.actions.delete")}
                    </DropdownMenuItem>
                  </DropdownMenuContent>
                </DropdownMenu>
              </div>

              {/* 统计指标 */}
              <div className="grid grid-cols-3 gap-2 text-center">
                <div className="rounded-md bg-muted/50 p-2">
                  <div className="flex items-center justify-center text-muted-foreground">
                    <GraduationCap className="h-3 w-3" />
                  </div>
                  <div className="mt-0.5 text-sm font-semibold tabular-nums">
                    {stats?.classCount ?? 0}
                  </div>
                  <div className="text-[10px] text-muted-foreground">
                    {t("grades.gradeOverview.classCount")}
                  </div>
                </div>
                <div className="rounded-md bg-muted/50 p-2">
                  <div className="flex items-center justify-center text-muted-foreground">
                    <Users className="h-3 w-3" />
                  </div>
                  <div className="mt-0.5 text-sm font-semibold tabular-nums">
                    {stats?.studentCount ?? 0}
                  </div>
                  <div className="text-[10px] text-muted-foreground">
                    {t("grades.gradeOverview.studentCount")}
                  </div>
                </div>
                <div className="rounded-md bg-muted/50 p-2">
                  <div className="flex items-center justify-center text-muted-foreground">
                    <UserCog className="h-3 w-3" />
                  </div>
                  <div className="mt-0.5 text-sm font-semibold tabular-nums">
                    {stats?.teacherCount ?? 0}
                  </div>
                  <div className="text-[10px] text-muted-foreground">
                    {t("grades.gradeOverview.teacherCount")}
                  </div>
                </div>
              </div>

              {/* 年级主任/教学主任 */}
              <div className="space-y-1 border-t pt-2 text-xs">
                <div className="flex items-center justify-between">
                  <span className="text-muted-foreground">{t("grades.gradeOverview.gradeHead")}</span>
                  <span className="truncate font-medium">
                    {g.gradeHead?.name ?? t("grades.gradeOverview.notSet")}
                  </span>
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-muted-foreground">{t("grades.gradeOverview.teachingHead")}</span>
                  <span className="truncate font-medium">
                    {g.teachingHead?.name ?? t("grades.gradeOverview.notSet")}
                  </span>
                </div>
              </div>

              {/* 快捷操作 */}
              <Button asChild variant="outline" size="sm" className="w-full">
                <a href={`/admin/school/grades/insights?gradeId=${encodeURIComponent(g.id)}`}>
                  <BarChart3 className="mr-1.5 h-3.5 w-3.5" />
                  {t("grades.gradeOverview.viewInsights")}
                </a>
              </Button>
            </CardContent>
          </Card>
        )
      })}
    </div>
  )
}
