/**
 * 文件上传网站 - 前端交互逻辑
 */
(function () {
    'use strict';

    // ── 常量 ────────────────────────────────────────────────
    const MAX_FILE_SIZE = 20 * 1024 * 1024; // 20MB
    const MAX_FILES = 9;
    const ALLOWED_EXTENSIONS = ['.txt', '.doc', '.docx', '.pdf', '.rtf', '.odt', '.html', '.csv', '.xls', '.xlsx'];

    // ── DOM 元素 ────────────────────────────────────────────
    const $name = document.getElementById('name');
    const $dropzone = document.getElementById('dropzone');
    const $fileInput = document.getElementById('fileInput');
    const $fileList = document.getElementById('fileList');
    const $uploadBtn = document.getElementById('uploadBtn');
    const $clearBtn = document.getElementById('clearBtn');
    const $uploadForm = document.getElementById('uploadForm');
    const $resultPanel = document.getElementById('resultPanel');

    // 弹窗相关
    const $modal = document.getElementById('captchaModal');
    const $modalClose = document.getElementById('modalClose');
    const $modalCancel = document.getElementById('modalCancel');
    const $modalConfirm = document.getElementById('modalConfirm');
    const $captchaImg = document.getElementById('captchaImg');
    const $refreshCaptcha = document.getElementById('refreshCaptcha');
    const $captchaInput = document.getElementById('captchaInput');
    const $captchaError = document.getElementById('captchaError');

    // ── 状态 ────────────────────────────────────────────────
    let selectedFiles = []; // { file, id, status, error }
    let fileIdCounter = 0;
    let isUploading = false;

    // ── 工具函数 ────────────────────────────────────────────
    function formatSize(bytes) {
        if (bytes < 1024) return bytes + ' B';
        if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
        return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
    }

    function getFileExt(filename) {
        const idx = filename.lastIndexOf('.');
        return idx >= 0 ? filename.substring(idx).toLowerCase() : '';
    }

    function validateFile(file) {
        const ext = getFileExt(file.name);
        if (!ALLOWED_EXTENSIONS.includes(ext)) {
            return '不支持的文件格式';
        }
        if (file.size > MAX_FILE_SIZE) {
            return '文件超过 20MB 限制';
        }
        if (file.size === 0) {
            return '文件为空';
        }
        return null;
    }

    // ── 弹窗控制 ────────────────────────────────────────────
    function openModal() {
        $captchaInput.value = '';
        $captchaError.textContent = '';
        refreshCaptcha();
        $modal.classList.add('active');
        setTimeout(() => $captchaInput.focus(), 200);
    }

    function closeModal() {
        $modal.classList.remove('active');
    }

    function refreshCaptcha() {
        $captchaImg.src = '/api/captcha?' + Date.now();
        $captchaInput.value = '';
        $captchaError.textContent = '';
    }

    // 弹窗事件绑定
    $modalClose.addEventListener('click', closeModal);
    $modalCancel.addEventListener('click', closeModal);
    $captchaImg.addEventListener('click', refreshCaptcha);
    $refreshCaptcha.addEventListener('click', refreshCaptcha);

    // 点击遮罩层关闭
    $modal.addEventListener('click', function (e) {
        if (e.target === $modal) closeModal();
    });

    // ESC 关闭弹窗
    document.addEventListener('keydown', function (e) {
        if (e.key === 'Escape' && $modal.classList.contains('active')) {
            closeModal();
        }
    });

    // 弹窗内回车 = 确认
    $captchaInput.addEventListener('keydown', function (e) {
        if (e.key === 'Enter') {
            e.preventDefault();
            $modalConfirm.click();
        }
    });

    // 确认上传按钮
    $modalConfirm.addEventListener('click', function () {
        const captchaVal = $captchaInput.value.trim();
        if (!captchaVal) {
            $captchaError.textContent = '请输入验证码';
            shakeElement($captchaInput);
            return;
        }

        const nameVal = $name.value.trim();
        const validFiles = selectedFiles.filter(f => f.status !== 'error');

        closeModal();
        startUpload(nameVal, captchaVal, validFiles);
    });

    // ── 文件选择（点击） ────────────────────────────────────
    $dropzone.addEventListener('click', function () {
        if (!isUploading) {
            $fileInput.click();
        }
    });

    $fileInput.addEventListener('change', function () {
        addFiles(Array.from($fileInput.files));
        $fileInput.value = ''; // 清空以便重复选择同名文件
    });

    // ── 文件拖拽 ────────────────────────────────────────────
    $dropzone.addEventListener('dragover', function (e) {
        e.preventDefault();
        if (!isUploading) {
            $dropzone.classList.add('dragover');
        }
    });

    $dropzone.addEventListener('dragleave', function (e) {
        e.preventDefault();
        $dropzone.classList.remove('dragover');
    });

    $dropzone.addEventListener('drop', function (e) {
        e.preventDefault();
        $dropzone.classList.remove('dragover');
        if (!isUploading) {
            addFiles(Array.from(e.dataTransfer.files));
        }
    });

    // ── 添加文件到列表 ──────────────────────────────────────
    function addFiles(files) {
        if (isUploading) return;

        for (const file of files) {
            if (selectedFiles.length >= MAX_FILES) {
                showToast(`单次最多上传 ${MAX_FILES} 个文件`);
                break;
            }

            const error = validateFile(file);
            const item = {
                file: file,
                id: ++fileIdCounter,
                status: error ? 'error' : 'waiting',
                error: error,
                progress: 0
            };
            selectedFiles.push(item);
        }

        renderFileList();
        updateButtonState();
    }

    // ── 渲染文件列表 ────────────────────────────────────────
    function renderFileList() {
        if (selectedFiles.length === 0) {
            $fileList.innerHTML = '';
            return;
        }

        $fileList.innerHTML = selectedFiles.map(item => {
            const statusText = {
                waiting: '等待中',
                uploading: `${item.progress}%`,
                done: '已完成',
                error: item.error || '失败'
            }[item.status];

            const statusClass = {
                waiting: 'status-waiting',
                uploading: 'status-uploading',
                done: 'status-done',
                error: 'status-error'
            }[item.status];

            const iconSvg = item.status === 'done'
                ? '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#0f766e" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>'
                : item.status === 'error'
                    ? '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#dc2626" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>'
                    : '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#7a756e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>';

            const progressBar = item.status === 'uploading'
                ? `<div class="progress-bar"><div class="progress-bar-fill" style="width:${item.progress}%"></div></div>`
                : '';

            const removeBtn = !isUploading
                ? `<button type="button" class="file-item-remove" data-id="${item.id}" title="移除">
                     <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
                   </button>`
                : '';

            return `
                <div class="file-item" data-id="${item.id}">
                    <span class="file-item-icon">${iconSvg}</span>
                    <div class="file-item-info">
                        <div class="file-item-name" title="${item.file.name}">${item.file.name}</div>
                        <div class="file-item-meta">${formatSize(item.file.size)}</div>
                        ${progressBar}
                    </div>
                    <span class="file-item-status ${statusClass}">${statusText}</span>
                    ${removeBtn}
                </div>
            `;
        }).join('');

        // 绑定移除按钮
        $fileList.querySelectorAll('.file-item-remove').forEach(btn => {
            btn.addEventListener('click', function (e) {
                e.stopPropagation();
                const id = parseInt(this.dataset.id);
                selectedFiles = selectedFiles.filter(f => f.id !== id);
                renderFileList();
                updateButtonState();
            });
        });
    }

    // ── 按钮状态 ────────────────────────────────────────────
    function updateButtonState() {
        const nameValid = $name.value.trim().length >= 2;
        const hasFiles = selectedFiles.some(f => f.status !== 'error');
        $uploadBtn.disabled = !nameValid || !hasFiles || isUploading;
    }

    $name.addEventListener('input', updateButtonState);

    // ── 清空列表 ────────────────────────────────────────────
    $clearBtn.addEventListener('click', function () {
        if (isUploading) return;
        selectedFiles = [];
        renderFileList();
        updateButtonState();
        $resultPanel.innerHTML = '';
    });

    // ── 点击"开始上传" → 打开验证码弹窗 ─────────────────────
    $uploadForm.addEventListener('submit', function (e) {
        e.preventDefault();
        if (isUploading) return;

        // 前端校验姓名
        const nameVal = $name.value.trim();
        if (nameVal.length < 2) {
            shakeElement($name);
            return;
        }

        // 校验文件
        const validFiles = selectedFiles.filter(f => f.status !== 'error');
        if (validFiles.length === 0) {
            showToast('没有可上传的文件');
            return;
        }

        // 打开验证码弹窗
        openModal();
    });

    // ── 执行上传 ────────────────────────────────────────────
    function startUpload(name, captcha, files) {
        isUploading = true;
        $uploadBtn.disabled = true;
        $clearBtn.disabled = true;
        $resultPanel.innerHTML = '';

        // 重置文件状态
        files.forEach(f => {
            f.status = 'uploading';
            f.progress = 0;
        });
        renderFileList();

        const formData = new FormData();
        formData.append('name', name);
        formData.append('captcha', captcha);
        files.forEach(f => formData.append('files', f.file));

        const xhr = new XMLHttpRequest();

        // 进度事件
        xhr.upload.addEventListener('progress', function (e) {
            if (e.lengthComputable) {
                const pct = Math.round((e.loaded / e.total) * 100);
                files.forEach(f => {
                    f.progress = pct;
                });
                renderFileList();
            }
        });

        // 完成事件
        xhr.addEventListener('load', function () {
            isUploading = false;
            $clearBtn.disabled = false;

            if (xhr.status === 200) {
                const data = JSON.parse(xhr.responseText);
                handleUploadSuccess(data, files);
            } else {
                let errMsg = '上传失败，请重试';
                try {
                    const errData = JSON.parse(xhr.responseText);
                    errMsg = errData.error || errMsg;
                } catch (_) { /* ignore */ }

                // 如果是验证码错误，重新弹窗让用户输入
                if (errMsg.includes('验证码')) {
                    files.forEach(f => {
                        f.status = 'waiting';
                        f.progress = 0;
                    });
                    renderFileList();
                    updateButtonState();
                    showToast(errMsg);
                    // 延迟一下再弹窗，让用户看到 toast
                    setTimeout(openModal, 600);
                } else {
                    handleUploadError(errMsg, files);
                }
            }

            updateButtonState();
        });

        xhr.addEventListener('error', function () {
            isUploading = false;
            $clearBtn.disabled = false;
            handleUploadError('网络错误，请检查连接后重试', files);
            updateButtonState();
        });

        xhr.open('POST', '/api/upload');
        xhr.send(formData);
    }

    // ── 上传成功处理 ────────────────────────────────────────
    function handleUploadSuccess(data, files) {
        // 更新每个文件的状态
        data.results.forEach((result, idx) => {
            if (idx < files.length) {
                files[idx].status = result.success ? 'done' : 'error';
                files[idx].error = result.success ? null : result.error;
                files[idx].progress = 100;
            }
        });
        renderFileList();

        // 显示结果面板
        const hasSuccess = data.success_count > 0;
        const hasFail = data.fail_count > 0;

        let resultHtml = `
            <div class="result-card">
                <div class="result-header">
                    <div class="result-icon ${hasSuccess ? 'icon-success' : 'icon-error'}">
                        ${hasSuccess
                            ? '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>'
                            : '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>'
                        }
                    </div>
                    <span class="result-title ${hasSuccess ? 'text-success' : 'text-error'}">
                        ${hasSuccess && !hasFail ? '上传成功' : hasSuccess ? '部分上传成功' : '上传失败'}
                    </span>
                </div>
                <div class="result-detail">
                    ${hasSuccess ? `<p>已上传 <strong>${data.success_count}</strong> 个文件至 <strong>${data.storage_path}</strong></p>` : ''}
                    ${hasFail ? `<p>${data.fail_count} 个文件上传失败</p>` : ''}
                    ${hasSuccess ? `<p>该目录累计文件数：<strong>${data.total_files}</strong></p>` : ''}
                </div>
        `;

        // 文件详情
        if (data.results.length > 0) {
            resultHtml += '<div class="result-files">';
            data.results.forEach(r => {
                if (r.success) {
                    resultHtml += `
                        <div class="result-file-item file-success">
                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                            <span>${r.filename} → ${r.storage_filename}</span>
                        </div>`;
                } else {
                    resultHtml += `
                        <div class="result-file-item file-error">
                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>
                            <span>${r.filename} — ${r.error}</span>
                        </div>`;
                }
            });
            resultHtml += '</div>';
        }

        resultHtml += '</div>';
        $resultPanel.innerHTML = resultHtml;
    }

    // ── 上传失败处理 ────────────────────────────────────────
    function handleUploadError(message, files) {
        files.forEach(f => {
            f.status = 'error';
            f.error = message;
        });
        renderFileList();

        $resultPanel.innerHTML = `
            <div class="result-card">
                <div class="result-header">
                    <div class="result-icon icon-error">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>
                    </div>
                    <span class="result-title text-error">上传失败</span>
                </div>
                <div class="result-detail">
                    <p>${message}</p>
                </div>
            </div>
        `;
    }

    // ── 抖动效果 ────────────────────────────────────────────
    function shakeElement(el) {
        el.classList.add('shake', 'input-error');
        setTimeout(() => {
            el.classList.remove('shake');
        }, 400);
        setTimeout(() => {
            el.classList.remove('input-error');
        }, 2000);
    }

    // ── Toast 提示 ──────────────────────────────────────────
    function showToast(message) {
        const existing = document.querySelector('.toast');
        if (existing) existing.remove();

        const toast = document.createElement('div');
        toast.className = 'toast';
        toast.textContent = message;
        toast.style.cssText = `
            position: fixed;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            background: #1a1816;
            color: white;
            padding: 0.6rem 1.2rem;
            border-radius: 8px;
            font-size: 0.85rem;
            font-weight: 500;
            z-index: 1100;
            box-shadow: 0 4px 20px rgba(0,0,0,0.15);
        `;
        document.body.appendChild(toast);

        setTimeout(() => {
            toast.style.opacity = '0';
            toast.style.transition = 'opacity 0.3s';
            setTimeout(() => toast.remove(), 300);
        }, 2500);
    }

    // ── 初始化 ──────────────────────────────────────────────
    updateButtonState();

})();