function Sidebar({ state, setState }) {
  const { ACCOUNTS } = window.SAJU;
  const { page, selectedAccount } = state;

  const setPage = (p) => setState((s) => ({ ...s, page: p }));
  const selectAcc = (id) => setState((s) => ({ ...s, selectedAccount: id, page: 'pipeline' }));

  const totalPending = window.SAJU.POSTS.filter((p) => p.status === 'pending').length;
  const totalScheduled = window.SAJU.POSTS.filter((p) => p.status === 'scheduled' || p.status === 'approved').length;

  return (
    <aside className="sidebar">
      <div className="sidebar-brand">
        <div className="sidebar-brand-mark">S</div>
        <div>
          <div className="sidebar-brand-name">Saju Oracle</div>
          <div className="sidebar-brand-sub">Multi-account console</div>
        </div>
      </div>

      <nav style={{ padding: '12px 0 4px' }}>
        <div className="sidebar-nav" style={{ paddingBottom: 6 }}>
          <button className={`sidebar-nav-item ${page === 'dashboard' ? 'active' : ''}`} onClick={() => setPage('dashboard')}>
            <Icon name="home" /><span>대시보드</span>
          </button>
          <button className={`sidebar-nav-item ${page === 'pipeline' ? 'active' : ''}`} onClick={() => setPage('pipeline')}>
            <Icon name="zap" /><span>파이프라인</span>
          </button>
          <button className={`sidebar-nav-item ${page === 'accounts' ? 'active' : ''}`} onClick={() => setPage('accounts')}>
            <Icon name="users" /><span>계정 관리</span>
            <span className="count">{ACCOUNTS.length}</span>
          </button>
          <button className={`sidebar-nav-item ${page === 'shopping' ? 'active' : ''}`} onClick={() => setPage('shopping')}>
            <Icon name="shopping-cart" /><span>쇼핑쇼츠</span>
          </button>
        </div>
      </nav>

      <div className="sidebar-section">
        <span>계정 ({ACCOUNTS.length})</span>
        <button className="sidebar-section-action" title="계정 추가" onClick={() => setPage('accounts')}><Icon name="plus" size={12} /></button>
      </div>

      <div className="sidebar-accounts">
        {ACCOUNTS.map((acc) => {
          const active = selectedAccount === acc.id && page !== 'dashboard' && page !== 'accounts' && page !== 'videos';
          const pulseClass = acc.errors > 0 ? 'err' : acc.status === 'idle' ? 'warn' : acc.status === 'offline' ? '' : 'ok';
          return (
            <button key={acc.id}
                    className={`account-row ${active ? 'active' : ''}`}
                    onClick={() => selectAcc(acc.id)}>
              <AccountAvatar acc={acc} />
              <div className="account-meta">
                <div className="account-handle">{acc.handle}</div>
                <div className="account-sub">
                  <span>{acc.locale}</span>
                  {acc.errors > 0 && <span style={{ color: 'var(--status-failed-fg)' }}>· {acc.errors} 오류</span>}
                </div>
              </div>
              <span className={`account-pulse ${pulseClass}`}>
                {acc.today > 0 ? `${acc.today}건` : acc.status === 'offline' ? 'off' : '정상'}
              </span>
            </button>
          );
        })}
      </div>

      <div className="sidebar-footer">
        <span className="account-avatar" style={{ width: 24, height: 24, background: 'oklch(0.5 0.08 280)', fontSize: 10 }}>OP</span>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 12, fontWeight: 500 }}>운영자</div>
          <div style={{ fontSize: 10.5, color: 'var(--fg-subtle)' }}>admin@sajuoracle</div>
        </div>
        <button className="btn ghost icon" title="설정"><Icon name="settings" size={14} /></button>
      </div>
    </aside>
  );
}

window.Sidebar = Sidebar;