function embedChatbot () {
	const config = window.chat53aiCfg || {}
	config.lang = config.lang || 'show'
	config.name = config.name || '在线客服'
	config.logo = config.logo || 'https://chat.53ai.com/images/robot_icon.png'
	config.position = config.position || {
		right: '55px',
		bottom: '196px'
	}
	const isInMobile = /Android|iPhone|SymbianOS|Windows Phone|iPad|iPod/gi.test(navigator.userAgent)
	if (!config || !config.token) {
    console.error('53aiChatbotConfig is empty or token is not provided')
		return
	}
	function isIPURL(url) {
    const regex = /^(https?:\/\/)?((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)(\/.*)?$/;
    return regex.test(url);
	}
	let baseUrl = ''
	if (isIPURL(location.href)) {
		baseUrl = 'http://chat53dev.53ai.com'
	} else {
		baseUrl = ['chat53dev.53ai.com', 'chatrc.53ai.com', 'chat.53ai.com', 'chatrcdev.53ai.com'].includes(location.host) ? location.origin : 'https://chat.53ai.com'
	}

  // create iframe
  function createIframe () {
    const iframe = document.createElement('iframe');
    iframe.allow = "fullscreen;microphone"
    iframe.title = "53ai chatbot bubble window"
    iframe.id = '53ai_chatbot_bubble_window'
    iframe.src = `${baseUrl}/botplugin/?token=${config.token}&form=embed&lang=${config.lang}${ config.timeout ? `&timeout=${config.timeout}` : '' }`
		const zIndex = '2147483646'

		if (isInMobile) {
			const iframeMask = document.createElement('div')
			iframeMask.id = '53ai_chatbot_bubble_mask'
			iframeMask.style.cssText = 'position: fixed; left: 0; right: 0; top: 0; bottom: 0; background: rgba(0, 0, 0 , 0.6); z-index: 2147483646;';
			document.body.appendChild(iframeMask);

			iframe.style.cssText = 'border: none; position: fixed; box-shadow: rgba(150, 150, 150, 0.2) 0px 10px 30px 0px, rgba(150, 150, 150, 0.2) 0px 0px 0px 1px; top: 88px; bottom: 0; left: 0; right: 0; width: 100%; height: calc(100vh - 88px); z-index: 2147483647; background-color: #F3F4F6;'
		} else {
			iframe.style.cssText = 'border: none; position: fixed; box-shadow: rgba(150, 150, 150, 0.2) 0px 10px 30px 0px, rgba(150, 150, 150, 0.2) 0px 0px 0px 1px; top: 0; bottom: 0; right: 0; width: 440px; height: 100%; z-index: 2147483647; background-color: #F3F4F6;'
		}
    document.body.appendChild(iframe);
  }

	const targetButton = document.getElementById('chat_53ai_com_plugin')
	if (!targetButton) {
    const containerDiv = document.createElement("div")
		containerDiv.id = 'chat_53ai_com_plugin'
		if (isInMobile) {
			containerDiv.style.cssText = 'position: fixed; right: 10px; bottom: 144px; z-index: 999; cursor: pointer; '
			containerDiv.innerHTML = `
				<div style="width: 40px; height: 40px; margin: 0 auto -12px; border-radius: 40px; overflow: hidden; position: relative;">
					<img style="position: absolute; left: 0; top: 0; width: 100%; height: 100%;" src="proxy.php?url=${ config.logo }" alt="">
				</div>
				<div style="width: 72px; height: 24px; line-height: 24px; padding: 0 10px; box-sizing: border-box; border-radius: 24px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; background: rgba(255, 255, 255, 1); box-shadow: 0px 4px 10px  rgba(0, 0, 0, 0.5); position: relative; z-index: 2; font-size: 12px; font-weight: 500; color: rgba(37, 99, 235, 1);">
				${ config.name }
				</div>
			`
		} else {
			containerDiv.style.cssText = 'position: fixed; right: '+ config.position.right +'; bottom: '+ config.position.bottom +'; z-index: 999; cursor: pointer; '
			containerDiv.innerHTML = `
				<div style="width: 90px; height: 90px; margin: 0 auto -30px; border-radius: 90px; overflow: hidden; position: relative;">
						<img style="position: absolute; left: 0; top: 0; width: 100%; height: 100%;" src="proxy.php?url=${config.logo }" alt="">
					</div>
					<div style="width: 136px; height: 42px; line-height: 42px; padding: 0 10px; box-sizing: border-box; border-radius: 42px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; background: rgba(255, 255, 255, 1); box-shadow: 0px 2px 4px  rgba(37, 99, 235, 0.6); position: relative; z-index: 2; font-size: 18px; font-weight: 500; color: rgba(37, 99, 235, 1);">
						${ config.name }
					</div>
			`
		}

		containerDiv.addEventListener('click', function () {
      const targetIframe = document.getElementById('53ai_chatbot_bubble_window')
      const maskIframe = document.getElementById('53ai_chatbot_bubble_mask')
      if (!targetIframe) {
        createIframe()
        return;
      }
      if (targetIframe.style.display === 'none') {
        targetIframe.style.display = 'block';
				if (maskIframe) maskIframe.style.display = 'block'
      } else {
        targetIframe.style.display = 'none';
      }
		})
		document.body.appendChild(containerDiv)
	}


	window.addEventListener("message", (event)=>{
		const data = event.data || { type: '' }
		if (data.type === 'close') {
			const targetIframe = document.getElementById('53ai_chatbot_bubble_window')
			targetIframe && (targetIframe.style.display = 'none')
			const maskIframe = document.getElementById('53ai_chatbot_bubble_mask')
			maskIframe && (maskIframe.style.display = 'none')
		}
	}, false);
}

document.body.onload = embedChatbot