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

  function HistoryItem({ status, text, count, time, delay = 0, onDelete }) {
    const [hover, setHover] = useState(false);
    const color = status === 'ok' ? T.ok : status === 'err' ? T.err : T.warn;
    return (
      <div
        onMouseEnter={() => setHover(true)}
        onMouseLeave={() => setHover(false)}
        style={{
          display: 'flex', alignItems: 'center', gap: 10,
          padding: '7px 10px', borderRadius: 8, cursor: 'pointer',
          background: hover ? T.accentSoft : 'transparent',
          animation: `sc-slide-in 0.5s ${delay}ms both cubic-bezier(0.16, 1, 0.3, 1)`,
          transition: 'background .15s ease',
        }}
      >
        <span style={{ width: 7, height: 7, borderRadius: 999, background: color, flexShrink: 0 }} />
        <span style={{ flex: 1, fontSize: 12.5, color: T.ink, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', fontWeight: 500 }}>
          {text}
        </span>
        <span style={{ fontSize: 11, color: T.inkMuted, fontVariantNumeric: 'tabular-nums', fontWeight: 500 }}>
          {count > 0 ? count.toLocaleString('ru') : '—'}
        </span>
        <span style={{ fontSize: 11, color: T.inkSubtle, minWidth: 28, textAlign: 'right' }}>{time}</span>
        {onDelete && (
          <button
            onClick={(e) => { e.stopPropagation(); onDelete(); }}
            title="Удалить"
            style={{
              border: 'none', background: 'transparent', cursor: 'pointer',
              opacity: hover ? 1 : 0, color: T.inkSubtle, flexShrink: 0,
              display: 'flex', alignItems: 'center', padding: '2px 2px',
              borderRadius: 4, fontSize: 15, lineHeight: 1,
              transition: 'opacity .15s, color .15s',
            }}
            onMouseEnter={(e) => e.currentTarget.style.color = T.err}
            onMouseLeave={(e) => e.currentTarget.style.color = T.inkSubtle}
          >×</button>
        )}
      </div>
    );
  }

  window.HistoryItem = HistoryItem;
})();
