import { BookOpen, CheckCircle, PenTool, TriangleAlert, Trophy, TrendingUp } from "lucide-react"
import { getTranslations } from "next-intl/server"

import { StatCard } from "@/shared/components/ui/stat-card"
import type { StudentRanking } from "@/modules/homework/types"

interface StudentStatsGridProps {
  enrolledClassCount: number
  dueSoonCount: number
  overdueCount: number
  gradedCount: number
  ranking: StudentRanking | null
}

export async function StudentStatsGrid({
  enrolledClassCount,
  dueSoonCount,
  overdueCount,
  gradedCount,
  ranking,
}: StudentStatsGridProps) {
  const t = await getTranslations("dashboard")

  return (
    <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
      <StatCard
        title={t("stats.enrolledClasses")}
        value={String(enrolledClassCount)}
        description={t("stats.activeEnrollments")}
        icon={BookOpen}
        href="/student/learning/courses"
        color="text-emerald-500"
        valueClassName="text-emerald-500 tabular-nums"
      />
      <StatCard
        title={t("stats.averageScore")}
        value={ranking ? `${Math.round(ranking.percentage)}%` : "-"}
        description={ranking ? t("stats.overallPerformance") : t("stats.noGradesYet")}
        icon={TrendingUp}
        href="/student/grades"
        color="text-blue-500"
        valueClassName={ranking ? "text-blue-500 tabular-nums" : "tabular-nums"}
      />
      <StatCard
        title={t("stats.classRank")}
        value={ranking ? `${ranking.rank}/${ranking.classSize}` : "-"}
        description={ranking ? t("stats.currentPosition") : t("stats.noRankingYet")}
        icon={Trophy}
        href="/student/grades"
        color="text-purple-500"
        valueClassName={ranking ? "text-purple-500 tabular-nums" : "tabular-nums"}
      />
      <StatCard
        title={t("stats.graded")}
        value={String(gradedCount)}
        description={t("stats.completedAssignments")}
        icon={CheckCircle}
        href="/student/learning/assignments"
        color="text-green-500"
        valueClassName="text-green-500 tabular-nums"
      />
      <StatCard
        title={t("stats.dueSoon")}
        value={String(dueSoonCount)}
        description={t("stats.next7Days")}
        icon={PenTool}
        href="/student/learning/assignments"
        color={dueSoonCount > 0 ? "text-orange-500" : undefined}
        valueClassName={dueSoonCount > 0 ? "text-orange-500 tabular-nums" : "tabular-nums"}
      />
      <StatCard
        title={t("stats.overdue")}
        value={String(overdueCount)}
        description={t("stats.needsAttention")}
        icon={TriangleAlert}
        href="/student/learning/assignments"
        color={overdueCount > 0 ? "text-red-500" : undefined}
        valueClassName={overdueCount > 0 ? "text-red-500 tabular-nums" : "tabular-nums"}
      />
    </div>
  )
}