/* global React */
(function () {
  const T = window.SC_T;

  function StatusBadge({ state, count }) {
    const map = {
      idle:    { bg: '#F3F4F6',  dot: '#9CA3AF', text: '#374151',  label: 'Готов к работе' },
      running: { bg: T.accentSoft, dot: T.accent, text: T.accentDark, label: 'Выполняется…' },
      done:    { bg: T.okSoft,   dot: T.ok,      text: '#065F46',  label: `Готово — ${count || 0} фраз` },
      error:   { bg: T.errSoft,  dot: T.err,     text: '#991B1B',  label: 'Ошибка сбора' },
    };
    const s = map[state] || map.idle;
    return (
      <div style={{
        display: 'inline-flex', alignItems: 'center', gap: 8,
        padding: '6px 12px 6px 10px', borderRadius: 999,
        background: s.bg, color: s.text, fontSize: 13, fontWeight: 600,
        transition: 'all .25s ease',
      }}>
        <span style={{
          width: 8, height: 8, borderRadius: 999, background: s.dot,
          animation: state === 'running' ? 'sc-pulse-dot 1.4s ease-in-out infinite' : 'none',
        }} />
        {s.label}
      </div>
    );
  }

  function StatusPill({ ok, label }) {
    return (
      <div style={{
        display: 'inline-flex', alignItems: 'center', gap: 7,
        padding: '4px 10px', borderRadius: 999,
        background: ok ? T.okSoft : T.errSoft,
        color: ok ? '#065F46' : '#991B1B',
        fontSize: 12, fontWeight: 600,
      }}>
        <span style={{ width: 7, height: 7, borderRadius: 999, background: ok ? T.ok : T.err }} />
        {label}
      </div>
    );
  }

  function SourceBadge({ src }) {
    const map = {
      seed:     { bg: T.amberSoft,  c: '#92400E', l: 'seed' },
      ai:       { bg: T.greenSoft,  c: '#065F46', l: 'ai' },
      suggest:  { bg: T.blueSoft,   c: '#1E40AF', l: 'suggest' },
      wordstat: { bg: T.orangeSoft, c: '#9A3412', l: 'wordstat' },
    };
    const s = map[src] || map.seed;
    return (
      <span style={{
        display: 'inline-flex', alignItems: 'center', padding: '3px 9px',
        borderRadius: 999, background: s.bg, color: s.c,
        fontSize: 11, fontWeight: 600, letterSpacing: 0.2,
      }}>
        {s.l}
      </span>
    );
  }

  Object.assign(window, { StatusBadge, StatusPill, SourceBadge });
})();