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

  function QuestionCard({ question, index, total, loading, onAnswer }) {
    const [text, setText] = React.useState('');
    React.useEffect(() => setText(''), [question]);
    const submit = () => { if (!loading) onAnswer(text.trim()); };
    const handleKey = (e) => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); submit(); } };
    const isLast = index + 1 >= total;

    return (
      <div style={{ display: 'flex', flexDirection: 'column', gap: 18, 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={{ fontSize: 15, fontWeight: 600, color: T.ink, lineHeight: 1.5, padding: '14px 16px', background: T.accentSoft, borderRadius: 10, border: `1px solid ${T.border}` }}>
          {question}
        </div>

        <Textarea value={text} onChange={setText} placeholder="Введите ответ… (Enter — далее, Shift+Enter — новая строка)" rows={3} onKeyDown={handleKey} />

        <div style={{ display: 'flex', gap: 10, justifyContent: 'flex-end', alignItems: 'center' }}>
          {loading && (
            <span style={{ fontSize: 11, color: T.inkSubtle, marginRight: 'auto' }}>
              Готовим следующие вопросы…
            </span>
          )}
          <GhostButton onClick={() => onAnswer('')} disabled={loading}>Пропустить</GhostButton>
          <PrimaryButton full={false} onClick={submit} disabled={loading}>
            {isLast ? 'Завершить и запустить' : 'Далее →'}
          </PrimaryButton>
        </div>
      </div>
    );
  }

  window.QuestionCard = QuestionCard;
})();