// client.js

let pc = null;
let localStream = null;

const videoElement = document.getElementById('video');
const startCameraButton = document.getElementById('start-camera');
const startScreenButton = document.getElementById('start-screen');

startCameraButton.onclick = async () => {
    await startMedia('camera');
};

startScreenButton.onclick = async () => {
    await startMedia('screen');
};

 let ws = new WebSocket('ws://' + window.location.host + '/ws');

   ws.onmessage = function(event) {
       let message = JSON.parse(event.data);
       if (message.type === 'text') {
           // Display text response
           displayResponse(message.text);
       } else if (message.type === 'data') {
           // Handle binary data (e.g., audio)
           let audioData = message.data;
           // Convert base64 data to ArrayBuffer
           let audioBuffer = base64ToArrayBuffer(audioData);
           // Play or process audio data
           playAudio(audioBuffer);
       }
   };

async function startMedia(mode) {
    if (localStream) {
        // Close existing tracks
        localStream.getTracks().forEach(track => track.stop());
    }

    try {
        if (mode === 'camera') {
            localStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: false });
        } else if (mode === 'screen') {
            localStream = await navigator.mediaDevices.getDisplayMedia({ video: true, audio: false });
        }

        videoElement.srcObject = localStream;

        await connect();

    } catch (e) {
        console.error('Failed to get media stream:', e);
    }
}

async function connect() {
    pc = new RTCPeerConnection();

    // Add tracks to peer connection
    localStream.getTracks().forEach(track => pc.addTrack(track, localStream));

    pc.onicecandidate = event => {
        if (event.candidate === null) {
            fetch('/offer', {
                method: 'POST',
                body: JSON.stringify(pc.localDescription),
                headers: { 'Content-Type': 'application/json' }
            }).then(response => response.json())
            .then(answer => pc.setRemoteDescription(answer))
            .catch(e => console.error(e));
        }
    };

    const offer = await pc.createOffer();
    await pc.setLocalDescription(offer);
}

function displayResponse(text) {
       // Implement this function to display the text on the web UI
       let responseElement = document.getElementById('response');
       responseElement.innerText = text;
   }

   function base64ToArrayBuffer(base64) {
       let binary_string = window.atob(base64);
       let len = binary_string.length;
       let bytes = new Uint8Array(len);
       for (var i = 0; i < len; i++) {
           bytes[i] = binary_string.charCodeAt(i);
       }
       return bytes.buffer;
   }

   function playAudio(arrayBuffer) {
       let context = new (window.AudioContext || window.webkitAudioContext)();
       context.decodeAudioData(arrayBuffer, function(buffer) {
           let source = context.createBufferSource();
           source.buffer = buffer;
           source.connect(context.destination);
           source.start(0);
       }, function(error) {
           console.error("Error decoding audio data", error);
       });
   }