import React, { useState } from 'react';

/**
 * Chip input. Items separated by Enter, comma, или space (для CIDR/портов).
 * Невалидные элементы помечаются красным.
 */
export function ChipsInput({ value = [], onChange, placeholder = '', validate, splitter = /[\s,]/ }) {
  const [draft, setDraft] = useState('');

  function commit(text) {
    const parts = String(text).split(splitter).map((p) => p.trim()).filter(Boolean);
    if (!parts.length) return;
    const next = Array.from(new Set([...value, ...parts]));
    onChange(next);
    setDraft('');
  }

  function remove(item) {
    onChange(value.filter((v) => v !== item));
  }

  function onKeyDown(e) {
    if (e.key === 'Enter' || e.key === ',') {
      e.preventDefault();
      if (draft.trim()) commit(draft);
    } else if (e.key === 'Backspace' && !draft && value.length) {
      onChange(value.slice(0, -1));
    }
  }

  function onPaste(e) {
    const text = e.clipboardData.getData('text');
    if (text && splitter.test(text)) {
      e.preventDefault();
      commit(text);
    }
  }

  return (
    <div className="chips" onClick={(e) => e.currentTarget.querySelector('input')?.focus()}>
      {value.map((item) => {
        const invalid = validate ? !validate(item) : false;
        return (
          <span key={item} className={`chip ${invalid ? 'error' : ''}`}>
            {item}
            <button type="button" onClick={() => remove(item)} title="Убрать">×</button>
          </span>
        );
      })}
      <input
        className="chip-input"
        value={draft}
        onChange={(e) => setDraft(e.target.value)}
        onKeyDown={onKeyDown}
        onPaste={onPaste}
        onBlur={() => draft.trim() && commit(draft)}
        placeholder={value.length ? '' : placeholder}
      />
    </div>
  );
}