/**
 * 统计与进度可视化:StatCard / ProgressBar / AgentWeightsBar。
 * 原位于 admin/components.tsx。
 */

export function StatCard({
  label,
  value,
  hint,
}: {
  label: string
  value: string | number
  hint?: string
}) {
  return (
    <div className="border border-ink-900 bg-paper-50 px-4 py-3.5">
      <span className="text-2xs tracking-[0.2em] text-ink-400">{label}</span>
      <div className="mt-1.5 font-serif text-3xl font-bold tabular-nums leading-none text-ink-900">
        {value}
      </div>
      {hint && <div className="mt-1.5 text-2xs text-ink-400">{hint}</div>}
    </div>
  )
}

/** 进度条:同前台置信度细线 */
export function ProgressBar({ value, className = '' }: { value: number; className?: string }) {
  const clamped = Math.max(0, Math.min(100, value))
  return (
    <div className={`h-2 w-full overflow-hidden rounded-full bg-ink-200 ${className}`} role="progressbar" aria-valuenow={clamped}>
      <div
        className="h-full rounded-full bg-press transition-[width] duration-500"
        style={{ width: `${clamped}%` }}
      />
    </div>
  )
}

/** Agent 权重条形图 */
export function AgentWeightsBar({ weights, okCount }: { weights: Record<string, number>; okCount: number }) {
  const entries = Object.entries(weights).filter(([, w]) => w > 0)
  if (entries.length === 0) return null
  const total = entries.reduce((s, [, w]) => s + w, 0) || 1
  const colors = ['bg-ink-900', 'bg-ink-700', 'bg-ink-500', 'bg-press', 'bg-ink-300']
  return (
    <div className="mt-2 border-t border-ink-200 pt-2">
      <div className="mb-1 text-2xs text-ink-400">终裁专家权重</div>
      <div className="space-y-1">
        {entries.map(([k, w], i) => (
          <div key={k} className="flex items-center gap-2 text-2xs">
            <div className="h-3.5 flex-1 overflow-hidden rounded-sm bg-ink-200/60">
              <div
                className={`h-full ${colors[i % colors.length]} transition-all duration-500`}
                style={{ width: `${Math.max(3, Math.round((w / total) * 100))}%` }}
              />
            </div>
            <span className="w-12 text-right tabular-nums text-ink-500">
              {Math.round((w / total) * 100)}%
            </span>
            <span className="w-24 truncate text-ink-400" title={k}>{k}</span>
          </div>
        ))}
      </div>
      <div className="mt-1 text-2xs text-ink-400">有效专家：{okCount}/{entries.length}</div>
    </div>
  )
}