// decode.js
// This file will contain the logic for the QR code decoding feature.

document.addEventListener('DOMContentLoaded', () => {
    console.log('解码页面脚本已加载。');

    // 获取页面上的关键元素
    const qrInput = document.getElementById('qr-input');
    const imagePreviewContainer = document.getElementById('image-preview-container');
    const decodeBtn = document.getElementById('decode-btn');
    const resultText = document.getElementById('result-text');
    const copyBtn = document.getElementById('copy-btn');

    // 初始化 SortableJS，为预览容器开启拖拽排序功能
    new Sortable(imagePreviewContainer, {
        animation: 150, // 拖拽动画的毫秒数
        ghostClass: 'sortable-ghost', // 拖拽时占位元素的类名
    });

    // 监听文件输入框的 change 事件
    qrInput.addEventListener('change', handleFileSelect);

    /**
     * 处理用户选择的文件
     * @param {Event} event - input change 事件对象
     */
    function handleFileSelect(event) {
        // 获取用户选择的文件列表
        const files = event.target.files;
        if (!files) {
            return;
        }

        // 遍历所有选择的文件
        for (const file of files) {
            // 确保文件是图片类型
            if (!file.type.startsWith('image/')) {
                continue;
            }

            const reader = new FileReader();

            // 文件读取成功后的回调
            reader.onload = function (e) {
                createPreview(e.target.result, file.name);
            };

            // 以 Data URL 的格式读取文件
            reader.readAsDataURL(file);
        }

        // 清空 input 的值，这样即使用户连续选择相同的文件也能触发 change 事件
        qrInput.value = '';
    }

    /**
     * 创建并显示单个图片预览
     * @param {string} src - 图片的 Data URL
     * @param {string} name - 图片的文件名
     */
    function createPreview(src, name) {
        // 创建预览项的容器
        const previewItem = document.createElement('div');
        previewItem.className = 'preview-item';
        previewItem.title = name; // 鼠标悬停时显示文件名

        // 创建图片元素
        const img = document.createElement('img');
        img.src = src;
        img.alt = name;

        // 创建移除按钮
        const removeBtn = document.createElement('button');
        removeBtn.className = 'remove-btn';
        removeBtn.textContent = '×';
        removeBtn.title = '移除此图片';

        // 为移除按钮添加点击事件
        removeBtn.addEventListener('click', (e) => {
            e.stopPropagation(); // 防止触发其他事件
            previewItem.remove(); // 从 DOM 中移除预览项
        });

        // 将图片和移除按钮添加到预览项容器中
        previewItem.appendChild(img);
        previewItem.appendChild(removeBtn);

        // 将预览项添加到主预览容器中
        imagePreviewContainer.appendChild(previewItem);
    }

    // 为解码按钮添加点击事件
    decodeBtn.addEventListener('click', () => {
        // 清空之前的结果
        resultText.value = '';

        // 获取所有预览项中的图片元素，它们的顺序就是用户拖拽后的顺序
        const images = imagePreviewContainer.querySelectorAll('.preview-item img');

        if (images.length === 0) {
            resultText.value = '请先上传至少一张二维码图片。';
            return;
        }

        const decodedParts = [];
        let completed = 0;

        // 遍历所有图片进行解码
        images.forEach((img, index) => {
            const decodedText = decodeImage(img);
            decodedParts[index] = decodedText;
            completed++;

            // 当所有图片都处理完毕后，拼接结果
            if (completed === images.length) {
                resultText.value = decodedParts.join('');
            }
        });
    });

    /**
     * 解码单个图片元素
     * @param {HTMLImageElement} img - 要解码的图片元素
     * @returns {string} - 解码后的文本，或者一个错误提示
     */
    function decodeImage(img) {
        // 创建一个临时的、离屏的 canvas
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d', { willReadFrequently: true });

        // --- 图片缩放逻辑 ---
        // 定义一个用于处理的最大尺寸，过大的图片会导致 jsQR 性能下降或失败
        const MAX_DIMENSION = 1000;
        let { naturalWidth: width, naturalHeight: height } = img;

        // 如果图片尺寸过大，则按比例缩小
        if (width > MAX_DIMENSION || height > MAX_DIMENSION) {
            if (width > height) {
                height = Math.round(height * (MAX_DIMENSION / width));
                width = MAX_DIMENSION;
            } else {
                width = Math.round(width * (MAX_DIMENSION / height));
                height = MAX_DIMENSION;
            }
        }

        // 设置 canvas 的尺寸为计算后的尺寸
        canvas.width = width;
        canvas.height = height;

        // 将图片（可能会被缩放）绘制到 canvas 上
        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

        // 从 canvas 获取图像数据
        const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
        
        try {
            // 使用 jsQR 库解码
            const code = jsQR(imageData.data, imageData.width, imageData.height);
            
            if (code && code.data) {
                // 解码成功，返回文本内容
                return code.data;
            } else {
                // 未找到二维码
                return `[图片 ${img.alt} 未能识别出二维码]`;
            }
        } catch (error) {
            console.error(`解码图片 ${img.alt} 时发生错误:`, error);
            return `[图片 ${img.alt} 解码失败]`;
        }
    }

    // 为复制按钮添加点击事件
    copyBtn.addEventListener('click', () => {
        const textToCopy = resultText.value;
        if (!textToCopy) {
            return;
        }

        navigator.clipboard
            .writeText(textToCopy)
            .then(() => {
                // 复制成功后的用户反馈
                const originalText = copyBtn.textContent;
                copyBtn.textContent = '已复制!';
                copyBtn.disabled = true;
                setTimeout(() => {
                    copyBtn.textContent = originalText;
                    copyBtn.disabled = false;
                }, 2000);
            })
            .catch((err) => {
                console.error('复制文本失败:', err);
                // 可以选择在这里给用户一个错误提示
                alert('复制失败，您的浏览器可能不支持或未授权剪贴板操作。');
            });
    });
});