{% extends "base.html" %}

{% block title %}教师仪表板 - FlashExam{% endblock %}

{% block head %}
<style>
    .dashboard-card {
        border: none;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        transition: transform 0.2s;
    }
    .dashboard-card:hover {
        transform: translateY(-2px);
    }
    .stat-card {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
    }
    .stat-number {
        font-size: 2.5rem;
        font-weight: bold;
    }
    .monitoring-card {
        transition: all 0.3s ease;
    }
    .monitoring-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    }
    .status-normal { color: #28a745; }
    .status-warning { color: #ffc107; }
    .status-danger { color: #dc3545; }
</style>
{% endblock %}

{% block content %}
<div class="row mb-4">
    <div class="col-12">
        <h1 class="h3 mb-0">
            <i class="bi bi-speedometer2"></i>
            教师仪表板
        </h1>
        <p class="text-muted">欢迎回来，{{ current_user.get_display_name() }}！</p>
    </div>
</div>

<!-- 系统监控面板 -->
<div class="row mb-4">
    <div class="col-12">
        <div class="card dashboard-card">
            <div class="card-header bg-dark text-white">
                <h5 class="mb-0">
                    <i class="bi bi-activity"></i>
                    系统监控面板
                    <span class="badge bg-success ms-2" id="system-status">运行正常</span>
                </h5>
                <p class="mb-0 mt-1 text-light opacity-75">实时监控服务器性能和连接状态</p>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-lg-2 col-md-4 col-sm-6 mb-3">
                        <div class="card border-0 bg-light h-100 monitoring-card">
                            <div class="card-body text-center">
                                <i class="bi bi-cpu text-primary display-6"></i>
                                <div class="h4 mb-1" id="cpu-usage">--</div>
                                <small class="text-muted">CPU使用率</small>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-2 col-md-4 col-sm-6 mb-3">
                        <div class="card border-0 bg-light h-100 monitoring-card">
                            <div class="card-body text-center">
                                <i class="bi bi-memory text-info display-6"></i>
                                <div class="h4 mb-1" id="memory-usage">--</div>
                                <small class="text-muted">内存使用率</small>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-2 col-md-4 col-sm-6 mb-3">
                        <div class="card border-0 bg-light h-100 monitoring-card">
                            <div class="card-body text-center">
                                <i class="bi bi-people text-success display-6"></i>
                                <div class="h4 mb-1" id="active-connections">--</div>
                                <small class="text-muted">活跃连接</small>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-2 col-md-4 col-sm-6 mb-3">
                        <div class="card border-0 bg-light h-100 monitoring-card">
                            <div class="card-body text-center">
                                <i class="bi bi-speedometer text-warning display-6"></i>
                                <div class="h4 mb-1" id="response-time">--</div>
                                <small class="text-muted">响应时间(ms)</small>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-2 col-md-4 col-sm-6 mb-3">
                        <div class="card border-0 bg-light h-100 monitoring-card">
                            <div class="card-body text-center">
                                <i class="bi bi-graph-up text-danger display-6"></i>
                                <div class="h4 mb-1" id="total-requests">--</div>
                                <small class="text-muted">总请求数</small>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-2 col-md-4 col-sm-6 mb-3">
                        <div class="card border-0 bg-light h-100 monitoring-card">
                            <div class="card-body text-center">
                                <i class="bi bi-clock text-secondary display-6"></i>
                                <div class="h4 mb-1" id="uptime">--</div>
                                <small class="text-muted">运行时间</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 统计卡片 -->
<div class="row mb-4">
    <div class="col-md-4 mb-3">
        <div class="card dashboard-card stat-card">
            <div class="card-body text-center">
                <i class="bi bi-people display-4 mb-2"></i>
                <div class="stat-number">{{ students_count }}</div>
                <div>学生总数</div>
            </div>
        </div>
    </div>
    
    <div class="col-md-4 mb-3">
        <div class="card dashboard-card" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); color: white;">
            <div class="card-body text-center">
                <i class="bi bi-question-circle display-4 mb-2"></i>
                <div class="stat-number">{{ questions_count }}</div>
                <div>题目总数</div>
            </div>
        </div>
    </div>
    
    <div class="col-md-4 mb-3">
        <div class="card dashboard-card" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); color: white;">
            <div class="card-body text-center">
                <i class="bi bi-journal-text display-4 mb-2"></i>
                <div class="stat-number">{{ exams_count }}</div>
                <div>考试总数</div>
            </div>
        </div>
    </div>
</div>

<!-- 快速操作 -->
<div class="row mb-4">
    <div class="col-12">
        <div class="card dashboard-card">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0">
                    <i class="bi bi-lightning-fill"></i>
                    快速操作
                </h5>
                <p class="mb-0 mt-1 text-light opacity-75">快速访问所有主要功能模块</p>
            </div>
            <div class="card-body">
                <div class="row">
                    <!-- 第一行：核心管理功能 -->
                    <div class="col-lg-2 col-md-4 col-sm-6 mb-3">
                        <a href="{{ url_for('teacher.dashboard') }}" class="btn btn-outline-secondary btn-lg w-100 h-100 d-flex flex-column justify-content-center" style="min-height: 100px;">
                            <i class="bi bi-speedometer2 display-6 mb-2"></i>
                            <span class="fw-bold">仪表板</span>
                            <small class="text-muted">数据概览</small>
                        </a>
                    </div>
                    <div class="col-lg-2 col-md-4 col-sm-6 mb-3">
                        <a href="{{ url_for('teacher.students') }}" class="btn btn-outline-primary btn-lg w-100 h-100 d-flex flex-column justify-content-center" style="min-height: 100px;">
                            <i class="bi bi-people-fill display-6 mb-2"></i>
                            <span class="fw-bold">学生管理</span>
                            <small class="text-muted">{{ students_count }}名学生</small>
                        </a>
                    </div>
                    <div class="col-lg-2 col-md-4 col-sm-6 mb-3">
                        <a href="{{ url_for('teacher.questions') }}" class="btn btn-outline-success btn-lg w-100 h-100 d-flex flex-column justify-content-center" style="min-height: 100px;">
                            <i class="bi bi-question-circle-fill display-6 mb-2"></i>
                            <span class="fw-bold">题目管理</span>
                            <small class="text-muted">{{ questions_count }}道题目</small>
                        </a>
                    </div>
                    <div class="col-lg-2 col-md-4 col-sm-6 mb-3">
                        <a href="{{ url_for('teacher.exams') }}" class="btn btn-outline-info btn-lg w-100 h-100 d-flex flex-column justify-content-center" style="min-height: 100px;">
                            <i class="bi bi-journal-text display-6 mb-2"></i>
                            <span class="fw-bold">考试管理</span>
                            <small class="text-muted">{{ exams_count }}个考试</small>
                        </a>
                    </div>
                    <div class="col-lg-2 col-md-4 col-sm-6 mb-3">
                        <a href="{{ url_for('teacher.grading') }}" class="btn btn-outline-warning btn-lg w-100 h-100 d-flex flex-column justify-content-center" style="min-height: 100px;">
                            <i class="bi bi-pencil-square display-6 mb-2"></i>
                            <span class="fw-bold">主观题评分</span>
                            <small class="text-muted">AI智能评分</small>
                        </a>
                    </div>
                    <div class="col-lg-2 col-md-4 col-sm-6 mb-3">
                        <a href="{{ url_for('teacher.results') }}" class="btn btn-outline-danger btn-lg w-100 h-100 d-flex flex-column justify-content-center" style="min-height: 100px;">
                            <i class="bi bi-graph-up display-6 mb-2"></i>
                            <span class="fw-bold">成绩分析</span>
                            <small class="text-muted">数据统计</small>
                        </a>
                    </div>
                </div>
                
                <!-- 分隔线 -->
                <hr class="my-4">
                
                <!-- 第二行：常用功能快捷方式 -->
                <div class="row">
                    <div class="col-12 mb-3">
                        <h6 class="text-muted mb-3">
                            <i class="bi bi-star-fill"></i>
                            常用功能
                        </h6>
                    </div>
                    <div class="col-lg-3 col-md-6 mb-3">
                        <a href="{{ url_for('teacher.students') }}#add" class="btn btn-light border w-100 text-start">
                            <i class="bi bi-person-plus text-primary me-2"></i>
                            <span class="fw-bold">添加学生</span>
                            <small class="d-block text-muted">快速录入新学生</small>
                        </a>
                    </div>
                    <div class="col-lg-3 col-md-6 mb-3">
                        <a href="{{ url_for('teacher.questions') }}#add" class="btn btn-light border w-100 text-start">
                            <i class="bi bi-plus-square text-success me-2"></i>
                            <span class="fw-bold">添加题目</span>
                            <small class="d-block text-muted">创建新的考试题目</small>
                        </a>
                    </div>
                    <div class="col-lg-3 col-md-6 mb-3">
                        <a href="{{ url_for('teacher.exams') }}#create" class="btn btn-light border w-100 text-start">
                            <i class="bi bi-journal-plus text-info me-2"></i>
                            <span class="fw-bold">创建考试</span>
                            <small class="d-block text-muted">组织新的考试</small>
                        </a>
                    </div>
                    <div class="col-lg-3 col-md-6 mb-3">
                        <a href="{{ url_for('teacher.results') }}#export" class="btn btn-light border w-100 text-start">
                            <i class="bi bi-download text-warning me-2"></i>
                            <span class="fw-bold">导出成绩</span>
                            <small class="d-block text-muted">下载考试成绩</small>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
// 格式化运行时间
function formatUptime(seconds) {
    const days = Math.floor(seconds / 86400);
    const hours = Math.floor((seconds % 86400) / 3600);
    const minutes = Math.floor((seconds % 3600) / 60);
    
    if (days > 0) {
        return `${days}天${hours}时`;
    } else if (hours > 0) {
        return `${hours}时${minutes}分`;
    } else {
        return `${minutes}分钟`;
    }
}

// 更新系统监控数据
function updateSystemStats() {
    $.ajax({
        url: '/api/system/stats',
        method: 'GET',
        timeout: 5000,
        success: function(data) {
            // 更新状态指示器
            const statusBadge = $('#system-status');
            if (data.status === 'normal') {
                statusBadge.removeClass('bg-warning bg-danger').addClass('bg-success').text('运行正常');
            } else if (data.status === 'warning') {
                statusBadge.removeClass('bg-success bg-danger').addClass('bg-warning').text('负载较高');
            } else {
                statusBadge.removeClass('bg-success bg-warning').addClass('bg-danger').text('状态异常');
            }
            
            // 更新各项指标
            $('#cpu-usage').text(data.cpu_usage + '%');
            $('#memory-usage').text(data.memory_usage + '%');
            $('#active-connections').text(data.active_connections);
            $('#response-time').text((data.avg_response_time * 1000).toFixed(0));
            $('#total-requests').text(data.total_requests.toLocaleString());
            $('#uptime').text(formatUptime(data.server_uptime));
            
            // 根据使用率调整颜色
            updateUsageColor('#cpu-usage', data.cpu_usage);
            updateUsageColor('#memory-usage', data.memory_usage);
            
            // 更新连接数颜色
            const connectionElement = $('#active-connections');
            if (data.active_connections > 50) {
                connectionElement.removeClass('text-success text-warning').addClass('text-danger');
            } else if (data.active_connections > 20) {
                connectionElement.removeClass('text-success text-danger').addClass('text-warning');
            } else {
                connectionElement.removeClass('text-warning text-danger').addClass('text-success');
            }
        },
        error: function(xhr, status, error) {
            console.error('获取系统统计失败:', error);
            
            // 显示错误状态
            $('#system-status').removeClass('bg-success bg-warning').addClass('bg-danger').text('连接失败');
            
            // 重置显示
            $('.h4').text('--');
        }
    });
}

// 根据使用率更新颜色
function updateUsageColor(selector, usage) {
    const element = $(selector);
    element.removeClass('text-success text-warning text-danger');
    
    if (usage >= 90) {
        element.addClass('text-danger');
    } else if (usage >= 70) {
        element.addClass('text-warning');
    } else {
        element.addClass('text-success');
    }
}

$(document).ready(function() {
    // 立即加载一次数据
    updateSystemStats();
    
    // 每5秒更新一次系统监控数据
    setInterval(updateSystemStats, 5000);
    
    // 每30秒刷新页面数据（保留原有逻辑）
    setInterval(function() {
        // 可以添加其他AJAX刷新逻辑
    }, 30000);
    
    // 添加鼠标悬停效果
    $('.dashboard-card').hover(
        function() {
            $(this).addClass('shadow-lg');
        },
        function() {
            $(this).removeClass('shadow-lg');
        }
    );
});

// 处理页面可见性变化，节省资源
document.addEventListener('visibilitychange', function() {
    if (document.hidden) {
        // 页面隐藏时停止更新
        console.log('页面隐藏，暂停监控更新');
    } else {
        // 页面显示时立即更新一次
        console.log('页面显示，恢复监控更新');
        updateSystemStats();
    }
});
</script>
{% endblock %}