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

{% block title %}紫睛灵 - 智慧农业跨模态诊断平台{% endblock %}

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

<div class="p-5 mb-5 rounded-4 hero-card fade-in-up text-center border bg-white shadow-sm">
    <div class="container-fluid py-4">
        <div class="mb-4">
            <i class="bi bi-bezier2" style="font-size: 4rem; color: #6f42c1;"></i>
        </div>

        <h1 class="display-5 fw-bold mb-3" style="color: #333;">
            紫睛灵 <span class="fs-4 text-muted fw-normal">| Purple-Eye Smart-Hub</span>
        </h1>
        <p class="lead text-secondary mb-4">
            面向智慧农业的跨模态数据融合与性能自演进诊断平台
        </p>
        <p class="fs-6 text-muted mb-5 mx-auto" style="max-width: 750px;">
            欢迎回来，<strong>{{ request.session.user_info.name|default:request.user.username }}</strong>。本平台深度融合 GIS 时空气象数据。为您提供从 <strong>48小时病程演进推演</strong> 到 <strong>采后品质剩余货架期预测</strong> 的全生命周期决策支持等。
        </p>

        <a href="#features" class="btn btn-primary btn-lg rounded-pill px-5 shadow-sm">
            进入决策中枢 <i class="bi bi-chevron-double-down ms-2"></i>
        </a>
    </div>
</div>

<div id="features" class="row g-4 mb-5">
    <div class="col-md-4 fade-in-up" style="animation-delay: 0.1s;">
        <div class="card h-100 border-0 shadow-hover bg-white">
            <div class="card-body text-center p-4">
                <div class="icon-circle bg-success-subtle text-success mb-3">
                    <i class="bi bi-shield-plus"></i>
                </div>
                <h4 class="card-title fw-bold mb-3">跨模态诊疗室</h4>
                <p class="card-text text-muted mb-4">融合视觉特征与环境温湿度，智能推演 48 小时扩散风险并生成防治处方。</p>
                <a href="{% url 'cross_modal_hub' %}" class="btn btn-outline-success rounded-pill w-100 stretched-link">开启联合诊断</a>
            </div>
        </div>
    </div>
    <div class="col-md-4 fade-in-up" style="animation-delay: 0.2s;">
        <div class="card h-100 border-0 shadow-hover bg-white">
            <div class="card-body text-center p-4">
                <div class="icon-circle bg-primary-subtle text-primary mb-3">
                    <i class="bi bi-box-seam"></i>
                </div>
                <h4 class="card-title fw-bold mb-3">采后品质与物流</h4>
                <p class="card-text text-muted mb-4">基于曲率与色泽定级，结合动力学模型预测剩余货架期，降低经济损耗。</p>
                <a href="{% url 'post_harvest_logistics' %}" class="btn btn-outline-primary rounded-pill w-100 stretched-link">评估经济价值</a>
            </div>
        </div>
    </div>
    <div class="col-md-4 fade-in-up" style="animation-delay: 0.3s;">
        <div class="card h-100 border-0 shadow-hover bg-white">
            <div class="card-body text-center p-4">
                <div class="icon-circle bg-danger-subtle text-danger mb-3">
                    <i class="bi bi-arrow-repeat"></i>
                </div>
                <h4 class="card-title fw-bold mb-3">反馈中心</h4>
                <p class="card-text text-muted mb-4">参与模型纠错与逻辑清洗，驱动底层轻量化架构在本地环境中的精度自演进。</p>
                <a href="{% url 'evolution_dashboard' %}" class="btn btn-outline-danger rounded-pill w-100 stretched-link">贡献演进数据</a>
            </div>
        </div>
    </div>
</div>

<div class="row g-4 mb-5 fade-in-up" style="animation-delay: 0.4s;">
    <div class="col-12">
        <div class="card border-0 shadow-sm bg-white">
            <div class="card-body py-4">
                <div class="row text-center divide-cols">
                    <div class="col-md-3">
                        <h2 class="fw-bold text-primary counter" data-target="{{ total_detections|default:0 }}">0</h2>
                        <p class="text-secondary mb-0">累计融合诊断数</p>
                    </div>
                    <div class="col-md-3">
                        <h2 class="fw-bold text-success counter" data-target="{{ user_count|default:0 }}">0</h2>
                        <p class="text-secondary mb-0">GIS 联防覆盖节点</p>
                    </div>
                    <div class="col-md-3">
                        <h2 class="fw-bold text-warning">
                            <span class="counter" data-target="{{ current_accuracy|default:95.8 }}">0</span>%
                        </h2>
                        <p class="text-secondary mb-0">自适应校准精度</p>
                    </div>
                    <div class="col-md-3">
                        <h2 class="fw-bold text-info">
                            <span class="counter" data-target="{{ avg_delay_ms|default:0 }}">0</span>ms
                        </h2>
                        <p class="text-secondary mb-0">边缘端平均延迟</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-7">
        <div class="card border-0 shadow-sm p-4 bg-white h-100">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h6 class="fw-bold mb-0"><i class="bi bi-graph-up-arrow me-2 text-primary"></i>系统诊断性能自演进趋势</h6>
                <span class="badge bg-light text-success border border-success"><i class="bi bi-circle-fill small me-1"></i>持续学习中</span>
            </div>
            <div id="evolutionChart" style="width: 100%; height: 280px;"></div>
        </div>
    </div>

    <div class="col-md-5">
        <div class="card border-0 shadow-sm bg-white h-100">
            <div class="card-header bg-white border-0 py-3">
                <h6 class="mb-0 fw-bold"><i class="bi bi-broadcast-pin me-2 text-primary"></i>联防网络动态日志</h6>
            </div>
            <div class="card-body p-0 overflow-auto" style="max-height: 280px;">
                <ul class="list-group list-group-flush">
                    {% for record in recent_records %}
                    <li class="list-group-item d-flex justify-content-between align-items-center py-3 border-0">
                        <div class="d-flex align-items-center">
                            <div class="bg-light rounded-circle p-2 me-3">
                                {% if "纠错" in record.description %}
                                    <i class="bi bi-tools text-warning"></i>
                                {% else %}
                                    <i class="bi bi-geo-alt text-success"></i>
                                {% endif %}
                            </div>
                            <div>
                                <div class="small fw-bold text-dark">节点 {{ record.user.username }}</div>
                                <div class="text-muted" style="font-size: 0.75rem;">{{ record.description|truncatechars:20 }}</div>
                            </div>
                        </div>
                        <span class="badge rounded-pill bg-light text-secondary fw-normal">{{ record.create_time|timesince }}前</span>
                    </li>
                    {% empty %}
                    <li class="list-group-item text-center text-muted py-5">暂无网络动态数据</li>
                    {% endfor %}
                </ul>
            </div>
        </div>
    </div>
</div>

<style>
    /* 清新卡片样式保留并优化 */
    .hero-card {
        border-color: #eee !important;
        background-image: linear-gradient(to bottom, #ffffff, #f8f9fc);
    }

    .fade-in-up {
        animation: fadeInUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
        opacity: 0;
        transform: translateY(20px);
    }

    @keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } }

    .shadow-hover {
        transition: all 0.3s ease;
    }
    .shadow-hover:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(111, 66, 193, 0.08) !important;
    }

    .icon-circle {
        width: 55px; height: 55px; border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        font-size: 1.4rem; margin: 0 auto;
    }

    @media (min-width: 768px) {
        .divide-cols > div:not(:last-child) { border-right: 1px dashed #e0e0e0; }
    }
</style>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 1. 数字滚动特效保留
        const counters = document.querySelectorAll('.counter');
        counters.forEach(counter => {
            const updateCount = () => {
                const target = +counter.getAttribute('data-target');
                const count = +counter.innerText;
                const inc = target / 80;
                if (count < target) {
                    // 对于带有小数的精度值进行特殊处理
                    if (target % 1 !== 0) {
                        counter.innerText = (count + inc).toFixed(1);
                    } else {
                        counter.innerText = Math.ceil(count + inc);
                    }
                    setTimeout(updateCount, 25);
                } else {
                    counter.innerText = target;
                }
            };
            updateCount();
        });

        // 2. 自演进折线图渲染 (替换了原来的模型延迟柱状图)
        var chartDom = document.getElementById('evolutionChart');
        var myChart = echarts.init(chartDom);

        // 这里需要后端传入 evolution_labels 和 evolution_values
        // 示例数据：展示随着用户纠错反馈，系统精度逐步攀升并平稳的过程
        var labels = {{ evolution_labels|safe|default:"['3-01', '3-05', '3-10', '3-15', '3-20']" }};
        var values = {{ evolution_values|safe|default:"[88.5, 90.2, 92.8, 94.5, 95.8]" }};

        var option = {
            tooltip: {
                trigger: 'axis',
                formatter: '{b} <br/> 本地自适应精度: {c}%'
            },
            grid: { top: '10%', left: '3%', right: '4%', bottom: '5%', containLabel: true },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: labels,
                axisLine: { lineStyle: { color: '#ccc' } }
            },
            yAxis: {
                type: 'value',
                name: '识别精度 (%)',
                min: 80, // 设置最小值让曲线波动更明显
                max: 100,
                splitLine: { lineStyle: { type: 'dashed', color: '#eee' } }
            },
            series: [{
                name: '校准精度',
                type: 'line',
                smooth: true, // 平滑曲线
                symbol: 'circle',
                symbolSize: 8,
                itemStyle: { color: '#6f42c1' }, // 呼应紫睛灵主题色
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: 'rgba(111, 66, 193, 0.4)' },
                        { offset: 1, color: 'rgba(111, 66, 193, 0.0)' }
                    ])
                },
                data: values
            }]
        };
        myChart.setOption(option);
        window.addEventListener('resize', myChart.resize);
    });
</script>
{% endblock %}