// ─── 지목 필터 (다중 선택 체크박스) ────────────────────
function JimokFilter({ value, onChange }) {
  const [open, setOpen] = useState(false);
  const ALL_ITEMS = ['답', '전', '대', '도', '임', '기타'];

  useEffect(() => {
    if (window.lucide) window.lucide.createIcons();
  }, [open, value]);
  const isAll = ALL_ITEMS.every(k => value.includes(k));

  const toggle = (key) => {
    if (key === 'all') {
      onChange(isAll ? [] : [...ALL_ITEMS]);
    } else {
      const next = value.includes(key)
        ? value.filter(k => k !== key)
        : [...value, key];
      onChange(next);
    }
  };

  const label = isAll ? '전체'
    : value.length === 0 ? '없음'
    : value.length <= 2 ? value.map(k => JIMOK_LABELS[k]).join(', ')
    : `${JIMOK_LABELS[value[0]]} 외 ${value.length - 1}개`;

  return (
    <div style={appStyles.jimokBar}>
      {open && (
        <div
          style={{ position: 'fixed', inset: 0, zIndex: 19 }}
          onClick={() => setOpen(false)}
        />
      )}
      <button
        style={appStyles.jimokDropdownBtn}
        onClick={() => setOpen(v => !v)}
      >
        <span>보기: {label}</span>
        <i data-lucide={open ? 'chevron-up' : 'chevron-down'} style={{ width: 14, height: 14, flexShrink: 0 }}></i>
      </button>
      {open && (
        <div style={appStyles.jimokDropdownPanel}>
          <button
            style={{ ...appStyles.jimokCheckItem, ...(isAll ? appStyles.jimokDropdownItemActive : {}) }}
            onClick={() => toggle('all')}
          >
            <i data-lucide={isAll ? 'check-square' : 'square'} style={{ width: 15, height: 15, flexShrink: 0 }}></i>
            <span>전체</span>
          </button>
          <div style={appStyles.jimokDivider} />
          {ALL_ITEMS.map(key => {
            const checked = value.includes(key);
            return (
              <button
                key={key}
                style={{ ...appStyles.jimokCheckItem, ...(checked ? appStyles.jimokDropdownItemActive : {}) }}
                onClick={() => toggle(key)}
              >
                <i data-lucide={checked ? 'check-square' : 'square'} style={{ width: 15, height: 15, flexShrink: 0 }}></i>
                <span>{JIMOK_LABELS[key]}</span>
              </button>
            );
          })}
        </div>
      )}
    </div>
  );
}