router-lists-ui/frontend/src/components/QuickAddBar.jsx

import { useEffect, useRef, useState } from 'react';
import { IconPlus, IconChecks } from '@tabler/icons-react';

function QuickAddBar({
  placeholder = 'value community\nvalue community',
  parseLine,
  validateItem,
  onApply,
  className = '',
  help = 'Вставьте строки: VALUE ПРОБЕЛ COMMUNITY',
}) {
  const [value, setValue] = useState('');
  const [readyCount, setReadyCount] = useState(0);
  const [invalidCount, setInvalidCount] = useState(0);
  const textareaRef = useRef(null);

  useEffect(() => {
    const lines = String(value || '')
      .split(/\r?\n/)
      .map(l => l.trim())
      .filter(Boolean);
    let ok = 0, bad = 0;
    for (const line of lines) {
      const obj = parseLine(line);
      if (obj && validateItem(obj)) ok++; else bad++;
    }
    setReadyCount(ok);
    setInvalidCount(bad);
  }, [value, parseLine, validateItem]);

  const handleApply = () => {
    const lines = String(value || '')
      .split(/\r?\n/)
      .map(l => l.trim())
      .filter(Boolean);
    const items = [];
    for (const line of lines) {
      const obj = parseLine(line);
      if (obj && validateItem(obj)) items.push(obj);
    }
    if (items.length > 0) {
      onApply?.(items);
      setValue('');
    }
  };

  return (
    <div className={`card card-md ${className}`}>
      <div className="card-header">
        <h3 className="card-title"><IconPlus className="icon me-2" />Быстрое добавление</h3>
      </div>
      <div className="card-body">
        <div className="mb-2 text-muted">{help}</div>
        <textarea
          ref={textareaRef}
          className="form-control"
          rows={4}
          placeholder={placeholder}
          value={value}
          onChange={(e) => setValue(e.target.value)}
        />
        <div className="row g-3 mt-2">
          <div className="col">
            <div className="card"><div className="card-body p-2">
              <div className="text-muted">Готово</div>
              <div className="h3 m-0">{readyCount}</div>
            </div></div>
          </div>
          <div className="col">
            <div className="card"><div className="card-body p-2">
              <div className="text-muted">Ошибки</div>
              <div className="h3 m-0">{invalidCount}</div>
            </div></div>
          </div>
        </div>
      </div>
      <div className="card-footer d-flex justify-content-end">
        <button className="btn btn-primary" disabled={readyCount === 0} onClick={handleApply}>
          <IconChecks className="icon me-2" />Добавить к списку
        </button>
      </div>
    </div>
  );
}

export default QuickAddBar;