document.addEventListener('DOMContentLoaded', () => {
    const fileInput = document.getElementById('fileInput');
    const previewContent = document.getElementById('previewContent');
    const zoomInBtn = document.getElementById('zoomIn');
    const zoomOutBtn = document.getElementById('zoomOut');
    const fitWidthBtn = document.getElementById('fitWidth');

    let currentScale = 1;
    const MIN_SCALE = 0.5;
    const MAX_SCALE = 2;
    const SCALE_STEP = 0.1;

    // 自动加载test.docx
    async function loadDefaultDocument() {
        try {
            // 显示加载提示
            previewContent.innerHTML = '<div class="placeholder"><p>正在加载示例文档，请稍候...</p></div>';

            // 获取test.docx文件
            const response = await fetch('test.docx');
            if (!response.ok) {
                throw new Error('无法加载示例文档');
            }

            const arrayBuffer = await response.arrayBuffer();
            const result = await mammoth.convertToHtml({ arrayBuffer });
            
            if (result.messages.length > 0) {
                console.log('Mammoth转换信息:', result.messages);
            }

            // 创建样式容器
            const styledContent = `
                <div class="document-styled-content">
                    ${result.value}
                </div>
            `;

            displayDocument(styledContent);
        } catch (error) {
            console.error('Error:', error);
            previewContent.innerHTML = `
                <div class="placeholder">
                    <p style="color: #dc3545;">示例文档加载失败</p>
                    <p style="color: #6c757d; font-size: 0.9em; margin-top: 10px;">${error.message}</p>
                </div>
            `;
        }
    }

    // 文件上传处理
    fileInput.addEventListener('change', async (e) => {
        const file = e.target.files[0];
        if (!file) return;

        // 检查文件类型
        if (!file.name.match(/\.docx$/i)) {
            alert('请选择.docx格式的Word文档文件');
            return;
        }

        try {
            // 显示加载提示
            previewContent.innerHTML = '<div class="placeholder"><p>正在加载文档，请稍候...</p></div>';

            // 使用mammoth.js转换文档
            const arrayBuffer = await file.arrayBuffer();
            const result = await mammoth.convertToHtml({ arrayBuffer });
            
            if (result.messages.length > 0) {
                console.log('Mammoth转换信息:', result.messages);
            }

            // 创建样式容器
            const styledContent = `
                <div class="document-styled-content">
                    ${result.value}
                </div>
            `;

            displayDocument(styledContent);
        } catch (error) {
            console.error('Error:', error);
            previewContent.innerHTML = `
                <div class="placeholder">
                    <p style="color: #dc3545;">文档预览失败，请重试</p>
                    <p style="color: #6c757d; font-size: 0.9em; margin-top: 10px;">${error.message}</p>
                </div>
            `;
        }
    });

    // 显示文档内容
    function displayDocument(htmlContent) {
        previewContent.innerHTML = htmlContent;
        previewContent.style.transform = `scale(${currentScale})`;
        
        // 添加自定义样式
        const styledContent = previewContent.querySelector('.document-styled-content');
        if (styledContent) {
            styledContent.style.maxWidth = '800px';
            styledContent.style.margin = '0 auto';
            styledContent.style.padding = '20px';
            styledContent.style.transformOrigin = 'top center';
        }
    }

    // 缩放功能
    function updateScale(newScale) {
        currentScale = Math.max(MIN_SCALE, Math.min(MAX_SCALE, newScale));
        const styledContent = previewContent.querySelector('.document-styled-content');
        if (styledContent) {
            styledContent.style.transform = `scale(${currentScale})`;
        }
    }

    zoomInBtn.addEventListener('click', () => {
        updateScale(currentScale + SCALE_STEP);
    });

    zoomOutBtn.addEventListener('click', () => {
        updateScale(currentScale - SCALE_STEP);
    });

    fitWidthBtn.addEventListener('click', () => {
        const containerWidth = previewContent.clientWidth;
        const contentWidth = previewContent.querySelector('.document-styled-content')?.scrollWidth || containerWidth;
        const newScale = (containerWidth - 40) / contentWidth; // 40px for padding
        updateScale(newScale);
    });

    // 添加键盘快捷键支持
    document.addEventListener('keydown', (e) => {
        if (e.ctrlKey) {
            switch (e.key) {
                case '+':
                    e.preventDefault();
                    updateScale(currentScale + SCALE_STEP);
                    break;
                case '-':
                    e.preventDefault();
                    updateScale(currentScale - SCALE_STEP);
                    break;
                case '0':
                    e.preventDefault();
                    updateScale(1);
                    break;
            }
        }
    });

    // 页面加载完成后自动加载示例文档
    loadDefaultDocument();
});