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 function GradeStatsCard({ stats }: { stats: GradeStats | null }) {
  if (!stats || stats.count === 0) {
    return (
      <Card>
        <CardHeader>
          <CardTitle>Statistics</CardTitle>
        </CardHeader>
        <CardContent>
          <p className="text-sm text-muted-foreground">No data available for statistics.</p>
        </CardContent>
      </Card>
    )
  }

  return (
    <Card>
      <CardHeader>
        <CardTitle>Statistics</CardTitle>
      </CardHeader>
      <CardContent>
        <div className="grid grid-cols-2 gap-3 md:grid-cols-4">
          <StatItem
            label="Average"
            value={stats.average.toFixed(2)}
            icon={<BarChart3 className="h-4 w-4" />}
          />
          <StatItem
            label="Median"
            value={stats.median.toFixed(2)}
            icon={<BarChart3 className="h-4 w-4" />}
          />
          <StatItem
            label="Max"
            value={stats.max.toFixed(2)}
            icon={<TrendingUp className="h-4 w-4" />}
          />
          <StatItem
            label="Min"
            value={stats.min.toFixed(2)}
            icon={<TrendingDown className="h-4 w-4" />}
          />
          <StatItem
            label="Std Dev"
            value={stats.stdDev.toFixed(2)}
            icon={<Target className="h-4 w-4" />}
            hint="Standard deviation"
          />
          <StatItem
            label="Pass Rate"
            value={`${stats.passRate.toFixed(1)}%`}
            icon={<CheckCircle2 className="h-4 w-4" />}
            hint="Score >= 60% of full"
          />
          <StatItem
            label="Excellent Rate"
            value={`${stats.excellentRate.toFixed(1)}%`}
            icon={<Award className="h-4 w-4" />}
            hint="Score >= 85% of full"
          />
          <StatItem
            label="Count"
            value={stats.count}
            icon={<BarChart3 className="h-4 w-4" />}
          />
        </div>
      </CardContent>
    </Card>
  )
}