window.SPOTURE_CATS = ['한식', '일식', '중식', '양식', '아시안', '카페', '기타'];
function CategoryPicker({ value, onChange, max = 5 }) {
  const [extra, setExtra] = React.useState([]);
  const [adding, setAdding] = React.useState(false);
  const [text, setText] = React.useState('');
  const inputRef = React.useRef(null);
  React.useEffect(() => { if (adding && inputRef.current) inputRef.current.focus(); }, [adding]);
  const base = window.SPOTURE_CATS;
  const full = extra.length >= max;
  const add = () => {
    const v = text.trim().slice(0, 12);
    if (!v) { setAdding(false); setText(''); return; }
    if (base.indexOf(v) < 0 && extra.indexOf(v) < 0 && !full) setExtra(extra.concat([v]));
    onChange && onChange(v);
    setText(''); setAdding(false);
  };
  const chip = (c, on) => (
    <span key={c} onClick={() => onChange && onChange(c)} style={{ font: on ? '600 13px/1 var(--font-family)' : '400 13px/1 var(--font-family)', color: on ? '#fff' : 'var(--text-primary)', background: on ? 'var(--bg-ink)' : 'var(--surface-2)', borderRadius: 999, padding: '10px 14px', cursor: 'pointer' }}>{c}</span>
  );
  return (
    <div>
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
        {base.map(c => chip(c, value === c))}
        {extra.map(c => (
          <span key={c} style={{ display: 'inline-flex', alignItems: 'center', gap: 6, font: value === c ? '600 13px/1 var(--font-family)' : '400 13px/1 var(--font-family)', color: value === c ? '#fff' : 'var(--text-primary)', background: value === c ? 'var(--bg-ink)' : 'var(--surface-2)', border: '1px dashed ' + (value === c ? 'transparent' : 'var(--border-strong)'), borderRadius: 999, padding: '9px 12px 9px 14px', cursor: 'pointer' }}>
            <span onClick={() => onChange && onChange(c)}>{c}</span>
            <i className="ti ti-x" onClick={() => { setExtra(extra.filter(x => x !== c)); if (value === c) onChange && onChange(null); }} style={{ fontSize: 13, opacity: .65 }}></i>
          </span>
        ))}
        {adding ? (
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, background: 'var(--surface-1)', border: '1px solid var(--border-accent)', borderRadius: 999, padding: '7px 10px 7px 14px' }}>
            <input ref={inputRef} value={text} onChange={ev => setText(ev.target.value.slice(0, 12))} onKeyDown={ev => { if (ev.key === 'Enter') add(); if (ev.key === 'Escape') { setAdding(false); setText(''); } }} placeholder="업종 입력" style={{ width: 74, border: 'none', outline: 'none', background: 'transparent', font: '400 13px/1 var(--font-family)', color: 'var(--text-primary)' }} />
            <i className="ti ti-check" onClick={add} style={{ fontSize: 15, color: 'var(--text-accent)', cursor: 'pointer' }}></i>
          </span>
        ) : (
          <span onClick={() => !full && setAdding(true)} style={{ display: 'inline-flex', alignItems: 'center', gap: 5, font: '400 13px/1 var(--font-family)', color: full ? 'var(--text-muted)' : 'var(--text-secondary)', background: 'transparent', border: '1px dashed var(--border-strong)', borderRadius: 999, padding: '9px 13px', cursor: full ? 'default' : 'pointer' }}>
            <i className="ti ti-plus" style={{ fontSize: 13 }}></i>직접 입력
          </span>
        )}
      </div>
      <p style={{ font: 'var(--text-micro)', color: 'var(--text-muted)', margin: '8px 0 0', lineHeight: 1.6 }}>{full ? '직접 추가한 업종은 5개까지예요' : '없는 업종은 직접 추가할 수 있어요 · ' + extra.length + '/' + max}</p>
    </div>
  );
}
window.CategoryPicker = CategoryPicker;