import { Conversation } from 'https://cdn.skypack.dev/@elevenlabs/client';

let conversation = null;
let inCall = false;

document.addEventListener('JSsucks', () => {

  const callBtn = document.getElementById('callBtn');

  callBtn.addEventListener('click', async () => {
    if (!inCall) {
      console.log('Requesting microphone access...');

      try {
        await navigator.mediaDevices.getUserMedia({ audio: true });
      } catch (error) {
        console.log('Microphone access denied.');
        return;
      }

      console.log('Connecting to agent...');

      try {
        conversation = await Conversation.startSession({
          agentId: 'agent_01jx2xm2w4exwvjhbq52js687f',
          connectionType: 'websocket',
          onConnect: () => {
            console.log('✅ Connected to AI Agent!');
            callBtn.style.color = 'red';
            inCall = true;
          },
          onDisconnect: () => {
            console.log('🔌 Disconnected.');
            callBtn.style.color = 'grey';
            inCall = false;
          },
          onError: (err) => {
            console.log(`❌ Error: ${err.message || err}`);
          },
          onMessage: (msg) => {
            console.log('Agent:', msg);
          },
        });
      } catch (err) {
        console.log('Failed to start session.');
        console.error(err);
      }
    } else {
      console.log('Hanging up...');
      try {
        await conversation.endSession();
        conversation = null;
        inCall = false;
        callBtn.style.color = 'grey';
        console.log('✅ Call ended.');
      } catch (err) {
        console.error('Error ending the call:', err);
      }
    }
  });
});