// ========== 空间广场（用户空间列表） ==========
// 筛选交互：底部弹出抽屉式筛选面板 + 顶部已选条件 chip

class SpaceSquareErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }
  static getDerivedStateFromError() { return { hasError: true }; }
  componentDidCatch(error) { console.error('SpaceSquare error:', error); }
  render() {
    if (this.state.hasError) {
      return (
        <div style={{ padding: 80, textAlign: 'center', color: 'var(--text-secondary)' }}>
          <div style={{ fontSize: 44, marginBottom: 14 }}>⚠️</div>
          <div style={{ marginBottom: 8, fontSize: 14 }}>页面加载异常</div>
          <div style={{ fontSize: 12, color: 'var(--text-tertiary)' }}>请尝试刷新页面</div>
        </div>
      );
    }
    return this.props.children;
  }
}

// 首字母头像
function getInitial(name) {
  if (!name) return '?';
  return name.charAt(0);
}

// 头像颜色
const AVATAR_COLORS = ['#667eea', '#f093fb', '#4facfe', '#43e97b', '#fa709a', '#a8edea', '#ff9a9e', '#5ee7df'];
function getAvatarColor(userId) {
  return AVATAR_COLORS[(userId || 1) % AVATAR_COLORS.length];
}

// 静态兜底数据
const FALLBACK_USERS = [
  { id: 1, nickname: '久存用户', space_id: 'A10001', avatar: '', bio: '这是一个测试用户，体验所有功能', feed_count: 12, follower_count: 36, visit_count: 128, gender: 'male', age: 30, province: '四川', city: '成都', occupation: '上班族', education: '本科' },
  { id: 2, nickname: '云淡风轻', space_id: 'A10002', avatar: '', bio: '闲看庭前花开花落', feed_count: 8, follower_count: 24, visit_count: 96, gender: 'male', age: 33, province: '浙江', city: '杭州', occupation: '上班族', education: '本科' },
  { id: 3, nickname: '时光漫步', space_id: 'A10003', avatar: '', bio: '记录生活中的美好瞬间', feed_count: 15, follower_count: 48, visit_count: 210, gender: 'female', age: 29, province: '四川', city: '成都', occupation: '自由职业', education: '硕士' },
  { id: 4, nickname: '星辰大海', space_id: 'A10004', avatar: '', bio: '征途是星辰大海', feed_count: 6, follower_count: 18, visit_count: 72, gender: 'male', age: 24, province: '广东', city: '深圳', occupation: '学生', education: '大专' },
  { id: 5, nickname: '岁月静好', space_id: 'A10005', avatar: '', bio: '愿岁月温柔以待', feed_count: 10, follower_count: 32, visit_count: 156, gender: 'female', age: 37, province: '江苏', city: '南京', occupation: '公务员', education: '本科' },
  { id: 6, nickname: '阳光灿烂', space_id: 'A10006', avatar: '', bio: '做一个阳光的人', feed_count: 5, follower_count: 15, visit_count: 64, gender: 'male', age: 50, province: '北京', city: '北京', occupation: '企业主', education: '博士' },
];

function SpaceSquarePage() {
  const { api, navigate, goBack, showToast, currentUser } = useApp();
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(false);
  const [keyword, setKeyword] = useState('');
  const [showFilter, setShowFilter] = useState(false);
  const [hasMore, setHasMore] = useState(true);
  const [page, setPage] = useState(1);
  const [useFallback, setUseFallback] = useState(false);

  // 已应用的筛选条件（点确定后才会生效）
  const [filterProvince, setFilterProvince] = useState('all');
  const [filterCity, setFilterCity] = useState('all');
  const [filterGender, setFilterGender] = useState('all');
  const [filterAgeGroup, setFilterAgeGroup] = useState('all');
  const [filterOccupation, setFilterOccupation] = useState('all');
  const [filterEducation, setFilterEducation] = useState('all');

  // 弹窗内临时筛选状态（弹窗内修改不立即影响列表，点确定才提交）
  const [draftProvince, setDraftProvince] = useState('all');
  const [draftCity, setDraftCity] = useState('all');
  const [draftGender, setDraftGender] = useState('all');
  const [draftAgeGroup, setDraftAgeGroup] = useState('all');
  const [draftOccupation, setDraftOccupation] = useState('all');
  const [draftEducation, setDraftEducation] = useState('all');
  const [draftKeyword, setDraftKeyword] = useState('');

  const loadUsers = useCallback(async (reset = false) => {
    if (loading) return;
    const nextPage = reset ? 1 : page;
    if (reset) {
      setPage(1);
      setHasMore(true);
    }
    if (!hasMore && !reset) return;

    setLoading(true);
    try {
      const res = await api.get('/users', {
        page: nextPage,
        size: 20,
        keyword,
        province: filterProvince,
        city: filterCity,
        gender: filterGender,
        age_group: filterAgeGroup,
        occupation: filterOccupation,
        education: filterEducation,
      });
      if (res.success) {
        const list = res.data?.list || [];
        setUsers(prev => reset ? list : [...prev, ...list]);
        setHasMore(list.length >= 20 && list.length < res.data.total);
        setPage(nextPage + 1);
      } else {
        throw new Error(res.message);
      }
    } catch (e) {
      console.error('load users error:', e);
      if (reset) {
        setUseFallback(true);
        setUsers(FALLBACK_USERS);
        setHasMore(false);
      }
    } finally {
      setLoading(false);
    }
  }, [api, loading, page, hasMore, keyword, filterProvince, filterCity, filterGender, filterAgeGroup, filterOccupation, filterEducation]);

  // 首次加载
  useEffect(() => {
    loadUsers(true);
  }, []); // eslint-disable-line

  // 关键词搜索防抖
  useEffect(() => {
    const timer = setTimeout(() => {
      loadUsers(true);
    }, 300);
    return () => clearTimeout(timer);
  }, [keyword]); // eslint-disable-line

  // 筛选条件变化时重新加载
  useEffect(() => {
    loadUsers(true);
  }, [filterProvince, filterCity, filterGender, filterAgeGroup, filterOccupation, filterEducation]); // eslint-disable-line

  const handleScroll = (e) => {
    const el = e.target;
    if (el.scrollHeight - el.scrollTop - el.clientHeight < 100) {
      if (!loading && hasMore && !useFallback) {
        loadUsers(false);
      }
    }
  };

  const openSpace = (userId) => {
    navigate('space', { user_id: userId });
  };

  // 已选筛选条件数量
  const activeFilterCount =
    (filterProvince !== 'all' ? 1 : 0) +
    (filterCity !== 'all' ? 1 : 0) +
    (filterGender !== 'all' ? 1 : 0) +
    (filterAgeGroup !== 'all' ? 1 : 0) +
    (filterOccupation !== 'all' ? 1 : 0) +
    (filterEducation !== 'all' ? 1 : 0);

  // 打开筛选弹窗：把当前条件同步到 draft
  const openFilter = () => {
    setDraftProvince(filterProvince);
    setDraftCity(filterCity);
    setDraftGender(filterGender);
    setDraftAgeGroup(filterAgeGroup);
    setDraftOccupation(filterOccupation);
    setDraftEducation(filterEducation);
    setDraftKeyword(keyword);
    setShowFilter(true);
  };

  // 重置 draft
  const resetDraft = () => {
    setDraftProvince('all');
    setDraftCity('all');
    setDraftGender('all');
    setDraftAgeGroup('all');
    setDraftOccupation('all');
    setDraftEducation('all');
    setDraftKeyword('');
  };

  // 确定：把 draft 应用到正式条件，关闭弹窗
  const applyFilter = () => {
    setKeyword(draftKeyword);
    setFilterProvince(draftProvince);
    setFilterCity(draftCity);
    setFilterGender(draftGender);
    setFilterAgeGroup(draftAgeGroup);
    setFilterOccupation(draftOccupation);
    setFilterEducation(draftEducation);
    setShowFilter(false);
  };

  // 性别显示
  const genderLabel = (g) => g === 'male' ? '男' : g === 'female' ? '女' : '';
  // 年龄段显示
  const ageGroupLabel = (key) => {
    const g = (window.AGE_GROUPS_UI || []).find(x => x.key === key);
    return g ? g.label : key;
  };

  // 年龄段选项（首项为"不限"）
  const ageGroupOptions = [
    { value: 'all', label: '不限' },
    ...(window.AGE_GROUPS_UI || []).filter(g => g.key !== 'all').map(g => ({ value: g.key, label: g.label })),
  ];

  return (
    <SpaceSquareErrorBoundary>
      <div className="page-container" onScroll={handleScroll}>
        <AppHeader
          title="空间广场"
          subtitle="发现有趣的人"
          showBack
          onBack={goBack}
          showActions={false}
        />

        {/* 顶部搜索 + 筛选区域 */}
        <div style={{
          display: 'flex',
          gap: 8,
          padding: '10px 12px',
          background: 'var(--bg-card)',
          borderBottom: '1px solid var(--border)',
          alignItems: 'center',
          position: 'sticky',
          top: 49,
          zIndex: 20,
        }}>
          {/* 搜索框 */}
          <div
            onClick={openFilter}
            style={{
              flex: 1,
              height: 36,
              borderRadius: 18,
              background: 'var(--bg-page)',
              display: 'flex',
              alignItems: 'center',
              padding: '0 14px',
              gap: 6,
              color: 'var(--text-tertiary)',
              fontSize: 13,
              cursor: 'pointer',
            }}
          >
            <span style={{ fontSize: 14 }}>🔍</span>
            <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
              {keyword || '久存号、姓名、昵称、手机号码均可搜索'}
            </span>
          </div>

          {/* 筛选按钮 + 已选数量角标 */}
          <div
            onClick={openFilter}
            style={{
              position: 'relative',
              width: 36,
              height: 36,
              borderRadius: 18,
              background: activeFilterCount > 0 ? 'var(--primary)' : 'var(--bg-page)',
              color: activeFilterCount > 0 ? '#fff' : 'var(--text-secondary)',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              fontSize: 16,
              cursor: 'pointer',
              flexShrink: 0,
            }}
          >
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
              <path d="M3 6h18M7 12h10M10 18h4"/>
            </svg>
            {activeFilterCount > 0 && (
              <span style={{
                position: 'absolute',
                top: -2,
                right: -2,
                minWidth: 16,
                height: 16,
                borderRadius: 8,
                background: '#FF6B3D',
                color: '#fff',
                fontSize: 10,
                fontWeight: 600,
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                padding: '0 4px',
                boxSizing: 'border-box',
                lineHeight: 1,
              }}>
                {activeFilterCount}
              </span>
            )}
          </div>
        </div>

        {/* 已选筛选条件 chip */}
        {activeFilterCount > 0 && (
          <div style={{
            display: 'flex',
            flexWrap: 'wrap',
            gap: 6,
            padding: '8px 16px',
            background: 'var(--bg-card)',
            borderBottom: '1px solid var(--border)',
            alignItems: 'center',
          }}>
            {filterProvince !== 'all' && (
              <span
                onClick={() => { setFilterProvince('all'); setFilterCity('all'); }}
                style={{
                  fontSize: 11,
                  padding: '3px 10px',
                  borderRadius: 12,
                  background: 'rgba(22, 93, 255, 0.08)',
                  color: 'var(--primary)',
                  cursor: 'pointer',
                  display: 'inline-flex',
                  alignItems: 'center',
                  gap: 4,
                }}
              >{filterProvince} <span style={{ opacity: 0.6, fontSize: 12 }}>×</span></span>
            )}
            {filterCity !== 'all' && (
              <span
                onClick={() => setFilterCity('all')}
                style={{
                  fontSize: 11,
                  padding: '3px 10px',
                  borderRadius: 12,
                  background: 'rgba(22, 93, 255, 0.08)',
                  color: 'var(--primary)',
                  cursor: 'pointer',
                  display: 'inline-flex',
                  alignItems: 'center',
                  gap: 4,
                }}
              >{filterCity} <span style={{ opacity: 0.6, fontSize: 12 }}>×</span></span>
            )}
            {filterGender !== 'all' && (
              <span
                onClick={() => setFilterGender('all')}
                style={{
                  fontSize: 11,
                  padding: '3px 10px',
                  borderRadius: 12,
                  background: 'rgba(22, 93, 255, 0.08)',
                  color: 'var(--primary)',
                  cursor: 'pointer',
                  display: 'inline-flex',
                  alignItems: 'center',
                  gap: 4,
                }}
              >{genderLabel(filterGender)} <span style={{ opacity: 0.6, fontSize: 12 }}>×</span></span>
            )}
            {filterAgeGroup !== 'all' && (
              <span
                onClick={() => setFilterAgeGroup('all')}
                style={{
                  fontSize: 11,
                  padding: '3px 10px',
                  borderRadius: 12,
                  background: 'rgba(22, 93, 255, 0.08)',
                  color: 'var(--primary)',
                  cursor: 'pointer',
                  display: 'inline-flex',
                  alignItems: 'center',
                  gap: 4,
                }}
              >{ageGroupLabel(filterAgeGroup)} <span style={{ opacity: 0.6, fontSize: 12 }}>×</span></span>
            )}
            {filterOccupation !== 'all' && (
              <span
                onClick={() => setFilterOccupation('all')}
                style={{
                  fontSize: 11,
                  padding: '3px 10px',
                  borderRadius: 12,
                  background: 'rgba(22, 93, 255, 0.08)',
                  color: 'var(--primary)',
                  cursor: 'pointer',
                  display: 'inline-flex',
                  alignItems: 'center',
                  gap: 4,
                }}
              >{filterOccupation} <span style={{ opacity: 0.6, fontSize: 12 }}>×</span></span>
            )}
            {filterEducation !== 'all' && (
              <span
                onClick={() => setFilterEducation('all')}
                style={{
                  fontSize: 11,
                  padding: '3px 10px',
                  borderRadius: 12,
                  background: 'rgba(22, 93, 255, 0.08)',
                  color: 'var(--primary)',
                  cursor: 'pointer',
                  display: 'inline-flex',
                  alignItems: 'center',
                  gap: 4,
                }}
              >{filterEducation} <span style={{ opacity: 0.6, fontSize: 12 }}>×</span></span>
            )}
          </div>
        )}

        {/* 统计栏 */}
        <div style={{
          padding: '12px 16px',
          fontSize: 12,
          color: 'var(--text-tertiary)',
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
        }}>
          <span>
            {useFallback ? `展示 ${users.length} 个空间（离线数据）` : `共 ${users.length}+ 个空间等你发现`}
          </span>
          <span style={{ color: 'var(--text-secondary)' }}>按活跃度排序</span>
        </div>

        {/* 空间卡片列表 */}
        <div style={{ padding: '0 16px 100px' }}>
          {users.map(u => (
            <div
              key={u.id}
              className="card card-shadow"
              style={{
                marginBottom: 12,
                padding: 14,
                cursor: 'pointer',
                display: 'flex',
                gap: 12,
                alignItems: 'flex-start',
              }}
              onClick={() => openSpace(u.id)}
            >
              {/* 头像 */}
              <div
                style={{
                  width: 48,
                  height: 48,
                  borderRadius: '50%',
                  flexShrink: 0,
                  background: u.avatar ? `url(${u.avatar}) center/cover` : getAvatarColor(u.id),
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  color: '#fff',
                  fontSize: 18,
                  fontWeight: 600,
                }}
              >
                {u.avatar ? '' : getInitial(u.nickname)}
              </div>

              {/* 信息区 */}
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{
                  display: 'flex',
                  alignItems: 'center',
                  gap: 8,
                  marginBottom: 4,
                }}>
                  <span style={{ fontSize: 15, fontWeight: 600, color: 'var(--text-primary)' }}>
                    {u.nickname}
                  </span>
                  {currentUser && currentUser.id === u.id && (
                    <span style={{
                      fontSize: 10,
                      padding: '1px 6px',
                      borderRadius: 4,
                      background: 'var(--primary)',
                      color: '#fff',
                    }}>自己</span>
                  )}
                </div>

                <div style={{
                  fontSize: 11,
                  color: 'var(--text-tertiary)',
                  marginBottom: 6,
                  fontFamily: 'monospace',
                }}>
                  {u.space_id || u.jiuLiaoId || 'A00000'}
                </div>

                <div style={{
                  fontSize: 12,
                  color: 'var(--text-secondary)',
                  marginBottom: 8,
                  overflow: 'hidden',
                  textOverflow: 'ellipsis',
                  display: '-webkit-box',
                  WebkitLineClamp: 1,
                  WebkitBoxOrient: 'vertical',
                }}>
                  {u.bio || '这个人很懒，什么都没留下~'}
                </div>

                {/* 资料标签 */}
                <div style={{
                  display: 'flex',
                  flexWrap: 'wrap',
                  gap: 4,
                  marginBottom: 8,
                }}>
                  {u.gender ? (
                    <span style={{
                      fontSize: 10, padding: '1px 6px', borderRadius: 3,
                      background: u.gender === 'male' ? 'rgba(22, 93, 255, 0.1)' : 'rgba(236, 72, 153, 0.1)',
                      color: u.gender === 'male' ? '#165DFF' : '#EC4899',
                    }}>{u.gender === 'male' ? '♂ 男' : '♀ 女'}</span>
                  ) : null}
                  {u.age ? (
                    <span style={{
                      fontSize: 10, padding: '1px 6px', borderRadius: 3,
                      background: 'var(--bg-page)', color: 'var(--text-secondary)',
                    }}>{u.age}岁</span>
                  ) : null}
                  {u.province ? (
                    <span style={{
                      fontSize: 10, padding: '1px 6px', borderRadius: 3,
                      background: 'var(--bg-page)', color: 'var(--text-secondary)',
                    }}>📍 {u.city ? `${u.province}·${u.city}` : u.province}</span>
                  ) : null}
                  {u.occupation ? (
                    <span style={{
                      fontSize: 10, padding: '1px 6px', borderRadius: 3,
                      background: 'var(--bg-page)', color: 'var(--text-secondary)',
                    }}>💼 {u.occupation}</span>
                  ) : null}
                </div>

                {/* 统计 */}
                <div style={{
                  display: 'flex',
                  gap: 16,
                  fontSize: 11,
                  color: 'var(--text-tertiary)',
                }}>
                  <span>
                    <span style={{ color: 'var(--text-primary)', fontWeight: 600, marginRight: 2 }}>
                      {u.feed_count != null ? u.feed_count : 0}
                    </span>
                    动态
                  </span>
                  <span>
                    <span style={{ color: 'var(--text-primary)', fontWeight: 600, marginRight: 2 }}>
                      {u.follower_count != null ? u.follower_count : 0}
                    </span>
                    粉丝
                  </span>
                  <span>
                    <span style={{ color: 'var(--text-primary)', fontWeight: 600, marginRight: 2 }}>
                      {u.visit_count != null ? u.visit_count : 0}
                    </span>
                    访客
                  </span>
                </div>
              </div>

              {/* 进入箭头 */}
              <div style={{
                alignSelf: 'center',
                color: 'var(--text-tertiary)',
                fontSize: 14,
                flexShrink: 0,
              }}>
                ›
              </div>
            </div>
          ))}

          {/* 加载状态 */}
          {loading && (
            <div style={{ textAlign: 'center', padding: '20px 0', color: 'var(--text-tertiary)', fontSize: 12 }}>
              加载中...
            </div>
          )}

          {/* 无结果 */}
          {!loading && users.length === 0 && (
            <div style={{ textAlign: 'center', padding: '60px 20px', color: 'var(--text-tertiary)' }}>
              <div style={{ fontSize: 36, marginBottom: 10 }}>🔍</div>
              <div style={{ fontSize: 13, marginBottom: 4 }}>没有找到相关空间</div>
              <div style={{ fontSize: 11 }}>试试其他关键词吧</div>
            </div>
          )}

          {/* 到底了 */}
          {!loading && users.length > 0 && !hasMore && !useFallback && (
            <div style={{ textAlign: 'center', padding: '16px 0', color: 'var(--text-tertiary)', fontSize: 11 }}>
              — 到底了 —
            </div>
          )}
        </div>
      </div>

      {/* 底部筛选弹窗 */}
      <BottomSheet show={showFilter} onClose={() => setShowFilter(false)} title="筛选">
        <div style={{
          maxHeight: '70vh',
          overflowY: 'auto',
          padding: '12px 16px 16px',
        }}>
          {/* 搜索输入框 */}
          <div style={{
            display: 'flex',
            alignItems: 'center',
            gap: 8,
            height: 42,
            borderRadius: 21,
            background: 'var(--bg-page)',
            padding: '0 16px',
            marginBottom: 18,
          }}>
            <span style={{ fontSize: 16, color: 'var(--text-tertiary)' }}>🔍</span>
            <input
              type="text"
              placeholder="久存号、姓名、昵称、手机号码均可搜索"
              value={draftKeyword}
              onChange={(e) => setDraftKeyword(e.target.value)}
              style={{
                flex: 1,
                height: '100%',
                border: 'none',
                outline: 'none',
                background: 'transparent',
                fontSize: 14,
                color: 'var(--text-primary)',
              }}
            />
            {draftKeyword && (
              <span
                onClick={() => setDraftKeyword('')}
                style={{
                  fontSize: 14,
                  color: 'var(--text-tertiary)',
                  cursor: 'pointer',
                }}
              >✕</span>
            )}
          </div>

          {/* 地区 - 省 */}
          <div style={{ marginBottom: 16 }}>
            <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-primary)', marginBottom: 8 }}>地区</div>
            <div style={{ display: 'flex', gap: 8 }}>
              <SimpleSelect
                value={draftProvince}
                onChange={(v) => { setDraftProvince(v); setDraftCity('all'); }}
                options={[{ value: 'all', label: '全部省份' }, ...(window.PROVINCE_OPTIONS || []).map(p => ({ value: p, label: p }))]}
                placeholder="请选择省份"
                style={{ flex: 1, minWidth: 0 }}
              />
              <div style={{
                flex: 1,
                minWidth: 0,
                opacity: draftProvince === 'all' ? 0.5 : 1,
                pointerEvents: draftProvince === 'all' ? 'none' : 'auto',
              }}>
                <SimpleSelect
                  value={draftCity}
                  onChange={setDraftCity}
                  options={[{ value: 'all', label: '全部城市' }, ...((window.PROVINCE_CITY_MAP_UI || {})[draftProvince] || []).map(c => ({ value: c, label: c }))]}
                  placeholder="请选择城市"
                  style={{ width: '100%' }}
                />
              </div>
            </div>
          </div>

          {/* 性别 */}
          <div style={{ marginBottom: 16 }}>
            <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-primary)', marginBottom: 8 }}>性别</div>
            <div style={{ display: 'flex', gap: 8 }}>
              {[
                { value: 'all', label: '不限' },
                { value: 'male', label: '男' },
                { value: 'female', label: '女' },
              ].map(opt => (
                <div
                  key={opt.value}
                  onClick={() => setDraftGender(opt.value)}
                  style={{
                    flex: 1,
                    height: 36,
                    borderRadius: 18,
                    background: draftGender === opt.value ? 'var(--primary)' : 'var(--bg-page)',
                    color: draftGender === opt.value ? '#fff' : 'var(--text-secondary)',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    fontSize: 13,
                    cursor: 'pointer',
                    transition: 'all 0.2s',
                  }}
                >
                  {opt.label}
                </div>
              ))}
            </div>
          </div>

          {/* 年龄段 */}
          <div style={{ marginBottom: 16 }}>
            <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-primary)', marginBottom: 8 }}>年龄段</div>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
              {ageGroupOptions.map(opt => (
                <div
                  key={opt.value}
                  onClick={() => setDraftAgeGroup(opt.value)}
                  style={{
                    padding: '6px 14px',
                    borderRadius: 16,
                    background: draftAgeGroup === opt.value ? 'var(--primary)' : 'var(--bg-page)',
                    color: draftAgeGroup === opt.value ? '#fff' : 'var(--text-secondary)',
                    fontSize: 12,
                    cursor: 'pointer',
                    transition: 'all 0.2s',
                  }}
                >
                  {opt.label}
                </div>
              ))}
            </div>
          </div>

          {/* 职业 */}
          <div style={{ marginBottom: 16 }}>
            <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-primary)', marginBottom: 8 }}>职业</div>
            <div style={{ width: '100%' }}>
              <SimpleSelect
                value={draftOccupation}
                onChange={setDraftOccupation}
                options={[{ value: 'all', label: '不限' }, ...(window.OCCUPATION_LIST_UI || []).map(o => ({ value: o, label: o }))]}
                placeholder="请选择职业"
                style={{ width: '100%' }}
              />
            </div>
          </div>

          {/* 学历 */}
          <div style={{ marginBottom: 20 }}>
            <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-primary)', marginBottom: 8 }}>学历</div>
            <div style={{ width: '100%' }}>
              <SimpleSelect
                value={draftEducation}
                onChange={setDraftEducation}
                options={[{ value: 'all', label: '不限' }, ...(window.EDUCATION_LIST_UI || []).map(e => ({ value: e, label: e }))]}
                placeholder="请选择学历"
                style={{ width: '100%' }}
              />
            </div>
          </div>

          {/* 底部操作按钮 */}
          <div style={{
            display: 'flex',
            gap: 10,
            marginTop: 4,
          }}>
            <div
              onClick={resetDraft}
              style={{
                flex: 1,
                height: 42,
                borderRadius: 21,
                border: '1px solid var(--border)',
                color: 'var(--text-secondary)',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                fontSize: 14,
                cursor: 'pointer',
              }}
            >重置</div>
            <div
              onClick={applyFilter}
              style={{
                flex: 2,
                height: 42,
                borderRadius: 21,
                background: 'linear-gradient(135deg, #165DFF, #4080FF)',
                color: '#fff',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                fontSize: 14,
                fontWeight: 600,
                cursor: 'pointer',
                boxShadow: '0 4px 12px rgba(22, 93, 255, 0.25)',
              }}
            >确定</div>
          </div>
        </div>
      </BottomSheet>
    </SpaceSquareErrorBoundary>
  );
}

// 暴露到全局
Object.assign(window, {
  SpaceSquarePage,
});