function SavedPlaces({ nav }) {
  const { RestaurantCard, Toast, Button } = window.SpotureDesignSystem_f7ad96;
  const params = new URLSearchParams(location.search);
  const [sort, setSort] = React.useState(params.get('spsort') || '최근 찜한 순');
  const [removed, setRemoved] = React.useState({});
  const [toast, setToast] = React.useState(null);
  const [ask, setAsk] = React.useState(params.get('spask') === '1' ? '할매순대국 강남점' : null);
  const all = [
    { name: '할매순대국 강남점', category: '한식', distance: '45m', photos: 128, likes: 642, savedAt: '어제' },
    { name: '멘야하나비 역삼', category: '일식', distance: '90m', photos: 46, likes: 214, savedAt: '3일 전' },
    { name: '청년다방 역삼점', category: '분식', distance: '80m', savedAt: '1주 전' },
    { name: '로스트림 로스터스', category: '카페', distance: '210m', photos: 31, likes: 88, savedAt: '2주 전' },
    { name: '이치란 시부야점', category: '라멘', distance: '도쿄 시부야', photos: 12, likes: 57, savedAt: '한 달 전' },
    { name: '을밀대 역삼', category: '한식', distance: '320m', photos: 8, likes: 24, savedAt: '한 달 전' }
  ];
  const empty = params.get('spempty') === '1';
  const list = empty ? [] : all.filter(p => !removed[p.name]);
  const sorted = sort === '사진 많은 순' ? list.slice().sort((a, b) => (b.photos || 0) - (a.photos || 0)) : list;
  return (
    <div style={{ flex: '1 1 0%', minHeight: 0, display: 'flex', flexDirection: 'column', position: 'relative' }}>
      <StatusBar />
      <ScreenHeader title="찜한 가게" sub={list.length + '곳'} onBack={() => nav('profile')} />
      <div style={{ flex: '1 1 0%', minHeight: 0, overflowY: 'auto', paddingBottom: 104 }}>
        {list.length > 0 && (
          <div style={{ display: 'flex', gap: 8, padding: '0 20px 14px' }}>
            {['최근 찜한 순', '사진 많은 순'].map(t => (
              <span key={t} onClick={() => setSort(t)} style={{ flexShrink: 0, font: sort === t ? '600 13px/1 var(--font-family)' : '400 13px/1 var(--font-family)', color: sort === t ? '#fff' : 'var(--text-primary)', background: sort === t ? 'var(--bg-ink)' : 'var(--surface-1)', borderRadius: 999, padding: '11px 16px', cursor: 'pointer', boxShadow: 'var(--shadow-card)' }}>{t}</span>
            ))}
          </div>
        )}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10, padding: '0 20px' }}>
          {sorted.map((p, i) => (
            <div key={p.name} style={{ position: 'relative' }}>
              <RestaurantCard name={p.name} category={p.category} distance={p.distance} photos={p.photos} likes={p.likes} imageId={'sv-' + i} onClick={() => nav('restaurantDetail')} />
              <span onClick={(e) => { e.stopPropagation(); setAsk(p.name); }} title="찜 해제" style={{ position: 'absolute', right: 58, top: '50%', transform: 'translateY(-50%)', width: 34, height: 34, borderRadius: '50%', background: 'var(--text-accent)', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer' }}>
                <i className="ti ti-bookmark" style={{ fontSize: 16, color: '#fff' }}></i>
              </span>
            </div>
          ))}
          {list.length === 0 && (
            <div style={{ textAlign: 'center', padding: '54px 0 0' }}>
              <i className="ti ti-bookmark-off" style={{ fontSize: 32, color: 'var(--text-muted)' }}></i>
              <p style={{ font: 'var(--text-caption)', color: 'var(--text-secondary)', margin: '12px 0 16px', lineHeight: 1.6 }}>아직 찜한 가게가 없어요<br />가게 상세에서 북마크를 누르면 여기에 모여요</p>
              <Button variant="secondary" size="sm" onClick={() => nav('search')}><i className="ti ti-search" style={{ fontSize: 16 }}></i>가게 찾아보기</Button>
            </div>
          )}
        </div>
      </div>
      {ask && <UnsavePlaceConfirm name={ask} onCancel={() => setAsk(null)} onConfirm={() => { setRemoved(r => ({ ...r, [ask]: true })); setToast(ask + ' 찜을 해제했어요'); setAsk(null); }} />}
      {toast && <Toast message={toast} icon="bookmark-off" onClose={() => setToast(null)} />}
    </div>
  );
}
window.SavedPlaces = SavedPlaces;