{% extends "exam/base.html" %}
{% block title %}题库导入 - 安全培训考试{% endblock %}
{% block content %}
<div class="header">
    <h1>📚 题库导入（管理员）</h1>
    <div class="sub">支持标准Excel模板批量导入，导入后可用于随机组卷</div>
</div>
<div class="container">
    <div class="card">
        <div class="card-title">📤 上传试题文件</div>

        <div style="background:#e8f5e9; border-left:4px solid #4caf50; padding:12px 16px; margin-bottom:20px; border-radius:4px;">
            <p style="margin:0; font-size:14px; color:#333;">
                <strong>使用流程：</strong><br>
                1. <a href="/download-template/" style="color:#2e7d32; font-weight:bold;">⬇️ 下载Excel模板</a>（匹配你的实体模板格式）<br>
                2. 按模板格式在Excel中填写考题<br>
                3. 上传文件，系统自动导入题库<br>
                4. 导入后可在「随机组卷」页面生成满分100分的考试
            </p>
        </div>

        <form id="importForm" enctype="multipart/form-data">
            <div class="form-group">
                <label>选择Excel文件 <span style="color:#999; font-size:12px;">(.xlsx / .csv)</span></label>
                <input type="file" class="form-control" id="file" name="file" 
                       accept=".csv,.xlsx,.xls" required style="padding:8px;">
            </div>

            <div class="form-group">
                <label>导入模式</label>
                <select class="form-control" id="mode" name="mode">
                    <option value="bank">仅导入题库（推荐，后续可多次组卷）</option>
                    <option value="exam">导入题库并同时生成考试</option>
                </select>
            </div>

            <div id="examOptions" style="display:none;">
                <div class="form-group">
                    <label>考试名称（选填）</label>
                    <input type="text" class="form-control" id="exam_title" name="exam_title" 
                           placeholder="如：安装机组安全培训考试">
                </div>
                <div class="form-group">
                    <label>考试时长（分钟）</label>
                    <input type="number" class="form-control" id="exam_time" name="exam_time" value="60">
                </div>
                <div class="form-group">
                    <label>及格分数</label>
                    <input type="number" class="form-control" id="exam_pass" name="exam_pass" value="60">
                </div>
            </div>

            <div id="filePreview" style="display:none; background:#f8f9fa; padding:12px; border-radius:4px; margin-bottom:16px; font-size:13px; color:#666;">
                <strong>已选择：</strong><span id="fileName"></span> (<span id="fileSize"></span>)
            </div>

            <button type="submit" class="btn btn-primary btn-block" id="submitBtn">开始导入</button>
        </form>

        <div id="result" style="display:none; margin-top:20px;">
            <div id="resultContent" style="padding:12px; border-radius:4px;"></div>
        </div>

        <div style="margin-top:16px; text-align:center;">
            <a href="/generate-exam/" class="btn btn-primary" style="margin-right:8px;">🎲 去随机组卷</a>
            <a href="/dashboard/" class="btn" style="background:#f0f0f0; color:#666;">← 返回管理后台</a>
        </div>
    </div>
</div>

<script>
document.getElementById('mode').addEventListener('change', function() {
    document.getElementById('examOptions').style.display = 
        this.value === 'exam' ? 'block' : 'none';
});

document.getElementById('file').addEventListener('change', function(e) {
    var file = e.target.files[0];
    if (file) {
        document.getElementById('fileName').textContent = file.name;
        document.getElementById('fileSize').textContent = (file.size / 1024).toFixed(1) + ' KB';
        document.getElementById('filePreview').style.display = 'block';
    }
});

document.getElementById('importForm').addEventListener('submit', function(e) {
    e.preventDefault();
    var btn = document.getElementById('submitBtn');
    var result = document.getElementById('result');
    var resultContent = document.getElementById('resultContent');

    btn.disabled = true;
    btn.textContent = '正在导入...';
    result.style.display = 'none';

    var formData = new FormData(this);

    fetch('/import-exam/', {
        method: 'POST',
        body: formData
    })
    .then(function(r) { return r.json(); })
    .then(function(data) {
        result.style.display = 'block';
        if (data.status === 'ok') {
            resultContent.style.background = '#e8f5e9';
            resultContent.style.color = '#2e7d32';
            var html = '<strong>✅ ' + data.msg + '</strong>';
            if (data.exam_id) {
                html += '<br><br><a href="/exam/' + data.exam_id + '/" class="btn btn-primary">立即进入考试</a>';
            }
            html += '<br><br><a href="/generate-exam/" class="btn btn-primary">用题库随机组卷</a>';
            resultContent.innerHTML = html;
        } else {
            resultContent.style.background = '#ffebee';
            resultContent.style.color = '#c62828';
            resultContent.innerHTML = '<strong>❌ 导入失败</strong><br>' + data.msg;
        }
    })
    .catch(function(err) {
        result.style.display = 'block';
        resultContent.style.background = '#ffebee';
        resultContent.style.color = '#c62828';
        resultContent.innerHTML = '<strong>❌ 请求失败</strong><br>请检查网络后重试';
    })
    .finally(function() {
        btn.disabled = false;
        btn.textContent = '开始导入';
    });
});
</script>
{% endblock %}