import DisableDevtool from 'disable-devtool'
import { ElMessageBox } from 'element-plus'

/**
 * 安全警告的HTML模板, 使用Tailwind CSS样式
 */
const SECURITY_WARNING_TEMPLATE = `
<div class='flex flex-col items-center gap-4 p-2'>
  <div class='text-red-500 dark:text-red-400'>
    <i class='el-icon-warning text-2xl'></i>
  </div>
  <div class='text-center'>
    <p class='text-base font-medium text-gray-900 dark:text-gray-100'>
      不合规操作，系统将在5秒后自动关闭退出！
    </p>
    <p class='mt-2 text-sm text-gray-600 dark:text-gray-400'>
      如您频繁此类操作，系统将记录上报。
    </p>
  </div>
</div>`

/**
 * Element Plus 消息框配置选项
 */
const ALERT_OPTIONS = {
	type: 'error',
	showClose: false,
	center: true,
	closeOnClickModal: false,
	closeOnPressEscape: false,
	dangerouslyUseHTMLString: true,
}

export default () => {
	if (import.meta.env.VITE_APP_DEBUG_SWITCH === 'false') return

	const debugKey = import.meta.env.VITE_APP_DEBUG_KEY
	let flag = false
	DisableDevtool({
		md5: DisableDevtool.md5(debugKey),
		disableMenu: false,
		ondevtoolopen: (type, next) => {
			if (!flag) ElMessageBox.alert(SECURITY_WARNING_TEMPLATE, '安全警告', ALERT_OPTIONS)
			flag = true
			setTimeout(() => {
				next()
			}, 5000)
		},
	})
}