// AttendanceRateCard：聚合出勤率卡片
// 依据：参考项目差距补齐 - 考勤聚合统计
// - 展示：总出勤率 / 出勤天数 / 缺勤天数 / 迟到天数
// - 出勤率颜色：≥95% 绿色 / 90-95% 黄色 / <90% 红色

"use client";

import { useMemo } from "react";
import type { AttendanceRecord } from "@/types";
import { cn, formatPercent, formatNumber } from "@/lib/utils";

interface AttendanceRateCardProps {
  records: AttendanceRecord[];
}

export function AttendanceRateCard({
  records,
}: AttendanceRateCardProps): JSX.Element {
  const stats = useMemo(() => {
    const counts = { present: 0, late: 0, absent: 0, leave: 0 };
    for (const r of records) {
      counts[r.status]++;
    }
    const total = records.length;
    const attended = counts.present + counts.late;
    const rate = total > 0 ? attended / total : 1;
    return { ...counts, total, rate };
  }, [records]);

  const rateColor = cn(
    stats.rate >= 0.95 && "text-success",
    stats.rate >= 0.9 && stats.rate < 0.95 && "text-warning",
    stats.rate < 0.9 && "text-danger",
  );

  return (
    <div className="rounded border border-rule bg-paper-elevated p-4">
      <div className="grid grid-cols-2 gap-4 lg:grid-cols-4">
        <div>
          <p className="text-xs text-ink-muted">总出勤率</p>
          <p className={cn("mt-1 font-serif text-2xl", rateColor)}>
            {formatPercent(stats.rate)}
          </p>
        </div>
        <div>
          <p className="text-xs text-ink-muted">出勤天数</p>
          <p className="mt-1 font-serif text-2xl text-success">
            {formatNumber(stats.present)}
          </p>
        </div>
        <div>
          <p className="text-xs text-ink-muted">缺勤天数</p>
          <p className="mt-1 font-serif text-2xl text-danger">
            {formatNumber(stats.absent)}
          </p>
        </div>
        <div>
          <p className="text-xs text-ink-muted">迟到天数</p>
          <p className="mt-1 font-serif text-2xl text-warning">
            {formatNumber(stats.late)}
          </p>
        </div>
      </div>
    </div>
  );
}

export default AttendanceRateCard;
