ERP-node/frontend/lib/registry/pop-components/pop-dashboard/items/StatCard.tsx

"use client";

/**
 * 통계 카드 서브타입 컴포넌트
 *
 * 상태별 건수 표시 (대기/진행/완료 등)
 * 각 카테고리별 색상 및 링크 지원
 */

import React from "react";
import type { DashboardItem } from "../../types";
import { abbreviateNumber } from "../utils/formula";

// ===== Props =====

export interface StatCardProps {
  item: DashboardItem;
  /** 카테고리별 건수 맵 (카테고리 label -> 건수) */
  categoryData: Record<string, number>;
}

// ===== 기본 색상 팔레트 =====

const DEFAULT_STAT_COLORS = [
  "#6366f1", // indigo
  "#f59e0b", // amber
  "#10b981", // emerald
  "#ef4444", // rose
  "#8b5cf6", // violet
];

// ===== 메인 컴포넌트 =====

export function StatCardComponent({ item, categoryData }: StatCardProps) {
  const { visibility, statConfig } = item;
  const categories = statConfig?.categories ?? [];
  const total = Object.values(categoryData).reduce((sum, v) => sum + v, 0);

  return (
    <div className="@container flex h-full w-full flex-col items-center justify-center p-3">
      {/* 라벨 */}
      {visibility.showLabel && (
        <p className="mb-1 text-xs text-muted-foreground @[250px]:text-sm">
          {item.label}
        </p>
      )}

      {/* 총합 */}
      {visibility.showValue && (
        <p className="mb-2 text-lg font-bold @[200px]:text-2xl @[350px]:text-3xl">
          {abbreviateNumber(total)}
        </p>
      )}

      {/* 카테고리별 건수 */}
      <div className="flex flex-wrap gap-2 @[200px]:gap-3">
        {categories.map((cat, index) => {
          const count = categoryData[cat.label] ?? 0;
          const color =
            cat.color ?? DEFAULT_STAT_COLORS[index % DEFAULT_STAT_COLORS.length];

          return (
            <div key={cat.label} className="flex items-center gap-1">
              {/* 색상 점 */}
              <span
                className="inline-block h-2 w-2 rounded-full @[200px]:h-2.5 @[200px]:w-2.5"
                style={{ backgroundColor: color }}
              />
              {/* 라벨 + 건수 */}
              <span className="text-[10px] text-muted-foreground @[150px]:text-xs">
                {cat.label}
              </span>
              <span className="text-[10px] font-medium @[150px]:text-xs">
                {abbreviateNumber(count)}
              </span>
            </div>
          );
        })}
      </div>

      {/* 보조 라벨 (단위 등) */}
      {visibility.showSubLabel && (
        <p className="mt-1 text-xs text-muted-foreground">
          {visibility.showUnit && item.kpiConfig?.unit
            ? `단위: ${item.kpiConfig.unit}`
            : ""}
        </p>
      )}
    </div>
  );
}