import React, { useRef, useState, useEffect, useMemo } from 'react';
import './ListPicker.css';

/**
 * Kole UI ListPicker（React）
 * 对齐 组件7.txt ListPicker 规范：下拉列表、多选、分组、搜索、全选、标签
 *
 * props:
 *  - value / defaultValue : 选中 value 数组
 *  - options : 扁平 [{value,label}] 或 分组 [{label, children}]
 *  - filterable
 *  - placeholder
 *  - onChange(keys)
 */
export default function ListPicker({
  value,
  defaultValue = [],
  options = [],
  filterable = true,
  placeholder = '请选择',
  onChange
}) {
  const rootRef = useRef(null);
  const [inner, setInner] = useState(defaultValue);
  const current = value !== undefined ? value : inner;
  const [open, setOpen] = useState(false);
  const [query, setQuery] = useState('');

  const isGrouped = options.length && options[0] && options[0].children;
  const flat = isGrouped ? options.flatMap(g => g.children) : options;
  const labelMap = Object.fromEntries(flat.map(o => [o.value, o.label]));

  const flatVisible = useMemo(() => flat.filter(o => o.label.includes(query)), [flat, query]);
  const visibleGroups = useMemo(() => {
    if (!isGrouped) return [{ children: flatVisible }];
    return options
      .map(g => ({ label: g.label, children: g.children.filter(o => o.label.includes(query)) }))
      .filter(g => g.children.length);
  }, [options, flatVisible, query]);

  const commit = (next) => { if (value === undefined) setInner(next); onChange && onChange(next); };
  const toggleOpt = (o) => { if (o.disabled) return; commit(current.includes(o.value) ? current.filter(x => x !== o.value) : [...current, o.value]); };
  const remove = (v) => commit(current.filter(x => x !== v));
  const selectAll = () => commit([...new Set([...current, ...flatVisible.map(o => o.value)])]);

  useEffect(() => {
    const onDoc = (e) => { if (rootRef.current && !rootRef.current.contains(e.target)) { setOpen(false); setQuery(''); } };
    document.addEventListener('click', onDoc, true);
    return () => document.removeEventListener('click', onDoc, true);
  }, []);

  return (
    <div className="kole-listpicker" ref={rootRef}>
      <div className={`kole-listpicker-trigger${open ? ' is-open' : ''}`} onClick={() => { setOpen(!open); if (open) setQuery(''); }}>
        {current.length ? current.map(v => (
          <span key={v} className="kole-listpicker-tag">{labelMap[v] || v}<span className="x" onClick={(e) => { e.stopPropagation(); remove(v); }}>×</span></span>
        )) : <span className="kole-listpicker-placeholder">{placeholder}</span>}
        <span className="kole-listpicker-caret">▾</span>
      </div>

      {open && (
        <div className="kole-listpicker-panel">
          {filterable && (
            <div className="kole-listpicker-search">
              <input value={query} onChange={(e) => setQuery(e.target.value)} placeholder="搜索" />
            </div>
          )}
          <div className="kole-listpicker-selectall" onClick={selectAll}>全选</div>
          {visibleGroups.map((g, gi) => (
            <div key={gi}>
              {g.label && <div className="kole-listpicker-group-label">{g.label}</div>}
              {g.children.map(o => (
                <div
                  key={o.value}
                  className={`kole-listpicker-option${current.includes(o.value) ? ' is-checked' : ''}${o.disabled ? ' is-disabled' : ''}`}
                  onClick={() => toggleOpt(o)}
                >
                  <span className="box">{current.includes(o.value) ? '✓' : ''}</span>{o.label}
                </div>
              ))}
            </div>
          ))}
          {!flatVisible.length && <div className="kole-listpicker-empty">无匹配项</div>}
        </div>
      )}
    </div>
  );
}

/*
用法示例：
import ListPicker from './ListPicker';
const options = [{ label: '前端', children: [{ value: 'vue', label: 'Vue' }, { value: 'react', label: 'React' }] }];
<ListPicker options={options} defaultValue={['vue']} onChange={setKeys} />
*/