{% extends "base.html" %}

{% block title %}考试监控配置 - {{ exam.title }}{% endblock %}

{% block head %}
<style>
    .config-card {
        border: none;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        transition: transform 0.2s;
    }
    .config-card:hover {
        transform: translateY(-2px);
    }
    .form-switch .form-check-input {
        width: 3rem;
        height: 1.5rem;
    }
    .alert-info {
        background-color: #e3f2fd;
        border-color: #2196f3;
        color: #1976d2;
    }
</style>
{% endblock %}

{% block content %}
<div class="row mb-4">
    <div class="col-12">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ url_for('teacher.dashboard') }}">仪表板</a></li>
                <li class="breadcrumb-item"><a href="{{ url_for('teacher.exams') }}">考试管理</a></li>
                <li class="breadcrumb-item active">监控配置</li>
            </ol>
        </nav>
        <h1 class="h3 mb-0">
            <i class="bi bi-shield-check"></i>
            考试监控配置
        </h1>
        <p class="text-muted">配置考试防作弊监控参数</p>
    </div>
</div>

<!-- 考试信息 -->
<div class="row mb-4">
    <div class="col-12">
        <div class="card config-card">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0">
                    <i class="bi bi-info-circle"></i>
                    考试信息
                </h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <p><strong>考试标题：</strong>{{ exam.title }}</p>
                        <p><strong>考试时长：</strong>{{ exam.duration_minutes }}分钟</p>
                    </div>
                    <div class="col-md-6">
                        <p><strong>题目数量：</strong>{{ exam.total_questions }}题</p>
                        <p><strong>考试状态：</strong>
                            <span class="badge {{ 'bg-success' if exam.is_active else 'bg-secondary' }}">
                                {{ '进行中' if exam.is_active else '已结束' }}
                            </span>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 监控配置 -->
<div class="row">
    <div class="col-12">
        <div class="card config-card">
            <div class="card-header bg-warning text-dark">
                <h5 class="mb-0">
                    <i class="bi bi-eye-fill"></i>
                    防作弊监控配置
                </h5>
            </div>
            <div class="card-body">
                <div class="alert alert-info">
                    <i class="bi bi-info-circle"></i>
                    <strong>说明：</strong>这些设置将控制学生考试时的防作弊监控行为。失焦监控会检测学生是否切换到其他应用程序或窗口。
                </div>
                
                <form id="monitoringConfigForm">
                    <div class="row">
                        <!-- 启用监控 -->
                        <div class="col-md-6 mb-3">
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="enable_focus_monitoring" 
                                       {{ 'checked' if config.enable_focus_monitoring else '' }}>
                                <label class="form-check-label" for="enable_focus_monitoring">
                                    <strong>启用失焦监控</strong>
                                </label>
                            </div>
                            <small class="text-muted">检测学生是否离开考试页面</small>
                        </div>
                        
                        <!-- 自动提交 -->
                        <div class="col-md-6 mb-3">
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="auto_submit_on_exceed" 
                                       {{ 'checked' if config.auto_submit_on_exceed else '' }}>
                                <label class="form-check-label" for="auto_submit_on_exceed">
                                    <strong>超限自动提交</strong>
                                </label>
                            </div>
                            <small class="text-muted">超过警告次数时自动提交考试</small>
                        </div>
                    </div>
                    
                    <div class="row">
                        <!-- 最大警告次数 -->
                        <div class="col-md-6 mb-3">
                            <label for="max_focus_warnings" class="form-label">
                                <strong>最大失焦次数</strong>
                            </label>
                            <input type="number" class="form-control" id="max_focus_warnings" 
                                   value="{{ config.max_focus_warnings }}" min="1" max="50" required>
                            <small class="text-muted">学生最多可以失焦的次数（1-50次）</small>
                        </div>
                        
                        <!-- 警告间隔 -->
                        <div class="col-md-6 mb-3">
                            <label for="warning_interval_seconds" class="form-label">
                                <strong>警告间隔时间</strong>
                            </label>
                            <div class="input-group">
                                <input type="number" class="form-control" id="warning_interval_seconds" 
                                       value="{{ config.warning_interval_seconds }}" min="5" max="300" required>
                                <span class="input-group-text">秒</span>
                            </div>
                            <small class="text-muted">两次警告之间的最小间隔时间（5-300秒）</small>
                        </div>
                    </div>
                    
                    <!-- 预览效果 -->
                    <div class="row mb-3">
                        <div class="col-12">
                            <div class="alert alert-light border">
                                <h6><i class="bi bi-eye"></i> 预览效果：</h6>
                                <p class="mb-1" id="previewText">
                                    学生最多可以失焦 <strong id="previewMaxWarnings">{{ config.max_focus_warnings }}</strong> 次，
                                    每次警告间隔至少 <strong id="previewInterval">{{ config.warning_interval_seconds }}</strong> 秒。
                                </p>
                                <p class="mb-0" id="previewAction">
                                    <span id="previewAutoSubmit" style="{% if config.auto_submit_on_exceed %}display: inline;{% else %}display: none;{% endif %}">
                                        超过次数后将<strong class="text-danger">自动提交考试</strong>。
                                    </span>
                                    <span id="previewNoAutoSubmit" style="{% if not config.auto_submit_on_exceed %}display: inline;{% else %}display: none;{% endif %}">
                                        超过次数后将<strong class="text-warning">仅显示警告</strong>，不会自动提交。
                                    </span>
                                </p>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 操作按钮 -->
                    <div class="row">
                        <div class="col-12 text-end">
                            <button type="button" class="btn btn-secondary me-2" onclick="resetToDefaults()">
                                <i class="bi bi-arrow-clockwise"></i> 恢复默认
                            </button>
                            <button type="submit" class="btn btn-primary">
                                <i class="bi bi-check-circle"></i> 保存配置
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
$(document).ready(function() {
    // 更新预览效果
    function updatePreview() {
        const maxWarnings = $('#max_focus_warnings').val();
        const interval = $('#warning_interval_seconds').val();
        const autoSubmit = $('#auto_submit_on_exceed').is(':checked');
        
        $('#previewMaxWarnings').text(maxWarnings);
        $('#previewInterval').text(interval);
        
        if (autoSubmit) {
            $('#previewAutoSubmit').show();
            $('#previewNoAutoSubmit').hide();
        } else {
            $('#previewAutoSubmit').hide();
            $('#previewNoAutoSubmit').show();
        }
    }
    
    // 绑定事件
    $('#max_focus_warnings, #warning_interval_seconds').on('input', updatePreview);
    $('#auto_submit_on_exceed').on('change', updatePreview);
    
    // 表单提交
    $('#monitoringConfigForm').on('submit', function(e) {
        e.preventDefault();
        
        const formData = {
            max_focus_warnings: $('#max_focus_warnings').val(),
            auto_submit_on_exceed: $('#auto_submit_on_exceed').is(':checked'),
            warning_interval_seconds: $('#warning_interval_seconds').val(),
            enable_focus_monitoring: $('#enable_focus_monitoring').is(':checked')
        };
        
        // 显示加载状态
        const submitBtn = $(this).find('button[type="submit"]');
        const originalText = submitBtn.html();
        submitBtn.html('<i class="bi bi-hourglass-split"></i> 保存中...').prop('disabled', true);
        
        $.ajax({
            url: '{{ url_for("teacher.exam_monitoring_config", exam_id=exam.id) }}',
            method: 'POST',
            data: formData,
            success: function(response) {
                if (response.success) {
                    Swal.fire({
                        icon: 'success',
                        title: '配置已保存',
                        text: response.message,
                        timer: 2000,
                        showConfirmButton: false
                    });
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: '保存失败',
                        text: response.message
                    });
                }
            },
            error: function() {
                Swal.fire({
                    icon: 'error',
                    title: '网络错误',
                    text: '请检查网络连接后重试'
                });
            },
            complete: function() {
                submitBtn.html(originalText).prop('disabled', false);
            }
        });
    });
});

// 恢复默认设置
function resetToDefaults() {
    Swal.fire({
        title: '确认恢复默认设置？',
        text: '这将重置所有监控配置为系统默认值',
        icon: 'question',
        showCancelButton: true,
        confirmButtonText: '确认恢复',
        cancelButtonText: '取消'
    }).then((result) => {
        if (result.isConfirmed) {
            $('#max_focus_warnings').val(9);
            $('#auto_submit_on_exceed').prop('checked', true);
            $('#warning_interval_seconds').val(30);
            $('#enable_focus_monitoring').prop('checked', true);
            
            // 更新预览
            $('#max_focus_warnings').trigger('input');
            
            Swal.fire({
                icon: 'success',
                title: '已恢复默认设置',
                text: '请点击"保存配置"按钮保存更改',
                timer: 2000,
                showConfirmButton: false
            });
        }
    });
}
</script>
{% endblock %}