NextEdu/src/modules/homework/components/homework-assignment-question-error-overview-card.tsx

"use client"

import type { HomeworkAssignmentQuestionAnalytics } from "@/modules/homework/types"
import { useTranslations } from "next-intl"
import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"
import { Bar, BarChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts"

/** recharts 图表 margin 常量（避免每次渲染创建新对象引用） */
const CHART_MARGIN = { top: 10, right: 10, left: -20, bottom: 0 } as const

export function HomeworkAssignmentQuestionErrorOverviewCard({
  questions,
  gradedSampleCount,
}: {
  questions: HomeworkAssignmentQuestionAnalytics[]
  gradedSampleCount: number
}) {
  const t = useTranslations("examHomework")
  const data = questions.map((q, index) => ({
    name: `Q${index + 1}`,
    errorRate: q.errorRate * 100,
    errorCount: q.errorCount,
    total: gradedSampleCount,
  }))

  return (
    <Card className="md:col-span-1">
      <CardHeader className="pb-3">
        <CardTitle className="text-sm font-medium text-muted-foreground">{t("homework.analytics.errorRateOverview")}</CardTitle>
      </CardHeader>
      <CardContent className="h-72">
        {questions.length === 0 || gradedSampleCount === 0 ? (
          <div className="flex h-full items-center justify-center text-sm text-muted-foreground">
            {t("homework.analytics.noGradedSubmissions")}
          </div>
        ) : (
          <ResponsiveContainer width="100%" height="100%">
            <BarChart data={data} margin={CHART_MARGIN}>
              <CartesianGrid strokeDasharray="3 3" vertical={false} />
              <XAxis 
                dataKey="name" 
                tickLine={false} 
                axisLine={false} 
                tick={{ fontSize: 12, fill: "hsl(var(--muted-foreground))" }}
                interval={0} 
              />
              <YAxis 
                tickLine={false} 
                axisLine={false} 
                tick={{ fontSize: 12, fill: "hsl(var(--muted-foreground))" }}
                tickFormatter={(value) => `${value}%`}
                domain={[0, 100]}
              />
              <Tooltip
                cursor={{ fill: "hsl(var(--muted)/0.2)" }}
                content={({ active, payload }) => {
                  if (active && payload && payload.length) {
                    const d = payload[0].payload
                    return (
                      <div className="rounded-lg border bg-background p-2 shadow-sm">
                        <div className="grid grid-cols-2 gap-2">
                          <div className="flex flex-col">
                            <span className="text-[0.70rem] uppercase text-muted-foreground">{t("homework.analytics.question")}</span>
                            <span className="font-bold text-muted-foreground">{d.name}</span>
                          </div>
                          <div className="flex flex-col">
                            <span className="text-[0.70rem] uppercase text-muted-foreground">{t("homework.analytics.errorRateLabel")}</span>
                            <span className="font-bold">{d.errorRate.toFixed(1)}%</span>
                          </div>
                          <div className="flex flex-col">
                            <span className="text-[0.70rem] uppercase text-muted-foreground">{t("homework.analytics.errors")}</span>
                            <span className="font-bold">
                              {d.errorCount} / {d.total}
                            </span>
                          </div>
                        </div>
                      </div>
                    )
                  }
                  return null
                }}
              />
              <Bar 
                dataKey="errorRate" 
                fill="hsl(var(--primary))" 
                radius={[4, 4, 0, 0]} 
                maxBarSize={40}
              />
            </BarChart>
          </ResponsiveContainer>
        )}
      </CardContent>
    </Card>
  )
}