function SocialAccounts({ nav }) {
  const { Toggle, BottomSheet, Button } = window.SpotureDesignSystem_f7ad96;
  const [linked, setLinked] = React.useState({ kakao: true, naver: false, apple: false, google: true });
  const [primary, setPrimary] = React.useState('kakao');
  const [confirm, setConfirm] = React.useState(null);
  const [autoFriends, setAutoFriends] = React.useState(false);
  const [toast, setToast] = React.useState(null);
  const providers = [
    { key: 'kakao', name: '카카오', icon: 'brand-kako-talk', bg: '#FEE500', fg: '#1A1A1A', id: 'gukbap****@kakao.com', since: '2024.03.12' },
    { key: 'naver', name: '네이버', mark: 'N', bg: '#03C75A', fg: '#fff', id: '', since: '' },
    { key: 'apple', name: 'Apple', icon: 'brand-apple', bg: '#1A1A1A', fg: '#fff', id: '', since: '' },
    { key: 'google', name: 'Google', icon: 'brand-google', bg: 'var(--surface-2)', fg: 'var(--text-primary)', id: 'gukbap92@gmail.com', since: '2025.11.04' }
  ];
  const linkedCount = Object.values(linked).filter(Boolean).length;
  const act = (p) => {
    if (!linked[p.key]) { setLinked(v => ({ ...v, [p.key]: true })); setToast(p.name + ' 계정을 연동했어요'); return; }
    if (p.key === primary) { setToast('로그인에 사용 중인 계정은 해제할 수 없어요'); return; }
    if (linkedCount <= 1) { setToast('마지막 계정은 해제할 수 없어요'); return; }
    setConfirm(p);
  };
  React.useEffect(() => { if (!toast) return; const t = setTimeout(() => setToast(null), 2200); return () => clearTimeout(t); }, [toast]);
  return (
    <div style={{ flex: '1 1 0%', minHeight: 0, display: 'flex', flexDirection: 'column', position: 'relative' }}>
      <StatusBar />
      <ScreenHeader title="연동된 소셜 계정" sub="로그인에 사용할 계정을 관리해요" onBack={() => nav('settings')} />
      <div style={{ flex: '1 1 0%', minHeight: 0, overflowY: 'auto', padding: '0 20px 104px', display: 'flex', flexDirection: 'column', gap: 22 }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          {providers.map(p => {
            const on = linked[p.key];
            const isPrimary = p.key === primary;
            return (
              <div key={p.key} style={{ background: 'var(--surface-1)', borderRadius: 'var(--radius-card)', padding: 16, boxShadow: 'var(--shadow-card)' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                  <div style={{ width: 44, height: 44, borderRadius: '50%', background: p.bg, border: p.key === 'google' ? '1px solid var(--border)' : 'none', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>{p.mark ? <span style={{ font: '800 19px/1 var(--font-family)', color: p.fg }}>{p.mark}</span> : <i className={'ti ti-' + p.icon} style={{ fontSize: 21, color: p.fg }}></i>}</div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 3 }}>
                      <span style={{ font: 'var(--text-body-strong)' }}>{p.name}</span>
                      {isPrimary && on && <span style={{ font: '700 10px/1 var(--font-family)', color: '#fff', background: 'var(--text-accent)', borderRadius: 999, padding: '5px 8px' }}>로그인 계정</span>}
                    </div>
                    <span style={{ font: 'var(--text-small)', color: 'var(--text-muted)', display: 'block', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{on ? p.id : '연동하면 이 계정으로 로그인할 수 있어요'}</span>
                  </div>
                  <span onClick={() => act(p)} style={{ flexShrink: 0, font: '600 13px/1 var(--font-family)', color: on ? 'var(--text-secondary)' : '#fff', background: on ? 'var(--surface-2)' : 'var(--bg-ink)', border: on ? '1px solid var(--border)' : 'none', borderRadius: 999, padding: '10px 14px', cursor: 'pointer' }}>{on ? '해제' : '연동'}</span>
                </div>
                {on && (
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 12, paddingTop: 12, borderTop: '1px solid var(--border)' }}>
                    <i className="ti ti-clock" style={{ fontSize: 14, color: 'var(--text-muted)' }}></i>
                    <span style={{ font: 'var(--text-micro)', color: 'var(--text-muted)', flex: 1 }}>{p.since} 연동</span>
                    {!isPrimary && <span onClick={() => { setPrimary(p.key); setToast(p.name + '으로 로그인하도록 변경했어요'); }} style={{ font: '600 12px/1 var(--font-family)', color: 'var(--text-accent)', cursor: 'pointer' }}>로그인 계정으로 설정</span>}
                  </div>
                )}
              </div>
            );
          })}
        </div>
        <div>
          <span style={{ font: 'var(--text-small)', color: 'var(--text-muted)', display: 'block', marginBottom: 8, paddingLeft: 4 }}>연동 옵션</span>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, background: 'var(--surface-1)', border: '1px solid var(--border)', borderRadius: 'var(--radius-tile)', padding: '14px 16px' }}>
            <i className="ti ti-users" style={{ fontSize: 18, color: 'var(--text-secondary)', flexShrink: 0 }}></i>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ font: 'var(--text-body)', marginBottom: 2 }}>친구 자동 추천</div>
              <div style={{ font: 'var(--text-micro)', color: 'var(--text-muted)' }}>연동 계정의 친구를 이웃으로 추천해요</div>
            </div>
            <Toggle on={autoFriends} onChange={() => setAutoFriends(v => !v)} />
          </div>
        </div>
        <div style={{ display: 'flex', gap: 10, background: 'var(--surface-2)', borderRadius: 'var(--radius-tile)', padding: '14px 16px' }}>
          <i className="ti ti-shield-lock" style={{ fontSize: 17, color: 'var(--text-muted)', flexShrink: 0, marginTop: 1 }}></i>
          <span style={{ font: 'var(--text-micro)', color: 'var(--text-secondary)', lineHeight: 1.6, textWrap: 'pretty' }}>Spoture는 프로필 사진과 이메일만 받아옵니다. 게시물이 연동 계정에 자동으로 올라가지 않아요.</span>
        </div>
      </div>
      {confirm && (
        <BottomSheet title={confirm.name + ' 연동 해제'} footer={<div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}><Button variant="accent" onClick={() => { setLinked(v => ({ ...v, [confirm.key]: false })); setToast(confirm.name + ' 연동을 해제했어요'); setConfirm(null); }}>연동 해제</Button><Button variant="ghost" onClick={() => setConfirm(null)}>취소</Button></div>} onClose={() => setConfirm(null)}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            <span style={{ font: 'var(--text-body)', color: 'var(--text-secondary)', lineHeight: 1.6 }}>해제하면 {confirm.name} 계정으로는 로그인할 수 없어요. 게시물과 배지는 그대로 유지됩니다.</span>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, background: 'var(--bg-danger)', borderRadius: 'var(--radius-tile)', padding: '13px 14px' }}>
              <i className="ti ti-alert-triangle" style={{ fontSize: 17, color: 'var(--text-danger)', flexShrink: 0 }}></i>
              <span style={{ font: 'var(--text-small)', color: 'var(--text-danger)', lineHeight: 1.5 }}>남은 로그인 수단은 {linkedCount - 1}개입니다</span>
            </div>
          </div>
        </BottomSheet>
      )}
      {toast && (
        <div style={{ position: 'absolute', left: 20, right: 20, bottom: 92, background: 'var(--bg-ink)', color: '#fff', borderRadius: 'var(--radius-tile)', padding: '14px 16px', display: 'flex', alignItems: 'center', gap: 10, boxShadow: 'var(--shadow-float)', zIndex: 30 }}>
          <i className="ti ti-info-circle" style={{ fontSize: 18, flexShrink: 0 }}></i>
          <span style={{ font: '600 14px/1.4 var(--font-family)' }}>{toast}</span>
        </div>
      )}
    </div>
  );
}
window.SocialAccounts = SocialAccounts;