// 极简邀请函制作工具
(function() {
    const fileInput = document.getElementById('fileInput');
    const addImageBtn = document.getElementById('addImageBtn');
    const saveBtn = document.getElementById('saveBtn');
    const imageContainer = document.getElementById('imageContainer');
    const bgLayer = document.getElementById('bgLayer');
    const bgImage = document.getElementById('bgImage');
    const emptyTip = document.getElementById('emptyTip');
    const input1 = document.getElementById('input1');
    const input2 = document.getElementById('input2');
    const exportCanvas = document.getElementById('exportCanvas');
    const longPressTip = document.getElementById('longPressTip');
    const canvasArea = document.getElementById('canvasArea');

    let currentImage = null;
    let selectedInput = null;
    let editingInput = null;
    let longPressTimer = null;

    // 图片滑动调整位置相关变量
    let imageOffsetX = 0;
    let isDraggingImage = false;
    let imageStartX = 0;
    let imageStartOffsetX = 0;
    let minOffsetX = 0;
    let maxOffsetX = 0;

    // 初始化
    init();

    function init() {
        // 添加图片按钮
        addImageBtn.addEventListener('click', () => {
            fileInput.click();
        });

        // 文件选择
        fileInput.addEventListener('change', (e) => {
            const file = e.target.files[0];
            if (file) {
                loadImage(file);
            }
            fileInput.value = '';
        });

        // 保存按钮
        saveBtn.addEventListener('click', saveImage);

        // 初始化输入框
        initInput(input1);
        initInput(input2);

        // 初始化图片滑动
        initImageDrag();

        // 点击空白区域取消选中
        document.addEventListener('click', (e) => {
            // 只有点击真正的空白区域（不是输入框，不是图片容器）才取消选中
            const isTextInput = e.target.closest('.text-input');
            const isImageContainer = e.target.closest('.image-container');
            const isToolbar = e.target.closest('.toolbar');

            if (!isTextInput && !isImageContainer && !isToolbar) {
                deselectAll();
            }
        });

        // 点击容器空白处取消选中
        imageContainer.addEventListener('click', (e) => {
            // 如果点击的是容器本身或背景图层，取消输入框选中
            if (e.target === imageContainer || e.target === bgLayer || e.target === bgImage) {
                deselectAll();
            }
        });

        // 初始化长按保存（只在3:5预览区域）
        initLongPressSave();

        // 初始化右键菜单（只在3:5预览区域）
        initContextMenu();

        // 显示长按提示
        setTimeout(() => {
            longPressTip.classList.add('show');
            setTimeout(() => {
                longPressTip.classList.remove('show');
            }, 3000);
        }, 1000);
    }

    // 加载图片
    function loadImage(file) {
        const reader = new FileReader();
        reader.onload = (e) => {
            const img = new Image();
            img.onload = () => {
                currentImage = img;
                bgImage.src = img.src;
                imageContainer.classList.remove('empty');
                emptyTip.classList.add('hidden');
                // 计算图片尺寸和边界
                calculateImageBounds();
                // 背景图选择后默认居中显示
                imageOffsetX = 0;
                updateImagePosition();
            };
            img.src = e.target.result;
        };
        reader.readAsDataURL(file);
    }

    // 计算图片滑动边界
    function calculateImageBounds() {
        if (!currentImage) return;

        const containerWidth = imageContainer.clientWidth;
        const containerHeight = imageContainer.clientHeight;
        const imgRatio = currentImage.naturalWidth / currentImage.naturalHeight;
        const containerRatio = containerWidth / containerHeight;

        let imgWidth, imgHeight;

        if (imgRatio > containerRatio) {
            // 图片更宽，以高度为基准计算宽度
            imgHeight = containerHeight;
            imgWidth = imgHeight * imgRatio;
        } else {
            // 图片更高或等比，以宽度为基准
            imgWidth = containerWidth;
            imgHeight = imgWidth / imgRatio;
        }

        // 计算滑动边界：严格以图片边缘为边界，不能露出白板
        // 滑动公式：imageOffsetX = imageStartOffsetX + deltaX
        // 手指向右滑动(deltaX>0) → imageOffsetX增大 → 图片右移，显示右侧
        // 手指向左滑动(deltaX<0) → imageOffsetX减小 → 图片左移，显示左侧
        // 初始位置居中：imageOffsetX = 0，此时 baseLeft 已使图片居中
        if (imgWidth > containerWidth) {
            // 图片宽度大于容器，可以滑动
            // minOffsetX = -(imgWidth - containerWidth) / 2：向左滑到极限（显示左侧）
            // maxOffsetX = (imgWidth - containerWidth) / 2：向右滑到极限（显示右侧）
            const halfRange = (imgWidth - containerWidth) / 2;
            minOffsetX = -halfRange;
            maxOffsetX = halfRange;
        } else {
            // 图片宽度小于等于容器，居中显示，不能滑动
            minOffsetX = 0;
            maxOffsetX = 0;
        }
    }

    // 更新图片位置
    function updateImagePosition() {
        if (!currentImage) return;

        // 限制滑动范围，确保不露出白板
        imageOffsetX = Math.max(minOffsetX, Math.min(maxOffsetX, imageOffsetX));

        const containerWidth = imageContainer.clientWidth;
        const containerHeight = imageContainer.clientHeight;
        const imgRatio = currentImage.naturalWidth / currentImage.naturalHeight;
        const containerRatio = containerWidth / containerHeight;

        let imgWidth, imgHeight;

        if (imgRatio > containerRatio) {
            imgHeight = containerHeight;
            imgWidth = imgHeight * imgRatio;
        } else {
            imgWidth = containerWidth;
            imgHeight = imgWidth / imgRatio;
        }

        // 应用位置
        const baseLeft = (containerWidth - imgWidth) / 2;
        bgImage.style.width = imgWidth + 'px';
        bgImage.style.height = imgHeight + 'px';
        bgImage.style.left = (baseLeft + imageOffsetX) + 'px';
        bgImage.style.transform = 'none';
    }

    // 初始化图片滑动调整位置
    function initImageDrag() {
        // 鼠标按下
        imageContainer.addEventListener('mousedown', handleImageStart);
        imageContainer.addEventListener('touchstart', handleImageStart, { passive: false });

        // 鼠标移动
        document.addEventListener('mousemove', handleImageMove);
        document.addEventListener('touchmove', handleImageMove, { passive: false });

        // 鼠标释放
        document.addEventListener('mouseup', handleImageEnd);
        document.addEventListener('touchend', handleImageEnd);

        function handleImageStart(e) {
            // 如果点击的是输入框，不处理图片滑动
            if (e.target.closest('.text-input')) {
                return;
            }

            // 如果没有图片，不处理
            if (!currentImage) {
                return;
            }

            const isTouch = e.type === 'touchstart';
            const clientX = isTouch ? e.touches[0].clientX : e.clientX;

            // 只有点击图片本身或背景图层时才启动图片滑动
            const isImageOrBgLayer = e.target === bgImage || 
                                     e.target === bgLayer || 
                                     e.target === imageContainer;
            
            if (!isImageOrBgLayer) {
                return;
            }

            isDraggingImage = true;
            imageStartX = clientX;
            imageStartOffsetX = imageOffsetX;

            if (isTouch) {
                e.preventDefault();
            }
        }

        function handleImageMove(e) {
            if (!isDraggingImage) return;

            const isTouch = e.type === 'touchmove';
            const clientX = isTouch ? e.touches[0].clientX : e.clientX;

            const deltaX = clientX - imageStartX;
            // 反转拖拽：手指向右滑动(deltaX>0) → imageOffsetX增大 → 图片右移，显示右侧
            // 手指向左滑动(deltaX<0) → imageOffsetX减小 → 图片左移，显示左侧
            imageOffsetX = imageStartOffsetX + deltaX;

            updateImagePosition();

            if (isTouch) {
                e.preventDefault();
            }
        }

        function handleImageEnd() {
            isDraggingImage = false;
        }
    }

    // 初始化输入框 - 每个输入框独立管理自己的拖拽状态
    function initInput(element) {
        let isMouseDown = false;
        let isDragging = false;
        let dragTimer = null;
        let startX, startY, startLeft, startTop;
        let clickStartTime = 0;
        let clickStartX = 0;
        let clickStartY = 0;
        let hasMoved = false;

        // 鼠标/触摸按下
        element.addEventListener('mousedown', handleStart);
        element.addEventListener('touchstart', handleStart, { passive: false });

        function handleStart(e) {
            const isTouch = e.type === 'touchstart';
            const clientX = isTouch ? e.touches[0].clientX : e.clientX;
            const clientY = isTouch ? e.touches[0].clientY : e.clientY;

            isMouseDown = true;
            clickStartTime = Date.now();
            clickStartX = clientX;
            clickStartY = clientY;
            hasMoved = false;
            isDragging = false;

            // 如果正在编辑此输入框，不处理
            if (editingInput === element) {
                return;
            }

            // 选中此输入框
            selectInput(element);

            startX = clientX;
            startY = clientY;
            startLeft = element.offsetLeft;
            startTop = element.offsetTop;

            // 延迟判断是否为拖拽
            dragTimer = setTimeout(() => {
                if (isMouseDown) {
                    isDragging = true;
                    element.classList.add('dragging');
                }
            }, 150);

            if (isTouch) {
                e.preventDefault();
            }

            // 阻止事件冒泡，避免触发图片滑动
            e.stopPropagation();
        }

        // 鼠标/触摸移动
        element.addEventListener('mousemove', handleMove);
        element.addEventListener('touchmove', handleMove, { passive: false });

        function handleMove(e) {
            if (!isMouseDown) return;
            if (!selectedInput || editingInput === element) return;

            const isTouch = e.type === 'touchmove';
            const clientX = isTouch ? e.touches[0].clientX : e.clientX;
            const clientY = isTouch ? e.touches[0].clientY : e.clientY;

            const moveDistance = Math.sqrt(
                Math.pow(clientX - clickStartX, 2) +
                Math.pow(clientY - clickStartY, 2)
            );

            if (moveDistance > 5) {
                hasMoved = true;
                if (dragTimer) {
                    clearTimeout(dragTimer);
                    dragTimer = null;
                }
                if (!isDragging) {
                    isDragging = true;
                    element.classList.add('dragging');
                }
            }

            if (isDragging) {
                const dx = clientX - startX;
                const dy = clientY - startY;
                element.style.left = (startLeft + dx) + 'px';
                element.style.top = (startTop + dy) + 'px';
                if (isTouch) {
                    e.preventDefault();
                }
            }

            // 阻止事件冒泡和默认行为，确保输入框拖动完全独立，不影响背景图
            e.stopPropagation();
            if (isTouch) {
                e.preventDefault();
            }
        }

        // 鼠标/触摸释放
        element.addEventListener('mouseup', handleEnd);
        element.addEventListener('touchend', handleEnd);

        element.addEventListener('mouseleave', (e) => {
            if (isMouseDown) {
                handleEnd(e);
            }
        });

        function handleEnd(e) {
            isMouseDown = false;

            if (dragTimer) {
                clearTimeout(dragTimer);
                dragTimer = null;
            }

            if (isDragging) {
                isDragging = false;
                element.classList.remove('dragging');
            }

            // 阻止事件冒泡
            if (e) {
                e.stopPropagation();
            }
        }

        // 双击进入编辑模式
        element.addEventListener('dblclick', (e) => {
            e.stopPropagation();
            startEdit(element);
        });

        // 触摸双击检测
        let lastTapTime = 0;
        element.addEventListener('touchend', (e) => {
            const currentTime = Date.now();
            if (currentTime - lastTapTime < 300) {
                e.preventDefault();
                e.stopPropagation();
                startEdit(element);
            }
            lastTapTime = currentTime;
        });
    }

    // 选中输入框
    function selectInput(element) {
        if (editingInput && editingInput !== element) {
            endEdit(editingInput);
        }

        if (selectedInput && selectedInput !== element) {
            selectedInput.classList.remove('selected');
        }

        selectedInput = element;
        element.classList.add('selected');
        element.classList.remove('editing');
        element.contentEditable = 'false';
    }

    // 开始编辑
    function startEdit(element) {
        if (editingInput && editingInput !== element) {
            endEdit(editingInput);
        }

        editingInput = element;
        selectedInput = element;

        element.classList.add('editing');
        element.classList.remove('selected');
        element.contentEditable = 'true';
        element.focus();

        // 光标定位到末尾
        const range = document.createRange();
        const sel = window.getSelection();
        range.selectNodeContents(element);
        range.collapse(false);
        sel.removeAllRanges();
        sel.addRange(range);

        if ('virtualKeyboard' in navigator) {
            navigator.virtualKeyboard.show();
        }
    }

    // 结束编辑
    function endEdit(element) {
        element.classList.remove('editing');
        element.contentEditable = 'false';
        element.blur();
        editingInput = null;
    }

    // 取消所有选中
    function deselectAll() {
        if (editingInput) {
            endEdit(editingInput);
        }
        if (selectedInput) {
            selectedInput.classList.remove('selected');
            selectedInput = null;
        }
    }

    // 初始化长按保存（只在3:5预览区域）
    function initLongPressSave() {
        // 只在图片容器上触发长按保存
        imageContainer.addEventListener('touchstart', (e) => {
            // 如果触摸的是输入框，不触发长按保存
            if (e.target.closest('.text-input')) {
                return;
            }

            longPressTimer = setTimeout(() => {
                if (navigator.vibrate) {
                    navigator.vibrate(50);
                }
                saveImage();
            }, 800);
        }, { passive: true });

        imageContainer.addEventListener('touchend', () => {
            if (longPressTimer) {
                clearTimeout(longPressTimer);
                longPressTimer = null;
            }
        });

        imageContainer.addEventListener('touchmove', () => {
            if (longPressTimer) {
                clearTimeout(longPressTimer);
                longPressTimer = null;
            }
        });
    }

    // 初始化右键菜单（只在3:5预览区域）
    function initContextMenu() {
        // 只在图片容器上禁用默认右键菜单并显示自定义菜单
        imageContainer.addEventListener('contextmenu', (e) => {
            // 如果右键点击的是输入框，显示默认菜单
            if (e.target.closest('.text-input')) {
                return;
            }

            e.preventDefault();
            showContextMenu(e.clientX, e.clientY);
        });

        // 点击其他地方关闭菜单
        document.addEventListener('click', () => {
            hideContextMenu();
        });
    }

    // 显示右键菜单
    function showContextMenu(x, y) {
        hideContextMenu();

        const menu = document.createElement('div');
        menu.className = 'context-menu';
        menu.id = 'contextMenu';
        menu.style.left = x + 'px';
        menu.style.top = y + 'px';

        const copyItem = document.createElement('div');
        copyItem.className = 'context-menu-item';
        copyItem.textContent = '复制图片';
        copyItem.addEventListener('click', async () => {
            await copyImageToClipboard();
            hideContextMenu();
        });

        const saveItem = document.createElement('div');
        saveItem.className = 'context-menu-item';
        saveItem.textContent = '保存图片';
        saveItem.addEventListener('click', () => {
            saveImage();
            hideContextMenu();
        });

        menu.appendChild(copyItem);
        menu.appendChild(saveItem);
        document.body.appendChild(menu);
    }

    // 隐藏右键菜单
    function hideContextMenu() {
        const existingMenu = document.getElementById('contextMenu');
        if (existingMenu) {
            existingMenu.remove();
        }
    }

    // 复制图片到剪贴板
    async function copyImageToClipboard() {
        if (!currentImage) {
            alert('请先添加背景图片');
            return;
        }

        try {
            deselectAll();
            const canvas = await generateCanvas();
            const blob = await new Promise(resolve => canvas.toBlob(resolve, 'image/png'));

            await navigator.clipboard.write([
                new ClipboardItem({ 'image/png': blob })
            ]);

            alert('图片已复制到剪贴板');
        } catch (err) {
            console.error('复制失败:', err);
            alert('复制失败，请尝试保存图片');
        }
    }

    // 生成画布（预览与保存样式一致）
    async function generateCanvas() {
        const canvas = exportCanvas;
        const ctx = canvas.getContext('2d');

        const containerWidth = imageContainer.clientWidth;
        const containerHeight = imageContainer.clientHeight;

        canvas.width = containerWidth;
        canvas.height = containerHeight;

        // 绘制白色背景
        ctx.fillStyle = '#fff';
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        // 绘制背景图（考虑滑动偏移）
        if (currentImage) {
            drawImageWithOffset(ctx, currentImage, containerWidth, containerHeight);
        }

        // 绘制文字
        drawTextOnCanvas(ctx, input1);
        drawTextOnCanvas(ctx, input2);

        return canvas;
    }

    // 绘制图片（考虑滑动偏移）
    function drawImageWithOffset(ctx, img, containerWidth, containerHeight) {
        const imgRatio = img.naturalWidth / img.naturalHeight;
        const containerRatio = containerWidth / containerHeight;

        let imgWidth, imgHeight;

        if (imgRatio > containerRatio) {
            imgHeight = containerHeight;
            imgWidth = imgHeight * imgRatio;
        } else {
            imgWidth = containerWidth;
            imgHeight = imgWidth / imgRatio;
        }

        const baseLeft = (containerWidth - imgWidth) / 2;
        const drawX = baseLeft + imageOffsetX;

        ctx.drawImage(img, drawX, 0, imgWidth, imgHeight);
    }

    // 在画布上绘制文字
    function drawTextOnCanvas(ctx, inputElement) {
        const text = inputElement.textContent;
        if (!text) return;

        const style = window.getComputedStyle(inputElement);
        const inputLeft = inputElement.offsetLeft;
        const inputTop = inputElement.offsetTop;

        const fontSize = parseInt(style.fontSize);
        ctx.font = `${style.fontWeight} ${fontSize}px ${style.fontFamily}`;
        ctx.fillStyle = style.color;
        ctx.textBaseline = 'top';

        ctx.fillText(text, inputLeft, inputTop);
    }

    // 保存图片
    async function saveImage() {
        if (!currentImage) {
            alert('请先添加背景图片');
            return;
        }

        try {
            const canvas = await generateCanvas();

            const link = document.createElement('a');
            link.download = '邀请函_' + Date.now() + '.png';
            link.href = canvas.toDataURL('image/png');
            link.click();
        } catch (err) {
            console.error('保存失败:', err);
            alert('保存失败，请重试');
        }
    }

    // 窗口大小改变时更新图片位置和边界
    window.addEventListener('resize', () => {
        if (currentImage) {
            calculateImageBounds();
            updateImagePosition();
        }
    });
})();