{% extends 'base.html' %}
{% load static %}

{% block title %}联邦训练监控 | TERMINAL{% endblock %}

{% block content %}
<style>
    :root {
        --cyber-blue: #00eaff;
        --cyber-green: #00ff88;
        --cyber-red: #ff3366;
        --cyber-yellow: #ffcc00;
        --bg-deep: #030a14;
        --panel-bg: rgba(6, 15, 28, 0.65);
    }

    .navbar, footer { display: none !important; }

    body {
        margin: 0; padding: 0;
        background-color: var(--bg-deep) !important;
        background-image:
            linear-gradient(rgba(0, 234, 255, 0.03) 1px, transparent 1px),
            linear-gradient(90deg, rgba(0, 234, 255, 0.03) 1px, transparent 1px) !important;
        background-size: 30px 30px !important;
        color: #e0e0e0;
        font-family: 'Nunito', "Microsoft YaHei", sans-serif;
    }

    .container {
        max-width: 1400px;
        margin: 0 auto;
        padding: 30px 40px;
    }

    .top-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 20px;
        margin-bottom: 30px;
        border-bottom: 2px solid rgba(0, 234, 255, 0.2);
    }

    .top-bar h1 {
        margin: 0;
        font-size: 2rem;
        font-weight: 300;
        letter-spacing: 4px;
        color: #fff;
        text-shadow: 0 0 20px rgba(0, 234, 255, 0.8);
    }

    .top-bar h1 span {
        font-weight: 900;
        color: var(--cyber-blue);
    }

    .glass-panel {
        background: var(--panel-bg);
        border: 1px solid rgba(0, 234, 255, 0.1);
        border-radius: 8px;
        box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.8);
        backdrop-filter: blur(16px);
        padding: 25px;
        margin-bottom: 25px;
    }

    .panel-header {
        font-size: 1.3rem;
        font-weight: 600;
        margin-bottom: 20px;
        color: var(--cyber-blue);
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 20px;
    }

    .stat-card {
        background: rgba(0, 234, 255, 0.05);
        border: 1px solid rgba(0, 234, 255, 0.1);
        border-radius: 8px;
        padding: 20px;
        text-align: center;
    }

    .stat-value {
        font-size: 2.5rem;
        font-weight: 900;
        color: var(--cyber-blue);
        text-shadow: 0 0 15px rgba(0, 234, 255, 0.5);
    }

    .stat-label {
        font-size: 0.9rem;
        color: #888;
        margin-top: 5px;
    }

    .task-table {
        width: 100%;
        border-collapse: collapse;
    }

    .task-table th,
    .task-table td {
        padding: 15px;
        text-align: left;
        border-bottom: 1px solid rgba(0, 234, 255, 0.1);
    }

    .task-table th {
        color: var(--cyber-blue);
        font-weight: 600;
    }

    .status-badge {
        display: inline-block;
        padding: 5px 12px;
        border-radius: 20px;
        font-size: 0.85rem;
        font-weight: 600;
    }

    .status-pending { background: rgba(255, 204, 0, 0.2); color: var(--cyber-yellow); }
    .status-training { background: rgba(0, 255, 136, 0.2); color: var(--cyber-green); animation: pulse 2s infinite; }
    .status-completed { background: rgba(0, 234, 255, 0.2); color: var(--cyber-blue); }
    .status-failed { background: rgba(255, 51, 102, 0.2); color: var(--cyber-red); }

    @keyframes pulse {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.5; }
    }

    .btn {
        padding: 10px 20px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        font-weight: 600;
        transition: all 0.3s;
    }

    .btn-primary {
        background: var(--cyber-blue);
        color: #000;
    }

    .btn-primary:hover {
        box-shadow: 0 0 20px rgba(0, 234, 255, 0.5);
    }

    .progress-bar {
        height: 8px;
        background: rgba(0, 234, 255, 0.1);
        border-radius: 4px;
        overflow: hidden;
    }

    .progress-fill {
        height: 100%;
        background: linear-gradient(90deg, var(--cyber-blue), var(--cyber-green));
        border-radius: 4px;
        transition: width 0.5s ease;
    }

    .node-list {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 20px;
    }

    .node-card {
        background: rgba(0, 234, 255, 0.05);
        border: 1px solid rgba(0, 234, 255, 0.1);
        border-radius: 8px;
        padding: 20px;
    }

    .node-card.online {
        border-color: var(--cyber-green);
    }

    .node-name {
        font-size: 1.1rem;
        font-weight: 600;
        color: #fff;
    }

    .node-region {
        font-size: 0.9rem;
        color: #888;
    }

    .node-status {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-top: 10px;
    }

    .online-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #666;
    }

    .online-dot.active {
        background: var(--cyber-green);
        box-shadow: 0 0 10px var(--cyber-green);
    }
</style>

<div class="container">
    <!-- 顶部标题栏 -->
    <div class="top-bar">
        <h1><span>⚡</span> 联邦训练监控</h1>
        <a href="/federated/dashboard/" class="btn btn-primary">返回总览</a>
    </div>

    <!-- 统计卡片 -->
    <div class="glass-panel">
        <div class="panel-header">📊 训练统计</div>
        <div class="stats-grid">
            <div class="stat-card">
                <div class="stat-value" id="total-tasks">0</div>
                <div class="stat-label">总训练任务</div>
            </div>
            <div class="stat-card">
                <div class="stat-value" id="active-tasks">0</div>
                <div class="stat-label">进行中</div>
            </div>
            <div class="stat-card">
                <div class="stat-value" id="completed-tasks">0</div>
                <div class="stat-label">已完成</div>
            </div>
            <div class="stat-card">
                <div class="stat-value" id="avg-map">0.00</div>
                <div class="stat-label">平均 mAP</div>
            </div>
            <div class="stat-card">
                <div class="stat-value" id="avg-map95">0.00</div>
                <div class="stat-label">平均 mAP@0.5:0.95</div>
            </div>
            <div class="stat-card">
                <div class="stat-value" id="online-nodes">0</div>
                <div class="stat-label">在线节点</div>
            </div>
        </div>
    </div>

    <!-- 当前训练任务 -->
    <div class="glass-panel">
        <div class="panel-header">🏋️ 当前训练任务</div>
        <table class="task-table">
            <thead>
                <tr>
                    <th>节点</th>
                    <th>地域</th>
                    <th>模型版本</th>
                    <th>状态</th>
                    <th>进度</th>
                    <th>mAP@0.5</th>
                    <th>开始时间</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody id="training-tasks">
                <tr>
                    <td colspan="8" style="text-align: center; color: #666;">加载中...</td>
                </tr>
            </tbody>
        </table>
    </div>

    <!-- 节点列表 -->
    <div class="glass-panel">
        <div class="panel-header">🌐 边缘节点</div>
        <div class="node-list" id="node-list">
            <div style="text-align: center; color: #666; padding: 40px;">加载中...</div>
        </div>
    </div>

    <!-- 聚合轮次 -->
    <div class="glass-panel">
        <div class="panel-header">🔄 聚合轮次</div>
        <div id="aggregation-status" style="color: #666;">加载中...</div>
    </div>
</div>

<script>
    // 获取统计数据
    async function loadStats() {
        try {
            const response = await fetch('/federated/api/status/');
            const data = await response.json();

            if (data.status === 'success') {
                document.getElementById('total-tasks').textContent = data.total_tasks || 0;
                document.getElementById('active-tasks').textContent = data.active_task_count || 0;
                document.getElementById('completed-tasks').textContent = data.completed_tasks || 0;
                document.getElementById('online-nodes').textContent = data.online_count || 0;
            }
        } catch (error) {
            console.error('加载统计失败:', error);
        }
    }

    // 获取训练任务
    async function loadTrainingTasks() {
        const tbody = document.getElementById('training-tasks');

        try {
            const response = await fetch('/federated/api/training/list/');
            const data = await response.json();

            if (data.status === 'success' && data.tasks.length > 0) {
                tbody.innerHTML = data.tasks.map(task => `
                    <tr>
                        <td>${task.node_name}</td>
                        <td>${task.region || '-'}</td>
                        <td>${task.model_version}</td>
                        <td><span class="status-badge status-${task.status.toLowerCase()}">${getStatusText(task.status)}</span></td>
                        <td>
                            <div class="progress-bar">
                                <div class="progress-fill" style="width: ${task.status === 'COMPLETED' ? 100 : 0}%"></div>
                            </div>
                        </td>
                        <td>${task.best_map.toFixed(4)}</td>
                        <td>${task.started_at ? new Date(task.started_at).toLocaleString() : '-'}</td>
                        <td>
                            <button class="btn btn-primary" onclick="viewTaskDetail('${task.task_id}')">详情</button>
                        </td>
                    </tr>
                `).join('');
            } else {
                tbody.innerHTML = '<tr><td colspan="8" style="text-align: center; color: #666;">暂无训练任务</td></tr>';
            }
        } catch (error) {
            tbody.innerHTML = '<tr><td colspan="8" style="text-align: center; color: #f00;">加载失败</td></tr>';
        }
    }

    // 获取节点列表
    async function loadNodes() {
        const container = document.getElementById('node-list');

        try {
            const response = await fetch('/federated/api/status/');
            const data = await response.json();

            // 从后端获取节点数据
            const nodesResponse = await fetch('/admin/federated/federatedclientnode/');
            // 由于跨域限制，这里简化处理

            container.innerHTML = `
                <div class="node-card online">
                    <div class="node-name">本地开发节点</div>
                    <div class="node-region">开发环境</div>
                    <div class="node-status">
                        <div class="online-dot active"></div>
                        <span style="color: var(--cyber-green);">在线</span>
                    </div>
                    <div style="margin-top: 10px; font-size: 0.85rem; color: #888;">
                        可用模型: ${data.model_count || 0} 个
                    </div>
                </div>
            `;
        } catch (error) {
            container.innerHTML = '<div style="text-align: center; color: #666;">加载失败</div>';
        }
    }

    // 获取聚合状态
    async function loadAggregationStatus() {
        const container = document.getElementById('aggregation-status');

        try {
            const response = await fetch('/federated/api/aggregation/status/');
            const data = await response.json();

            if (data.current_round) {
                const round = data.current_round;
                container.innerHTML = `
                    <p>当前轮次: <strong>Round ${round.round_id}</strong></p>
                    <p>状态: <span class="status-badge status-${round.status.toLowerCase()}">${round.status}</span></p>
                    <p>参与节点: ${round.participating_nodes.length} / ${round.min_participants}</p>
                `;
            } else {
                container.innerHTML = '<p>暂无进行中的聚合轮次</p>';
            }
        } catch (error) {
            container.innerHTML = '<p style="color: #f00;">加载失败</p>';
        }
    }

    function getStatusText(status) {
        const map = {
            'PENDING': '待开始',
            'TRAINING': '训练中',
            'COMPLETED': '已完成',
            'FAILED': '失败',
            'CANCELLED': '已取消'
        };
        return map[status] || status;
    }

    function viewTaskDetail(taskId) {
        alert('任务详情: ' + taskId);
    }

    // 初始化
    document.addEventListener('DOMContentLoaded', function() {
        loadStats();
        loadTrainingTasks();
        loadNodes();
        loadAggregationStatus();

        // 每30秒刷新一次
        setInterval(() => {
            loadStats();
            loadTrainingTasks();
            loadAggregationStatus();
        }, 30000);
    });
</script>
{% endblock %}