import { Link } from "react-router-dom";

interface StatCard {
  label: string;
  value: string;
  /** 값 뒤에 붙는 단위 (예: "%") */
  unit?: string;
  /** 우상단 뱃지 */
  badge?: { type: "trend"; value: string } | { type: "icon"; icon: string; color: string };
  link: string;
}

interface StatsCardsProps {
  cards?: StatCard[];
  loading?: boolean;
}

/** 하드코딩 기본 데이터 */
const DEFAULT_CARDS: StatCard[] = [
  {
    label: "오늘 발송 수",
    value: "12,847",
    badge: { type: "trend", value: "15%" },
    link: "/statistics",
  },
  {
    label: "성공률",
    value: "98.7",
    unit: "%",
    badge: { type: "icon", icon: "check_circle", color: "bg-green-100 text-green-600" },
    link: "/statistics",
  },
  {
    label: "등록 기기 수",
    value: "45,230",
    badge: { type: "icon", icon: "devices", color: "bg-blue-50 text-primary" },
    link: "/devices",
  },
  {
    label: "활성 서비스",
    value: "8",
    badge: { type: "icon", icon: "grid_view", color: "bg-purple-50 text-purple-600" },
    link: "/services",
  },
];

export default function StatsCards({ cards = DEFAULT_CARDS, loading }: StatsCardsProps) {
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
      {cards.map((card) => (
        <Link
          key={card.label}
          to={card.link}
          className="bg-white rounded-xl shadow-sm border border-gray-200 p-5 flex flex-col justify-between h-28 hover:shadow-md hover:border-primary/30 transition-all cursor-pointer"
        >
          <div className="flex items-center justify-between">
            <h4 className="text-xs font-medium text-gray-500">{card.label}</h4>
            {card.badge?.type === "trend" && (
              <div className="bg-green-50 text-green-700 text-[10px] font-bold px-1.5 py-0.5 rounded-full inline-flex items-center gap-0.5">
                <span className="material-symbols-outlined flex-shrink-0" style={{ fontSize: "10px" }}>trending_up</span>
                {card.badge.value}
              </div>
            )}
            {card.badge?.type === "icon" && (
              <div className={`${card.badge.color} rounded-full size-6 inline-flex items-center justify-center`}>
                <span className="material-symbols-outlined flex-shrink-0" style={{ fontSize: "14px" }}>{card.badge.icon}</span>
              </div>
            )}
          </div>
          {loading ? (
            <div className="h-8 w-24 rounded bg-gray-100 animate-pulse" />
          ) : (
            <div className="text-2xl font-bold text-gray-900">
              {card.value}
              {card.unit && (
                <span className="text-base text-gray-400 ml-0.5 font-normal">{card.unit}</span>
              )}
            </div>
          )}
        </Link>
      ))}
    </div>
  );
}