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

  const RATING_BUTTONS = [
    { rating: 1, label: 'Не подходит', key: '1', bg: '#FEE2E2', color: '#DC2626', border: '#FECACA' },
    { rating: 2, label: 'Нейтрально',  key: '2', bg: '#FEF9C3', color: '#CA8A04', border: '#FDE68A' },
    { rating: 3, label: 'Подходит!',   key: '3', bg: '#DCFCE7', color: '#16A34A', border: '#BBF7D0' },
  ];

  function PhraseRatingCard({ phrase, index, total, onRate }) {
    const [pressed, setPressed] = useState(null);
    useEffect(() => setPressed(null), [phrase]);
    useEffect(() => {
      const handler = (e) => {
        if (['1', '2', '3'].includes(e.key)) {
          const r = parseInt(e.key, 10);
          setPressed(r);
          setTimeout(() => onRate(r), 120);
        }
      };
      window.addEventListener('keydown', handler);
      return () => window.removeEventListener('keydown', handler);
    }, [onRate]);

    return (
      <div style={{ display: 'flex', flexDirection: 'column', gap: 20, padding: '8px 0' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <div style={{ flex: 1, height: 4, background: T.borderSoft, borderRadius: 2, overflow: 'hidden' }}>
            <div style={{ width: `${((index + 1) / total) * 100}%`, height: '100%', background: T.accent, borderRadius: 2, transition: 'width .3s ease' }} />
          </div>
          <span style={{ fontSize: 12, color: T.inkMuted, whiteSpace: 'nowrap' }}>{index + 1} / {total}</span>
        </div>

        <div style={{ padding: '20px 24px', background: T.surface, border: `1.5px solid ${T.border}`, borderRadius: 12, fontSize: 18, fontWeight: 600, color: T.ink, textAlign: 'center', lineHeight: 1.4, minHeight: 64, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          {phrase}
        </div>

        <div style={{ display: 'flex', gap: 10 }}>
          {RATING_BUTTONS.map(({ rating, label, key, bg, color, border }) => (
            <button
              key={rating}
              onClick={() => { setPressed(rating); setTimeout(() => onRate(rating), 120); }}
              style={{
                flex: 1, padding: '14px 8px', border: `2px solid ${pressed === rating ? color : border}`,
                borderRadius: 10, background: pressed === rating ? bg : '#fff',
                color: pressed === rating ? color : T.inkMuted,
                fontWeight: 600, fontSize: 13, cursor: 'pointer', transition: 'all .12s ease',
                transform: pressed === rating ? 'scale(0.97)' : 'scale(1)',
                display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4,
              }}
            >
              <span style={{ fontSize: 20, fontWeight: 700, color: pressed === rating ? color : T.inkSubtle }}>{key}</span>
              {label}
            </button>
          ))}
        </div>

        <p style={{ margin: 0, textAlign: 'center', fontSize: 12, color: T.inkSubtle }}>
          Нажмите клавишу <b>1</b>, <b>2</b> или <b>3</b> на клавиатуре
        </p>
      </div>
    );
  }

  window.PhraseRatingCard = PhraseRatingCard;
})();