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

{% block title %}检测历史档案 | DETECTION ARCHIVE{% 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;
    }

    .history-wrapper {
        max-width: 1400px; margin: 0 auto; padding: 30px 20px;
        animation: fadeIn 0.6s ease-out;
    }
    @keyframes fadeIn { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }

    .h-header {
        display: flex; justify-content: space-between; align-items: flex-end;
        padding-bottom: 20px; border-bottom: 1px solid rgba(0,234,255,0.15);
        margin-bottom: 25px;
    }
    .h-header h1 { margin:0; font-size:1.8rem; font-weight:300; letter-spacing:4px; color:#fff; }
    .h-header h1 span { font-weight:900; color:var(--cyan); }

    .nav-links { display:flex; gap:12px; }
    .nav-btn {
        background: rgba(0,234,255,0.05); border:1px solid rgba(0,234,255,0.3); color:var(--cyan);
        padding:8px 18px; border-radius:3px; font-weight:bold; font-size:0.85rem;
        text-decoration:none; transition:0.3s;
    }
    .nav-btn:hover { background:var(--cyan); color:#000; }

    /* 统计卡片 */
    .stats-row {
        display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
        margin-bottom: 30px;
    }
    .stat-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.1); border-radius: 6px;
        padding: 20px; display: flex; align-items: center; gap: 15px;
        transition: 0.3s;
    }
    .stat-card:hover { border-color: rgba(0,234,255,0.3); transform: translateY(-2px); }
    .stat-icon {
        width: 50px; height: 50px; border-radius: 8px;
        display: flex; align-items: center; justify-content: center;
        font-size: 1.5rem;
    }
    .stat-icon.cyan { background: rgba(0,234,255,0.1); color: var(--cyan); }
    .stat-icon.green { background: rgba(0,255,136,0.1); color: var(--green); }
    .stat-icon.yellow { background: rgba(255,204,0,0.1); color: var(--yellow); }
    .stat-icon.purple { background: rgba(176,38,255,0.1); color: var(--purple); }
    .stat-info h3 { margin:0; font-size: 1.8rem; font-weight: 900; color: #fff; font-family: 'Fira Code', monospace; }
    .stat-info p { margin:5px 0 0; color: #6b7280; font-size: 0.85rem; }

    /* 数据表格 */
    .data-panel {
        background: rgba(4,12,24,0.75); border: 1px solid rgba(0,234,255,0.1);
        border-radius: 6px; overflow: hidden;
    }
    .panel-head {
        padding: 15px 20px; background: rgba(0,0,0,0.4);
        border-bottom: 1px dashed rgba(0,234,255,0.15);
        display: flex; justify-content: space-between; align-items: center;
    }
    .panel-title { color: var(--cyan); font-weight: 900; letter-spacing: 2px; }

    .data-table { width: 100%; border-collapse: collapse; }
    .data-table th {
        background: rgba(0,0,0,0.3); padding: 12px 15px;
        text-align: left; font-size: 0.75rem; color: #6b7280;
        text-transform: uppercase; letter-spacing: 1px;
        font-weight: 800; border-bottom: 1px solid rgba(0,234,255,0.1);
    }
    .data-table td {
        padding: 15px; border-bottom: 1px solid rgba(255,255,255,0.03);
        font-size: 0.85rem; color: #d1d5db;
    }
    .data-table tr:hover { background: rgba(0,234,255,0.03); }
    .data-table tr:last-child td { border-bottom: none; }

    .badge {
        padding: 3px 10px; border-radius: 3px; font-size: 0.7rem; font-weight: bold;
    }
    .badge-cyan { background: rgba(0,234,255,0.15); color: var(--cyan); }
    .badge-green { background: rgba(0,255,136,0.15); color: var(--green); }
    .badge-yellow { background: rgba(255,204,0,0.15); color: var(--yellow); }
    .badge-red { background: rgba(255,0,85,0.15); color: var(--red); }

    .urgency-dot {
        display: inline-block; width: 8px; height: 8px; border-radius: 50%;
        margin-right: 6px;
    }
    .urgency-low { background: var(--cyan); box-shadow: 0 0 5px var(--cyan); }
    .urgency-medium { background: var(--yellow); box-shadow: 0 0 5px var(--yellow); }
    .urgency-high { background: var(--red); box-shadow: 0 0 5px var(--red); }

    .metric-bar {
        height: 6px; background: rgba(255,255,255,0.1); border-radius: 3px;
        overflow: hidden; width: 80px;
    }
    .metric-fill {
        height: 100%; border-radius: 3px; transition: width 0.5s;
    }

    .empty-state {
        text-align: center; padding: 60px 20px; color: #4b5563;
    }
    .empty-state i { font-size: 4rem; opacity: 0.3; margin-bottom: 20px; }
</style>

<div class="history-wrapper">
    <div class="h-header">
        <h1>检测历史档案 <span>ARCHIVE</span></h1>
        <div class="nav-links">
            <a href="{% url 'home' %}" class="nav-btn"><i class="fas fa-home"></i> 首页</a>
            <a href="{% url 'analytics_dashboard' %}" class="nav-btn"><i class="fas fa-chart-line"></i> 数据大屏</a>
            <a href="{% url 'predict' %}" class="nav-btn"><i class="fas fa-crosshairs"></i> 检测终端</a>
        </div>
    </div>

    <!-- 统计概览 -->
    <div class="stats-row">
        <div class="stat-card">
            <div class="stat-icon cyan"><i class="fas fa-search"></i></div>
            <div class="stat-info">
                <h3>{{ records|length }}</h3>
                <p>总检测次数</p>
            </div>
        </div>
        <div class="stat-card">
            <div class="stat-icon green"><i class="fas fa-grape"></i></div>
            <div class="stat-info">
                <h3>{{ total_grapes|default:"--" }}</h3>
                <p>识别葡萄总数</p>
            </div>
        </div>
        <div class="stat-card">
            <div class="stat-icon yellow"><i class="fas fa-percentage"></i></div>
            <div class="stat-info">
                <h3>{{ avg_maturity|default:"--" }}%</h3>
                <p>平均成熟度</p>
            </div>
        </div>
        <div class="stat-card">
            <div class="stat-icon purple"><i class="fas fa-wine-glass"></i></div>
            <div class="stat-info">
                <h3>{{ avg_brix|default:"--" }}°Bx</h3>
                <p>平均含糖量</p>
            </div>
        </div>
    </div>

    <!-- 数据表格 -->
    <div class="data-panel">
        <div class="panel-head">
            <span class="panel-title"><i class="fas fa-list-alt"></i> 检测记录明细</span>
            <span style="color:#6b7280; font-size:0.8rem;">显示最近 50 条记录</span>
        </div>
        <table class="data-table">
            <thead>
                <tr>
                    <th>检测时间</th>
                    <th>检测类型</th>
                    <th>使用模型</th>
                    <th>目标数</th>
                    <th>成熟度</th>
                    <th>含糖量</th>
                    <th>健康评分</th>
                    <th>紧急程度</th>
                    <th>AI 建议摘要</th>
                </tr>
            </thead>
            <tbody>
                {% if records %}
                    {% for record in records %}
                    <tr>
                        <td>{{ record.detected_at|date:"Y-m-d H:i" }}</td>
                        <td>
                            {% if record.record_type == 'IMAGE' %}
                                <span class="badge badge-cyan">图像</span>
                            {% elif record.record_type == 'VIDEO' %}
                                <span class="badge badge-yellow">视频</span>
                            {% else %}
                                <span class="badge badge-green">实时</span>
                            {% endif %}
                        </td>
                        <td>{{ record.model_used|truncatechars:15 }}</td>
                        <td>{{ record.total_targets }}</td>
                        <td>
                            <div style="display:flex; align-items:center; gap:8px;">
                                <span style="font-weight:bold; color:{% if record.avg_maturity >= 80 %}var(--green){% elif record.avg_maturity >= 50 %}var(--yellow){% else %}var(--cyan){% endif %};">{{ record.avg_maturity }}%</span>
                                <div class="metric-bar">
                                    <div class="metric-fill" style="width:{{ record.avg_maturity }}%; background:{% if record.avg_maturity >= 80 %}var(--green){% elif record.avg_maturity >= 50 %}var(--yellow){% else %}var(--cyan){% endif %};"></div>
                                </div>
                            </div>
                        </td>
                        <td style="color:var(--purple); font-weight:bold;">{{ record.estimated_brix }}°Bx</td>
                        <td>
                            <span style="color:{% if record.health_score >= 80 %}var(--green){% elif record.health_score >= 60 %}var(--yellow){% else %}var(--red){% endif %};">{{ record.health_score }}</span>
                        </td>
                        <td>
                            {% if record.urgency_level == '极高' %}
                                <span class="urgency-dot urgency-high"></span><span style="color:var(--red); font-weight:bold;">极高</span>
                            {% elif record.urgency_level == '高' %}
                                <span class="urgency-dot urgency-high"></span><span style="color:var(--red);">高</span>
                            {% elif record.urgency_level == '中' %}
                                <span class="urgency-dot urgency-medium"></span><span style="color:var(--yellow);">中</span>
                            {% else %}
                                <span class="urgency-dot urgency-low"></span><span style="color:var(--cyan);">低</span>
                            {% endif %}
                        </td>
                        <td style="max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;" title="{{ record.ai_advice }}">
                            {{ record.ai_advice|default:"--"|truncatechars:30 }}
                        </td>
                    </tr>
                    {% endfor %}
                {% else %}
                    <tr>
                        <td colspan="9">
                            <div class="empty-state">
                                <i class="fas fa-inbox"></i>
                                <h3>暂无检测记录</h3>
                                <p>前往检测终端开始您的第一次葡萄成熟度分析</p>
                                <a href="{% url 'predict' %}" class="nav-btn" style="display:inline-block; margin-top:15px;">
                                    <i class="fas fa-crosshairs"></i> 开始检测
                                </a>
                            </div>
                        </td>
                    </tr>
                {% endif %}
            </tbody>
        </table>
    </div>
</div>

{% endblock %}