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

{% block title %}智蔓 SmartVine - 首页{% endblock %}

{% block content %}
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>

<style>
    /* =========================================================
       1. 全屏重置与深邃星空背景
       ========================================================= */
    .navbar { display: none !important; }
    footer { display: none !important; }

    body {
        /* 深空科幻背景，带有轻微的径向渐变模拟光源 */
        background-color: #010812 !important;
        background-image: radial-gradient(circle at 50% 40%, #02162b 0%, #010812 80%) !important;
        overflow: hidden;
        color: #fff;
        font-family: 'Nunito', "Microsoft YaHei", sans-serif;
    }

    /* 模拟背景星空粒子效果 */
    body::before {
        content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
        background-image: radial-gradient(rgba(0, 234, 255, 0.1) 1px, transparent 1px);
        background-size: 50px 50px; opacity: 0.3; z-index: -1; pointer-events: none;
    }

    .container.mt-4 {
        max-width: 100% !important; width: 100% !important; height: 100vh !important;
        background-color: transparent !important; box-shadow: none !important;
        padding: 0 15px 15px 15px !important; margin-top: 0 !important;
        display: flex; flex-direction: column;
    }

    /* =========================================================
       2. 顶部导航 (Cyber Header)
       ========================================================= */
    .cyber-header {
        display: flex; justify-content: space-between; align-items: center;
        height: 80px; padding: 0 5%; margin-bottom: 10px;
        background: url('https://img.alicdn.com/tfs/TB1hB1QEFYqK1RjSZLeXXbXppXa-1920-80.png') no-repeat center bottom;
        background-size: 100% auto;
        position: relative; z-index: 100;
    }
    .nav-links { display: flex; gap: 30px; align-items: center; }
    .nav-links a {
        color: #00eaff; text-decoration: none; font-size: 1rem; font-weight: bold;
        transition: all 0.3s; position: relative; padding: 5px;
    }
    .nav-links a:hover, .nav-links a.active { color: #fff; text-shadow: 0 0 10px #00eaff; }
    .nav-links a.active::after {
        content: ''; position: absolute; bottom: -2px; left: 0; width: 100%; height: 2px;
        background: #00eaff; box-shadow: 0 0 8px #00eaff;
    }

    .header-title {
        color: #fff; font-size: 2rem; font-weight: 900; letter-spacing: 4px; margin: 0;
        text-shadow: 0 0 15px rgba(0, 234, 255, 0.8);
    }

    /* =========================================================
       3. 两侧面板样式 (科技边框)
       ========================================================= */
    .tech-dashboard { flex: 1; height: calc(100% - 90px); }

    .tech-panel {
        background: rgba(4, 18, 36, 0.6);
        border: 1px solid rgba(0, 234, 255, 0.2);
        position: relative; padding: 20px; border-radius: 4px; height: 100%;
        backdrop-filter: blur(5px);
        box-shadow: inset 0 0 20px rgba(0, 234, 255, 0.05);
    }
    /* 精致的四个发光角角标 */
    .tech-panel::before { content: ''; position: absolute; top: -1px; left: -1px; width: 15px; height: 15px; border-top: 2px solid #00eaff; border-left: 2px solid #00eaff; }
    .tech-panel::after { content: ''; position: absolute; top: -1px; right: -1px; width: 15px; height: 15px; border-top: 2px solid #00eaff; border-right: 2px solid #00eaff; }
    .tech-panel .corner-bottom-left { position: absolute; bottom: -1px; left: -1px; width: 15px; height: 15px; border-bottom: 2px solid #00eaff; border-left: 2px solid #00eaff; }
    .tech-panel .corner-bottom-right { position: absolute; bottom: -1px; right: -1px; width: 15px; height: 15px; border-bottom: 2px solid #00eaff; border-right: 2px solid #00eaff; }

    .tech-title {
        color: #00eaff; font-size: 1.05rem; font-weight: bold;
        border-left: 3px solid #00eaff; padding-left: 10px; margin-bottom: 15px;
    }

    /* =========================================================
       4. 🌟 核心突破区域 (无边框、悬浮、破屏) 🌟
       ========================================================= */
    .center-stage {
        position: relative; display: flex; flex-direction: column;
        justify-content: space-between; align-items: center;
        height: 100%; z-index: 10;
        /* 关键：去除一切背景和边框，允许内部元素溢出 */
        background: transparent !important; border: none !important; box-shadow: none !important;
    }

    /* 顶部标题组 */
    .center-title-group { text-align: center; margin-top: 0; z-index: 20; }
    .center-title-group h2 { color: #fff; text-shadow: 0 0 15px #00eaff; font-weight: bold; font-size: 2.5rem; letter-spacing: 4px; }
    .center-title-group p { color: #00eaff; letter-spacing: 5px; font-family: monospace; font-size: 1rem; margin-top: 5px; }

    /* 葡萄藤主体 */
    .hologram-img {
        position: absolute;
        top: 50%; left: 50%;
        transform: translate(-50%, -55%); /* 居中并稍微向上偏移 */
        width: 110%; /* 放大以充满甚至突破容器 */
        max-height: 75vh;
        object-fit: contain;
        z-index: 5;
        /* 智能混合模式：如果你的图有黑底，这会让它变透明；如果是白底，请参考上次的invert写法 */
        mix-blend-mode: screen;
        filter: drop-shadow(0 0 15px rgba(0, 234, 255, 0.8)) brightness(1.2);
        animation: float-plant 6s ease-in-out infinite;
        pointer-events: none;
    }

    @keyframes float-plant {
        0% { transform: translate(-50%, -55%) translateY(0px) scale(1); }
        50% { transform: translate(-50%, -55%) translateY(-15px) scale(1.02); }
        100% { transform: translate(-50%, -55%) translateY(0px) scale(1); }
    }

    /* =========================================================
       5. 科技悬浮引线标签
       ========================================================= */
    .hud-label {
        position: absolute;
        background: rgba(2, 12, 25, 0.85);
        border: 1px solid rgba(0, 234, 255, 0.5);
        border-radius: 2px; padding: 10px 15px;
        color: #fff; font-size: 0.8rem; line-height: 1.5;
        width: 250px; z-index: 20;
        box-shadow: 0 0 15px rgba(0, 234, 255, 0.2);
        backdrop-filter: blur(4px);
    }
    .hud-label-title { color: #00eaff; font-weight: bold; margin-bottom: 5px; font-size: 0.9rem; }

    /* 左侧标签及引线 */
    .label-left { top: 45%; left: -5%; }
    .label-left::after {
        content: ''; position: absolute;
        top: 20px; right: -80px; /* 线条向右延伸 */
        width: 80px; height: 1px;
        background: #00eaff; box-shadow: 0 0 8px #00eaff;
        transform-origin: left; transform: rotate(-15deg);
    }
    .label-left::before {
        content: ''; position: absolute;
        top: -1px; right: -82px; /* 线条末端的发光点 */
        width: 5px; height: 5px; background: #fff; border-radius: 50%;
        box-shadow: 0 0 10px #fff, 0 0 20px #00eaff;
    }

    /* 右侧标签及引线 */
    .label-right { top: 35%; right: -5%; }
    .label-right::after {
        content: ''; position: absolute;
        top: 20px; left: -90px; /* 线条向左延伸 */
        width: 90px; height: 1px;
        background: #00eaff; box-shadow: 0 0 8px #00eaff;
        transform-origin: right; transform: rotate(20deg);
    }
    .label-right::before {
        content: ''; position: absolute;
        top: 3px; left: -92px; /* 线条末端的发光点 */
        width: 5px; height: 5px; background: #fff; border-radius: 50%;
        box-shadow: 0 0 10px #fff, 0 0 20px #00eaff;
    }

    /* =========================================================
       6. 底部控制台与数据面板
       ========================================================= */
    .center-bottom-hud {
        width: 100%; display: flex; flex-direction: column; align-items: center;
        z-index: 20; margin-bottom: 10px;
    }

    /* 启动按钮 */
    .btn-cyber {
        background: rgba(0, 234, 255, 0.1); border: 1px solid #00eaff; color: #00eaff;
        padding: 10px 40px; font-size: 1.2rem; font-weight: bold; letter-spacing: 2px;
        border-radius: 30px; margin-bottom: 25px; cursor: pointer; text-decoration: none;
        box-shadow: 0 0 15px rgba(0, 234, 255, 0.3), inset 0 0 10px rgba(0, 234, 255, 0.2);
        transition: all 0.3s;
    }
    .btn-cyber:hover { background: #00eaff; color: #010812; box-shadow: 0 0 30px #00eaff; }

    /* 三大数据栏 */
    .kpi-row {
        display: flex; width: 90%; justify-content: space-around; text-align: center;
        border-top: 1px solid rgba(0, 234, 255, 0.3); padding-top: 20px;
        position: relative;
    }
    /* 顶部的梯形状态标识 */
    .status-badge {
        position: absolute; top: -15px; left: 50%; transform: translateX(-50%);
        background: #010812; border: 1px solid #00eaff; color: #00eaff;
        padding: 2px 20px; font-size: 0.9rem; font-weight: bold;
        box-shadow: 0 0 10px rgba(0, 234, 255, 0.4);
    }

    .kpi-item h3 { color: #00eaff; font-size: 1.8rem; font-weight: bold; margin-bottom: 5px; text-shadow: 0 0 10px #00eaff; }
    .kpi-item p { color: #a0aab5; font-size: 0.8rem; margin: 0; }

    /* 其他组件样式 */
    .cyber-list { list-style: none; padding: 0; margin: 0; }
    .cyber-list li { padding: 10px 0; border-bottom: 1px dashed rgba(0, 234, 255, 0.2); display: flex; justify-content: space-between; font-size: 0.85rem;}
    .cyber-list li a { color: #fff; text-decoration: none; transition: color 0.3s; }
    .cyber-list li a:hover { color: #00eaff; text-shadow: 0 0 5px #00eaff; }

    .info-card {
        background: rgba(255,255,255,0.02); border: 1px solid rgba(0, 234, 255, 0.15);
        padding: 12px; border-radius: 4px; margin-bottom: 12px; display: flex; align-items: center; gap: 15px; cursor: pointer; transition: all 0.3s;
    }
    .info-card:hover { border-color: #00eaff; background: rgba(0, 234, 255, 0.1); box-shadow: 0 0 15px rgba(0, 234, 255, 0.2); }
    .info-card img { width: 50px; height: 50px; object-fit: cover; border-radius: 2px; }
    .info-card h6 { color: #00eaff; margin: 0 0 3px 0; font-size: 0.9rem; }
    .info-card p { font-size: 0.75rem; color: #a0aab5; margin: 0; }

</style>

<header class="cyber-header">
    <div class="nav-links">
        <a href="{% url 'home' %}" class="active">主控舱</a>
        <a href="{% url 'upload_model' %}">模型军械库</a>
        <a href="{% url 'train:train_model' %}">神经网络训练</a>
    </div>

    <h1 class="header-title"></h1>

    <div class="nav-links">
        <a href="{% url 'predict' %}">视觉检测终端</a>
        <a href="{% url 'analytics_dashboard' %}">数据矩阵</a>
        <a href="{% url 'disease_center' %}">病害中心</a>
        <a href="{% url 'profile' %}">操作员中心</a>
        {% if user.is_authenticated %}
            <a href="#" onclick="document.getElementById('logout-form').submit();"><i class="fas fa-power-off"></i> 切断链接</a>
            <form id="logout-form" method="post" action="{% url 'logout' %}" style="display:none;">{% csrf_token %}</form>
        {% else %}
            <a href="{% url 'login' %}"><i class="fas fa-fingerprint"></i> 身份认证</a>
        {% endif %}
    </div>
</header>

<div class="tech-dashboard row m-0">
    <div class="col-lg-3 d-flex flex-column gap-3 h-100 pb-3">
        <div class="tech-panel" style="flex: 1;">
            <div class="corner-bottom-left"></div><div class="corner-bottom-right"></div>
            <div class="tech-title">系统实时通报</div>
            <ul class="cyber-list">
                {% for announcement in announcements %}
                    <li>
                        <a href="{% url 'announcement_detail' announcement.id %}">
                            <i class="fas fa-broadcast-tower me-2" style="color: #00eaff;"></i>{{ announcement.title }}
                        </a>
                        <span style="color: #a0aab5;">{{ announcement.created_time|date:"m-d" }}</span>
                    </li>
                {% empty %}
                    <li class="text-muted"><i class="fas fa-info-circle me-2"></i>暂无系统广播信号</li>
                {% endfor %}
            </ul>
        </div>

        <div class="tech-panel" style="flex: 1.2;">
            <div class="corner-bottom-left"></div><div class="corner-bottom-right"></div>
            <div class="tech-title">成熟度趋势监测</div>
            <div id="trendChart" style="width: 100%; height: calc(100% - 40px);"></div>
        </div>
    </div>

    <div class="col-lg-6 h-100 pb-3 center-stage">

        <div class="center-title-group">
            <h2>智蔓 SmartVine</h2>
            <p>YOLO V8/V11 & GLM-4 AGENT</p>
        </div>

        <img src="{% static 'images/444.png' %}" class="hologram-img" alt="3D Hologram Vine">

        <div class="hud-label label-left">
            <div class="hud-label-title">果实坐果及成熟期(当前特征)</div>
            从花到果实：初始花期，后为结果期。初始花期：20-30天。结果期：花与结果交替进行，一般为60-100天。
        </div>

        <div class="hud-label label-right">
            <div class="hud-label-title">栽培措施</div>
            管理上，应加强肥水管理和病虫害防治，保证茎叶正常生长，延缓衰老，延长结果期，以提高产量。
        </div>

        <div class="center-bottom-hud">
            <a href="{% url 'predict' %}" class="btn-cyber">
                <i class="fas fa-crosshairs me-2"></i> 启动全景感知系统
            </a>

            <div class="kpi-row">
                <div class="status-badge">成熟期</div>
                <div class="kpi-item">
                    <h3 id="kpi-map">--</h3>
                    <p>检测精度 (mAP@.5)</p>
                </div>
                <div class="kpi-item">
                    <h3 id="kpi-nodes">--</h3>
                    <p>在线视觉引擎数</p>
                </div>
                <div class="kpi-item">
                    <h3>GLM-4</h3>
                    <p>认知大脑核心驱动</p>
                </div>
            </div>
        </div>
    </div>

    <div class="col-lg-3 d-flex flex-column gap-3 h-100 pb-3">
        <div class="tech-panel" style="flex: 1;">
            <div class="corner-bottom-left"></div><div class="corner-bottom-right"></div>
            <div class="tech-title">决策大脑算力分布</div>
            <div id="pieChart" style="width: 100%; height: calc(100% - 40px);"></div>
        </div>

        <div class="tech-panel d-flex flex-column justify-content-center" style="flex: 1.2;">
            <div class="corner-bottom-left"></div><div class="corner-bottom-right"></div>
            <div class="tech-title">产业数据库直连链路</div>

            <div class="info-card" onclick="window.location.href='{% url 'analytics_dashboard' %}'">
                <div style="width:50px; height:50px; background:linear-gradient(135deg, #b026ff, #00eaff); border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:1.5rem; color:#fff;">
                    <i class="fas fa-chart-line"></i>
                </div>
                <div>
                    <h6>智能数据矩阵</h6>
                    <p>实时成熟度仪表盘 · 含糖量估算 · 健康评分</p>
                </div>
            </div>
            <div class="info-card" onclick="window.location.href='{% url 'disease_center' %}'">
                <div style="width:50px; height:50px; background:linear-gradient(135deg, #ff0055, #ff8800); border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:1.5rem; color:#fff;">
                    <i class="fas fa-virus"></i>
                </div>
                <div>
                    <h6>病害诊断中心</h6>
                    <p>AI 智能诊断 · 治疗方案 · 知识库</p>
                </div>
            </div>
            <div class="info-card" onclick="window.location.href='{% url 'detection_history' %}'">
                <div style="width:50px; height:50px; background:linear-gradient(135deg, #00ff88, #00eaff); border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:1.5rem; color:#fff;">
                    <i class="fas fa-history"></i>
                </div>
                <div>
                    <h6>检测历史档案</h6>
                    <p>完整检测记录 · 趋势分析 · 数据导出</p>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
        document.addEventListener('DOMContentLoaded', function() {
        // 从API获取真实数据
        fetch('/analytics/api/dashboard-data/')
            .then(res => res.json())
            .then(data => {
                // 更新KPI数据
                const overview = data.overview || {};
                document.getElementById('kpi-map').textContent = overview.avg_maturity ? overview.avg_maturity + '%' : '98.5%';

                // 从联邦节点获取在线节点数
                fetch('/federated/api/status/')
                    .then(r => r.json())
                    .then(fedData => {
                        const onlineNodes = fedData.online_count || 4;
                        document.getElementById('kpi-nodes').textContent = onlineNodes + ' Nodes';
                        updatePieChart(onlineNodes);
                    })
                    .catch(() => {
                        document.getElementById('kpi-nodes').textContent = '4 Nodes';
                        updatePieChart(4);
                    });

                // 更新趋势折线图 - 如果没有真实数据则使用模拟数据
                const trendLabels = data.trend && data.trend.labels && data.trend.labels.length > 0
                    ? data.trend.labels
                    : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
                const trendData = data.trend && data.trend.maturity && data.trend.maturity.length > 0
                    ? data.trend.maturity
                    : [45, 52, 60, 75, 82, 90, 95];
                updateTrendChart(trendLabels, trendData);
            })
            .catch(err => {
                console.log('API获取失败，使用默认数据:', err);
                document.getElementById('kpi-map').textContent = '98.5%';
                document.getElementById('kpi-nodes').textContent = '4 Nodes';
                updateTrendChart(['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], [45, 52, 60, 75, 82, 90, 95]);
                updatePieChart(4);
            });

        // 趋势折线图初始化
        var trendChart = echarts.init(document.getElementById('trendChart'));
        var trendOption = {
            tooltip: { trigger: 'axis', backgroundColor: 'rgba(0,0,0,0.8)', textStyle: {color: '#fff'}, borderColor: '#00eaff' },
            grid: { left: '10%', right: '5%', bottom: '15%', top: '10%' },
            xAxis: { type: 'category', data: [], axisLine: { lineStyle: { color: 'rgba(0, 234, 255, 0.3)' } }, axisLabel: { color: '#a0aab5', fontSize: 10 } },
            yAxis: { type: 'value', splitLine: { lineStyle: { color: 'rgba(255,255,255,0.05)' } }, axisLabel: { color: '#a0aab5', fontSize: 10 } },
            series: [{
                data: [], type: 'line', smooth: true, symbol: 'none',
                lineStyle: { color: '#00eaff', width: 2 },
                areaStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: 'rgba(0, 234, 255, 0.4)' }, { offset: 1, color: 'rgba(0, 234, 255, 0.0)' } ]) }
            }]
        };
        trendChart.setOption(trendOption);

        function updateTrendChart(labels, data) {
            trendChart.setOption({
                xAxis: { data: labels },
                series: [{ data: data }]
            });
        }

        // 饼图初始化
        var pieChart = echarts.init(document.getElementById('pieChart'));
        function updatePieChart(onlineNodes) {
            var pieOption = {
                tooltip: { trigger: 'item', backgroundColor: 'rgba(0,0,0,0.8)', textStyle: {color: '#fff'}, borderColor: '#00eaff' },
                series: [{
                    name: '分析负载', type: 'pie', radius: ['45%', '75%'], center: ['50%', '50%'],
                    label: { show: false },
                    itemStyle: { borderColor: '#010812', borderWidth: 2 },
                    data: [
                        { value: onlineNodes * 262, name: '视觉识别引擎', itemStyle: { color: '#00eaff' } },
                        { value: onlineNodes * 75, name: '大模型推理分析', itemStyle: { color: '#0055ff' } },
                        { value: onlineNodes * 25, name: '数据流转调度', itemStyle: { color: '#ffaa00' } }
                    ]
                }]
            };
            pieChart.setOption(pieOption);
        }

        // 窗口缩放适配
        window.addEventListener('resize', function() { trendChart.resize(); pieChart.resize(); });
    });
</script>
{% endblock %}