function showError(message) {
            const errorContainer = document.getElementById('errorContainer');
            errorContainer.innerHTML = <div class="error-message">${message}</div>;
        }

        function hideLoading() {
            document.getElementById('loadingOverlay').style.display = 'none';
        }

        function logout() {
            localStorage.removeItem('deriv_token');
            sessionStorage.clear();
            if (ws) {
                ws.close();
            }
            window.location.href = 'index.html';
        }

        function connectWebSocket(token) {
            ws = new WebSocket(wss://ws.binaryws.com/websockets/v3?app_id=${APP_ID});

            ws.onopen = function() {
                console.log('WebSocket connected');
                // Authorize with token
                ws.send(JSON.stringify({
                    authorize: token
                }));
            };

            ws.onmessage = function(msg) {
                const data = JSON.parse(msg.data);
                console.log('Received:', data);

                if (data.error) {
                    showError(Error: ${data.error.message});
                    hideLoading();
                    return;
                }

                if (data.authorize) {
                    // User authorized successfully
                    const account = data.authorize;
                    document.getElementById('userName').textContent = account.fullname  account.email  'User';
                    document.getElementById('accountId').textContent = account.account_list?.[0]?.loginid  account.loginid  '-';
                    document.getElementById('email').textContent = account.email || '-';
                    document.getElementById('currency').textContent = account.currency || 'USD';
                    document.getElementById('loginId').textContent = account.loginid || '-';

                    // Get balance
                    ws.send(JSON.stringify({
                        balance: 1,
                        subscribe: 1
                    }));
                }

                if (data.balance) {
                    const balance = data.balance.balance;
                    const currency = data.balance.currency;
                    document.getElementById('balance').textContent = ${currency} ${parseFloat(balance).toFixed(2)};
                    hideLoading();
                }
            };

            ws.onerror = function(error) {
                console.error('WebSocket error:', error);
                showError('Connection error. Please try logging in again.');
                hideLoading();
            };

            ws.onclose = function() {
                console.log('WebSocket disconnected');
            };
        }

        // Check authentication on page load
        window.onload = function() {
            const token = localStorage.getItem('deriv_token');
            
            if (!token) {
                // No token, redirect to login
                window.location.href = 'index.html';
                return;
            }

            // Connect to Deriv WebSocket API
            connectWebSocket(token);
        };
    </script>
</body>
</html>