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

{% block title %}联邦训练中心 | 葡萄智能决策网{% 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.85);
    }

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

    body {
        margin: 0;
        padding: 20px;
        background-color: var(--bg-deep);
        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);
        background-size: 30px 30px;
        color: #e0e0e0;
        font-family: 'Nunito', 'Microsoft YaHei', sans-serif;
        min-height: 100vh;
    }

    .container {
        max-width: 1600px;
        margin: 0 auto;
    }

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

    .header h1 {
        margin: 0;
        font-size: 2.2rem;
        font-weight: 300;
        letter-spacing: 4px;
        color: #fff;
    }

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

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

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

    .btn-primary:hover {
        box-shadow: 0 0 25px rgba(0, 234, 255, 0.6);
        transform: translateY(-2px);
    }

    .btn-danger {
        background: var(--cyber-red);
        color: #fff;
    }

    .glass-panel {
        background: var(--panel-bg);
        border: 1px solid rgba(0, 234, 255, 0.15);
        border-radius: 12px;
        padding: 25px;
        margin-bottom: 25px;
        backdrop-filter: blur(20px);
    }

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

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

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

    .stat-card:hover {
        border-color: var(--cyber-blue);
        transform: translateY(-3px);
    }

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

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

    .layout {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 25px;
    }

    .task-list {
        max-height: 400px;
        overflow-y: auto;
    }

    .task-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px;
        background: rgba(0, 0, 0, 0.3);
        border-radius: 8px;
        margin-bottom: 10px;
        border: 1px solid rgba(0, 234, 255, 0.05);
        transition: all 0.3s;
    }

    .task-item:hover {
        border-color: var(--cyber-blue);
        background: rgba(0, 234, 255, 0.05);
    }

    .task-info h4 {
        margin: 0 0 5px 0;
        color: #fff;
    }

    .task-info p {
        margin: 0;
        font-size: 0.85rem;
        color: #888;
    }

    .task-status {
        padding: 5px 15px;
        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); }
    .status-cancelled { background: rgba(128, 128, 128, 0.2); color: #888; }

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

    .progress-container {
        margin-top: 15px;
    }

    .progress-bar {
        height: 8px;
        background: rgba(0, 0, 0, 0.5);
        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;
    }

    .progress-text {
        text-align: right;
        font-size: 0.85rem;
        color: var(--cyber-green);
        margin-top: 5px;
    }

    .live-monitor {
        background: #000;
        border-radius: 8px;
        padding: 15px;
        height: 350px;
        overflow-y: auto;
        font-family: 'Fira Code', 'Consolas', monospace;
        font-size: 0.85rem;
    }

    .log-line {
        margin: 3px 0;
        color: var(--cyber-green);
        opacity: 0.9;
    }

    .log-line .timestamp {
        color: #666;
    }

    .log-line .info { color: var(--cyber-blue); }
    .log-line .success { color: var(--cyber-green); }
    .log-line .error { color: var(--cyber-red); }
    .log-line .warning { color: var(--cyber-yellow); }

    .start-form {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 15px;
    }

    .form-group {
        display: flex;
        flex-direction: column;
    }

    .form-group.full-width {
        grid-column: 1 / -1;
    }

    .form-group label {
        font-size: 0.9rem;
        color: #888;
        margin-bottom: 5px;
    }

    .form-group input,
    .form-group select {
        padding: 12px 15px;
        background: rgba(0, 0, 0, 0.5);
        border: 1px solid rgba(0, 234, 255, 0.2);
        border-radius: 6px;
        color: #fff;
        font-size: 1rem;
    }

    .form-group input:focus,
    .form-group select:focus {
        outline: none;
        border-color: var(--cyber-blue);
        box-shadow: 0 0 15px rgba(0, 234, 255, 0.2);
    }

    .empty-state {
        text-align: center;
        padding: 40px;
        color: #666;
    }

    .empty-state .icon {
        font-size: 3rem;
        margin-bottom: 15px;
    }

    /* 实时训练详情弹窗 */
    .modal {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.8);
        z-index: 1000;
        justify-content: center;
        align-items: center;
    }

    .modal.active {
        display: flex;
    }

    .modal-content {
        background: var(--panel-bg);
        border: 1px solid var(--cyber-blue);
        border-radius: 15px;
        padding: 30px;
        max-width: 900px;
        width: 90%;
        max-height: 90vh;
        overflow-y: auto;
    }

    .modal-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        padding-bottom: 15px;
        border-bottom: 1px solid rgba(0, 234, 255, 0.2);
    }

    .modal-header h3 {
        margin: 0;
        color: var(--cyber-blue);
    }

    .close-btn {
        background: none;
        border: none;
        color: #fff;
        font-size: 1.5rem;
        cursor: pointer;
    }

    .metrics-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
        margin-bottom: 20px;
    }

    .metric-card {
        background: rgba(0, 0, 0, 0.3);
        border-radius: 8px;
        padding: 15px;
        text-align: center;
    }

    .metric-value {
        font-size: 1.8rem;
        font-weight: 700;
        color: var(--cyber-blue);
    }

    .metric-label {
        font-size: 0.85rem;
        color: #888;
    }

    .mini-chart {
        height: 150px;
        background: rgba(0, 0, 0, 0.5);
        border-radius: 8px;
        margin-top: 15px;
        padding: 15px;
        display: flex;
        align-items: flex-end;
        justify-content: space-around;
    }

    .chart-bar {
        width: 20px;
        background: linear-gradient(to top, var(--cyber-blue), var(--cyber-green));
        border-radius: 3px 3px 0 0;
        transition: height 0.3s;
    }
</style>

<div class="container">
    <!-- 顶部标题 -->
    <div class="header">
        <h1><span>⚡</span> 联邦训练中心</h1>
        <div>
            <a href="/federated/dashboard/" class="btn btn-primary" style="background: transparent; border: 1px solid var(--cyber-blue); margin-right: 10px;">返回联邦总览</a>
            <button class="btn btn-primary" onclick="openStartModal()">🚀 开始新训练</button>
        </div>
    </div>

    <!-- 统计卡片 -->
    <div class="glass-panel">
        <div class="panel-title">📊 训练统计</div>
        <div class="stats-grid">
            <div class="stat-card">
                <div class="stat-value" id="stat-total">0</div>
                <div class="stat-label">总训练任务</div>
            </div>
            <div class="stat-card">
                <div class="stat-value" id="stat-pending" style="color: var(--cyber-yellow)">0</div>
                <div class="stat-label">待开始</div>
            </div>
            <div class="stat-card">
                <div class="stat-value" id="stat-training" style="color: var(--cyber-green)">0</div>
                <div class="stat-label">进行中</div>
            </div>
            <div class="stat-card">
                <div class="stat-value" id="stat-completed" style="color: var(--cyber-blue)">0</div>
                <div class="stat-label">已完成</div>
            </div>
            <div class="stat-card">
                <div class="stat-value" id="stat-failed" style="color: var(--cyber-red)">0</div>
                <div class="stat-label">失败</div>
            </div>
        </div>
    </div>

    <!-- 主要内容区 -->
    <div class="layout">
        <!-- 左侧：训练任务列表 -->
        <div class="glass-panel">
            <div class="panel-title">📋 训练任务列表</div>
            <div class="task-list" id="task-list">
                <div class="empty-state">
                    <div class="icon">🤖</div>
                    <p>暂无训练任务</p>
                    <p style="font-size: 0.85rem;">点击右上角「开始新训练」创建任务</p>
                </div>
            </div>
        </div>

        <!-- 右侧：实时监控 -->
        <div class="glass-panel">
            <div class="panel-title">📡 实时训练日志</div>
            <div class="live-monitor" id="live-monitor">
                <div class="empty-state" style="padding: 20px;">
                    <p style="color: #444;">等待训练开始...</p>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 开始训练弹窗 -->
<div class="modal" id="start-modal">
    <div class="modal-content">
        <div class="modal-header">
            <h3>🚀 开始新训练任务</h3>
            <button class="close-btn" onclick="closeStartModal()">&times;</button>
        </div>

        <form id="start-form" onsubmit="startTraining(event)">
            <div class="start-form">
                <div class="form-group">
                    <label>节点名称</label>
                    <select name="node_id" required>
                        <option value="">选择节点...</option>
                        {% for node in nodes %}
                        <option value="{{ node.node_id }}">{{ node.node_name }} ({{ node.region }})</option>
                        {% endfor %}
                        <option value="local">本地开发节点</option>
                    </select>
                </div>

                <div class="form-group">
                    <label>数据集类型</label>
                    <select name="dataset_type">
                        <option value="default">默认数据集</option>
                        <option value="disease">病害数据集</option>
                        <option value="maturity">成熟度数据集</option>
                        <option value="custom">自定义</option>
                    </select>
                </div>

                <div class="form-group">
                    <label>训练轮次 (Epochs)</label>
                    <input type="number" name="epochs" value="50" min="1" max="500" required>
                </div>

                <div class="form-group">
                    <label>批次大小 (Batch Size)</label>
                    <input type="number" name="batch_size" value="16" min="1" max="128">
                </div>

                <div class="form-group">
                    <label>图像尺寸 (Image Size)</label>
                    <input type="number" name="image_size" value="640" min="320" max="1280" step="32">
                </div>

                <div class="form-group">
                    <label>模型版本</label>
                    <input type="text" name="model_version" placeholder="自动生成">
                </div>

                <div class="form-group full-width">
                    <button type="submit" class="btn btn-primary" style="width: 100%; padding: 15px;">
                        🚀 开始训练
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- 训练详情弹窗 -->
<div class="modal" id="detail-modal">
    <div class="modal-content">
        <div class="modal-header">
            <h3>📈 训练详情</h3>
            <button class="close-btn" onclick="closeDetailModal()">&times;</button>
        </div>

        <div class="metrics-grid">
            <div class="metric-card">
                <div class="metric-value" id="detail-epoch">0/0</div>
                <div class="metric-label">训练进度</div>
            </div>
            <div class="metric-card">
                <div class="metric-value" id="detail-map">0.00</div>
                <div class="metric-label">mAP@0.5</div>
            </div>
            <div class="metric-card">
                <div class="metric-value" id="detail-loss">0.00</div>
                <div class="metric-label">当前损失</div>
            </div>
        </div>

        <div class="progress-container">
            <div class="progress-bar">
                <div class="progress-fill" id="detail-progress" style="width: 0%"></div>
            </div>
            <div class="progress-text" id="detail-progress-text">0%</div>
        </div>

        <div style="margin-top: 20px;">
            <button class="btn btn-danger" onclick="cancelTraining()">停止训练</button>
            <button class="btn btn-primary" onclick="downloadModel()" style="margin-left: 10px;">下载模型</button>
        </div>
    </div>
</div>

<script>
    let currentTaskId = null;
    let eventSource = null;
    let autoRefreshInterval = null;

    // 加载统计数据
    async function loadStats() {
        try {
            const response = await fetch('/federated/api/training/stats/');
            const data = await response.json();

            if (data.status === 'success') {
                document.getElementById('stat-total').textContent = data.global.total_tasks;
                document.getElementById('stat-pending').textContent = data.global.total_tasks - data.global.completed_tasks;
                document.getElementById('stat-training').textContent = 0;
                document.getElementById('stat-completed').textContent = data.global.completed_tasks;
            }
        } catch (error) {
            console.error('加载统计失败:', error);
        }
    }

    // 加载训练任务列表
    async function loadTaskList() {
        try {
            const response = await fetch('/federated/api/training/list/');
            const data = await response.json();

            const container = document.getElementById('task-list');

            if (data.status === 'success' && data.tasks.length > 0) {
                container.innerHTML = data.tasks.map(task => `
                    <div class="task-item" onclick="viewTask('${task.task_id}')">
                        <div class="task-info">
                            <h4>${task.node_name} - ${task.model_version}</h4>
                            <p>${task.started_at ? new Date(task.started_at).toLocaleString() : '等待开始'}</p>
                        </div>
                        <div>
                            <span class="task-status status-${task.status.toLowerCase()}">${getStatusText(task.status)}</span>
                            ${task.status === 'TRAINING' ? `
                                <div class="progress-container" style="margin-top: 10px; width: 150px;">
                                    <div class="progress-bar">
                                        <div class="progress-fill" style="width: ${task.progress}%"></div>
                                    </div>
                                    <div class="progress-text">${task.progress}%</div>
                                </div>
                            ` : ''}
                        </div>
                    </div>
                `).join('');
            } else {
                container.innerHTML = `
                    <div class="empty-state">
                        <div class="icon">🤖</div>
                        <p>暂无训练任务</p>
                        <p style="font-size: 0.85rem;">点击右上角「开始新训练」创建任务</p>
                    </div>
                `;
            }
        } catch (error) {
            console.error('加载任务列表失败:', error);
        }
    }

    // 获取状态文本
    function getStatusText(status) {
        const map = {
            'PENDING': '等待中',
            'TRAINING': '训练中',
            'COMPLETED': '已完成',
            'FAILED': '失败',
            'CANCELLED': '已取消'
        };
        return map[status] || status;
    }

    // 开始训练弹窗
    function openStartModal() {
        document.getElementById('start-modal').classList.add('active');
        loadStats();
    }

    function closeStartModal() {
        document.getElementById('start-modal').classList.remove('active');
    }

    // 开始训练
    async function startTraining(event) {
        event.preventDefault();

        const form = event.target;
        const formData = new FormData(form);

        const data = {
            node_id: formData.get('node_id'),
            epochs: parseInt(formData.get('epochs')),
            batch_size: parseInt(formData.get('batch_size')),
            image_size: parseInt(formData.get('image_size')),
            dataset_type: formData.get('dataset_type'),
        };

        try {
            const response = await fetch('/federated/api/training/start/', {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify(data)
            });

            const result = await response.json();

            if (result.status === 'success') {
                closeStartModal();
                currentTaskId = result.task_id;
                startLogStream(result.task_id);
                loadTaskList();
            } else {
                alert('创建失败: ' + result.message);
            }
        } catch (error) {
            alert('创建失败: ' + error.message);
        }
    }

    // 查看任务详情
    async function viewTask(taskId) {
        currentTaskId = taskId;
        document.getElementById('detail-modal').classList.add('active');
        updateTaskDetail(taskId);
    }

    function closeDetailModal() {
        document.getElementById('detail-modal').classList.remove('active');
        if (eventSource) {
            eventSource.close();
            eventSource = null;
        }
    }

    async function updateTaskDetail(taskId) {
        try {
            const response = await fetch(`/federated/api/training/status/${taskId}/`);
            const data = await response.json();

            if (data.status === 'success') {
                const task = data.task;
                document.getElementById('detail-epoch').textContent = `${task.current_epoch}/${task.total_epochs}`;
                document.getElementById('detail-map').textContent = task.current_map.toFixed(4);
                document.getElementById('detail-loss').textContent = task.current_loss.toFixed(4);
                document.getElementById('detail-progress').style.width = task.progress + '%';
                document.getElementById('detail-progress-text').textContent = task.progress + '%';
            }
        } catch (error) {
            console.error('更新详情失败:', error);
        }
    }

    // 开始日志流
    function startLogStream(taskId) {
        if (eventSource) {
            eventSource.close();
        }

        eventSource = new EventSource(`/federated/api/training/logs/${taskId}/`);

        eventSource.onmessage = function(event) {
            const data = JSON.parse(event.data);

            if (data.log) {
                appendLog(data.log);
            }

            if (data.status === 'COMPLETED' || data.status === 'FAILED') {
                eventSource.close();
                loadTaskList();
            }
        };

        eventSource.onerror = function() {
            console.log('SSE 连接断开');
        };
    }

    // 添加日志
    function appendLog(message) {
        const monitor = document.getElementById('live-monitor');
        const line = document.createElement('div');
        line.className = 'log-line';

        // 解析日志内容
        const timestamp = new Date().toLocaleTimeString();
        let logClass = '';
        let displayText = message;

        if (message.includes('✅')) {
            logClass = 'success';
        } else if (message.includes('❌')) {
            logClass = 'error';
        } else if (message.includes('⚠️')) {
            logClass = 'warning';
        } else if (message.includes('📋') || message.includes('📍')) {
            logClass = 'info';
        }

        line.innerHTML = `<span class="timestamp">[${timestamp}]</span> ${displayText}`;
        monitor.appendChild(line);
        monitor.scrollTop = monitor.scrollHeight;
    }

    // 取消训练
    async function cancelTraining() {
        if (!currentTaskId) return;

        if (!confirm('确定要停止训练吗？')) return;

        try {
            await fetch(`/federated/api/training/cancel/${currentTaskId}/`, {method: 'POST'});
            closeDetailModal();
            loadTaskList();
        } catch (error) {
            alert('取消失败: ' + error.message);
        }
    }

    // 下载模型
    function downloadModel() {
        if (!currentTaskId) return;
        window.location.href = `/federated/api/training/stats/${currentTaskId}/`;
    }

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

        // 每10秒刷新一次
        setInterval(() => {
            loadStats();
            loadTaskList();
            if (currentTaskId) {
                updateTaskDetail(currentTaskId);
            }
        }, 10000);
    });
</script>
{% endblock %}