import type { LucideIcon } from "lucide-react";
import type { ReactNode } from "react";
import { cn } from "~/lib/utils.ts";
import type { StatusTone } from "./status-badge.tsx";

const TONE_TEXT: Record<StatusTone, string> = {
  success: "text-success",
  warning: "text-warning",
  destructive: "text-destructive",
  neutral: "text-foreground",
};

/**
 * 数字磁贴:标签 + 大号数值 + 说明。tone 只给数值上色,标签/说明仍要用文字说清含义。
 * plain 用于已在卡片内(不再叠 pg-slab)。onClick 存在时整块可点(筛选联动)。
 */
export function StatTile({
  label,
  value,
  hint,
  icon: Icon,
  tone = "neutral",
  active = false,
  onClick,
  plain = false,
  className,
}: {
  label: ReactNode;
  value: ReactNode;
  hint?: ReactNode;
  icon?: LucideIcon;
  tone?: StatusTone;
  active?: boolean;
  onClick?: () => void;
  plain?: boolean;
  className?: string;
}) {
  const content = (
    <>
      <div className="flex items-center gap-1.5 text-meta text-muted-foreground">
        {Icon ? <Icon className="h-3.5 w-3.5" /> : null}
        <span className="truncate">{label}</span>
      </div>
      <div className={cn("mt-1 text-title-sm font-semibold tabular-nums", TONE_TEXT[tone])}>{value}</div>
      {hint ? <div className="mt-0.5 truncate text-meta text-muted-foreground">{hint}</div> : null}
    </>
  );
  const base = cn(
    "min-w-0 rounded-xl px-4 py-3 text-left",
    plain ? "border border-border/70" : "pg-slab",
    active && "ring-2 ring-ring/40",
    className,
  );
  if (onClick) {
    return (
      <button
        type="button"
        onClick={onClick}
        aria-pressed={active}
        className={cn(base, "cursor-pointer transition-colors duration-micro hover:bg-foreground/[0.04]")}
      >
        {content}
      </button>
    );
  }
  return <div className={base}>{content}</div>;
}