{% extends 'base.html' %}

{% block title %}提交数据 - {{ task.title }} - {{ get_app_name() }}{% endblock %}

{% block content %}
<meta http-equiv="refresh" content="30">
<div class="row">
    <div class="col-md-12">
        <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
            <h4 class="mb-0">提交数据 - {{ task.title }}</h4>
            <div class="d-flex align-items-center gap-2" style="flex-wrap: wrap;">
                <span class="badge" style="background-color: #94918B; color: white;">每 30 秒自动刷新</span>
                <a href="{{ url_for('task_detail', task_id=task.id) }}" class="btn" style="background-color: #F7F4EC; color: #2D2A24; font-weight: 500; border-radius: 8px; padding: 0.5rem 1rem; transition: all 0.3s ease;">返回任务详情</a>
            </div>
        </div>
        <div class="card border-0 shadow-sm" style="border-radius: 10px; overflow: hidden;">
            <div class="card-header">
                <div class="d-flex justify-content-between align-items-center">
                    <h5 class="mb-0" style="font-weight: 600;">提交列表（共 {{ total_submissions }} 条）</h5>
                    {% if submissions %}
                    <button type="button" class="btn" style="background-color: #B8463E; color: white; font-weight: 500; border-radius: 8px; padding: 0.5rem 1rem; transition: all 0.3s ease;" onclick="deleteAllData()">🗑 删除全部</button>
                    {% endif %}
                </div>
            </div>
            <div class="card-body" style="padding: 2rem;">
                {% if submissions %}
                <div class="table-responsive">
                    <table class="table table-striped" style="border-radius: 8px; overflow: hidden;">
                        <thead style="background-color: #F7F4EC;">
                            <tr>
                                <th style="font-weight: 600; color: #2D2A24;">ID</th>
                                <th style="font-weight: 600; color: #2D2A24;">提交时间</th>
                                <th style="font-weight: 600; color: #2D2A24;">数据内容</th>
                                <th style="font-weight: 600; color: #2D2A24; min-width: 220px;">操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for sub in submissions %}
                            <tr>
                                <td>{{ sub.id }}</td>
                                <td>{{ sub.submitted_at.strftime('%Y-%m-%d %H:%M:%S') }}</td>
                                <td>
                                    <pre class="mb-0 small" style="max-height: 120px; overflow: auto; white-space: pre-wrap; word-break: break-all; font-family: 'Courier New', monospace; font-size: 14px; background-color: #F7F4EC; padding: 10px; border-radius: 8px; border: 1px solid #E5E0D8;">{{ sub.display_data }}</pre>
                                </td>
                                <td>
                                    <div style="display:flex; flex-wrap:wrap; gap:0.4rem; justify-content:flex-end;">
                                        {% if sub.attachments %}
                                        <button type="button" class="btn"
                                                style="background-color:#5B7553;color:white;font-weight:500;border-radius:8px;padding:0.5rem 0.85rem;transition:all 0.3s ease;display:inline-flex;align-items:center;gap:0.3rem;"
                                                onclick='openAttachmentsModal({{ sub.attachments | tojson }}, {{ sub.id }})'>
                                            <i class="bi bi-paperclip"></i> 查看附件 ({{ sub.attachments|length }})
                                        </button>
                                        {% endif %}
                                        <button type="button" class="btn" style="background-color: #B8463E; color: white; font-weight: 500; border-radius: 8px; padding: 0.5rem 1rem; transition: all 0.3s ease;" onclick="deleteSingleData({{ sub.id }})">删除</button>
                                    </div>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                {% if pagination.pages > 1 %}
                <nav aria-label="分页" class="mt-4">
                    <ul class="pagination justify-content-center" style="gap: 5px;">
                        <li class="page-item {% if pagination.page <= 1 %}disabled{% endif %}">
                            <a class="page-link" href="{{ url_for('task_data_view', task_id=task.id, page=pagination.page - 1, per_page=pagination.per_page) }}" style="background-color: #F7F4EC; color: #2D2A24; border-radius: 8px; padding: 0.5rem 1rem; transition: all 0.3s ease;">&laquo; 上一页</a>
                        </li>
                        <li class="page-item disabled"><span class="page-link" style="background-color: #E5E0D8; color: #6B6760; border-radius: 8px; padding: 0.5rem 1rem;">第 {{ pagination.page }} / {{ pagination.pages }} 页</span></li>
                        <li class="page-item {% if pagination.page >= pagination.pages %}disabled{% endif %}">
                            <a class="page-link" href="{{ url_for('task_data_view', task_id=task.id, page=pagination.page + 1, per_page=pagination.per_page) }}" style="background-color: #F7F4EC; color: #2D2A24; border-radius: 8px; padding: 0.5rem 1rem; transition: all 0.3s ease;">下一页 &raquo;</a>
                        </li>
                    </ul>
                </nav>
                {% endif %}
                {% else %}
                <div class="text-center py-5">
                    <div class="mb-4" style="width: 48px; height: 48px; margin: 0 auto;">
                        <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="#6B6760" class="bi bi-database" viewBox="0 0 16 16">
                            <path d="M4.406 1.342A5.53 5.53 0 0 1 8 0c2.69 0 4.923 2 5.166 4.579C14.758 4.804 16 6.137 16 7.773 16 9.569 14.502 11 12.687 11H10a.5.5 0 0 1 0-1h2.688C13.979 10 15 8.988 15 7.773c0-1.216-1.02-2.228-2.313-2.228h-.5v-.5C12.188 2.825 10.328 1 8 1a4.53 4.53 0 0 0-2.941 1.1c-.757.652-1.153 1.438-1.153 2.055v.448l-.445.049C2.064 4.805 1 5.952 1 7.318 1 8.785 2.23 10 3.781 10H6a.5.5 0 0 1 0 1H3.781C1.708 11 0 9.366 0 7.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383z"/>
                            <path d="M6.5 16a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-1H6.5v1zm-2-1a.5.5 0 0 0 .5.5h7a.5.5 0 0 0 .5-.5v-1H4.5v1z"/>
                        </svg>
                    </div>
                    <h4 class="text-muted mb-3">暂无提交数据</h4>
                    <p class="text-muted mb-0">暂无提交数据</p>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- 附件预览模态框 -->
<div id="attachments-modal" style="display:none;position:fixed;inset:0;background:rgba(20,17,12,0.55);z-index:1000;align-items:center;justify-content:center;padding:1rem;">
    <div style="background:#fff;border-radius:14px;max-width:840px;width:100%;max-height:92vh;display:flex;flex-direction:column;overflow:hidden;border:1px solid #E5E0D8;">
        <div style="display:flex;justify-content:space-between;align-items:center;padding:1rem 1.25rem;border-bottom:1px solid #E5E0D8;background:#F7F4EC;">
            <div>
                <h5 style="margin:0;color:#141413;font-weight:600;font-size:1.05rem;"><i class="bi bi-paperclip"></i> 提交附件</h5>
                <p id="attachments-modal-sub" style="margin:0.2rem 0 0;color:#6B6760;font-size:0.82rem;"></p>
            </div>
            <button type="button" id="attachments-modal-close" style="background:transparent;border:none;font-size:1.5rem;color:#6B6760;cursor:pointer;padding:0 0.4rem;line-height:1;">×</button>
        </div>
        <div id="attachments-modal-body" style="padding:1.25rem;overflow-y:auto;flex:1;"></div>
    </div>
</div>

<script>
function openAttachmentsModal(attachments, submissionId) {
    if (!attachments || !attachments.length) return;
    var modal = document.getElementById('attachments-modal');
    var body = document.getElementById('attachments-modal-body');
    var sub = document.getElementById('attachments-modal-sub');
    sub.textContent = '提交 #' + submissionId + ' · 共 ' + attachments.length + ' 个附件';

    function escHtml(s) {
        return (s || '').replace(/[&<>"']/g, function(c){return ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]);});
    }
    function fmtSize(n) {
        if (!n) return '—';
        if (n < 1024) return n + ' B';
        if (n < 1024 * 1024) return Math.round(n / 1024) + ' KB';
        return (n / (1024 * 1024)).toFixed(1) + ' MB';
    }

    body.innerHTML = attachments.map(function (a) {
        var url = a.url;
        var name = escHtml(a.name || '附件');
        var field = escHtml(a.field || '');
        var ext = (a.ext || '').toLowerCase();
        var size = fmtSize(a.size);
        var meta = '<div style="color:#6B6760;font-size:0.82rem;margin-top:0.3rem;">' +
                   (field ? '字段：<strong>' + field + '</strong> · ' : '') +
                   '类型 .' + escHtml(ext) + ' · ' + size + '</div>';
        var actions = '<div style="margin-top:0.4rem;display:flex;gap:0.4rem;flex-wrap:wrap;">' +
                      '<a href="' + url + '" target="_blank" rel="noopener" class="btn" style="background:#141413;color:#F7F4EC;border-radius:6px;padding:0.3rem 0.7rem;font-size:0.85rem;text-decoration:none;">新窗口打开</a>' +
                      '<a href="' + url + '" download="' + name + '" class="btn" style="background:#5B7553;color:white;border-radius:6px;padding:0.3rem 0.7rem;font-size:0.85rem;text-decoration:none;">下载</a>' +
                      '<button type="button" class="btn" data-reveal-path="' + url + '" style="background:#D97757;color:white;border:none;border-radius:6px;padding:0.3rem 0.7rem;font-size:0.85rem;cursor:pointer;" title="在运行 OpenMentor 的那台电脑上打开文件夹定位此文件">在本机打开文件夹</button>' +
                      '</div>';
        var preview;
        if (a.is_image || /^(png|jpg|jpeg|gif|webp|bmp|svg)$/.test(ext)) {
            preview = '<img src="' + url + '" alt="' + name + '" style="max-width:100%;max-height:380px;border-radius:6px;border:1px solid #E5E0D8;cursor:zoom-in;" onclick="window.open(\'' + url + '\',\'_blank\')">';
        } else if (ext === 'pdf') {
            preview = '<embed src="' + url + '" type="application/pdf" style="width:100%;height:480px;border:1px solid #E5E0D8;border-radius:6px;background:#fff;">';
        } else if (/^(mp4|webm|mov|m4v)$/.test(ext)) {
            preview = '<video src="' + url + '" controls style="width:100%;max-height:380px;border-radius:6px;border:1px solid #E5E0D8;background:#000;"></video>';
        } else if (/^(mp3|wav|m4a|aac|ogg)$/.test(ext)) {
            preview = '<audio src="' + url + '" controls style="width:100%;"></audio>';
        } else if (ext === 'docx') {
            preview = '<div class="om-preview-pending" data-preview-type="docx" data-preview-url="' + url + '" style="background:#fff;border:1px solid #E5E0D8;border-radius:6px;padding:0.8rem 1rem;color:#6B6760;font-size:0.9rem;min-height:120px;">正在加载 docx 预览...</div>';
        } else if (ext === 'xlsx' || ext === 'xls') {
            preview = '<div class="om-preview-pending" data-preview-type="xlsx" data-preview-url="' + url + '" style="background:#fff;border:1px solid #E5E0D8;border-radius:6px;padding:0.8rem 1rem;color:#6B6760;font-size:0.9rem;min-height:120px;">正在加载表格预览...</div>';
        } else if (/^(txt|md|markdown|csv|tsv|json|yaml|yml|xml|html|htm|log)$/.test(ext)) {
            preview = '<iframe src="' + url + '" style="width:100%;height:340px;border:1px solid #E5E0D8;border-radius:6px;background:#fff;"></iframe>';
        } else {
            preview = '<div style="padding:1.2rem;background:#F7F4EC;border:1px dashed #C9C3B8;border-radius:6px;color:#6B6760;text-align:center;">' +
                      '<i class="bi bi-file-earmark"></i> 此格式无法在线预览，请点下方「下载」' +
                      '</div>';
        }
        return '<div style="margin-bottom:1rem;padding-bottom:1rem;border-bottom:1px solid #E5E0D8;">' +
               '<div style="font-weight:600;color:#141413;word-break:break-all;">' + name + '</div>' +
               meta +
               '<div style="margin-top:0.6rem;">' + preview + '</div>' +
               actions +
               '</div>';
    }).join('');

    modal.style.display = 'flex';
    // 启动 docx / xlsx 懒加载预览
    setTimeout(processPendingPreviews, 0);
}

// ============ docx / xlsx 浏览器端预览 ============
const OM_LIB_LOADERS = {
    docx: null,   // Promise，加载 jszip + docx-preview
    xlsx: null,   // Promise，加载 sheetjs
};
function loadScript(src) {
    return new Promise(function(resolve, reject) {
        var s = document.createElement('script');
        s.src = src; s.async = true;
        s.onload = function() { resolve(); };
        s.onerror = function() { reject(new Error('加载脚本失败：' + src)); };
        document.head.appendChild(s);
    });
}
function ensureDocxLib() {
    if (!OM_LIB_LOADERS.docx) {
        OM_LIB_LOADERS.docx = loadScript('/static/vendor/docx-preview/jszip.min.js')
            .then(function() { return loadScript('/static/vendor/docx-preview/docx-preview.min.js'); });
    }
    return OM_LIB_LOADERS.docx;
}
function ensureXlsxLib() {
    if (!OM_LIB_LOADERS.xlsx) {
        OM_LIB_LOADERS.xlsx = loadScript('/static/vendor/sheetjs/xlsx.mini.min.js');
    }
    return OM_LIB_LOADERS.xlsx;
}

function processPendingPreviews() {
    var nodes = document.querySelectorAll('.om-preview-pending');
    nodes.forEach(function(node) {
        var type = node.getAttribute('data-preview-type');
        var url = node.getAttribute('data-preview-url');
        if (!type || !url) return;
        node.classList.remove('om-preview-pending');  // 防重复处理
        if (type === 'docx') renderDocxInto(node, url);
        else if (type === 'xlsx') renderXlsxInto(node, url);
    });
}

function _previewError(node, msg) {
    node.style.color = '#B8463E';
    node.style.background = '#F2DCD9';
    node.innerHTML = '<i class="bi bi-exclamation-triangle"></i> 预览失败：' + msg + '（请用下方「下载」按钮）';
}

async function renderDocxInto(node, url) {
    try {
        await ensureDocxLib();
        var resp = await fetch(url);
        if (!resp.ok) throw new Error('HTTP ' + resp.status);
        var blob = await resp.blob();
        node.textContent = '';
        node.style.background = '#fff';
        node.style.color = '#141413';
        node.style.padding = '0';
        node.style.minHeight = '0';
        node.style.maxHeight = '520px';
        node.style.overflow = 'auto';
        // docx-preview 默认会注入完整 Word 排版
        await window.docx.renderAsync(blob, node, null, {
            className: 'om-docx',
            inWrapper: true,
            ignoreWidth: false,
            ignoreHeight: false,
            useBase64URL: true,
        });
    } catch (e) {
        _previewError(node, e.message || String(e));
    }
}

async function renderXlsxInto(node, url) {
    try {
        await ensureXlsxLib();
        var resp = await fetch(url);
        if (!resp.ok) throw new Error('HTTP ' + resp.status);
        var ab = await resp.arrayBuffer();
        var wb = window.XLSX.read(ab, {type: 'array'});
        var sheetNames = wb.SheetNames || [];
        if (!sheetNames.length) throw new Error('工作簿为空');
        // 渲染第一个 sheet，并加 sheet 切换 tab
        node.style.background = '#fff';
        node.style.color = '#141413';
        node.style.padding = '0';
        node.style.minHeight = '0';
        node.style.maxHeight = '520px';
        node.style.overflow = 'auto';
        var tabsHtml = '<div class="om-xlsx-tabs" style="display:flex;gap:0.3rem;flex-wrap:wrap;padding:0.4rem 0.6rem;background:#F7F4EC;border-bottom:1px solid #E5E0D8;position:sticky;top:0;z-index:1;">' +
            sheetNames.map(function(n, i) {
                return '<button type="button" data-sheet="' + i + '" class="om-xlsx-tab" style="background:' + (i===0?'#141413':'#fff') + ';color:' + (i===0?'#F7F4EC':'#141413') + ';border:1px solid #C9C3B8;border-radius:4px;padding:0.2rem 0.55rem;font-size:0.78rem;cursor:pointer;">' + escHtmlSimple(n) + '</button>';
            }).join('') + '</div>';
        var bodyDiv = '<div class="om-xlsx-body" style="padding:0.5rem;"></div>';
        node.innerHTML = tabsHtml + bodyDiv;

        function showSheet(idx) {
            var sheet = wb.Sheets[sheetNames[idx]];
            var html = window.XLSX.utils.sheet_to_html(sheet, {editable: false});
            // 把 SheetJS 默认表格美化一下
            html = html.replace('<table', '<table class="om-xlsx-table" style="border-collapse:collapse;font-size:0.85rem;width:max-content;min-width:100%;"');
            var bodyEl = node.querySelector('.om-xlsx-body');
            bodyEl.innerHTML = html;
            // 给所有 td/th 套上边框样式
            bodyEl.querySelectorAll('td, th').forEach(function(c) {
                c.style.border = '1px solid #E5E0D8';
                c.style.padding = '0.25rem 0.5rem';
                c.style.background = c.tagName === 'TH' ? '#F7F4EC' : '#fff';
                c.style.whiteSpace = 'nowrap';
            });
            // tabs active
            node.querySelectorAll('.om-xlsx-tab').forEach(function(b) {
                var active = parseInt(b.getAttribute('data-sheet'), 10) === idx;
                b.style.background = active ? '#141413' : '#fff';
                b.style.color = active ? '#F7F4EC' : '#141413';
            });
        }
        showSheet(0);
        node.querySelectorAll('.om-xlsx-tab').forEach(function(b) {
            b.addEventListener('click', function() {
                showSheet(parseInt(this.getAttribute('data-sheet'), 10));
            });
        });
    } catch (e) {
        _previewError(node, e.message || String(e));
    }
}

function escHtmlSimple(s) {
    return String(s == null ? '' : s).replace(/[&<>"']/g, function(c){return ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]);});
}

function closeAttachmentsModal() {
    var modal = document.getElementById('attachments-modal');
    modal.style.display = 'none';
    document.getElementById('attachments-modal-body').innerHTML = '';
}

// 在服务器本机打开文件夹（事件委托）
document.getElementById('attachments-modal-body').addEventListener('click', function(e) {
    var btn = e.target.closest('[data-reveal-path]');
    if (!btn) return;
    var path = btn.getAttribute('data-reveal-path');
    if (!path) return;
    btn.disabled = true;
    var orig = btn.textContent;
    btn.textContent = '正在打开...';
    var fd = new FormData();
    fd.append('path', path);
    fetch('/attachment/reveal', {method: 'POST', body: fd})
        .then(function(r) { return r.json(); })
        .then(function(d) {
            btn.disabled = false;
            btn.textContent = orig;
            if (!d.success) alert(d.message || '打开失败');
        })
        .catch(function(e) {
            btn.disabled = false;
            btn.textContent = orig;
            alert('网络错误：' + e.message);
        });
});

document.getElementById('attachments-modal-close').addEventListener('click', closeAttachmentsModal);
document.getElementById('attachments-modal').addEventListener('click', function(e) {
    if (e.target === this) closeAttachmentsModal();
});
document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') closeAttachmentsModal();
});

function deleteSingleData(subId) {
    if (!confirm('确定要删除这条提交记录吗？')) return;
    fetch("{{ url_for('delete_submission', submission_id=0) }}".replace('0', subId) + "?_=" + Date.now(), {
        method: 'GET',
        headers: { 'X-Requested-With': 'XMLHttpRequest' },
        cache: 'no-store'
    })
    .then(function(r) { return r.json().catch(function() { return {}; }); })
    .then(function(data) {
        if (data.success) { location.reload(); }
        else { alert(data.message || '删除失败'); }
    })
    .catch(function(e) { alert('删除失败：' + e.message); });
}
function deleteAllData() {
    if (!confirm('确定要清空该任务的全部提交数据吗？此操作不可恢复。')) return;
    fetch("{{ url_for('clear_all_submissions', task_id=task.id) }}?_=" + Date.now(), {
        method: 'GET',
        headers: { 'X-Requested-With': 'XMLHttpRequest' },
        cache: 'no-store'
    })
    .then(function(r) { return r.json().catch(function() { return {}; }); })
    .then(function(data) {
        if (data.success) { location.reload(); }
        else { alert(data.message || '清空失败'); }
    })
    .catch(function(e) { alert('清空失败：' + e.message); });
}
</script>
{% endblock %}