{% extends "exam/base.html" %}
{% block title %}随机组卷（管理员） - 安全培训考试{% endblock %}
{% block content %}
<style>
.tag-checkbox {
    display: inline-block;
    margin: 4px;
}
.tag-checkbox input[type="checkbox"] {
    display: none;
}
.tag-checkbox label {
    display: inline-block;
    padding: 8px 16px;
    background: #f0f0f0;
    border: 2px solid #ddd;
    border-radius: 20px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
}
.tag-checkbox input[type="checkbox"]:checked + label {
    background: #4a90d9;
    color: #fff;
    border-color: #4a90d9;
}
.tag-checkbox label:hover {
    border-color: #4a90d9;
}
.tag-stats {
    font-size: 12px;
    color: #999;
    margin-left: 4px;
}
</style>

<div class="header">
    <h1>🎲 随机组卷（管理员）</h1>
    <div class="sub">从题库随机选题，自动赋分，满分100分</div>
</div>
<div class="container">
    <div class="card">
        <div class="card-title">⚙️ 组卷配置</div>

        <div style="background:#fff3e0; border-left:4px solid #ff9800; padding:12px 16px; margin-bottom:20px; border-radius:4px;">
            <p style="margin:0; font-size:14px; color:#333;">
                <strong>使用步骤：</strong><br>
                1. 选择要使用的题库（可多选）<br>
                2. 设置各题型数量<br>
                3. 点击生成考试
            </p>
        </div>

        <form id="generateForm">
            <div class="form-group">
                <label>考试名称 <span style="color:red">*</span></label>
                <input type="text" class="form-control" id="exam_title" name="exam_title" 
                       placeholder="如：安装机组月度安全考试" required>
            </div>

            <!-- 题库选择 -->
            <div class="form-group">
                <label>选择题库 <span style="color:#999; font-size:12px;">（可多选，不选则使用全部题库）</span></label>
                <div style="margin-top:8px;">
                    <div class="tag-checkbox">
                        <input type="checkbox" id="tag-all" name="tags" value="" checked onchange="toggleAllTags(this)">
                        <label for="tag-all">全部题库 <span class="tag-stats">({{ total_questions }}题)</span></label>
                    </div>
                    {% for tag in tags %}
                    <div class="tag-checkbox">
                        <input type="checkbox" id="tag-{{ forloop.counter }}" name="tags" value="{{ tag.tag }}" class="tag-item">
                        <label for="tag-{{ forloop.counter }}">
                            {{ tag.tag }} 
                            <span class="tag-stats">({{ tag.count }}题)</span>
                        </label>
                    </div>
                    {% endfor %}
                </div>
                <small style="color:#999; display:block; margin-top:8px;">
                    提示：选择多个题库时，系统会从所选题库中随机抽取题目
                </small>
            </div>

            <div style="display:grid; grid-template-columns: 1fr 1fr 1fr; gap:12px;">
                <div class="form-group">
                    <label>单选题数量</label>
                    <input type="number" class="form-control" id="single_count" name="single_count" value="10" min="0">
                </div>
                <div class="form-group">
                    <label>多选题数量</label>
                    <input type="number" class="form-control" id="multi_count" name="multi_count" value="5" min="0">
                </div>
                <div class="form-group">
                    <label>判断题数量</label>
                    <input type="number" class="form-control" id="judge_count" name="judge_count" value="5" min="0">
                </div>
            </div>

            <div style="display:grid; grid-template-columns: 1fr 1fr; gap:12px;">
                <div class="form-group">
                    <label>考试时长（分钟）</label>
                    <input type="number" class="form-control" id="time_limit" name="time_limit" value="60" min="5">
                </div>
                <div class="form-group">
                    <label>及格分数</label>
                    <input type="number" class="form-control" id="pass_score" name="pass_score" value="60" min="0" max="100">
                </div>
            </div>

            <div style="background:#e3f2fd; padding:12px; border-radius:4px; margin-bottom:16px;">
                <strong>📊 预览：</strong>
                <span id="preview">共 20 题，满分 100 分，每题约 5 分</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:24px; padding-top:16px; border-top:1px solid #eee;">
            <h4 style="font-size:14px; color:#666; margin-bottom:8px;">💡 快速组卷建议</h4>
            <ul style="font-size:13px; color:#666; line-height:1.8;">
                <li><strong>20题方案：</strong>单选10 + 多选5 + 判断5 = 20题，每题5分 = 100分</li>
                <li><strong>25题方案：</strong>单选15 + 多选5 + 判断5 = 25题，每题4分 = 100分</li>
                <li><strong>50题方案：</strong>单选30 + 多选10 + 判断10 = 50题，每题2分 = 100分</li>
                <li>选择多个题库时，系统会从所有选中题库中随机选题</li>
            </ul>
        </div>

        <div style="margin-top:16px; text-align:center;">
            <a href="/import-exam/" class="btn" style="background:#f0f0f0; color:#666; margin-right:8px;">← 导入题库</a>
            <a href="/dashboard/" class="btn" style="background:#f0f0f0; color:#666;">管理后台</a>
        </div>
    </div>
</div>

<script>
function toggleAllTags(master) {
    document.querySelectorAll('.tag-item').forEach(function(cb) {
        cb.checked = !master.checked;
        cb.disabled = master.checked;
    });
    if (master.checked) {
        document.querySelectorAll('.tag-item + label').forEach(function(lbl) {
            lbl.style.opacity = '0.5';
        });
    } else {
        document.querySelectorAll('.tag-item + label').forEach(function(lbl) {
            lbl.style.opacity = '1';
        });
    }
}

// 当选择具体题库时，取消"全部题库"
document.querySelectorAll('.tag-item').forEach(function(cb) {
    cb.addEventListener('change', function() {
        if (this.checked) {
            document.getElementById('tag-all').checked = false;
            document.querySelectorAll('.tag-item').forEach(function(c) {
                c.disabled = false;
            });
            document.querySelectorAll('.tag-item + label').forEach(function(lbl) {
                lbl.style.opacity = '1';
            });
        }
    });
});

function updatePreview() {
    var single = parseInt(document.getElementById('single_count').value) || 0;
    var multi = parseInt(document.getElementById('multi_count').value) || 0;
    var judge = parseInt(document.getElementById('judge_count').value) || 0;
    var total = single + multi + judge;
    if (total > 0) {
        var base = Math.floor(100 / total);
        var rem = 100 - base * total;
        var text = '共 ' + total + ' 题，满分 100 分';
        if (rem > 0) {
            text += '（前 ' + rem + ' 题 ' + (base + 1) + ' 分，其余 ' + base + ' 分）';
        } else {
            text += '，每题 ' + base + ' 分';
        }
        document.getElementById('preview').textContent = text;
    } else {
        document.getElementById('preview').textContent = '题目数量不能为0';
    }
}

['single_count', 'multi_count', 'judge_count'].forEach(function(id) {
    document.getElementById(id).addEventListener('input', updatePreview);
});

document.getElementById('generateForm').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 selectedTags = [];
    document.querySelectorAll('input[name="tags"]:checked').forEach(function(cb) {
        if (cb.value) selectedTags.push(cb.value);
    });

    var data = {
        exam_title: document.getElementById('exam_title').value.trim(),
        tags: selectedTags,
        single_count: document.getElementById('single_count').value,
        multi_count: document.getElementById('multi_count').value,
        judge_count: document.getElementById('judge_count').value,
        time_limit: document.getElementById('time_limit').value,
        pass_score: document.getElementById('pass_score').value,
    };

    fetch('/generate-exam/', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify(data)
    })
    .then(function(r) { return r.json(); })
    .then(function(res) {
        result.style.display = 'block';
        if (res.status === 'ok') {
            resultContent.style.background = '#e8f5e9';
            resultContent.style.color = '#2e7d32';
            resultContent.innerHTML = 
                '<strong>✅ ' + res.msg + '</strong><br><br>' +
                '单选：' + res.single_count + '题 / 多选：' + res.multi_count + '题 / 判断：' + res.judge_count + '题<br>' +
                '<a href="/exam/' + res.exam_id + '/" class="btn btn-primary" style="margin-top:12px;">立即进入考试</a>' +
                '<a href="/" class="btn" style="margin-top:12px; margin-left:8px; background:#f0f0f0; color:#666;">返回列表</a>';
        } else {
            resultContent.style.background = '#ffebee';
            resultContent.style.color = '#c62828';
            resultContent.innerHTML = '<strong>❌ 组卷失败</strong><br>' + res.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 %}