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

{% block title %}边缘算力调度中心 - 茄子智检{% endblock %}

{% block content %}
<style>

    .edge-card {
        background: rgba(255, 255, 255, 0.7);
        backdrop-filter: blur(12px);
        border-radius: 20px;
        border: 1px solid rgba(255, 255, 255, 0.4);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
        transition: transform 0.3s ease;
    }

    .monitor-wrapper {
        position: relative;
        border-radius: 15px;
        overflow: hidden;
        border: 3px solid #fff;
        box-shadow: var(--shadow-soft);
    }

    .stat-hero-number {
        font-size: 3.5rem;
        font-weight: 800;
        background: linear-gradient(45deg, var(--brand-primary), var(--brand-secondary));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        line-height: 1;
    }

    .status-badge {
        position: absolute;
        top: 20px;
        left: 20px;
        z-index: 10;
        padding: 8px 16px;
        border-radius: 50px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 1px;
        backdrop-filter: blur(5px);
    }

    .eco-mode { background: rgba(32, 201, 151, 0.85); color: white; }
    .heavy-mode { background: rgba(111, 66, 193, 0.85); color: white; }

    .chart-container {
        height: 280px;
        width: 100%;
    }

    .info-box {
        background: rgba(111, 66, 193, 0.05);
        border-left: 4px solid var(--brand-primary);
        padding: 15px;
        border-radius: 0 12px 12px 0;
    }
</style>

<div class="row align-items-center mb-4">
    <div class="col-md-8">
        <h2 class="fw-bold mb-0">
            <i class="bi bi-lightning-charge-fill text-warning me-2"></i>边缘算力调度中心
        </h2>
        <p class="text-secondary mt-2">实时感知环境特征，动态调配边缘侧推理资源，解决空载功耗危机。</p>
    </div>
    <div class="col-md-4 text-md-end">
        <span class="badge bg-white text-dark shadow-sm p-2 px-3 border">
            <i class="bi bi-hdd-network me-1"></i> 边缘节点：Node-01 (Active)
        </span>
    </div>
</div>

<div class="row g-4">
    <!-- 左侧：高清监控流 -->
    <div class="col-lg-8">
        <div class="edge-card p-3 h-100">
            <div class="monitor-wrapper">
                <div id="mode-badge" class="status-badge eco-mode">
                    <i class="bi bi-leaf-fill me-1"></i> ECO 节能扫描
                </div>
                <img src="{% url 'video_feed' %}" class="w-100" style="min-height: 500px; object-fit: cover;">
            </div>
        </div>
    </div>

    <!-- 右侧：审计与量化指标 -->
    <div class="col-lg-4">
        <div class="edge-card p-4 h-100 d-flex flex-column">
            <div class="text-center mb-4">
                <p class="text-uppercase small fw-bold text-muted mb-2">累计节省算力资源</p>
                <div class="stat-hero-number" id="saved_flops">0.0</div>
                <small class="text-secondary fw-bold">GFLOPs (节省量)</small>
            </div>

            <!-- 算力缩减率进度条 -->
            <div class="mb-4">
                <div class="d-flex justify-content-between mb-2">
                    <span class="small fw-bold">资源缩减效率</span>
                    <span class="small fw-bold text-success" id="reduction_rate_text">0%</span>
                </div>
                <div class="progress" style="height: 10px; background: rgba(0,0,0,0.05);">
                    <div id="reduction_bar" class="progress-bar" style="width: 0%; background: linear-gradient(90deg, var(--brand-primary), var(--brand-secondary));"></div>
                </div>
            </div>

            <!-- 实时统计卡片 -->
            <div class="row g-2 mb-4 text-center">
                <div class="col-6">
                    <div class="bg-white rounded-4 p-2 border border-light shadow-sm">
                        <div class="text-muted x-small">活跃帧 (YOLO)</div>
                        <div class="h5 fw-bold mb-0 text-primary" id="active_count">0</div>
                    </div>
                </div>
                <div class="col-6">
                    <div class="bg-white rounded-4 p-2 border border-light shadow-sm">
                        <div class="text-muted x-small">节能帧 (Scout)</div>
                        <div class="h5 fw-bold mb-0 text-success" id="idle_count">0</div>
                    </div>
                </div>
            </div>

            <!-- 趋势图表 -->
            <div id="powerChart" class="chart-container"></div>

            <div class="info-box mt-auto">
                <p class="small mb-0 text-dark">
                    <i class="bi bi-shield-check-fill text-primary me-1"></i>
                    <b>重大应用价值：</b> 本模块通过感知环境空间特征实现了模型在复杂农田环境下的<strong>按需推理</strong>。在无有效目标时减少了 90% 以上的无效计算，显著降低了设备发热并延长了野外作业续航。
                </p>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
<script>
    // 初始化 ECharts
    const chartDom = document.getElementById('powerChart');
    const myChart = echarts.init(chartDom);
    let flopsData = [];
    let timeLabels = [];

    const option = {
        grid: { left: '10%', right: '5%', bottom: '15%', top: '10%' },
        xAxis: { 
            type: 'category', 
            data: timeLabels, 
            show: false 
        },
        yAxis: { 
            type: 'value', 
            splitLine: { lineStyle: { type: 'dashed', color: '#eee' } } 
        },
        series: [{
            data: flopsData,
            type: 'line',
            smooth: true,
            showSymbol: false,
            lineStyle: { width: 3, color: '#6f42c1' },
            areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: 'rgba(111, 66, 193, 0.3)' },
                    { offset: 1, color: 'rgba(32, 201, 151, 0)' }
                ])
            }
        }]
    };
    myChart.setOption(option);

    // 状态切换与数据更新
    function updateMetrics() {
        fetch('/edge/get_metrics/')
            .then(res => res.json())
            .then(data => {
                // 更新大数字和进度条
                document.getElementById('saved_flops').innerText = data.saved_flops.toFixed(1);
                document.getElementById('reduction_rate_text').innerText = data.reduction_rate + '%';
                document.getElementById('reduction_bar').style.width = data.reduction_rate + '%';
                document.getElementById('active_count').innerText = data.active_count;
                document.getElementById('idle_count').innerText = data.idle_count;

                // 根据活跃状态更新 Badge
                const badge = document.getElementById('mode-badge');
                if (data.active_count > last_active_count) {
                    badge.innerHTML = '<i class="bi bi-cpu-fill me-1"></i> PRECISION 高精度模式';
                    badge.className = 'status-badge heavy-mode';
                } else {
                    badge.innerHTML = '<i class="bi bi-leaf-fill me-1"></i> ECO 节能扫描';
                    badge.className = 'status-badge eco-mode';
                }
                last_active_count = data.active_count;

                // 更新图表
                const now = new Date().toLocaleTimeString();
                timeLabels.push(now);
                flopsData.push(data.saved_flops);
                if (flopsData.length > 30) {
                    flopsData.shift();
                    timeLabels.shift();
                }
                myChart.setOption({
                    xAxis: { data: timeLabels },
                    series: [{ data: flopsData }]
                });
            });
    }

    let last_active_count = 0;
    setInterval(updateMetrics, 1000);

    // 响应式图表
    window.addEventListener('resize', () => myChart.resize());
</script>
{% endblock %}