document.addEventListener('DOMContentLoaded', function() {
    const video = document.getElementById('video');
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    const scanButton = document.getElementById('scan-button');
    const stopButton = document.getElementById('stop-button');
    const cameraContainer = document.getElementById('camera-container');
    const scanPlaceholder = document.getElementById('scan-placeholder');
    const scanResult = document.getElementById('scan-result');
    const resultContent = document.getElementById('result-content');
    
    // 固定的sign_wg和kps_wg值，实际应用中可能需要动态生成
    const sign_wg = "AAQHaE4ww2nnIPvofH2SfMv3N6OplcPRjxlgScTZozm/ZCMfQP74bsMLyKW883hZCGY=";
    const kps_wg = "AARWcp9UM71t5VzV9i5pBJ4dLXjJ7EZL5a9qz2QVVQtkkmcqS4wQGYtk38CRzW6HH4+5c7qsB9/EtUgkWcd8x/k7h9+PmAHUDvxKHUWnX7iL3h2fH86XJ4cEqwvUnQ77QGs=";
    
    let scanning = false;
    let stream = null;
    let qrCodeToken = null;
    
    // 创建一个显示消息的函数，使用Element UI的Message组件
    function showMessage(message, type = 'info') {
        //确保ELEMENT已定义
        // 使用tailwindcss实现消息提示
        // 获取或创建消息容器
        let messageContainer = document.getElementById('message-container');
        if (!messageContainer) {
            messageContainer = document.createElement('div');
            messageContainer.id = 'message-container';
            messageContainer.className = 'fixed top-0 left-0 right-0 flex flex-col items-center mt-16 z-20 pointer-events-none';
            document.body.appendChild(messageContainer);
        }
        
        const messageDiv = document.createElement('div');
        messageDiv.textContent = message;
        messageDiv.className = `px-4 py-2 rounded-md shadow-md mb-2 max-w-xs sm:max-w-sm md:max-w-md break-words ${
            type === 'success' ? 'bg-green-500 text-white' :
            type === 'error' ? 'bg-red-500 text-white' :
            type === 'warning' ? 'bg-yellow-500 text-white' :
            'bg-blue-500 text-white'
        } transition-opacity duration-300 opacity-100`;
        
        messageContainer.appendChild(messageDiv);
        
        // 3秒后自动消失
        setTimeout(() => {
            messageDiv.classList.replace('opacity-100', 'opacity-0');
            setTimeout(() => {
                messageContainer.removeChild(messageDiv);
                // 如果没有消息了，移除容器
                if (messageContainer.children.length === 0) {
                    document.body.removeChild(messageContainer);
                }
            }, 300);
        }, 3000);
        //同时保留console.log以便调试
        console.log(message);
    }
    
    // 开始扫码
    scanButton.addEventListener('click', startScanning);
    
    // 停止扫码
    stopButton.addEventListener('click', stopScanning);
    
    function startScanning() {
        if (scanning) return;
        showMessage('开始扫码', 'success');
        // 显示摄像头区域，隐藏占位符
        cameraContainer.style.display = 'block';
        scanPlaceholder.style.display = 'none';
        scanResult.style.display = 'none';
        scanButton.style.display = 'none';
        stopButton.style.display = 'block';
        
        // 请求摄像头权限
        navigator.mediaDevices.getUserMedia({ 
            video: { 
                facingMode: 'environment',
                width: { ideal: 1280 },
                height: { ideal: 720 }
            } 
        })
        .then(function(mediaStream) {
            stream = mediaStream;
            video.srcObject = mediaStream;
            video.setAttribute('playsinline', true);
            video.play();
            scanning = true;
            requestAnimationFrame(tick);
            showMessage('摄像头已启动，请对准二维码', 'success');
        })
        .catch(function(error) {
            console.error('无法访问摄像头: ', error);
            showMessage('无法访问摄像头，请确保已授予摄像头权限', 'error');
            resetScanUI();
        });
    }
    
    function stopScanning() {
        if (!scanning) return;
        
        if (stream) {
            stream.getTracks().forEach(track => {
                track.stop();
            });
        }
        
        scanning = false;
        resetScanUI();
        showMessage('已停止扫码', 'warning');
    }
    
    function resetScanUI() {
        cameraContainer.style.display = 'none';
        scanPlaceholder.style.display = 'flex';
        stopButton.style.display = 'none';
        scanButton.style.display = 'block';
    }
    
    function tick() {
        if (!scanning) return;
        
        if (video.readyState === video.HAVE_ENOUGH_DATA) {
            // 设置canvas大小与视频一致
            canvas.width = video.videoWidth;
            canvas.height = video.videoHeight;
            
            // 在canvas上绘制当前视频帧
            ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
            
            // 获取图像数据
            const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
            
            // 使用jsQR库解析二维码
            const code = jsQR(imageData.data, imageData.width, imageData.height, {
                inversionAttempts: "dontInvert",
            });
            // 如果检测到二维码
            if (code) {
                // 使用Element UI的Message组件显示消息
                showMessage("检测到二维码: " + code.data, 'success');
                
                // 处理扫码结果
                handleScanResult(code.data);
                
                // 停止扫描
                stopScanning();
                return;
            }
        }
        
        // 继续扫描
        requestAnimationFrame(tick);
    }
    
    function handleScanResult(data) {
        // 显示扫码结果
        scanResult.style.display = 'block';
        resultContent.textContent = "扫码成功，正在处理...";
        
        try {
            // 从URL中提取token
            const tokenMatch = data.match(/token=([^&]+)/);
            if (tokenMatch && tokenMatch[1]) {
                qrCodeToken = tokenMatch[1];
                showMessage("提取到token: " + qrCodeToken, 'success');
                
                // 调用登录API
                showMessage(qrCodeToken,'success');
                callLoginAPI(qrCodeToken);
            } else {
                console.error("无法从二维码中提取token");
                showMessage("无法从二维码中提取token，请重试", 'error');
                resultContent.textContent = "无法从二维码中提取token，请重试";
            }
        } catch (e) {
            console.error("处理二维码内容失败:", e);
            showMessage("处理二维码内容失败: " + e.toString(), 'error');
            resultContent.textContent = "扫码内容处理失败: " + e.toString();
        }
    }
    
    // 调用夸克网盘登录API
    function callLoginAPI(token) {
        showMessage(token);
        resultContent.textContent = "正在登录...";
        showMessage("正在使用token登录...", 'info');
        // 生成时间戳作为vcode
        const vcode = new Date().getTime();
        showMessage(vcode, 'info');
        // request_id为vcode+5
        const request_id = vcode + 5;
        
        // 构建请求参数
        const formData = new FormData();
        formData.append('client_id', '532');
        formData.append('v', '1.2');
        formData.append('request_id', request_id.toString());
        formData.append('sign_wg', sign_wg);
        formData.append('kps_wg', kps_wg);
        formData.append('vcode', vcode.toString());
        formData.append('token', token);
        
        // 构建完整的URL
        const url = '/login';
        // 发送请求
        fetch(url, {
            method: 'POST',
            headers: {
                "Content-Type": "application/json; charset=utf-8"
            },
            body: JSON.stringify({"token":token}),
        })
        .then(response => {
            if (!response.status) {
                throw new Error('网络请求失败: ' + response.status);
            }
            return response.json();
        })
        .then(data => {
            showMessage("登录API响应: " + JSON.stringify(data), 'info');
            
            if (data && data.status) {
                // 登录成功，设置Cookie
                resultContent.textContent = "登录成功";
                showMessage("登录成功！", 'success');
            } else {
                // 登录失败
                resultContent.textContent = "登录失败: " + (data.msg || "未知错误");
                showMessage("登录失败: " + (data.msg || "未知错误"), 'error');
            }
        })
        .catch(error => {
            console.error("登录请求失败:", error);
            resultContent.textContent = "登录请求失败: " + error.toString();
            showMessage("登录请求失败: " + error.toString(), 'error');
        });
    }
});