JavaScript (ES6), 67 64 bytes

f=(n,q=0,a=[0,0])=>q|n?f(n/2,n&1?q+1:q&&0*(a[q&1]+=1-(q&2)),a):a

<input oninput="O.innerHTML=f(this.value)" type="number" step=1 min=0 value="4538">
<pre id=O></pre>

Outputs as a 2-element array.

JavaScript (ES6), 67 64 bytes

f=(n,q=0,a=[0,0])=>q|n?f(n/2,n&1?q+1:q&&0*(a[q&1]+=1-(q&2)),a):a

<input oninput="O.innerHTML=f(this.value)" type="number" step=1 min=0 value="4538">
<pre id=O></pre>

Outputs as a 2-element array.

Explanation

Since JavaScript doesn't have imaginary numbers, we have to keep track of the real and imaginary parts in separate variables. The easiest way to do this is in a single array, with the real part first. i is represented as [0,1], i² (or -1) as [-1,0], i³ (or -i) as [0,-1], and i⁴ (or 1) as [1,0].

First, we repeatedly divide the number by 2, collecting each run of ones in its binary representation. Each run of n ones corresponds to iⁿ. This corresponds to adding 1 - (n & 2) to the item at index n & 1 in the two-item array. So that's we do.

I should probably add more explanation, but I can't think of what else needs explaining. Feel free to comment with any questions you might have.

JavaScript (ES6), 67 bytes

f=(n,q=0,a=[0,0])=>q|n?f(n>>1,n%2?q+1:q?0*(a[q%2]+=q&2?-1:1):0,a):a

Outputs as a 2-element array.

JavaScript (ES6), 67 64 bytes

f=(n,q=0,a=[0,0])=>q|n?f(n/2,n&1?q+1:q&&0*(a[q&1]+=1-(q&2)),a):a

<input oninput="O.innerHTML=f(this.value)" type="number" step=1 min=0 value="4538">
<pre id=O></pre>

Outputs as a 2-element array.