const css = `
.m-bdg{display:inline-flex;align-items:center;font-family:var(--mono);font-size:11.5px;line-height:1;letter-spacing:.08em;height:28px;padding:0 10px;cursor:default;white-space:nowrap;border-radius:var(--radius-sm,4px)}
.m-bdg .m-bdg-ico{margin-right:5px;font-size:12px;line-height:1;font-family:var(--mono)}
.m-bdg .m-bdg-n{font-weight:700}
.m-bdg .m-bdg-label{max-width:0;opacity:0;overflow:hidden;transition:max-width .28s ease,opacity .22s ease,margin-left .28s ease}
.m-bdg:hover .m-bdg-label{max-width:8em;opacity:1;margin-left:5px}
.m-bdg--gate{color:var(--violet);border:1px solid var(--violet-dim)}
.m-bdg--gate:not(.m-bdg--zero){animation:maestro-pulse 2.2s infinite}
.m-bdg--ready{color:var(--green);border:1px solid var(--green-dim)}
.m-bdg--run{color:var(--cyan);border:1px solid var(--cyan-dim)}
.m-bdg--run:not(.m-bdg--zero) .m-bdg-ico{animation:maestro-pulse .9s infinite}
.m-bdg--blocked{color:var(--amber);border:1px dashed var(--amber-dim)}
.m-bdg--total{color:var(--ink);border:1px solid var(--line)}
.m-bdg--zero{color:var(--faint);border-color:var(--line-soft);animation:none}
`;
function ensureCss() {
  if (typeof document === 'undefined' || document.getElementById('m-bdg-css')) return;
  const s = document.createElement('style'); s.id = 'm-bdg-css'; s.textContent = css;
  document.head.appendChild(s);
}
const META = {
  gate: { ico: '⚠', label: '项待审批' },
  ready: { ico: '▸', label: '待执行' },
  run: { ico: '◉', label: '执行中' },
  blocked: { ico: '⛓', label: '被阻塞' },
  total: { ico: 'Σ', label: '总量' },
};

export function CountBadge({ kind = 'ready', count = 0, label, title }) {
  ensureCss();
  const m = META[kind] || META.ready;
  const cls = 'm-bdg m-bdg--' + kind + (count === 0 ? ' m-bdg--zero' : '');
  return (
    <span className={cls} title={title}>
      <span className="m-bdg-ico">{m.ico}</span>
      <span className="m-bdg-n">{count}</span>
      <span className="m-bdg-label">{label || m.label}</span>
    </span>
  );
}