function UserProfile({ nav, name }) {
  const { Badge, Avatar } = window.SpotureDesignSystem_f7ad96;
  const up = new URLSearchParams(location.search);
  const user = name || up.get('user') || '국밥마니아';
  const [tab, setTab] = React.useState('게시물');
  const [menuPost, setMenuPost] = React.useState(null);
  const [follow, setFollow] = React.useState(false);
  const [menu, setMenu] = React.useState(false);
  const [open, setOpen] = React.useState(null);
  const [shareSheet, setShareSheet] = React.useState(false);
  const badges = [{ icon: 'soup', label: '국밥전문가' }, { icon: 'map-pin-check', label: '위치제보왕' }, { icon: 'building-store', label: '동네박사' }, { icon: 'moon-stars', label: '야식탐험가' }];
  const posts = [
    { menu: '순대국', caption: '3년째 같은 자리. 국물 색이 흐린 날은 없었다. 새벽 손님에게도 반찬을 새로 내주는 집.', place: '할매순대국 강남점', city: '서울 강남구', area: '역삼동', dist: '320m', mediaCount: 3, likes: 214, comments: 31 },
    { menu: '내장탕', caption: '내장 손질이 깔끔해서 잡내가 없다. 소주 한 병 곁들이기 좋음.', place: '역삼동 국밥집', city: '서울 강남구', area: '역삼동', dist: '540m', mediaCount: 1, likes: 88, comments: 12 },
    { menu: '수육백반', caption: '수육 두께가 딱 좋다. 김치가 같이 나오는데 이게 반이다.', place: '평창옥 역삼', city: '서울 강남구', area: '역삼동', dist: '1.1km', mediaCount: 2, hasVideo: true, likes: 143, comments: 19 },
    { menu: '돼지국밥', caption: '부산에서 먹던 그 맑은 국물. 부추 무침 넉넉하게 주셔서 좋았다.', place: '부산집 선릉', city: '서울 강남구', area: '선릉역', dist: '1.4km', mediaCount: 1, likes: 97, comments: 8 },
    { menu: '설렁탕', caption: '멀지만 1년에 몇 번은 온다. 소금 간을 직접 맞추는 재미가 있는 집.', place: '이문설농탕', city: '서울 종로구', area: '종로1가', dist: '9.2km', mediaCount: 4, likes: 265, comments: 42 },
    { menu: '해장국', caption: '전날 과음한 다음 날 첫 끼로 늘 여기.', place: '청진옥 역삼점', city: '서울 강남구', area: '역삼동', dist: '760m', mediaCount: 1, likes: 76, comments: 6 }
  ];
  const [area, setArea] = React.useState('전체');
  const areaCounts = posts.reduce((a, p) => ({ ...a, [p.area]: (a[p.area] || 0) + 1 }), {});
  const areaList = Object.keys(areaCounts).sort((a, b) => areaCounts[b] - areaCounts[a]);
  const shown = area === '전체' ? posts : posts.filter(p => p.area === area);
  const collections = [
    { name: '역삼 해장 지도', count: 18, sub: '숙취에 진심인 곳', icon: 'soup' },
    { name: '새벽 영업 국밥', count: 9, sub: '4시에도 열려요', icon: 'moon-stars' },
    { name: '국물 없는 날 대비', count: 6, sub: '면·덮밥 위주', icon: 'bowl-chopsticks' }
  ];
  return (
    <div style={{ flex: '1 1 0%', minHeight: 0, display: 'flex', flexDirection: 'column', position: 'relative' }}>
      <StatusBar />
      <ScreenHeader title={user} onBack={() => nav('feed')} right={<div onClick={() => setMenu(true)} style={{ width: 42, height: 42, borderRadius: '50%', background: 'var(--surface-1)', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', boxShadow: 'var(--shadow-card)' }}><i className="ti ti-dots" style={{ fontSize: 19 }}></i></div>} />
      <div style={{ flex: '1 1 0%', minHeight: 0, overflowY: 'auto', paddingBottom: 104 }}>
        <div style={{ padding: '0 20px 18px' }}>
          <div style={{ background: 'var(--surface-1)', borderRadius: 'var(--radius-card)', padding: 20, boxShadow: 'var(--shadow-card)' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 18 }}>
              <Avatar user={user} size={72} />
              <div style={{ flex: 1, minWidth: 0 }}>
                <span style={{ font: 'var(--text-heading)', display: 'block', marginBottom: 4 }}>{user}</span>
                <span style={{ font: 'var(--text-caption)', color: 'var(--text-secondary)' }}>@{user} · 역삼동</span>
              </div>
            </div>
            <p style={{ font: 'var(--text-caption)', color: 'var(--text-secondary)', lineHeight: 1.6, margin: '-6px 0 12px', textWrap: 'pretty' }}>국밥만 3년째 기록 중. 새벽에 여는 국밥집 정보는 저에게 물어보세요.</p>
            <div style={{ display: 'flex', alignItems: 'center', gap: 7, background: 'var(--surface-2)', borderRadius: 'var(--radius-tile)', padding: '11px 13px', marginBottom: 16 }}>
              <i className="ti ti-map-2" style={{ fontSize: 15, color: 'var(--text-accent)', flexShrink: 0 }}></i>
              <span style={{ font: 'var(--text-small)', color: 'var(--text-secondary)', minWidth: 0, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>주 활동 지역 <b style={{ color: 'var(--text-primary)' }}>서울 강남구 {areaList.slice(0, 2).join(' · ')}</b>{areaList.length > 2 ? ' 외 ' + (areaList.length - 2) + '곳' : ''}</span>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 16 }}>
              <div style={{ flexShrink: 0, padding: '2px 12px 2px 2px' }}>
                <span style={{ font: 'var(--text-heading)', display: 'block', lineHeight: 1.1 }}>{posts.length * 21}</span>
                <span style={{ font: 'var(--text-small)', color: 'var(--text-muted)' }}>게시물</span>
              </div>
              <div style={{ width: 1, height: 34, background: 'var(--border)', flexShrink: 0 }}></div>
              {[['1.2천', '팔로워', 'follows'], ['214', '팔로잉', 'followsFollowing']].map(([n, l, route]) => (
                <div key={l} onClick={() => nav(route)} style={{ flex: 1, minWidth: 0, display: 'flex', alignItems: 'center', gap: 6, background: 'var(--surface-1)', border: '1px solid var(--border-strong)', borderRadius: 999, padding: '10px 12px', cursor: 'pointer' }}>
                  <span style={{ font: '700 15px/1 var(--font-family)', color: 'var(--text-primary)' }}>{n}</span>
                  <span style={{ font: 'var(--text-small)', color: 'var(--text-secondary)' }}>{l}</span>
                  <i className="ti ti-chevron-right" style={{ fontSize: 15, color: 'var(--text-muted)', marginLeft: 'auto', flexShrink: 0 }}></i>
                </div>
              ))}
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 16, flexWrap: 'nowrap', overflow: 'hidden' }}>
              {badges.slice(0, 2).map(b => <Badge key={b.label} tone="neutral"><i className={'ti ti-' + b.icon} style={{ fontSize: 13 }}></i>{b.label}</Badge>)}
              {badges.length > 2 && <span onClick={() => setTab('배지')} style={{ flexShrink: 0, font: '600 12px/1 var(--font-family)', color: 'var(--text-secondary)', background: 'var(--surface-2)', borderRadius: 999, padding: '8px 11px', cursor: 'pointer' }}>+{badges.length - 2}</span>}
            </div>
            <div style={{ display: 'flex', gap: 8 }}>
              <button onClick={() => setFollow(!follow)} style={{ flex: 1, padding: '13px 0', font: '600 14px/1 var(--font-family)', border: follow ? '1px solid var(--border-strong)' : 'none', background: follow ? 'var(--surface-1)' : 'var(--text-accent)', color: follow ? 'var(--text-primary)' : '#fff', borderRadius: 999, cursor: 'pointer' }}>{follow ? '팔로잉' : '팔로우'}</button>
              <button onClick={() => setShareSheet(true)} style={{ flex: 1, padding: '13px 0', font: '600 14px/1 var(--font-family)', border: '1px solid var(--border-strong)', background: 'var(--surface-1)', color: 'var(--text-primary)', borderRadius: 999, cursor: 'pointer' }}>공유</button>
            </div>
          </div>
        </div>
        <div style={{ display: 'flex', gap: 8, padding: '0 20px 16px', overflowX: 'auto' }}>
          {['게시물', '컬렉션', '배지'].map(t => (
            <span key={t} onClick={() => setTab(t)} style={{ font: tab === t ? '600 14px/1 var(--font-family)' : '400 14px/1 var(--font-family)', color: tab === t ? '#fff' : 'var(--text-primary)', background: tab === t ? 'var(--bg-ink)' : 'var(--surface-1)', borderRadius: 999, padding: '12px 18px', cursor: 'pointer', whiteSpace: 'nowrap' }}>{t}</span>
          ))}
        </div>
        {tab === '게시물' && (
          <div style={{ display: 'flex', gap: 7, padding: '0 20px 14px', overflowX: 'auto', scrollbarWidth: 'none' }}>
            {['전체'].concat(areaList).map(a => (
              <span key={a} onClick={() => setArea(a)} style={{ flexShrink: 0, display: 'inline-flex', alignItems: 'center', gap: 5, font: '600 13px/1 var(--font-family)', color: area === a ? 'var(--text-accent)' : 'var(--text-secondary)', background: area === a ? 'var(--bg-accent)' : 'var(--surface-1)', border: '1px solid ' + (area === a ? 'transparent' : 'var(--border)'), borderRadius: 999, padding: '10px 13px', cursor: 'pointer', whiteSpace: 'nowrap' }}>
                {a !== '전체' && <i className="ti ti-map-pin" style={{ fontSize: 12 }}></i>}{a}
                <span style={{ font: 'var(--text-micro)', color: area === a ? 'var(--text-accent)' : 'var(--text-muted)' }}>{a === '전체' ? posts.length : areaCounts[a]}</span>
              </span>
            ))}
          </div>
        )}
        {tab === '게시물' && (
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2,1fr)', gap: 10, padding: '0 20px' }}>
            {shown.map((p, i) => (
              <div key={p.menu + i} onClick={() => setOpen({ ...p, user, badges, distance: p.dist })} style={{ background: 'var(--surface-1)', borderRadius: 'var(--radius-card)', overflow: 'hidden', boxShadow: 'var(--shadow-card)', cursor: 'pointer' }}>
                <div style={{ width: '100%', aspectRatio: '1', background: 'var(--surface-2)', position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <i className={p.hasVideo ? 'ti ti-video' : 'ti ti-photo'} style={{ fontSize: 24, color: 'var(--text-muted)' }}></i>
                  {p.mediaCount > 1 && <span style={{ position: 'absolute', right: 8, top: 8, font: 'var(--text-micro)', color: '#fff', background: 'rgba(26,26,26,.68)', borderRadius: 999, padding: '4px 8px' }}>1/{p.mediaCount}</span>}
                  <span style={{ position: 'absolute', left: 8, bottom: 8, font: 'var(--text-micro)', color: '#fff', background: 'rgba(26,26,26,.68)', borderRadius: 999, padding: '4px 8px' }}>#{p.menu}</span>
                  <span style={{ position: 'absolute', left: 8, top: 8, display: 'inline-flex', alignItems: 'center', gap: 3, font: '600 11px/1 var(--font-family)', color: '#fff', background: 'rgba(26,26,26,.68)', backdropFilter: 'blur(6px)', borderRadius: 999, padding: '5px 8px' }}><i className="ti ti-map-pin" style={{ fontSize: 10 }}></i>{p.area}</span>
                </div>
                <div style={{ padding: '11px 12px 13px' }}>
                  <span style={{ font: 'var(--text-caption)', display: 'block', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', marginBottom: 4 }}>{p.place}</span>
                  <span style={{ font: 'var(--text-micro)', color: 'var(--text-muted)', display: 'inline-flex', alignItems: 'center', gap: 3 }}><i className="ti ti-walk" style={{ fontSize: 11 }}></i>내 위치에서 {p.dist}</span>
                </div>
              </div>
            ))}
          </div>
        )}
        {tab === '컬렉션' && (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10, padding: '0 20px' }}>
            {collections.map(c => (
              <div key={c.name} onClick={() => nav('collectionDetailOther')} style={{ display: 'flex', alignItems: 'center', gap: 12, background: 'var(--surface-1)', borderRadius: 'var(--radius-card)', padding: 14, boxShadow: 'var(--shadow-card)', cursor: 'pointer' }}>
                <div style={{ display: 'flex', flexShrink: 0 }}>
                  {[0, 1, 2].map(i => (
                    <div key={i} style={{ width: 48, height: 48, borderRadius: 12, background: 'var(--surface-2)', border: '2px solid var(--surface-1)', marginLeft: i ? -16 : 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }}><i className="ti ti-photo" style={{ fontSize: 15, color: 'var(--text-muted)' }}></i></div>
                  ))}
                </div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 5, marginBottom: 3 }}>
                    <i className={'ti ti-' + c.icon} style={{ fontSize: 14, color: 'var(--text-accent)' }}></i>
                    <span style={{ font: 'var(--text-body-strong)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{c.name}</span>
                  </div>
                  <span style={{ font: 'var(--text-small)', color: 'var(--text-muted)' }}>{c.sub} · {c.count}곳</span>
                </div>
                <i className="ti ti-chevron-right" style={{ fontSize: 15, color: 'var(--text-muted)', flexShrink: 0 }}></i>
              </div>
            ))}
          </div>
        )}
        {tab === '배지' && (
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 10, padding: '0 20px' }}>
            {badges.map(b => (
              <div key={b.label} style={{ background: 'var(--surface-1)', borderRadius: 'var(--radius-card)', padding: '18px 10px', boxShadow: 'var(--shadow-card)', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 9 }}>
                <div style={{ width: 46, height: 46, borderRadius: '50%', background: 'var(--bg-accent)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><i className={'ti ti-' + b.icon} style={{ fontSize: 21, color: 'var(--text-accent)' }}></i></div>
                <span style={{ font: 'var(--text-micro)', textAlign: 'center' }}>{b.label}</span>
              </div>
            ))}
          </div>
        )}
      </div>
      {open && <PostViewer post={open} onClose={() => setOpen(null)} onComments={() => setOpen(null)} onMenu={() => { setMenuPost(open); setOpen(null); }} onPlace={() => { setOpen(null); nav('restaurantDetail'); }} />}
      {menuPost && <PostActionSheets post={menuPost} onClose={() => setMenuPost(null)} onDeleted={() => setMenuPost(null)} onEdit={(pp) => nav('editPost', { post: pp })} />}
      {shareSheet && <ShareProfileSheet name={user} handle={'@' + user} onClose={() => setShareSheet(false)} />}
      {menu && <UserMenuSheet user={user} onClose={() => setMenu(false)} />}
    </div>
  );
}
window.UserProfile = UserProfile;

function UserMenuSheet({ user, onClose }) {
  const { BottomSheet } = window.SpotureDesignSystem_f7ad96;
  const rows = [
    { icon: 'bell-off', label: '알림 받지 않기' },
    { icon: 'share-2', label: '프로필 공유' },
    { icon: 'user-off', label: '차단하기', danger: true },
    { icon: 'flag', label: '신고하기', danger: true }
  ];
  return (
    <BottomSheet title={user + '님'} onClose={onClose}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        {rows.map(r => (
          <div key={r.label} onClick={onClose} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '16px 18px', background: r.danger ? 'var(--bg-danger)' : 'var(--surface-2)', borderRadius: 'var(--radius-tile)', cursor: 'pointer' }}>
            <i className={'ti ti-' + r.icon} style={{ fontSize: 18, color: r.danger ? 'var(--text-danger)' : 'var(--text-primary)' }}></i>
            <span style={{ font: 'var(--text-body)', color: r.danger ? 'var(--text-danger)' : 'var(--text-primary)' }}>{r.label}</span>
          </div>
        ))}
      </div>
    </BottomSheet>
  );
}
window.UserMenuSheet = UserMenuSheet;