import type { JSX } from "react"
import { getTranslations } from "next-intl/server"

import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"
import { StatItem } from "@/shared/components/ui/stat-item"
import { TrendingUp, TrendingDown, BarChart3, Target, Award, CheckCircle2 } from "lucide-react"
import type { GradeStats } from "../types"

export async function GradeStatsCard({ stats }: { stats: GradeStats | null }): Promise<JSX.Element> {
  const t = await getTranslations("grades")

  if (!stats || stats.count === 0) {
    return (
      <Card>
        <CardHeader>
          <CardTitle>{t("stats.title")}</CardTitle>
        </CardHeader>
        <CardContent>
          <p className="text-sm text-muted-foreground">{t("stats.noData")}</p>
        </CardContent>
      </Card>
    )
  }

  return (
    <Card>
      <CardHeader>
        <CardTitle>{t("stats.title")}</CardTitle>
      </CardHeader>
      <CardContent>
        <div className="grid grid-cols-2 gap-3 md:grid-cols-4">
          <StatItem
            label={t("stats.average")}
            value={stats.average.toFixed(2)}
            icon={<BarChart3 className="h-4 w-4" />}
          />
          <StatItem
            label={t("stats.median")}
            value={stats.median.toFixed(2)}
            icon={<BarChart3 className="h-4 w-4" />}
          />
          <StatItem
            label={t("stats.max")}
            value={stats.max.toFixed(2)}
            icon={<TrendingUp className="h-4 w-4" />}
          />
          <StatItem
            label={t("stats.min")}
            value={stats.min.toFixed(2)}
            icon={<TrendingDown className="h-4 w-4" />}
          />
          <StatItem
            label={t("stats.stdDev")}
            value={stats.stdDev.toFixed(2)}
            icon={<Target className="h-4 w-4" />}
            hint={t("stats.stdDevHint")}
          />
          <StatItem
            label={t("stats.passRate")}
            value={`${stats.passRate.toFixed(1)}%`}
            icon={<CheckCircle2 className="h-4 w-4" />}
            hint={t("stats.passRateHint")}
          />
          <StatItem
            label={t("stats.excellentRate")}
            value={`${stats.excellentRate.toFixed(1)}%`}
            icon={<Award className="h-4 w-4" />}
            hint={t("stats.excellentRateHint")}
          />
          <StatItem
            label={t("stats.count")}
            value={stats.count}
            icon={<BarChart3 className="h-4 w-4" />}
          />
        </div>
      </CardContent>
    </Card>
  )
}
