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

{% block title %}全球联邦监控中枢 | FEDERATED NEXUS{% endblock %}

{% block content %}
<style>
    /* =========================================================
       1. 全局布局与基座
       ========================================================= */
    .fed-wrapper {
        display: flex; flex-direction: column; height: 100%;
        animation: fadeIn 0.8s ease-out forwards;
    }
    @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

    .fed-header {
        display: flex; justify-content: space-between; align-items: flex-end;
        border-bottom: 1px solid rgba(0, 229, 255, 0.2); padding-bottom: 15px; margin-bottom: 25px;
    }
    .fed-header h2 {
        margin: 0; color: #fff; font-weight: 900; letter-spacing: 4px; font-size: 2rem;
        text-shadow: 0 0 15px rgba(0, 229, 255, 0.5); text-transform: uppercase;
    }

    /* 顶部核心指标卡片 */
    .stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 25px; }
    .stat-card {
        background: linear-gradient(145deg, rgba(6, 15, 28, 0.8), rgba(2, 6, 13, 0.95));
        border: 1px solid rgba(0, 229, 255, 0.2); border-left: 4px solid #00e5ff;
        border-radius: 6px; padding: 20px; display: flex; align-items: center; justify-content: space-between;
        box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    }
    .stat-card.online { border-left-color: #00ff88; }
    .stat-card.data { border-left-color: #ffaa00; }
    .stat-info h4 { color: #8d99ae; font-size: 0.9rem; margin-bottom: 5px; text-transform: uppercase; letter-spacing: 1px; }
    .stat-info .num { color: #fff; font-size: 2rem; font-weight: 900; font-family: 'Fira Code', monospace; text-shadow: 0 0 10px rgba(255,255,255,0.3); }
    .stat-icon { font-size: 2.5rem; color: rgba(255,255,255,0.1); }

    /* =========================================================
       2. 双轨阵列排版 (左侧节点，右侧数据流)
       ========================================================= */
    .fed-grid { display: grid; grid-template-columns: 1fr 400px; gap: 25px; flex: 1; min-height: 0; }
    .glass-box {
        background: rgba(4, 12, 24, 0.75); border: 1px solid rgba(0, 229, 255, 0.15); border-radius: 8px;
        box-shadow: inset 0 0 20px rgba(0, 229, 255, 0.05); display: flex; flex-direction: column; overflow: hidden;
    }
    .box-title {
        padding: 15px 20px; font-size: 1.1rem; font-weight: 900; letter-spacing: 2px; color: #00e5ff;
        background: rgba(0, 0, 0, 0.5); border-bottom: 1px dashed rgba(0, 229, 255, 0.2); display: flex; align-items: center; gap: 10px;
    }

    /* =========================================================
       3. 边缘节点雷达阵列 (Node Cards)
       ========================================================= */
    .node-list { padding: 20px; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 15px; }
    .node-card {
        background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 6px; padding: 15px;
        transition: 0.3s; position: relative; overflow: hidden;
    }
    .node-card:hover { border-color: #00e5ff; box-shadow: 0 0 15px rgba(0,229,255,0.2); transform: translateY(-3px); }
    .node-card::before { content:''; position: absolute; top:0; left:0; width:3px; height:100%; background: #555; }
    .node-card.is-online::before { background: #00ff88; box-shadow: 0 0 10px #00ff88; }

    .n-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 8px;}
    .n-name { color: #fff; font-weight: bold; font-size: 1.1rem; }
    .n-region { color: #00e5ff; font-size: 0.8rem; background: rgba(0,229,255,0.1); padding: 2px 8px; border-radius: 10px; }

    .n-hw { font-family: 'Fira Code', monospace; color: #ffaa00; font-size: 0.85rem; margin-bottom: 8px; }
    .n-time { color: #8d99ae; font-size: 0.8rem; display: flex; align-items: center; gap: 5px; }

    /* 脉冲呼吸灯 */
    .status-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
    .dot-online { background: #00ff88; box-shadow: 0 0 8px #00ff88; animation: pulse-green 2s infinite; }
    .dot-offline { background: #ff4757; }
    @keyframes pulse-green { 0% { box-shadow: 0 0 0 0 rgba(0,255,136, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(0,255,136, 0); } 100% { box-shadow: 0 0 0 0 rgba(0,255,136, 0); } }

    /* =========================================================
       4. 载荷传输流水 (Data Stream Terminal)
       ========================================================= */
    .data-stream { padding: 15px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; background: rgba(0,2,5,0.8); }
    .stream-item {
        border-left: 2px solid #00e5ff; padding: 10px 15px; background: rgba(0,229,255,0.05); font-family: 'Fira Code', monospace; font-size: 0.85rem;
    }
    .s-time { color: #8d99ae; margin-bottom: 4px; font-size: 0.75rem;}
    .s-node { color: #00e5ff; font-weight: bold; }
    .s-type { color: #ffcc00; }

    /* 发光按钮极简补丁 */
    .btn-cyber-outline { background: transparent; border: 1px solid #00ff88; color: #00ff88; border-radius: 4px; cursor: pointer; transition: 0.3s; }
    .btn-cyber-outline:hover { background: #00ff88; color: #000; box-shadow: 0 0 15px rgba(0,255,136,0.5); }
</style>

<div class="fed-wrapper">

    <div class="fed-header">
        <h2><i class="fas fa-globe-asia"></i> 联邦生态监控矩阵</h2>
        <div style="display: flex; gap: 20px; align-items: center;">
            <button id="btn-show-add-modal" class="btn-cyber-outline" style="padding: 8px 15px; font-size: 0.9rem; font-weight: bold;">
                <i class="fas fa-plus"></i> 部署新节点
            </button>
            <div style="color: #00ff88; font-family: 'Fira Code'; font-weight: bold;">
                <i class="fas fa-satellite-dish" style="animation: pulse-green 2s infinite; border-radius: 50%;"></i> [FL_NEXUS] 全局网关运转正常
            </div>
        </div>
    </div>

    <div class="stats-row">
        <div class="stat-card">
            <div class="stat-info">
                <h4>部署节点总数 (Total Nodes)</h4>
                <div class="num">{{ total_nodes }}</div>
            </div>
            <i class="fas fa-server stat-icon"></i>
        </div>
        <div class="stat-card online">
            <div class="stat-info">
                <h4 style="color:#00ff88;">在线活跃算力 (Online)</h4>
                <div class="num">{{ online_nodes }}</div>
            </div>
            <i class="fas fa-bolt stat-icon" style="color: rgba(0,255,136,0.2);"></i>
        </div>
        <div class="stat-card data">
            <div class="stat-info">
                <h4 style="color:#ffaa00;">累计汇聚载荷 (Payloads)</h4>
                <div class="num">{{ total_uploads }}</div>
            </div>
            <i class="fas fa-database stat-icon" style="color: rgba(255,170,0,0.2);"></i>
        </div>
    </div>

    <div class="fed-grid">

        <div class="glass-box">
            <div class="box-title"><i class="fas fa-network-wired"></i> 边缘节点拓扑雷达 (Edge Topology)</div>
            <div class="node-list">
                {% for node in nodes %}
                    <div class="node-card {% if node.is_online %}is-online{% endif %}">
                        <div class="n-header">
                            <div class="n-name">
                                <span class="status-dot {% if node.is_online %}dot-online{% else %}dot-offline{% endif %}"></span>
                                {{ node.node_name }}
                            </div>
                            <div class="n-region">{{ node.region|default:"未知防区" }}</div>
                        </div>
                        <div class="n-hw"><i class="fas fa-microchip me-1"></i> {{ node.hardware_status }}</div>
                        <div class="n-time">
                            <i class="fas fa-history"></i> 心跳: {{ node.last_heartbeat|date:"Y-m-d H:i:s" }}
                        </div>
                    </div>
                {% empty %}
                    <div style="grid-column: 1/-1; text-align: center; padding: 50px; color: #8d99ae;">
                        <i class="fas fa-satellite fa-3x mb-3" style="opacity: 0.5;"></i>
                        <p>> 雷达静默，当前无任何边缘节点接入。</p>
                    </div>
                {% endfor %}
            </div>
        </div>

        <div class="glass-box">
            <div class="box-title" style="border-bottom-color: rgba(255,170,0,0.3); color: #ffaa00;">
                <i class="fas fa-stream"></i> 实时载荷汇聚链路
            </div>
            <div class="data-stream">
                {% for log in recent_logs %}
                    <div class="stream-item">
                        <div class="s-time">[{{ log.uploaded_at|date:"Y-m-d H:i:s" }}]</div>
                        <div>
                            节点 <span class="s-node">{{ log.node.node_name }}</span> 上传了载荷: <br>
                            >> TYPE: <span class="s-type">{{ log.get_upload_type_display }}</span>
                        </div>
                    </div>
                {% empty %}
                    <div style="text-align: center; padding: 40px 10px; color: #555;">> 无近期传输记录</div>
                {% endfor %}
            </div>
        </div>

    </div>
</div>

<div class="modal fade" id="addNodeModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content" style="background: rgba(6, 15, 28, 0.95); border: 1px solid #00e5ff; box-shadow: 0 0 30px rgba(0, 229, 255, 0.3); backdrop-filter: blur(15px);">
            <div class="modal-header" style="border-bottom: 1px dashed rgba(0, 229, 255, 0.3);">
                <h5 class="modal-title" style="color: #00e5ff; font-weight: 900; letter-spacing: 2px; text-shadow: 0 0 10px #00e5ff;">
                    <i class="fas fa-satellite me-2"></i> 注册边缘节点
                </h5>
                <button type="button" class="close" data-dismiss="modal" style="color: #fff; text-shadow: none;"><span>&times;</span></button>
            </div>
            <div class="modal-body" style="padding: 25px;">
                <div class="form-group mb-3">
                    <label style="color: #8d99ae; font-family: 'Fira Code'; font-size: 0.9rem;">> 节点代号 (Node Name)</label>
                    <input type="text" id="quick-node-name" class="form-control" style="background: rgba(0,0,0,0.5); border: 1px solid rgba(0,229,255,0.3); color: #00ff88; font-family: 'Fira Code';" placeholder="例：东北黑土试验田 3号机">
                </div>
                <div class="form-group mb-3">
                    <label style="color: #8d99ae; font-family: 'Fira Code'; font-size: 0.9rem;">> 专属通信秘钥 (API Key)</label>
                    <input type="text" id="quick-api-key" class="form-control" style="background: rgba(0,0,0,0.5); border: 1px solid rgba(0,229,255,0.3); color: #00ff88; font-family: 'Fira Code';" placeholder="例：DONGBEI_KEY_123">
                </div>
                <div class="form-group mb-0">
                    <label style="color: #8d99ae; font-family: 'Fira Code'; font-size: 0.9rem;">> 部署防区 (Region)</label>
                    <input type="text" id="quick-region" class="form-control" style="background: rgba(0,0,0,0.5); border: 1px solid rgba(0,229,255,0.3); color: #00ff88; font-family: 'Fira Code';" placeholder="例：极寒防区">
                </div>
            </div>
            <div class="modal-footer" style="border-top: 1px dashed rgba(0, 229, 255, 0.3);">
                <button type="button" class="btn" data-dismiss="modal" style="color: #8d99ae;">取消</button>
                <button type="button" class="btn" id="btn-submit-node" style="background: #00e5ff; color: #000; font-weight: bold; box-shadow: 0 0 15px rgba(0,229,255,0.4);">
                    <i class="fas fa-check-circle"></i> 签发通行证
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    $(document).ready(function() {
        // 强制把弹窗移到 DOM 最外层
        $('#addNodeModal').appendTo("body");

        // 🚨 绝对强制唤醒弹窗：无视前端框架版本冲突
        $('#btn-show-add-modal').click(function() {
            $('#addNodeModal').modal('show');
        });
    });

    // 快捷注册 AJAX 请求
    $('#btn-submit-node').click(function() {
        var nodeName = $('#quick-node-name').val();
        var apiKey = $('#quick-api-key').val();
        var region = $('#quick-region').val();

        if (!nodeName || !apiKey) {
            alert("[ERROR] 节点代号和通信秘钥不能为空！");
            return;
        }

        var btn = $(this);
        btn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> 注册中...');

        $.ajax({
            url: "{% url 'federated:quick_add_node' %}",
            type: "POST",
            data: JSON.stringify({
                "node_name": nodeName,
                "api_key": apiKey,
                "region": region
            }),
            contentType: "application/json",
            headers: { "X-CSRFToken": "{{ csrf_token }}" },
            success: function(res) {
                if (res.status === 'success') {
                    $('#addNodeModal').modal('hide');
                    // 页面刷新，展示新节点
                    setTimeout(function() { location.reload(); }, 300);
                } else {
                    alert(res.message);
                    btn.prop('disabled', false).html('<i class="fas fa-check-circle"></i> 签发通行证');
                }
            },
            error: function(err) {
                alert("[FATAL] 中枢通信中断！请检查后端接口。");
                btn.prop('disabled', false).html('<i class="fas fa-check-circle"></i> 签发通行证');
            }
        });
    });

    // 保留 15 秒大屏自动刷新机制（只要弹窗没打开就刷新）
    setInterval(function(){
        if (!$('#addNodeModal').hasClass('show')) {
            location.reload();
        }
    }, 15000);
</script>
{% endblock %}