"use client"

import type { JSX } from "react"
import { cn } from "@/shared/lib/utils"

/**
 * v4-P1-7: 成绩单元格组件，根据得分率着色。
 *
 * 着色规则（对标 PowerSchool / Canvas / 超星学习通）：
 * - 得分率 < 60%：红色（不及格）
 * - 得分率 60% ~ 84%：黄色（及格但未达优秀）
 * - 得分率 ≥ 85%：绿色（优秀）
 * - fullScore <= 0：不着色（异常数据，避免除零）
 *
 * 使用语义化的 Tailwind 类名，避免动态拼接。
 */
export function ScoreCell({
  score,
  fullScore,
  className,
}: {
  score: number
  fullScore: number
  className?: string
}): JSX.Element {
  const ratio = fullScore > 0 ? score / fullScore : 1
  const isFail = ratio < 0.6
  const isExcellent = ratio >= 0.85

  const colorClass = isFail
    ? "text-red-600 font-semibold"
    : isExcellent
      ? "text-green-600 font-semibold"
      : "text-yellow-600 font-medium"

  return (
    <span className={cn("font-mono tabular-nums", colorClass, className)}>
      {score} / {fullScore}
    </span>
  )
}