import type { JSX } from "react"
import { BarChart3 } from "lucide-react"

import type { GradeDistributionByGradeResult } from "@/modules/grades/types"
import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"
import { Badge } from "@/shared/components/ui/badge"
import { StatCard } from "@/shared/components/ui/stat-card"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/shared/components/ui/table"
import { formatNumber } from "@/shared/lib/utils"
import { useTranslations } from "next-intl"

interface Props {
  data: GradeDistributionByGradeResult
}

export function GradeDistributionPanel({ data }: Props): JSX.Element {
  const t = useTranslations("school")

  const stats = data.stats
  const buckets = data.overall.buckets

  const maxCount = Math.max(...buckets.map((b) => b.count), 1)

  return (
    <div className="space-y-6">
      <div className="grid gap-4 md:grid-cols-4">
        <StatCard
          title={t("grades.gradeDashboard.distribution.totalRecords")}
          value={data.overall.totalCount}
          icon={BarChart3}
          valueClassName="tabular-nums"
        />
        <StatCard
          title={t("grades.gradeDashboard.distribution.averageScore")}
          value={stats ? formatNumber(stats.average) : "-"}
          icon={BarChart3}
          valueClassName="tabular-nums"
        />
        <StatCard
          title={t("grades.gradeDashboard.distribution.passRate")}
          value={stats ? `${formatNumber(stats.passRate)}%` : "-"}
          icon={BarChart3}
          valueClassName="tabular-nums"
        />
        <StatCard
          title={t("grades.gradeDashboard.distribution.excellentRate")}
          value={stats ? `${formatNumber(stats.excellentRate)}%` : "-"}
          icon={BarChart3}
          valueClassName="tabular-nums"
        />
      </div>

      <Card className="shadow-none">
        <CardHeader>
          <CardTitle className="text-base">{t("grades.gradeDashboard.distribution.scoreBuckets")}</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="space-y-3">
            {buckets.map((b) => (
              <div key={b.label} className="flex items-center gap-3">
                <div className="w-16 text-sm text-muted-foreground">{b.label}</div>
                <div className="flex-1">
                  <div className="h-7 rounded-md bg-muted overflow-hidden">
                    <div
                      className="h-full bg-primary transition-all"
                      style={{ width: `${(b.count / maxCount) * 100}%` }}
                    />
                  </div>
                </div>
                <div className="w-12 text-right text-sm font-medium tabular-nums">{b.count}</div>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>

      <Card className="shadow-none">
        <CardHeader className="flex flex-row items-center justify-between space-y-0">
          <CardTitle className="text-base">{t("grades.gradeDashboard.distribution.byClass")}</CardTitle>
          <Badge variant="secondary" className="tabular-nums">{data.byClass.length}</Badge>
        </CardHeader>
        <CardContent>
          <div className="rounded-md border">
            <div className="overflow-x-auto">
              <Table>
                <TableHeader>
                  <TableRow className="bg-muted/50">
                    <TableHead>{t("grades.gradeDashboard.distribution.class")}</TableHead>
                    <TableHead className="text-right">{t("grades.gradeDashboard.distribution.students")}</TableHead>
                    <TableHead className="text-right">{t("grades.gradeDashboard.distribution.averageScore")}</TableHead>
                    <TableHead className="text-right">{t("grades.gradeDashboard.distribution.passRate")}</TableHead>
                    <TableHead className="text-right">{t("grades.gradeDashboard.distribution.excellentRate")}</TableHead>
                    <TableHead className="text-right">{t("grades.gradeDashboard.distribution.count")}</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {data.byClass.map((c) => (
                    <TableRow key={c.classId}>
                      <TableCell className="font-medium">{c.className}</TableCell>
                      <TableCell className="text-right tabular-nums">{c.stats?.count ?? 0}</TableCell>
                      <TableCell className="text-right tabular-nums">{formatNumber(c.stats?.average ?? null)}</TableCell>
                      <TableCell className="text-right tabular-nums">{c.stats ? `${formatNumber(c.stats.passRate)}%` : "-"}</TableCell>
                      <TableCell className="text-right tabular-nums">{c.stats ? `${formatNumber(c.stats.excellentRate)}%` : "-"}</TableCell>
                      <TableCell className="text-right tabular-nums">{c.distribution.totalCount}</TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
