// 额度计量条：LED 分段 + 用量分级变色（≤80% 青 / >80% 琥珀 / >95% 红，与产品 .agent-usage 阈值对齐）
export function QuotaMeter({ label, pct = 0, detail, cells = 16, style }) {
  const p = Math.max(0, Math.min(100, pct));
  const filled = Math.round((p / 100) * cells);
  const color = p > 95 ? 'var(--red)' : p > 80 ? 'var(--amber)' : 'var(--cyan)';
  const glow = p > 95 ? 'rgba(255,93,93,.4)' : p > 80 ? 'rgba(240,180,41,.35)' : 'rgba(89,200,216,.4)';
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontFamily: 'var(--mono)', ...style }}
      title={(label ? label + ' · ' : '') + p + '%' + (detail ? ' · ' + detail : '')}>
      {label ? <span style={{ fontSize: 11, color: 'var(--muted)', letterSpacing: '.08em', flex: 'none' }}>{label}</span> : null}
      <span style={{ display: 'inline-flex', gap: 2, padding: 3, background: 'var(--bg-deep)', border: '1px solid var(--line-soft)', borderRadius: 3 }}>
        {Array.from({ length: cells }, (_, i) => (
          <span key={i} style={{
            width: 4, height: 9, borderRadius: 1,
            background: i < filled ? color : 'var(--panel-2)',
            boxShadow: i < filled ? '0 0 5px ' + glow : 'none',
          }}></span>
        ))}
      </span>
      <b style={{ fontSize: 12, color }}>{p}%</b>
      {detail ? <span style={{ fontSize: 10.5, color: 'var(--faint)' }}>{detail}</span> : null}
    </span>
  );
}