// v1.0.0
console.log("Loading chatbot...");

let dynamicMinimisedContainerNoPopupDimensions = {
  width: 0,
  height: 0
};

let dynamicMinimisedContainerWithPopupDimensions = {
  width: 0,
  height: 0
};

let chatbotTotalWidth = 0;
let chatbotTotalHeight = 0;

// Wait for DOM to be ready
if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', initChatbot);
} else {
  initChatbot();
}

function initChatbot() {
  (function() {
    const botId = document.querySelector('meta[name="chatbot-botid"]').getAttribute('content');
    const domain = document.querySelector('meta[name="chatbot-domain"]').getAttribute('content');

    // Create and inject styles
    const style = document.createElement('style');
    style.textContent = `
      .chatbot-iframe-wrapper {
        min-height: 96px;
        min-width: 100px;
        width: clamp(100px, 100%, 448px);
        height: clamp(96px, 100%, 804px);
        display: initial !important;
        z-index: 999;
        position: fixed !important;
        bottom: 10px !important;
        right: 10px !important;
        box-shadow: 0px 1px 5px 0 rgba(0, 0, 0, .2) !important;
        border-radius: 16px !important;
      }

      .chatbot-iframe-wrapper.closed {
        // width: fit-content;
        // height: fit-content;
        box-shadow: none !important;
      }

      .chatbot-iframe-wrapper iframe {
        display: initial !important;
        width: 100% !important;
        height: 100% !important;
        border: none !important;
        position: absolute !important;
        background: transparent !important;
        border-radius: 16px !important;
      }

      .chatbot-iframe-wrapper:not(.closed) iframe {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
      }

      @media (max-width: 768px) {
        .chatbot-iframe-wrapper {
          bottom: 0 !important;
          right: 0 !important;
        }
      }
    `;
    document.head.appendChild(style);

    // Create and inject iframe wrapper
    
    const wrapper = document.createElement('div');
    wrapper.className = 'chatbot-iframe-wrapper closed';
    
    const iframe = document.createElement('iframe');
    iframe.src = `${domain}/bots/${botId}/chat`;
    iframe.title = 'Surgery Assist v1.2';
    
    // Set up message handling
    iframe.addEventListener('load', () => {
      iframe.contentWindow.postMessage('currentUrl:' + window.location.href, '*');

      iframe.contentWindow.postMessage({
        type: 'getDynamicMinimisedContainerDimensions'
      }, '*');
    });

    wrapper.appendChild(iframe);
    document.body.appendChild(wrapper);
  })();
  
}

window.addEventListener('message', (event) => {
  console.log('message event', event);
  console.log('message data', event.data);
  // Ensure wrapper is accessible in this scope
  const wrapperElement = document.querySelector('.chatbot-iframe-wrapper');
  if (!wrapperElement) return;
  
  if (event.data === 'chatStatus:chatClosed') {
    console.log('chatStatus:chatClosed');
    wrapperElement.classList.add('closed');

    wrapperElement.style.width = dynamicMinimisedContainerNoPopupDimensions.width + 'px';
    wrapperElement.style.height = dynamicMinimisedContainerNoPopupDimensions.height + 'px';
  }
  else if (event.data === 'chatStatus:chatOpen') {
    console.log('chatStatus:chatOpen');
    wrapperElement.classList.remove('closed');

    wrapperElement.style.width = '';
    wrapperElement.style.height = '';
  } 
  else if (event.data?.type === 'dimensionsResponse') {
    const iconAndPopupHeightDifference = 20;
    const extraShadowWidth = 10;
    
    const engagementPopupDimensions = event.data.engagementPopupDimensions;
    const chatbotIconDimensions = event.data.chatbotIconDimensions;

    dynamicMinimisedContainerNoPopupDimensions.width = chatbotIconDimensions.width;
    dynamicMinimisedContainerNoPopupDimensions.height = chatbotIconDimensions.height;

    dynamicMinimisedContainerWithPopupDimensions.width = engagementPopupDimensions.width + extraShadowWidth;
    dynamicMinimisedContainerWithPopupDimensions.height = engagementPopupDimensions.height + chatbotIconDimensions.height + iconAndPopupHeightDifference;

    if (wrapperElement.classList.contains('closed')) {
      wrapperElement.style.width = dynamicMinimisedContainerNoPopupDimensions.width + 'px';
      wrapperElement.style.height = dynamicMinimisedContainerNoPopupDimensions.height + 'px';
    }
  }
  else if (event.data === 'chatStatus:popupOpen') {
    console.log('chatStatus:popupOpen');

    if (wrapperElement.classList.contains('closed')) {
      wrapperElement.style.width = dynamicMinimisedContainerWithPopupDimensions.width + 'px';
      wrapperElement.style.height = dynamicMinimisedContainerWithPopupDimensions.height + 'px';
    }
  }
  else if (event.data === 'chatStatus:popupClosed') {
    console.log('chatStatus:popupClosed');

    if (wrapperElement.classList.contains('closed')) {
      wrapperElement.style.width = dynamicMinimisedContainerNoPopupDimensions.width + 'px';
      wrapperElement.style.height = dynamicMinimisedContainerNoPopupDimensions.height + 'px';
    }
  }
});