// 通用选择器 / 下拉组件工具 + 省市区数据（与 api.js 中 PROVINCE_CITY_MAP 保持一致）
const PROVINCE_CITY_MAP_UI = {
  '北京': ['北京'],
  '上海': ['上海'],
  '天津': ['天津'],
  '重庆': ['重庆'],
  '河北': ['石家庄', '唐山', '秦皇岛', '邯郸', '保定', '张家口'],
  '山西': ['太原', '大同', '阳泉', '长治', '晋城'],
  '辽宁': ['沈阳', '大连', '鞍山', '抚顺', '本溪'],
  '吉林': ['长春', '吉林', '四平', '辽源', '通化'],
  '黑龙江': ['哈尔滨', '齐齐哈尔', '牡丹江', '佳木斯', '大庆'],
  '江苏': ['南京', '苏州', '无锡', '常州', '南通', '徐州'],
  '浙江': ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴'],
  '安徽': ['合肥', '芜湖', '蚌埠', '淮南', '马鞍山'],
  '福建': ['福州', '厦门', '泉州', '漳州', '莆田'],
  '江西': ['南昌', '九江', '景德镇', '萍乡', '新余'],
  '山东': ['济南', '青岛', '淄博', '烟台', '潍坊', '威海'],
  '河南': ['郑州', '洛阳', '开封', '新乡', '安阳'],
  '湖北': ['武汉', '黄石', '十堰', '宜昌', '襄阳'],
  '湖南': ['长沙', '株洲', '湘潭', '衡阳', '岳阳'],
  '广东': ['广州', '深圳', '珠海', '汕头', '佛山', '东莞'],
  '广西': ['南宁', '柳州', '桂林', '梧州', '北海'],
  '海南': ['海口', '三亚', '三沙', '儋州'],
  '四川': ['成都', '绵阳', '德阳', '宜宾', '南充', '乐山'],
  '贵州': ['贵阳', '六盘水', '遵义', '安顺'],
  '云南': ['昆明', '曲靖', '玉溪', '保山', '丽江'],
  '陕西': ['西安', '铜川', '宝鸡', '咸阳', '渭南'],
  '甘肃': ['兰州', '嘉峪关', '金昌', '白银', '天水'],
  '青海': ['西宁', '海东'],
  '内蒙古': ['呼和浩特', '包头', '乌海', '赤峰', '通辽'],
  '新疆': ['乌鲁木齐', '克拉玛依', '吐鲁番'],
  '西藏': ['拉萨', '日喀则'],
  '宁夏': ['银川', '石嘴山', '吴忠'],
  '香港': ['香港'],
  '澳门': ['澳门'],
  '台湾': ['台北', '高雄', '台中'],
};

const OCCUPATION_LIST_UI = ['学生', '上班族', '自由职业', '企业主', '公务员', '教师', '医生', '服务业', '退休', '其他'];
const EDUCATION_LIST_UI = ['初中及以下', '高中/中专', '大专', '本科', '硕士', '博士'];
const AGE_GROUPS_UI = [
  { key: 'all', label: '不限' },
  { key: 'under18', label: '18以下' },
  { key: '18-25', label: '18-25' },
  { key: '26-35', label: '26-35' },
  { key: '36-45', label: '36-45' },
  { key: '46-60', label: '46-60' },
  { key: 'above60', label: '60以上' },
];

// 性别标签
const GENDER_LABEL = { male: '男', female: '女', '': '未填写' };

// 省/市筛选选项（供空间广场筛选下拉用）
const PROVINCE_OPTIONS = Object.keys(PROVINCE_CITY_MAP_UI);

// 通用简易下拉组件（点击展开，选项列表）
function SimpleSelect({ value, options, placeholder, onChange, style, labelStyle }) {
  const [open, setOpen] = React.useState(false);
  const ref = React.useRef(null);

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

  const selectedLabel = options.find(o => (o.value || o) === value)?.label || value || placeholder || '请选择';

  return (
    <div ref={ref} style={{ position: 'relative', ...style }}>
      <div
        onClick={(e) => { e.stopPropagation(); setOpen(!open); }}
        style={{
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
          padding: '6px 10px',
          borderRadius: 6,
          background: 'var(--bg-page)',
          border: '1px solid var(--border)',
          fontSize: 12,
          color: value && value !== 'all' ? 'var(--text-primary)' : 'var(--text-tertiary)',
          cursor: 'pointer',
          minWidth: 60,
          whiteSpace: 'nowrap',
          gap: 4,
        }}
      >
        <span style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>
          {labelStyle ? `${labelStyle}${selectedLabel}` : selectedLabel}
        </span>
        <span style={{ fontSize: 10 }}>▾</span>
      </div>
      {open && (
        <div style={{
          position: 'absolute',
          top: '100%',
          left: 0,
          marginTop: 4,
          background: '#fff',
          border: '1px solid var(--border)',
          borderRadius: 8,
          boxShadow: '0 4px 12px rgba(0,0,0,0.12)',
          zIndex: 100,
          maxHeight: 240,
          overflowY: 'auto',
          minWidth: 120,
        }}>
          {options.map(opt => {
            const val = opt.value !== undefined ? opt.value : opt;
            const label = opt.label !== undefined ? opt.label : opt;
            const isSelected = val === value;
            return (
              <div
                key={val}
                onClick={(e) => {
                  e.stopPropagation();
                  onChange(val);
                  setOpen(false);
                }}
                style={{
                  padding: '8px 12px',
                  fontSize: 13,
                  color: isSelected ? 'var(--primary)' : 'var(--text-primary)',
                  background: isSelected ? 'rgba(22, 93, 255, 0.08)' : 'transparent',
                  cursor: 'pointer',
                  fontWeight: isSelected ? 600 : 400,
                }}
              >
                {label}
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
}

window.SimpleSelect = SimpleSelect;
window.PROVINCE_CITY_MAP_UI = PROVINCE_CITY_MAP_UI;
window.OCCUPATION_LIST_UI = OCCUPATION_LIST_UI;
window.EDUCATION_LIST_UI = EDUCATION_LIST_UI;
window.AGE_GROUPS_UI = AGE_GROUPS_UI;
window.GENDER_LABEL = GENDER_LABEL;
window.PROVINCE_OPTIONS = PROVINCE_OPTIONS;