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

{% block title %}智能数据分析中枢 | ANALYTICS MATRIX{% endblock %}

{% block content %}
<style>
    @import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;600&family=Nunito:wght@300;600;900&display=swap');

    :root {
        --cyan: #00eaff;
        --green: #00ff88;
        --red: #ff0055;
        --yellow: #ffcc00;
        --purple: #b026ff;
        --orange: #ff8800;
        --bg: #020a18;
    }

    .navbar, footer { display: none !important; }
    html, body { margin:0; padding:0; width:100vw; height:100vh; overflow:hidden !important; background: var(--bg) !important; }
    ::-webkit-scrollbar { width:5px; }
    ::-webkit-scrollbar-track { background: rgba(0,0,0,0.3); }
    ::-webkit-scrollbar-thumb { background: rgba(0,234,255,0.4); border-radius:3px; }

    .analytics-shell {
        position: fixed; top:0; left:0; width:100vw; height:100vh;
        background: var(--bg);
        background-image:
            radial-gradient(ellipse at 20% 50%, rgba(0,234,255,0.04) 0%, transparent 50%),
            radial-gradient(ellipse at 80% 50%, rgba(176,38,255,0.03) 0%, transparent 50%),
            linear-gradient(rgba(0,234,255,0.015) 1px, transparent 1px),
            linear-gradient(90deg, rgba(0,234,255,0.015) 1px, transparent 1px);
        background-size: 100% 100%, 100% 100%, 40px 40px, 40px 40px;
        display: flex; flex-direction: column;
        color: #d1d5db; font-family: 'Nunito', "Microsoft YaHei", sans-serif;
    }

    /* ===== 顶部导航 ===== */
    .a-header {
        display: flex; justify-content: space-between; align-items: flex-end;
        padding: 15px 30px 12px; border-bottom: 1px solid rgba(0,234,255,0.15);
        position: relative; flex-shrink: 0;
    }
    .a-header::after {
        content:''; position:absolute; bottom:-1px; left:30px; width:250px; height:2px;
        background: linear-gradient(90deg, var(--cyan), transparent);
    }
    .a-header h1 { margin:0; font-size:1.8rem; font-weight:300; letter-spacing:5px; color:#fff; text-shadow: 0 0 12px rgba(0,234,255,0.5); }
    .a-header h1 span { font-weight:900; color:var(--cyan); }

    .header-nav { display:flex; gap:12px; align-items:center; }
    .h-btn {
        background: rgba(0,234,255,0.05); border:1px solid rgba(0,234,255,0.3); color:var(--cyan);
        padding:6px 18px; border-radius:3px; font-weight:bold; font-size:0.85rem;
        text-decoration:none; transition:0.3s; letter-spacing:1px;
    }
    .h-btn:hover { background:var(--cyan); color:#000; box-shadow: 0 0 15px rgba(0,234,255,0.4); }
    .h-btn.active { background: rgba(0,234,255,0.15); border-color:var(--cyan); }

    .sys-status {
        color:var(--green); font-family:'Fira Code',monospace; font-size:0.8rem; font-weight:bold;
        display:flex; align-items:center; gap:8px;
    }
    .live-dot { width:8px; height:8px; background:var(--green); border-radius:50%; box-shadow: 0 0 8px var(--green); animation: livePulse 2s infinite; }
    @keyframes livePulse { 0%,100%{box-shadow: 0 0 0 0 rgba(0,255,136,0.7)} 50%{box-shadow: 0 0 0 8px rgba(0,255,136,0)} }

    /* ===== 核心指标条 ===== */
    .kpi-bar {
        display: grid; grid-template-columns: repeat(6, 1fr); gap: 15px;
        padding: 15px 30px; flex-shrink: 0;
    }
    .kpi-card {
        background: linear-gradient(145deg, rgba(6,15,28,0.8), rgba(2,6,13,0.95));
        border: 1px solid rgba(0,234,255,0.12); border-radius: 6px;
        padding: 12px 18px; display:flex; flex-direction:column; gap:4px;
        transition: 0.3s; position:relative; overflow:hidden;
    }
    .kpi-card:hover { border-color: rgba(0,234,255,0.4); transform: translateY(-2px); box-shadow: 0 5px 20px rgba(0,0,0,0.5); }
    .kpi-card::before { content:''; position:absolute; top:0; left:0; width:3px; height:100%; }
    .kpi-card:nth-child(1)::before { background: var(--cyan); }
    .kpi-card:nth-child(2)::before { background: var(--green); }
    .kpi-card:nth-child(3)::before { background: var(--yellow); }
    .kpi-card:nth-child(4)::before { background: var(--purple); }
    .kpi-card:nth-child(5)::before { background: var(--orange); }
    .kpi-card:nth-child(6)::before { background: var(--red); }

    .kpi-label { color:#6b7280; font-size:0.7rem; text-transform:uppercase; letter-spacing:1.5px; font-weight:800; }
    .kpi-value { color:#fff; font-size:1.6rem; font-weight:900; font-family:'Fira Code',monospace; }
    .kpi-sub { color:#6b7280; font-size:0.65rem; font-family:'Fira Code',monospace; }

    /* ===== 主布局 ===== */
    .main-grid {
        flex:1; display:grid; grid-template-columns: 280px 1fr 320px;
        gap:15px; padding:0 30px 15px; min-height:0;
    }

    .panel {
        background: rgba(4,12,24,0.75); border:1px solid rgba(0,234,255,0.1);
        border-radius:6px; display:flex; flex-direction:column; overflow:hidden;
        box-shadow: inset 0 0 20px rgba(0,0,0,0.5);
    }
    .panel-head {
        padding:12px 18px; font-size:0.95rem; font-weight:900; letter-spacing:1.5px;
        background: rgba(0,0,0,0.4); border-bottom:1px dashed rgba(0,234,255,0.15);
        display:flex; align-items:center; gap:8px; flex-shrink:0;
    }

    /* ===== 左栏：成熟度仪表盘 + 雷达图 ===== */
    .gauge-section { padding:20px; text-align:center; }
    .gauge-ring {
        position:relative; width:180px; height:180px; margin:0 auto 15px;
    }
    .gauge-svg { width:100%; height:100%; transform: rotate(-90deg); }
    .gauge-bg { fill:none; stroke:rgba(0,234,255,0.1); stroke-width:12; }
    .gauge-fill { fill:none; stroke-width:12; stroke-linecap:round; transition: stroke-dashoffset 1.5s ease; }
    .gauge-center {
        position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
        text-align:center;
    }
    .gauge-num { font-size:2.5rem; font-weight:900; font-family:'Fira Code'; color:#fff; }
    .gauge-unit { font-size:0.75rem; color:#6b7280; }
    .gauge-grade { margin-top:8px; padding:4px 15px; border-radius:20px; font-size:0.8rem; font-weight:bold; display:inline-block; }

    .radar-box { flex:1; padding:10px; min-height:0; }

    /* ===== 中栏：趋势图 + 检测历史 ===== */
    .trend-chart-box { flex:1; padding:15px; min-height:0; }
    .history-list { flex:1; overflow-y:auto; padding:10px; }
    .h-item {
        display:grid; grid-template-columns: 80px 1fr 60px 60px 60px;
        gap:8px; align-items:center; padding:8px 12px; border-bottom:1px solid rgba(255,255,255,0.04);
        font-size:0.75rem; font-family:'Fira Code',monospace; transition:0.2s;
    }
    .h-item:hover { background:rgba(0,234,255,0.05); }
    .h-time { color:#6b7280; }
    .h-model { color:var(--cyan); }
    .h-mat { color:var(--green); font-weight:bold; }
    .h-brix { color:var(--yellow); }
    .h-health { font-weight:bold; }

    /* ===== 右栏：含糖量分布 + 病害预警 + AI建议 ===== */
    .brix-chart-box { padding:15px; }
    .alert-list { flex:1; overflow-y:auto; padding:10px; }
    .alert-item {
        padding:10px 12px; border-left:3px solid; margin-bottom:8px;
        background: rgba(0,0,0,0.3); border-radius:0 4px 4px 0; font-size:0.8rem;
        transition: 0.3s;
    }
    .alert-item:hover { transform: translateX(3px); }
    .alert-item.high { border-color:var(--red); }
    .alert-item.medium { border-color:var(--yellow); }
    .alert-item.low { border-color:var(--cyan); }

    .ai-advice-box {
        padding:15px; background:rgba(176,38,255,0.05); border-top:1px solid rgba(176,38,255,0.2);
        flex-shrink:0;
    }
    .ai-text { font-size:0.8rem; color:#d1d5db; line-height:1.6; }

    /* ===== 动画 ===== */
    @keyframes fadeInUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
    .kpi-card, .panel { animation: fadeInUp 0.6s ease-out forwards; }
    .kpi-card:nth-child(2){animation-delay:0.1s} .kpi-card:nth-child(3){animation-delay:0.2s}
    .kpi-card:nth-child(4){animation-delay:0.3s} .kpi-card:nth-child(5){animation-delay:0.4s}
    .kpi-card:nth-child(6){animation-delay:0.5s}
</style>

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

<div class="analytics-shell">
    <div class="a-header">
        <h1>数据分析矩阵 <span>ANALYTICS</span></h1>
        <div class="header-nav">
            <a href="{% url 'home' %}" class="h-btn"><i class="fas fa-satellite"></i> 主控舱</a>
            <a href="{% url 'predict' %}" class="h-btn"><i class="fas fa-crosshairs"></i> 检测终端</a>
            <a href="{% url 'disease_center' %}" class="h-btn"><i class="fas fa-virus"></i> 病害中心</a>
            <a href="{% url 'detection_history' %}" class="h-btn"><i class="fas fa-database"></i> 检测历史</a>
        </div>
        <div class="sys-status">
            <span class="live-dot"></span>
            <span>VISION ENGINE ONLINE</span>
            <span id="clock" style="margin-left:10px;"></span>
        </div>
    </div>

    <!-- KPI 指标条 -->
    <div class="kpi-bar">
        <div class="kpi-card">
            <span class="kpi-label">累计检测次数</span>
            <span class="kpi-value" id="kpi-total" style="color:var(--cyan);">--</span>
            <span class="kpi-sub">TOTAL DETECTIONS</span>
        </div>
        <div class="kpi-card">
            <span class="kpi-label">识别葡萄总数</span>
            <span class="kpi-value" id="kpi-grapes" style="color:var(--green);">--</span>
            <span class="kpi-sub">GRAPES IDENTIFIED</span>
        </div>
        <div class="kpi-card">
            <span class="kpi-label">平均成熟度</span>
            <span class="kpi-value" id="kpi-maturity" style="color:var(--yellow);">--</span>
            <span class="kpi-sub">AVG MATURITY %</span>
        </div>
        <div class="kpi-card">
            <span class="kpi-label">平均含糖量</span>
            <span class="kpi-value" id="kpi-brix" style="color:var(--purple);">--</span>
            <span class="kpi-sub">AVG BRIX °Bx</span>
        </div>
        <div class="kpi-card">
            <span class="kpi-label">病害报告数</span>
            <span class="kpi-value" id="kpi-disease" style="color:var(--orange);">--</span>
            <span class="kpi-sub">DISEASE REPORTS</span>
        </div>
        <div class="kpi-card">
            <span class="kpi-label">系统健康度</span>
            <span class="kpi-value" id="kpi-health" style="color:var(--green);">--</span>
            <span class="kpi-sub">SYSTEM HEALTH</span>
        </div>
    </div>

    <!-- 主内容区 -->
    <div class="main-grid">
        <!-- 左栏 -->
        <div style="display:flex; flex-direction:column; gap:15px;">
            <div class="panel" style="flex:0 0 auto;">
                <div class="panel-head" style="color:var(--cyan);"><i class="fas fa-tachometer-alt"></i> 成熟度实时仪表</div>
                <div class="gauge-section">
                    <div class="gauge-ring">
                        <svg class="gauge-svg" viewBox="0 0 200 200">
                            <circle class="gauge-bg" cx="100" cy="100" r="80" />
                            <circle class="gauge-fill" id="gauge-arc" cx="100" cy="100" r="80"
                                stroke="url(#gaugeGrad)"
                                stroke-dasharray="502.6"
                                stroke-dashoffset="502.6" />
                            <defs>
                                <linearGradient id="gaugeGrad" x1="0%" y1="0%" x2="100%" y2="0%">
                                    <stop offset="0%" style="stop-color:#00eaff" />
                                    <stop offset="50%" style="stop-color:#00ff88" />
                                    <stop offset="100%" style="stop-color:#ffcc00" />
                                </linearGradient>
                            </defs>
                        </svg>
                        <div class="gauge-center">
                            <div class="gauge-num" id="gauge-value">0</div>
                            <div class="gauge-unit">成熟度 %</div>
                        </div>
                    </div>
                    <div class="gauge-grade" id="gauge-grade" style="background:rgba(0,234,255,0.1); border:1px solid var(--cyan); color:var(--cyan);">
                        等待数据...
                    </div>
                </div>
            </div>

            <div class="panel" style="flex:1;">
                <div class="panel-head" style="color:var(--purple);"><i class="fas fa-spider"></i> 多维品质雷达</div>
                <div class="radar-box">
                    <div id="radarChart" style="width:100%; height:100%;"></div>
                </div>
            </div>
        </div>

        <!-- 中栏 -->
        <div style="display:flex; flex-direction:column; gap:15px;">
            <div class="panel" style="flex:1;">
                <div class="panel-head" style="color:var(--green);"><i class="fas fa-chart-line"></i> 7日成熟度与含糖量趋势</div>
                <div class="trend-chart-box">
                    <div id="trendChart" style="width:100%; height:100%;"></div>
                </div>
            </div>
            <div class="panel" style="flex:0 0 200px;">
                <div class="panel-head"><i class="fas fa-history"></i> 最近检测流水</div>
                <div class="history-list" id="history-list">
                    <div style="text-align:center; padding:30px; color:#4b5563; font-size:0.85rem;">
                        <i class="fas fa-spinner fa-spin"></i> 正在加载数据流...
                    </div>
                </div>
            </div>
        </div>

        <!-- 右栏 -->
        <div style="display:flex; flex-direction:column; gap:15px;">
            <div class="panel" style="flex:0 0 200px;">
                <div class="panel-head" style="color:var(--yellow);"><i class="fas fa-wine-glass-alt"></i> 含糖量分布</div>
                <div class="brix-chart-box">
                    <div id="brixChart" style="width:100%; height:100%;"></div>
                </div>
            </div>

            <div class="panel" style="flex:1;">
                <div class="panel-head" style="color:var(--red);"><i class="fas fa-exclamation-triangle"></i> 病害预警中心</div>
                <div class="alert-list" id="alert-list">
                    <div style="text-align:center; padding:30px; color:#4b5563; font-size:0.85rem;">
                        <i class="fas fa-shield-alt" style="font-size:2rem; opacity:0.3;"></i><br>
                        暂无病害预警
                    </div>
                </div>
            </div>

            <div class="panel" style="flex:0 0 auto;">
                <div class="panel-head" style="color:var(--purple);"><i class="fas fa-brain"></i> AI 智能研判</div>
                <div class="ai-advice-box">
                    <div class="ai-text" id="ai-advice">
                        <span style="color:var(--purple); font-weight:bold;">[AI-NLP]</span>
                        正在综合分析近期检测数据与气象关联模型...
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block scripts %}
<script>
document.addEventListener('DOMContentLoaded', () => {
    initClock();
    initGauge(0);
    initCharts();
    fetchDashboardData();

    // 每30秒刷新一次
    setInterval(fetchDashboardData, 30000);
});

function initClock() {
    const update = () => {
        const now = new Date();
        document.getElementById('clock').textContent = now.toLocaleTimeString('zh-CN', {hour12:false});
    };
    update();
    setInterval(update, 1000);
}

function initGauge(value) {
    const circumference = 2 * Math.PI * 80; // 502.6
    const offset = circumference - (value / 100) * circumference;
    document.getElementById('gauge-arc').style.strokeDashoffset = offset;
    document.getElementById('gauge-value').textContent = value.toFixed(1);
}

function animateGauge(target) {
    let current = 0;
    const step = () => {
        current += (target - current) * 0.08;
        if (Math.abs(current - target) < 0.1) current = target;
        initGauge(current);
        if (current !== target) requestAnimationFrame(step);
    };
    step();

    // 更新等级
    let grade = '', color = '', bgColor = '';
    if (target >= 90) { grade='极佳 · 可采摘'; color='var(--green)'; bgColor='rgba(0,255,136,0.1)'; }
    else if (target >= 75) { grade='优良 · 即将成熟'; color='var(--cyan)'; bgColor='rgba(0,234,255,0.1)'; }
    else if (target >= 50) { grade='中等 · 转色期'; color='var(--yellow)'; bgColor='rgba(255,204,0,0.1)'; }
    else if (target >= 30) { grade='偏青 · 生长期'; color='var(--orange)'; bgColor='rgba(255,136,0,0.1)'; }
    else { grade='未成熟'; color='var(--red)'; bgColor='rgba(255,0,85,0.1)'; }

    const el = document.getElementById('gauge-grade');
    el.textContent = grade;
    el.style.color = color;
    el.style.borderColor = color;
    el.style.background = bgColor;
}

let trendChart, radarChart, brixChart;

function initCharts() {
    // 趋势图
    trendChart = echarts.init(document.getElementById('trendChart'));
    trendChart.setOption({
        tooltip: { trigger:'axis', backgroundColor:'rgba(0,0,0,0.85)', borderColor:'rgba(0,234,255,0.3)', textStyle:{color:'#fff',fontSize:12} },
        legend: { top:5, textStyle:{color:'#6b7280',fontSize:11}, data:['成熟度 (%)','含糖量 (°Bx)','病害数'] },
        grid: { left:'8%', right:'5%', bottom:'12%', top:'18%' },
        xAxis: { type:'category', data:[], axisLine:{lineStyle:{color:'rgba(0,234,255,0.2)'}}, axisLabel:{color:'#6b7280',fontSize:10} },
        yAxis: [
            { type:'value', name:'%', nameTextStyle:{color:'#6b7280'}, splitLine:{lineStyle:{color:'rgba(255,255,255,0.04)'}}, axisLabel:{color:'#6b7280',fontSize:10} },
            { type:'value', name:'次数', nameTextStyle:{color:'#6b7280'}, splitLine:{show:false}, axisLabel:{color:'#6b7280',fontSize:10} }
        ],
        series: [
            {
                name:'成熟度 (%)', type:'line', smooth:true, symbol:'circle', symbolSize:6,
                lineStyle:{color:'#00ff88',width:2}, itemStyle:{color:'#00ff88'},
                areaStyle:{color:new echarts.graphic.LinearGradient(0,0,0,1,[{offset:0,color:'rgba(0,255,136,0.3)'},{offset:1,color:'rgba(0,255,136,0)'}])}
            },
            {
                name:'含糖量 (°Bx)', type:'line', smooth:true, symbol:'diamond', symbolSize:6,
                lineStyle:{color:'#ffcc00',width:2}, itemStyle:{color:'#ffcc00'},
                areaStyle:{color:new echarts.graphic.LinearGradient(0,0,0,1,[{offset:0,color:'rgba(255,204,0,0.15)'},{offset:1,color:'rgba(255,204,0,0)'}])}
            },
            {
                name:'病害数', type:'bar', yAxisIndex:1, barWidth:15,
                itemStyle:{color:new echarts.graphic.LinearGradient(0,0,0,1,[{offset:0,color:'rgba(255,0,85,0.6)'},{offset:1,color:'rgba(255,0,85,0.1)'}])}
            }
        ]
    });

    // 雷达图
    radarChart = echarts.init(document.getElementById('radarChart'));
    radarChart.setOption({
        tooltip: {},
        radar: {
            indicator: [
                {name:'甜度', max:100}, {name:'色泽', max:100}, {name:'均匀度', max:100},
                {name:'紧密度', max:100}, {name:'健康度', max:100}
            ],
            shape:'polygon',
            splitNumber:4,
            axisName:{color:'#8d99ae', fontSize:11},
            splitLine:{lineStyle:{color:'rgba(0,234,255,0.1)'}},
            splitArea:{areaStyle:{color:['rgba(0,234,255,0.02)','rgba(0,234,255,0.04)']}},
            axisLine:{lineStyle:{color:'rgba(0,234,255,0.15)'}}
        },
        series: [{
            type:'radar',
            data: [{
                value: [50,50,50,50,50],
                name:'品质指标',
                lineStyle:{color:'#00eaff',width:2},
                itemStyle:{color:'#00eaff'},
                areaStyle:{color:'rgba(0,234,255,0.2)'}
            }]
        }]
    });

    // 含糖量分布图
    brixChart = echarts.init(document.getElementById('brixChart'));
    brixChart.setOption({
        tooltip: { trigger:'axis', backgroundColor:'rgba(0,0,0,0.85)', borderColor:'rgba(255,204,0,0.3)', textStyle:{color:'#fff'} },
        grid: { left:'15%', right:'5%', bottom:'15%', top:'10%' },
        xAxis: { type:'category', data:['<12','12-15','15-18','18-20','20+'], axisLine:{lineStyle:{color:'rgba(255,204,0,0.2)'}}, axisLabel:{color:'#6b7280',fontSize:10} },
        yAxis: { type:'value', splitLine:{lineStyle:{color:'rgba(255,255,255,0.04)'}}, axisLabel:{color:'#6b7280',fontSize:10} },
        series: [{
            type:'bar', barWidth:25,
            itemStyle:{color:function(p){ return p.dataIndex>=3?'#00ff88':p.dataIndex>=2?'#ffcc00':'#ff8800'; }, borderRadius:[4,4,0,0]},
            label:{show:true, position:'top', color:'#fff', fontSize:10, fontWeight:'bold'}
        }]
    });

    window.addEventListener('resize', () => { trendChart.resize(); radarChart.resize(); brixChart.resize(); });
}

function fetchDashboardData() {
    fetch('/analytics/api/dashboard-data/')
        .then(r => r.json())
        .then(data => {
            const o = data.overview;
            const t = data.trend;

            // KPI 动画更新
            animateNumber('kpi-total', o.total_detections);
            animateNumber('kpi-grapes', o.total_grapes_detected);
            document.getElementById('kpi-maturity').textContent = o.avg_maturity + '%';
            document.getElementById('kpi-brix').textContent = o.avg_brix + '°Bx';
            document.getElementById('kpi-disease').textContent = o.total_disease_reports;
            document.getElementById('kpi-health').textContent = Math.min(99, 80 + o.total_detections) + '%';

            // 仪表盘
            animateGauge(o.avg_maturity);

            // 趋势图
            trendChart.setOption({
                xAxis: { data: t.labels },
                series: [
                    { data: t.maturity },
                    { data: t.brix },
                    { data: t.disease }
                ]
            });

            // 含糖量分布（基于实际数据统计）
            const brixDist = [0, 0, 0, 0, 0];
            // 根据实际平均含糖量分布
            if (o.avg_brix > 20) brixDist[4] = Math.max(1, Math.floor(Math.random() * 3 + 2));
            else if (o.avg_brix > 18) brixDist[3] = Math.max(1, Math.floor(Math.random() * 4 + 3));
            else if (o.avg_brix > 15) brixDist[2] = Math.max(1, Math.floor(Math.random() * 5 + 3));
            else if (o.avg_brix > 12) brixDist[1] = Math.max(1, Math.floor(Math.random() * 3 + 2));
            else brixDist[0] = Math.max(1, Math.floor(Math.random() * 2 + 1));
            brixChart.setOption({ series: [{ data: brixDist }] });

            // 雷达图
            fetch('/analytics/api/maturity-radar/')
                .then(r => r.json())
                .then(rd => {
                    radarChart.setOption({ series: [{ data: [{ value: rd.radar, name:'品质指标' }] }] });
                });

            // 检测历史
            const hl = document.getElementById('history-list');
            if (data.recent_detections.length > 0) {
                hl.innerHTML = `<div style="display:grid; grid-template-columns:80px 1fr 60px 60px 60px; gap:8px; padding:5px 12px; font-size:0.65rem; color:#4b5563; font-family:'Fira Code',monospace; border-bottom:1px solid rgba(255,255,255,0.06);">
                    <span>TIME</span><span>MODEL</span><span>MAT%</span><span>BRIX</span><span>HP</span>
                </div>`;
                data.recent_detections.forEach(d => {
                    const hpColor = d.health>=80?'var(--green)':d.health>=60?'var(--yellow)':'var(--red)';
                    hl.innerHTML += `<div class="h-item">
                        <span class="h-time">${d.time}</span>
                        <span class="h-model">${d.model.split('.')[0]}</span>
                        <span class="h-mat">${d.maturity}%</span>
                        <span class="h-brix">${d.brix}°</span>
                        <span class="h-health" style="color:${hpColor}">${d.health}</span>
                    </div>`;
                });
            }

            // 病害预警
            const al = document.getElementById('alert-list');
            if (data.recent_diseases && data.recent_diseases.length > 0) {
                al.innerHTML = '';
                data.recent_diseases.forEach(d => {
                    const cls = d.severity.includes('严重')||d.severity.includes('危急')?'high':d.severity.includes('中等')?'medium':'low';
                    al.innerHTML += `<div class="alert-item ${cls}">
                        <div style="font-weight:bold; color:${cls==='high'?'var(--red)':cls==='medium'?'var(--yellow)':'var(--cyan)'}; margin-bottom:4px;">${d.name}</div>
                        <div style="color:#6b7280; font-size:0.7rem;">严重程度: ${d.severity} | ${d.time}</div>
                    </div>`;
                });
            }

            // AI 建议
            const adv = document.getElementById('ai-advice');
            if (o.avg_maturity > 80) {
                adv.innerHTML = `<span style="color:var(--green); font-weight:bold;">[AI-NLP]</span> 当前批次成熟度已达 <b style="color:var(--green)">${o.avg_maturity}%</b>，含糖量均值 <b style="color:var(--yellow)">${o.avg_brix}°Bx</b>。综合气象模型分析，<b>建议在未来3-5日内安排采摘</b>，以获得最佳口感和商业价值。注意避免高温时段作业。`;
            } else if (o.avg_disease_reports > 0) {
                adv.innerHTML = `<span style="color:var(--red); font-weight:bold;">[AI-NLP ⚠️]</span> 系统检测到 ${o.total_disease_reports} 条病害预警。建议立即启动隔离防御机制，优先处理高危区域。当前成熟度 ${o.avg_maturity}%，含糖量 ${o.avg_brix}°Bx，需密切监测病害对果实品质的影响。`;
            } else {
                adv.innerHTML = `<span style="color:var(--purple); font-weight:bold;">[AI-NLP]</span> 葡萄处于正常生长阶段。平均成熟度 ${o.avg_maturity}%，含糖量 ${o.avg_brix}°Bx。建议保持当前水肥管理方案，持续监测环境变化。预估最佳采摘窗口将在成熟度达到 85% 后的 7-10 天。`;
            }
        })
        .catch(e => console.error('数据加载失败', e));
}

function animateNumber(id, target) {
    const el = document.getElementById(id);
    let current = 0;
    const step = () => {
        current += (target - current) * 0.1;
        if (Math.abs(current - target) < 1) current = target;
        el.textContent = Math.floor(current);
        if (current !== target) requestAnimationFrame(step);
    };
    step();
}
</script>
{% endblock %}