// main.js

// 当整个页面的HTML内容加载完成后，执行此函数
document.addEventListener('DOMContentLoaded', () => {
    // 获取页面上的关键元素
    const textInput = document.getElementById('text-input');
    const generateBtn = document.getElementById('generate-btn');
    const qrcodeContainer = document.getElementById('qrcode-container');

    // 为“生成二维码”按钮添加点击事件监听器
    generateBtn.addEventListener('click', () => {
        // 获取输入框中的文本，并用 trim() 清除前后的空白字符
        const text = textInput.value.trim();

        // 在生成新的二维码之前，清空之前可能存在的旧二维码
        qrcodeContainer.innerHTML = '';

        // 如果文本为空，则不执行任何操作
        if (!text) {
            console.log('输入内容为空，已中止生成。');
            return;
        }

        // --- 智能分割逻辑 ---
        // 我们使用一个固定的字节数上限。这是二维码国标（GB/T 18284-2000）规定的，
        // 在版本40、纠错等级H（最高）的情况下，最大可容纳的字节数。
        const MAX_BYTES_PER_QR = 1273;
        const textEncoder = new TextEncoder(); // 用于计算字符串的UTF-8字节长度
        const chunks = [];
        let currentPos = 0;

        while (currentPos < text.length) {
            // 使用二分查找来高效地找到当前位置后，能容纳在单个二维码中的最长子字符串
            let low = currentPos;
            let high = text.length;
            let bestEnd = currentPos;

            while (low <= high) {
                const mid = Math.floor((low + high) / 2);

                // mid不能停在原点，否则会死循环
                if (mid === currentPos) {
                    low = mid + 1;
                    continue;
                }

                const substring = text.substring(currentPos, mid);
                const byteLength = textEncoder.encode(substring).length;

                if (byteLength <= MAX_BYTES_PER_QR) {
                    // 如果当前子字符串的字节长度在限制内，说明它是一个有效的块
                    // 我们记录下这个有效的终点，并尝试寻找更长的块
                    bestEnd = mid;
                    low = mid + 1;
                } else {
                    // 如果超出了字节限制，则需要缩短子字符串的长度
                    high = mid - 1;
                }
            }

            // 处理极端情况：如果单个字符的字节数就超过了上限，我们也只能把它单独作为一个块
            if (bestEnd === currentPos && currentPos < text.length) {
                bestEnd = currentPos + 1;
            }

            // 将找到的最佳块添加到数组中
            chunks.push(text.substring(currentPos, bestEnd));
            // 从新的位置继续寻找下一个块
            currentPos = bestEnd;
        }

        const totalChunks = chunks.length;
        console.log(`总字符数: ${text.length}，通过智能分割，将生成 ${totalChunks} 个二维码。`);

        // --- 循环生成二维码 ---
        chunks.forEach((chunk, i) => {
            // --- 创建包裹单个二维码及其标签的容器 ---
            const itemDiv = document.createElement('div');
            itemDiv.className = 'qrcode-item';

            // --- 创建并添加序号标签 ---
            const label = document.createElement('p');
            label.className = 'qrcode-label';
            label.textContent = totalChunks > 1 ? `二维码 ${i + 1}/${totalChunks}` : '二维码';
            itemDiv.appendChild(label);

            // --- 创建用于绘制二维码的 <canvas> 元素 ---
            const canvas = document.createElement('canvas');
            itemDiv.appendChild(canvas);

            qrcodeContainer.appendChild(itemDiv);

            // --- 使用 QRCode.toCanvas 方法将二维码绘制到指定的 canvas 上 ---
            QRCode.toCanvas(
                canvas,
                chunk,
                {
                    margin: 2, // 二维码边距
                    color: {
                        dark: '#000000', // 二维码深色部分
                        light: '#ffffff', // 二维码浅色部分
                    },
                    errorCorrectionLevel: 'H', // 纠错级别: 'L', 'M', 'Q', 'H'
                },
                function (error) {
                    if (error) {
                        console.error(`为第 ${i + 1} 块内容生成二维码时出错:`, error);
                        // 如果生成失败，在 canvas 上显示错误信息
                        const ctx = canvas.getContext('2d');
                        if (ctx) {
                            // 设置一个基础尺寸，以防canvas没有宽高
                            canvas.width = 400;
                            canvas.height = 400;
                            ctx.font = '20px Arial';
                            ctx.fillStyle = 'red';
                            ctx.textAlign = 'center';
                            ctx.textBaseline = 'middle';
                            ctx.fillText('二维码生成失败', canvas.width / 2, canvas.height / 2);
                        }
                    } else {
                        console.log(`已成功为第 ${i + 1} 块内容生成二维码。`);
                    }
                }
            );
        });
    });
});