export default function Header({ scanProgress, scanPhase, authenticated, oauthAvailable, onLogin, onLogout }) {
  return (
    <header style={{
      padding: '24px 32px',
      borderBottom: '1px solid var(--border)',
    }}>
      <div style={{
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
      }}>
        <div>
          <h1 style={{
            fontSize: '28px',
            fontWeight: 700,
            color: 'var(--green)',
            letterSpacing: '4px',
          }}>
            &#9632; OPERATOR
          </h1>
          <p style={{
            fontSize: '12px',
            color: 'var(--text-dim)',
            marginTop: '4px',
            fontStyle: 'italic',
          }}>
            The AI Agent That Works While You Talk.
          </p>
        </div>
        <div style={{ display: 'flex', gap: '12px', alignItems: 'center' }}>
          {oauthAvailable && (
            <>
              <span style={{
                fontSize: '11px',
                color: authenticated ? 'var(--green)' : 'var(--text-dim)',
                display: 'flex',
                alignItems: 'center',
                gap: '6px',
              }}>
                <span style={{
                  width: '8px',
                  height: '8px',
                  borderRadius: '50%',
                  background: authenticated ? 'var(--green)' : 'var(--text-dim)',
                  display: 'inline-block',
                }} />
                {authenticated ? 'GOOGLE CONNECTED' : 'DEMO MODE'}
              </span>
              <button
                onClick={authenticated ? onLogout : onLogin}
                style={{
                  background: 'transparent',
                  color: authenticated ? 'var(--text-dim)' : '#4285F4',
                  border: `1px solid ${authenticated ? 'var(--border)' : '#4285F4'}`,
                  padding: '8px 16px',
                  fontFamily: 'inherit',
                  fontSize: '11px',
                  fontWeight: 700,
                  cursor: 'pointer',
                  letterSpacing: '1px',
                  transition: 'all 0.2s',
                }}
              >
                {authenticated ? 'DISCONNECT' : 'CONNECT GOOGLE'}
              </button>
            </>
          )}
          {scanProgress > 0 && scanProgress < 100 && (
            <span style={{
              fontSize: '12px',
              color: 'var(--green)',
              letterSpacing: '2px',
              fontWeight: 700,
              animation: 'pulse 1.5s infinite',
            }}>
              SCANNING...
            </span>
          )}
        </div>
      </div>

      {/* Progress bar */}
      {scanProgress > 0 && scanProgress < 100 && (
        <div style={{ marginTop: '16px' }}>
          <div style={{
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center',
            marginBottom: '6px',
          }}>
            <span style={{
              fontSize: '11px',
              color: 'var(--text-dim)',
              letterSpacing: '1px',
            }}>
              {scanPhase}
            </span>
            <span style={{
              fontSize: '11px',
              color: 'var(--text-dim)',
              fontVariantNumeric: 'tabular-nums',
            }}>
              {scanProgress}%
            </span>
          </div>
          <div style={{
            width: '100%',
            height: '6px',
            background: '#1a1a1a',
            borderRadius: '3px',
            overflow: 'hidden',
          }}>
            <div style={{
              width: `${scanProgress}%`,
              height: '100%',
              background: 'linear-gradient(90deg, var(--green), #00cc6a)',
              borderRadius: '3px',
              boxShadow: '0 0 8px rgba(0, 255, 136, 0.4)',
            }} />
          </div>
        </div>
      )}
    </header>
  );
}