function SearchFilterSheet({ tab, init, onClose, onApply }) {
  const { BottomSheet, Button } = window.SpotureDesignSystem_f7ad96;
  const [v, setV] = React.useState(init);
  const set = (k, val) => setV(s => ({ ...s, [k]: val }));
  const Group = ({ label, children }) => (
    <div style={{ marginBottom: 22 }}>
      <span style={{ font: 'var(--text-body-strong)', display: 'block', marginBottom: 10 }}>{label}</span>
      {children}
    </div>
  );
  const Pills = ({ k, options }) => (
    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
      {options.map(o => (
        <span key={o} onClick={() => set(k, o)} style={{ font: v[k] === o ? '600 14px/1 var(--font-family)' : '400 14px/1 var(--font-family)', color: v[k] === o ? '#fff' : 'var(--text-primary)', background: v[k] === o ? 'var(--bg-ink)' : 'var(--surface-1)', border: v[k] === o ? 'none' : '1px solid var(--border)', borderRadius: 999, padding: '12px 16px', cursor: 'pointer' }}>{o}</span>
      ))}
    </div>
  );
  const Toggle = ({ k, label, sub }) => (
    <div onClick={() => set(k, !v[k])} style={{ display: 'flex', alignItems: 'center', gap: 12, background: 'var(--surface-1)', borderRadius: 'var(--radius-tile)', padding: '14px 16px', cursor: 'pointer', marginBottom: 8 }}>
      <div style={{ flex: 1, minWidth: 0 }}>
        <span style={{ font: 'var(--text-caption)', color: 'var(--text-primary)', display: 'block', fontWeight: 600 }}>{label}</span>
        {sub && <span style={{ font: 'var(--text-micro)', color: 'var(--text-muted)' }}>{sub}</span>}
      </div>
      <div style={{ width: 44, height: 26, borderRadius: 999, background: v[k] ? 'var(--text-accent)' : 'var(--surface-2)', border: v[k] ? 'none' : '1px solid var(--border-strong)', position: 'relative', flexShrink: 0, transition: 'background .16s ease' }}>
        <div style={{ position: 'absolute', top: 3, left: v[k] ? 21 : 3, width: 20, height: 20, borderRadius: '50%', background: '#fff', boxShadow: '0 1px 3px rgba(0,0,0,.2)', transition: 'left .16s ease' }}></div>
      </div>
    </div>
  );
  return (
    <BottomSheet title="상세 필터" onClose={onClose}
      footer={
        <div style={{ display: 'flex', gap: 10 }}>
          <span onClick={() => setV(tab === '게시물' ? { radius: '500m', sort: '최신순', media: '전체', hasPlace: false } : tab === '맛집' ? { radius: '500m', sort: '거리순', rating: '전체', open: false, hasPhoto: false } : { radius: '이 동네', sort: '팔로워순', badge: '전체', followingOnly: false })} style={{ font: '600 15px/1 var(--font-family)', color: 'var(--text-secondary)', border: '1px solid var(--border-strong)', background: 'var(--surface-1)', borderRadius: 999, padding: '16px 22px', cursor: 'pointer', flexShrink: 0 }}>초기화</span>
          <div style={{ flex: 1 }}><Button variant="primary" onClick={() => onApply(v)}>적용하기</Button></div>
        </div>
      }>
      {tab === '게시물' ? (
        <React.Fragment>
          <Group label="거리 반경"><Pills k="radius" options={['300m', '500m', '1km', '3km', '전체']} /></Group>
          <Group label="정렬"><Pills k="sort" options={['최신순', '거리순', '인기순']} /></Group>
          <Group label="미디어"><Pills k="media" options={['전체', '사진만', '동영상 포함']} /></Group>
          <Group label="조건"><Toggle k="hasPlace" label="위치 등록된 게시물만" sub="바로 찾아갈 수 있는 곳" /></Group>
        </React.Fragment>
      ) : tab === '맛집' ? (
        <React.Fragment>
          <Group label="거리 반경"><Pills k="radius" options={['300m', '500m', '1km', '3km', '전체']} /></Group>
          <Group label="정렬"><Pills k="sort" options={['거리순', '최신순', '인기순', '평점순']} /></Group>
          <Group label="최소 평점"><Pills k="rating" options={['전체', '3.0+', '3.5+', '4.0+', '4.5+']} /></Group>
          <Group label="조건">
            <Toggle k="open" label="지금 영업중" sub="영업시간 정보가 있는 곳만" />
            <Toggle k="hasPhoto" label="사진 5장 이상" sub="이웃 사진이 많은 곳" />
          </Group>
        </React.Fragment>
      ) : (
        <React.Fragment>
          <Group label="활동 지역"><Pills k="radius" options={['이 동네', '강남구', '서울', '전체']} /></Group>
          <Group label="정렬"><Pills k="sort" options={['팔로워순', '게시물순', '최근 활동순']} /></Group>
          <Group label="배지"><Pills k="badge" options={['전체', '국밥전문가', '카페인탐정', '위치제보왕', '야식탐험가']} /></Group>
          <Group label="조건"><Toggle k="followingOnly" label="팔로잉만 보기" /></Group>
        </React.Fragment>
      )}
    </BottomSheet>
  );
}
window.SearchFilterSheet = SearchFilterSheet;