{% extends "base.html" %}
{% block title %}系统设置 - FlashExam{% endblock %}

{% block content %}
<div class="container py-4">
    <div class="page-header mb-4">
        <h2><i class="bi bi-gear-fill"></i> 系统全局设置</h2>
        <p class="text-muted">配置AI模型、评分规则等系统级参数</p>
    </div>

    <div class="row">
        <!-- 左侧导航 -->
        <div class="col-md-3 mb-4">
            <div class="list-group">
                <a href="#ai-settings" class="list-group-item list-group-item-action active">
                    <i class="bi bi-robot"></i> AI模型配置
                </a>
                <a href="#grading-settings" class="list-group-item list-group-item-action">
                    <i class="bi bi-calculator"></i> 评分设置
                </a>
                <a href="#display-settings" class="list-group-item list-group-item-action">
                    <i class="bi bi-palette"></i> 显示设置
                </a>
            </div>
        </div>

        <!-- 右侧内容 -->
        <div class="col-md-9">
            <!-- AI模型配置 -->
            <div id="ai-settings" class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0"><i class="bi bi-robot me-2"></i>AI模型配置</h5>
                </div>
                <div class="card-body">
                    <div class="alert alert-info">
                        <i class="bi bi-info-circle me-2"></i>
                        配置本地Ollama服务或OpenAI兼容API，用于主观题智能评分
                    </div>

                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label class="form-label">服务地址</label>
                            <input type="text" class="form-control" id="ollama_host" 
                                   value="{{ config.ollama_host or 'http://localhost' }}" 
                                   placeholder="http://localhost 或 https://api.openai.com">
                            <small class="text-muted">本地Ollama或OpenAI兼容API地址</small>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">服务端口</label>
                            <input type="number" class="form-control" id="ollama_port" 
                                   value="{{ config.ollama_port or 11434 }}" 
                                   placeholder="11434">
                            <small class="text-muted">Ollama默认端口11434</small>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">评分模型</label>
                        <div class="input-group">
                            <select class="form-select" id="ollama_model">
                                <option value="">加载中...</option>
                            </select>
                            <button class="btn btn-outline-secondary" type="button" onclick="refreshModels()" title="刷新模型列表">
                                <i class="bi bi-arrow-clockwise"></i>
                            </button>
                        </div>
                        <small class="text-muted">点击"测试连接"或刷新按钮获取可用模型列表</small>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">API密钥（可选）</label>
                        <input type="password" class="form-control" id="api_key" 
                               value="{{ config.api_key or '' }}" 
                               placeholder="使用OpenAI等服务时需要填写">
                        <small class="text-muted">如果使用需要认证的API服务，请填写密钥</small>
                    </div>

                    <div class="mb-3">
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" id="ai_grading_enabled"
                                   {% if config.ai_grading_enabled == 'true' %}checked{% endif %}>
                            <label class="form-check-label" for="ai_grading_enabled">启用AI智能评分</label>
                        </div>
                    </div>

                    <button class="btn btn-primary" onclick="testOllamaConnection()">
                        <i class="bi bi-wifi"></i> 测试连接
                    </button>
                    <span id="connection-status" class="ms-3"></span>
                </div>
            </div>

            <!-- 评分设置 -->
            <div id="grading-settings" class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0"><i class="bi bi-calculator me-2"></i>评分设置</h5>
                </div>
                <div class="card-body">
                    <div class="mb-4">
                        <label class="form-label fw-bold">评分类型</label>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="score_type" id="score_decimal" 
                                   value="decimal" {% if config.score_type != 'integer' %}checked{% endif %}>
                            <label class="form-check-label" for="score_decimal">
                                <strong>小数评分</strong> - 允许小数分数（如 85.5分）
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="score_type" id="score_integer" 
                                   value="integer" {% if config.score_type == 'integer' %}checked{% endif %}>
                            <label class="form-check-label" for="score_integer">
                                <strong>整数评分</strong> - 只允许整数分数（如 85分）
                            </label>
                        </div>
                        <small class="text-muted d-block mt-2">此设置将影响所有考试的分数显示和计算方式</small>
                    </div>

                    <div class="mb-4">
                        <label class="form-label fw-bold">默认AI评分方法</label>
                        <select class="form-select" id="ai_grading_method">
                            <option value="auto" {% if config.ai_grading_method == 'auto' %}selected{% endif %}>
                                自动选择（推荐）
                            </option>
                            <option value="keyword" {% if config.ai_grading_method == 'keyword' %}selected{% endif %}>
                                关键词匹配
                            </option>
                            <option value="semantic" {% if config.ai_grading_method == 'semantic' %}selected{% endif %}>
                                语义相似度
                            </option>
                            <option value="ai_lite" {% if config.ai_grading_method == 'ai_lite' %}selected{% endif %}>
                                AI轻量评分
                            </option>
                            <option value="ai_enhanced" {% if config.ai_grading_method == 'ai_enhanced' %}selected{% endif %}>
                                AI增强评分
                            </option>
                            <option value="ai_qwen" {% if config.ai_grading_method == 'ai_qwen' %}selected{% endif %}>
                                本地大模型评分
                            </option>
                        </select>
                        <small class="text-muted">当启用AI评分时，默认使用的评分方法</small>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">默认考试时长（分钟）</label>
                        <input type="number" class="form-control" id="default_exam_duration" 
                               value="{{ config.default_exam_duration or 60 }}" min="5" max="300">
                    </div>
                </div>
            </div>

            <!-- 显示设置 -->
            <div id="display-settings" class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0"><i class="bi bi-palette me-2"></i>显示设置</h5>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" id="dark_mode_default"
                                   {% if config.dark_mode_default == 'true' %}checked{% endif %}>
                            <label class="form-check-label" for="dark_mode_default">默认使用深色主题</label>
                        </div>
                    </div>
                    <div class="mb-3">
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" id="show_model_info"
                                   {% if config.show_model_info != 'false' %}checked{% endif %}>
                            <label class="form-check-label" for="show_model_info">在评分结果中显示模型信息</label>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 保存按钮 -->
            <div class="d-flex justify-content-end gap-2">
                <button class="btn btn-secondary" onclick="resetSettings()">
                    <i class="bi bi-arrow-counterclockwise"></i> 恢复默认
                </button>
                <button class="btn btn-primary" onclick="saveSettings()">
                    <i class="bi bi-check-lg"></i> 保存设置
                </button>
            </div>
        </div>
    </div>
</div>

<script>
let currentModel = '{{ config.ollama_model or "" }}';

function updateModelSelect(models) {
    const select = document.getElementById('ollama_model');
    const currentValue = currentModel || select.value;
    select.innerHTML = '';
    
    if (!models || models.length === 0) {
        const option = document.createElement('option');
        option.value = '';
        option.textContent = '未发现可用模型';
        select.appendChild(option);
        return;
    }
    
    const defaultOption = document.createElement('option');
    defaultOption.value = '';
    defaultOption.textContent = '-- 选择模型 --';
    select.appendChild(defaultOption);
    
    models.forEach(model => {
        const option = document.createElement('option');
        option.value = model;
        option.textContent = model;
        if (model === currentValue) {
            option.selected = true;
        }
        select.appendChild(option);
    });
    
    if (currentValue && models.includes(currentValue)) {
        select.value = currentValue;
    }
}

function refreshModels() {
    const host = document.getElementById('ollama_host').value;
    const port = document.getElementById('ollama_port').value;
    const statusEl = document.getElementById('connection-status');
    
    statusEl.innerHTML = '<span class="text-muted"><i class="bi bi-hourglass-split"></i> 获取模型列表...</span>';
    
    fetch('/teacher/settings/test-connection', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({host, port})
    })
    .then(r => r.json())
    .then(data => {
        if (data.success) {
            updateModelSelect(data.models);
            statusEl.innerHTML = `<span class="text-success"><i class="bi bi-check-circle-fill"></i> 发现 ${data.models.length} 个模型</span>`;
        } else {
            statusEl.innerHTML = `<span class="text-danger"><i class="bi bi-x-circle-fill"></i> ${data.error}</span>`;
        }
    })
    .catch(err => {
        statusEl.innerHTML = `<span class="text-danger"><i class="bi bi-x-circle-fill"></i> 请求失败</span>`;
    });
}

function testOllamaConnection() {
    const host = document.getElementById('ollama_host').value;
    const port = document.getElementById('ollama_port').value;
    const statusEl = document.getElementById('connection-status');
    
    statusEl.innerHTML = '<span class="text-muted"><i class="bi bi-hourglass-split"></i> 测试中...</span>';
    
    fetch('/teacher/settings/test-connection', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({host, port})
    })
    .then(r => r.json())
    .then(data => {
        if (data.success) {
            updateModelSelect(data.models);
            statusEl.innerHTML = `<span class="text-success"><i class="bi bi-check-circle-fill"></i> 连接成功，发现 ${data.models.length} 个模型</span>`;
        } else {
            statusEl.innerHTML = `<span class="text-danger"><i class="bi bi-x-circle-fill"></i> 连接失败: ${data.error}</span>`;
        }
    })
    .catch(err => {
        statusEl.innerHTML = `<span class="text-danger"><i class="bi bi-x-circle-fill"></i> 请求失败</span>`;
    });
}

function saveSettings() {
    const data = {
        ollama_host: document.getElementById('ollama_host').value,
        ollama_port: document.getElementById('ollama_port').value,
        ollama_model: document.getElementById('ollama_model').value,
        api_key: document.getElementById('api_key').value,
        ai_grading_enabled: document.getElementById('ai_grading_enabled').checked ? 'true' : 'false',
        score_type: document.querySelector('input[name="score_type"]:checked').value,
        ai_grading_method: document.getElementById('ai_grading_method').value,
        default_exam_duration: document.getElementById('default_exam_duration').value,
        dark_mode_default: document.getElementById('dark_mode_default').checked ? 'true' : 'false',
        show_model_info: document.getElementById('show_model_info').checked ? 'true' : 'false'
    };
    
    fetch('/teacher/settings/save', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify(data)
    })
    .then(r => r.json())
    .then(result => {
        if (result.success) {
            showToast('设置已保存', 'success');
        } else {
            showToast('保存失败: ' + result.error, 'danger');
        }
    })
    .catch(err => showToast('保存失败', 'danger'));
}

function resetSettings() {
    if (confirm('确定要恢复默认设置吗？')) {
        fetch('/teacher/settings/reset', {method: 'POST'})
        .then(r => r.json())
        .then(result => {
            if (result.success) {
                location.reload();
            }
        });
    }
}

function showToast(message, type) {
    const toast = document.createElement('div');
    toast.className = `alert alert-${type} position-fixed`;
    toast.style.cssText = 'top: 20px; right: 20px; z-index: 9999;';
    toast.textContent = message;
    document.body.appendChild(toast);
    setTimeout(() => toast.remove(), 3000);
}

document.addEventListener('DOMContentLoaded', function() {
    refreshModels();
});
</script>
{% endblock %}