{% extends "base.html" %} {% block title %}QuizTrainer - 导入题库{% endblock %}
{% block content %}
<!-- 页面头部 -->
<div class="page-header animate-fade-in">
    <h1>导入题库</h1>
    <div class="meta">
        <span>
            <svg
                viewBox="0 0 24 24"
                width="16"
                height="16"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
            >
                <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4" />
                <polyline points="17 8 12 3 7 8" />
                <line x1="12" y1="3" x2="12" y2="15" />
            </svg>
            从 Word 或 JSON 文件导入题目
        </span>
    </div>
</div>

<div style="display: grid; grid-template-columns: 1fr 400px; gap: 24px">
    <!-- 左侧: 导入表单 -->
    <div class="animate-fade-in" style="animation-delay: 0.1s">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">
                    <svg
                        viewBox="0 0 24 24"
                        width="18"
                        height="18"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="2"
                    >
                        <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4" />
                        <polyline points="17 8 12 3 7 8" />
                        <line x1="12" y1="3" x2="12" y2="15" />
                    </svg>
                    上传文件
                </h3>
            </div>
            <div class="card-body">
                <form id="importForm" enctype="multipart/form-data">
                    <div class="form-group">
                        <label class="form-label">导入类型</label>
                        <select
                            name="import_type"
                            id="importType"
                            class="form-input"
                            onchange="toggleImportType()"
                        >
                            <option value="word">Word 文档 (.docx)</option>
                            <option value="json">JSON 文件 (.json)</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label class="form-label">选择文件</label>
                        <input
                            type="file"
                            name="file"
                            id="fileInput"
                            class="form-input"
                            accept=".docx,.doc,.json"
                            required
                        />
                        <small
                            style="color: var(--text-muted); font-size: 12px"
                        >
                            支持 .docx 和 .json 格式
                        </small>
                    </div>

                    <div class="form-group" id="categoryGroup">
                        <label class="form-label">题库分类</label>
                        <select name="category" class="form-input">
                            <option value="Python基础">Python基础</option>
                            <option value="数据结构">数据结构</option>
                            <option value="函数">函数</option>
                            <option value="默认分类">默认分类</option>
                        </select>
                    </div>

                    <div class="form-group" id="difficultyGroup">
                        <label class="form-label">默认难度</label>
                        <select name="difficulty" class="form-input">
                            <option value="easy">简单</option>
                            <option value="medium" selected>中等</option>
                            <option value="hard">困难</option>
                        </select>
                    </div>

                    <div
                        class="form-group"
                        id="previewGroup"
                        style="display: none"
                    >
                        <label class="form-label">预览数量</label>
                        <input
                            type="number"
                            name="max_preview"
                            class="form-input"
                            value="10"
                            min="1"
                            max="50"
                        />
                    </div>

                    <div class="form-group">
                        <label class="form-label">
                            <input
                                type="checkbox"
                                name="preview_only"
                                id="previewOnly"
                                onchange="togglePreviewMode()"
                            />
                            仅预览（不导入）
                        </label>
                    </div>

                    <div class="flex gap-2">
                        <button
                            type="button"
                            class="btn btn-primary"
                            onclick="handleImport()"
                        >
                            <svg
                                viewBox="0 0 24 24"
                                width="16"
                                height="16"
                                fill="none"
                                stroke="currentColor"
                                stroke-width="2"
                            >
                                <path
                                    d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"
                                />
                                <polyline points="17 8 12 3 7 8" />
                                <line x1="12" y1="3" x2="12" y2="15" />
                            </svg>
                            <span id="importBtnText">开始导入</span>
                        </button>
                        <button
                            type="button"
                            class="btn btn-secondary"
                            onclick="resetForm()"
                        >
                            重置
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <!-- 格式说明 -->
        <div class="card mt-4">
            <div class="card-header">
                <h3 class="card-title">
                    <svg
                        viewBox="0 0 24 24"
                        width="18"
                        height="18"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="2"
                    >
                        <circle cx="12" cy="12" r="10" />
                        <line x1="12" y1="16" x2="12" y2="12" />
                        <line x1="12" y1="8" x2="12.01" y2="8" />
                    </svg>
                    Word 文档格式说明
                </h3>
            </div>
            <div class="card-body">
                <div
                    style="
                        font-size: 13px;
                        color: var(--text-secondary);
                        line-height: 1.8;
                    "
                >
                    <p><strong>选择题格式：</strong></p>
                    <pre
                        style="
                            background: var(--bg-secondary);
                            padding: 8px;
                            border-radius: 4px;
                            margin: 8px 0;
                            font-size: 12px;
                        "
                    >
1. 以下哪个是 Python 的列表？
   A. {1, 2, 3}
   B. [1, 2, 3]
   C. (1, 2, 3)
   答案: B
   解析: 列表使用方括号表示</pre
                    >

                    <p><strong>判断题格式：</strong></p>
                    <pre
                        style="
                            background: var(--bg-secondary);
                            padding: 8px;
                            border-radius: 4px;
                            margin: 8px 0;
                            font-size: 12px;
                        "
                    >
1. Python 是一种编译型语言。（答案：错）
2. [判断] Python 是解释型语言。
   答案: 对</pre
                    >

                    <p><strong>填空题格式：</strong></p>
                    <pre
                        style="
                            background: var(--bg-secondary);
                            padding: 8px;
                            border-radius: 4px;
                            margin: 8px 0;
                            font-size: 12px;
                        "
                    >
1. Python 中输出函数是 ___()
   答案: print</pre
                    >

                    <p><strong>问答题格式：</strong></p>
                    <pre
                        style="
                            background: var(--bg-secondary);
                            padding: 8px;
                            border-radius: 4px;
                            margin: 8px 0;
                            font-size: 12px;
                        "
                    >
1. [问答] 请简述列表和元组的区别。
   答案: 列表是可变的，元组是不可变的。</pre
                    >
                </div>
            </div>
        </div>
    </div>

    <!-- 右侧: 预览结果 -->
    <div class="animate-fade-in" style="animation-delay: 0.15s">
        <div class="card" id="resultCard" style="display: none">
            <div class="card-header">
                <h3 class="card-title" id="resultTitle">
                    <svg
                        viewBox="0 0 24 24"
                        width="18"
                        height="18"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="2"
                    >
                        <polyline points="20 6 9 17 4 12" />
                    </svg>
                    导入结果
                </h3>
            </div>
            <div class="card-body" id="resultBody">
                <!-- 动态内容 -->
            </div>
        </div>

        <!-- 统计卡片 -->
        <div class="stats-grid mt-4" id="statsCard" style="display: none">
            <div class="stat-card">
                <div class="value" id="totalCount">0</div>
                <div class="label">总条目</div>
            </div>
            <div class="stat-card">
                <div
                    class="value"
                    id="successCount"
                    style="color: var(--success)"
                >
                    0
                </div>
                <div class="label">成功</div>
            </div>
            <div class="stat-card">
                <div class="value" id="failedCount" style="color: var(--error)">
                    0
                </div>
                <div class="label">失败</div>
            </div>
        </div>

        <!-- 预览列表 -->
        <div id="previewList" class="mt-4"></div>
    </div>
</div>
{% endblock %} {% block scripts %}
<script>
    function toggleImportType() {
        const type = document.getElementById("importType").value;
        const categoryGroup = document.getElementById("categoryGroup");
        const difficultyGroup = document.getElementById("difficultyGroup");
        const fileInput = document.getElementById("fileInput");

        if (type === "json") {
            categoryGroup.style.display = "none";
            difficultyGroup.style.display = "none";
            fileInput.accept = ".json";
        } else {
            categoryGroup.style.display = "block";
            difficultyGroup.style.display = "block";
            fileInput.accept = ".docx,.doc";
        }
    }

    function togglePreviewMode() {
        const previewOnly = document.getElementById("previewOnly").checked;
        const previewGroup = document.getElementById("previewGroup");
        const importBtnText = document.getElementById("importBtnText");

        previewGroup.style.display = previewOnly ? "block" : "none";
        importBtnText.textContent = previewOnly ? "预览" : "开始导入";
    }

    function resetForm() {
        document.getElementById("importForm").reset();
        document.getElementById("resultCard").style.display = "none";
        document.getElementById("statsCard").style.display = "none";
        document.getElementById("previewList").innerHTML = "";
    }

    async function handleImport() {
        const fileInput = document.getElementById("fileInput");
        const file = fileInput.files[0];

        if (!file) {
            alert("请选择文件");
            return;
        }

        const formData = new FormData();
        formData.append("file", file);
        formData.append(
            "import_type",
            document.getElementById("importType").value,
        );
        formData.append(
            "category",
            document.querySelector('select[name="category"]').value,
        );
        formData.append(
            "difficulty",
            document.querySelector('select[name="difficulty"]').value,
        );
        formData.append(
            "preview_only",
            document.getElementById("previewOnly").checked,
        );
        formData.append(
            "max_preview",
            document.querySelector('input[name="max_preview"]').value,
        );

        try {
            const response = await fetch("/api/import", {
                method: "POST",
                body: formData,
            });

            const result = await response.json();

            if (result.success) {
                displayResult(result);
            } else {
                alert("导入失败: " + result.error);
            }
        } catch (error) {
            alert("导入出错: " + error.message);
        }
    }

    function displayResult(result) {
        // 显示统计卡片
        document.getElementById("statsCard").style.display = "grid";
        document.getElementById("totalCount").textContent = result.total;
        document.getElementById("successCount").textContent =
            result.success_count;
        document.getElementById("failedCount").textContent =
            result.failed_count;

        // 显示结果卡片
        const resultCard = document.getElementById("resultCard");
        const resultBody = document.getElementById("resultBody");
        const resultTitle = document.getElementById("resultTitle");
        const previewList = document.getElementById("previewList");

        resultCard.style.display = "block";

        if (result.success_count > 0) {
            resultTitle.innerHTML = `
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="var(--success)" stroke-width="2">
                <polyline points="20 6 9 17 4 12"/>
            </svg>
            成功解析 ${result.success_count} 道题目
        `;
        }

        // 构建预览内容
        let html = "";

        // 成功的题目
        if (result.success && result.success.length > 0) {
            html +=
                '<div class="section-title" style="font-size: 15px; margin-bottom: 12px;">成功解析的题目</div>';
            result.success.forEach((q, index) => {
                html += `
                <div style="background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 6px; padding: 12px; margin-bottom: 12px;">
                    <div class="flex items-center gap-2 mb-2">
                        <span class="tag tag-${q.type}">${q.type === "choice" ? "选择" : q.type === "truefalse" ? "判断" : q.type === "fill" ? "填空" : "问答"}</span>
                        <span class="tag tag-${q.difficulty}">${q.difficulty === "easy" ? "简单" : q.difficulty === "medium" ? "中等" : "困难"}</span>
                    </div>
                    <div style="font-size: 14px; color: var(--text-primary); margin-bottom: 8px;">
                        ${index + 1}. ${escapeHtml(q.question)}
                    </div>
            `;

                if (q.options && q.options.length > 0) {
                    html +=
                        '<div style="font-size: 13px; color: var(--text-secondary); margin-bottom: 8px;">';
                    const labels = ["A", "B", "C", "D", "E", "F"];
                    q.options.forEach((opt, i) => {
                        html += `<div>${labels[i]}. ${escapeHtml(opt)}</div>`;
                    });
                    html += "</div>";
                }

                html += `
                    <div style="font-size: 12px; color: var(--text-muted);">
                        <strong>答案:</strong> ${escapeHtml(String(q.answer))}
                    </div>
                </div>
            `;
            });
        }

        // 失败的题目
        if (result.failed && result.failed.length > 0) {
            html +=
                '<div class="section-title" style="font-size: 15px; margin-bottom: 12px; color: var(--error);">解析失败的条目</div>';
            result.failed.forEach((item, index) => {
                html += `
                <div style="background: var(--error-bg); border: 1px solid var(--error); border-radius: 6px; padding: 12px; margin-bottom: 12px;">
                    <div style="font-size: 13px; color: var(--error); margin-bottom: 4px;">
                        <strong>失败 ${index + 1}:</strong> 行 ${item.line_number || "?"}
                    </div>
                    <div style="font-size: 12px; color: var(--text-secondary);">
                        ${escapeHtml(item.raw_text.substring(0, 100))}${item.raw_text.length > 100 ? "..." : ""}
                    </div>
                    <div style="font-size: 12px; color: var(--error); margin-top: 4px;">
                        原因: ${item.error}
                    </div>
                </div>
            `;
            });
        }

        // 如果是导入模式，显示导入按钮
        if (!result.preview_only && result.success_count > 0) {
            html += `
            <div style="text-align: center; margin-top: 16px;">
                <button class="btn btn-success btn-lg" onclick="confirmImport()">
                    <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2">
                        <polyline points="20 6 9 17 4 12"/>
                    </svg>
                    确认导入 ${result.success_count} 道题目
                </button>
            </div>
        `;
        }

        previewList.innerHTML = html;
    }

    function escapeHtml(text) {
        const div = document.createElement("div");
        div.textContent = text;
        return div.innerHTML;
    }

    function confirmImport() {
        const fileInput = document.getElementById("fileInput");
        const file = fileInput.files[0];

        const formData = new FormData();
        formData.append("file", file);
        formData.append(
            "import_type",
            document.getElementById("importType").value,
        );
        formData.append(
            "category",
            document.querySelector('select[name="category"]').value,
        );
        formData.append(
            "difficulty",
            document.querySelector('select[name="difficulty"]').value,
        );
        formData.append("confirm", "true");

        fetch("/api/import", {
            method: "POST",
            body: formData,
        })
            .then((response) => response.json())
            .then((result) => {
                if (result.success) {
                    alert(`成功导入 ${result.imported_count} 道题目!`);
                    window.location.href = "/admin";
                } else {
                    alert("导入失败: " + result.error);
                }
            })
            .catch((error) => {
                alert("导入出错: " + error.message);
            });
    }

    // 初始化
    document.addEventListener("DOMContentLoaded", function () {
        toggleImportType();
    });
</script>
{% endblock %}