function FollowRow({ u, state, onToggle, onMenu, onOpen }) {
  const { Avatar } = window.SpotureDesignSystem_f7ad96;
  const label = { following: '팔로잉', follow: '팔로우', back: '맞팔로우', requested: '요청함' }[state] || '팔로우';
  const quiet = state === 'following' || state === 'requested';
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '12px 0' }}>
      <Avatar user={u.name} size={48} />
      <div onClick={onOpen} style={{ flex: 1, minWidth: 0, cursor: onOpen ? 'pointer' : 'default' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 5, marginBottom: 3 }}>
          <span style={{ font: 'var(--text-body-strong)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{u.name}</span>
          {u.badges && u.badges.slice(0, 2).map(b => <i key={b} className={'ti ti-' + b} style={{ fontSize: 12, color: 'var(--text-accent)', flexShrink: 0 }}></i>)}
        </div>
        <span style={{ font: 'var(--text-small)', color: 'var(--text-secondary)', display: 'block', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{u.title}</span>
        {u.mutual && <span style={{ font: 'var(--text-micro)', color: 'var(--text-muted)' }}>{u.mutual}</span>}
      </div>
      <span onClick={onToggle} style={{ flexShrink: 0, font: '600 13px/1 var(--font-family)', color: quiet ? 'var(--text-secondary)' : '#fff', background: quiet ? 'var(--surface-2)' : 'var(--text-accent)', border: quiet ? '1px solid var(--border-strong)' : 'none', borderRadius: 999, padding: '11px 14px', cursor: 'pointer' }}>{label}</span>
      <i className="ti ti-dots" onClick={onMenu} style={{ fontSize: 17, color: 'var(--text-muted)', flexShrink: 0, cursor: 'pointer' }}></i>
    </div>
  );
}

function Follows({ nav, initialTab }) {
  const fp = new URLSearchParams(location.search);
  const [tab, setTab] = React.useState(initialTab || (fp.get('ftab') === 'following' ? '팔로잉' : '팔로워'));
  const [q, setQ] = React.useState('');
  const [menu, setMenu] = React.useState(null);
  const followers = [
    { name: '국밥마니아', title: '국밥전문가', badges: ['soup'], mutual: '야식탐험가님도 팔로우해요', state: 'back' },
    { name: '순대국매니아', title: '위치제보왕 · 게시물 62개', badges: ['map-pin-check', 'award'], state: 'following' },
    { name: '밥순이', title: '동네박사', badges: ['building-store'], mutual: '함께 아는 이웃 4명', state: 'back' },
    { name: '카페인탐정', title: '카페인탐정 · 게시물 44개', badges: ['coffee'], state: 'following' },
    { name: '떡볶이덕후', title: '분식마스터', badges: ['bowl-chopsticks'], state: 'back' }
  ];
  const following = [
    { name: '야식탐험가', title: '야식탐험가 · 야식러버', badges: ['moon-stars', 'flame'], mutual: '나를 팔로우해요', state: 'following' },
    { name: '동네박사', title: '동네박사 · 게시물 120개', badges: ['building-store'], state: 'following' },
    { name: '브런치요정', title: '게시물 28개', badges: [], state: 'requested' }
  ];
  const list = tab === '팔로워' ? followers : following;
  const [states, setStates] = React.useState({});
  const stateOf = (key, init) => states[key] || init;
  const cycle = (key, cur) => setStates(s => ({ ...s, [key]: cur === 'following' ? 'follow' : cur === 'requested' ? 'follow' : 'following' }));
  const shown = list.filter(u => !q || u.name.includes(q));
  return (
    <div style={{ flex: '1 1 0%', minHeight: 0, display: 'flex', flexDirection: 'column', position: 'relative' }}>
      <StatusBar />
      <ScreenHeader title="지훈" sub="팔로워 312 · 팔로잉 128" onBack={() => nav('profile')} nav={nav} />
      <div style={{ display: 'flex', padding: '0 20px', borderBottom: '1px solid var(--border)', margin: '0 0 14px' }}>
        {[['팔로워', 312], ['팔로잉', 128]].map(([t, n]) => (
          <span key={t} onClick={() => setTab(t)} style={{ flex: 1, textAlign: 'center', font: tab === t ? '700 15px/1.2 var(--font-family)' : '400 15px/1.2 var(--font-family)', color: tab === t ? 'var(--text-primary)' : 'var(--text-muted)', cursor: 'pointer', paddingBottom: 13, marginBottom: -1, borderBottom: tab === t ? '2px solid var(--text-accent)' : '2px solid transparent' }}>{t} {n}</span>
        ))}
      </div>
      <div style={{ padding: '0 20px 12px' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, background: 'var(--surface-2)', borderRadius: 'var(--radius-chip)', padding: '13px 16px' }}>
          <i className="ti ti-search" style={{ fontSize: 16, color: 'var(--text-muted)', flexShrink: 0 }}></i>
          <input value={q} onChange={e => setQ(e.target.value)} placeholder="닉네임 검색" style={{ flex: 1, minWidth: 0, border: 'none', outline: 'none', background: 'transparent', font: 'var(--text-body)', color: 'var(--text-primary)', fontFamily: 'var(--font-family)' }} />
          {q && <i className="ti ti-x" onClick={() => setQ('')} style={{ fontSize: 15, color: 'var(--text-muted)', cursor: 'pointer', flexShrink: 0 }}></i>}
        </div>
      </div>
      <div style={{ flex: '1 1 0%', minHeight: 0, overflowY: 'auto', padding: '0 20px 104px' }}>
        {shown.length ? shown.map(u => {
          const key = tab + u.name;
          const st = stateOf(key, u.state);
          return (
            <div key={key} style={{ borderBottom: '1px solid var(--border)', position: 'relative' }}>
              <FollowRow u={u} state={st} onOpen={() => nav('userProfile', { name: u.name })} onToggle={() => cycle(key, st)} onMenu={() => setMenu(menu === key ? null : key)} />
              {menu === key && (
                <div style={{ position: 'absolute', right: 0, top: 'calc(100% - 25px)', zIndex: 40, minWidth: 168, background: 'var(--surface-1)', border: '1px solid var(--border)', borderRadius: 'var(--radius-tile)', boxShadow: 'var(--shadow-float)', overflow: 'hidden' }}>
                  {tab === '팔로워' && <div onClick={() => setMenu(null)} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '13px 16px', font: 'var(--text-caption)', color: 'var(--text-primary)', borderBottom: '1px solid var(--border)', cursor: 'pointer' }}><i className="ti ti-user-minus" style={{ fontSize: 15 }}></i>팔로워 삭제</div>}
                  <div onClick={() => setMenu(null)} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '13px 16px', font: 'var(--text-caption)', color: 'var(--text-primary)', borderBottom: '1px solid var(--border)', cursor: 'pointer' }}><i className="ti ti-bell-off" style={{ fontSize: 15 }}></i>알림 끄기</div>
                  <div onClick={() => { setMenu(null); nav('blockedUsers'); }} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '13px 16px', font: 'var(--text-caption)', color: 'var(--text-danger)', cursor: 'pointer' }}><i className="ti ti-user-off" style={{ fontSize: 15 }}></i>차단하기</div>
                </div>
              )}
            </div>
          );
        }) : (
          <div style={{ textAlign: 'center', padding: '40px 20px' }}>
            <i className="ti ti-user-search" style={{ fontSize: 26, color: 'var(--text-muted)', display: 'block', marginBottom: 10 }}></i>
            <span style={{ font: 'var(--text-caption)', color: 'var(--text-secondary)' }}>「{q}」와 일치하는 이웃이 없어요</span>
          </div>
        )}
      </div>
    </div>
  );
}
window.Follows = Follows;