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

{% block title %}智能病害诊断中心 | DISEASE CENTER{% 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: #020a14;
    }

    .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:6px; }
    ::-webkit-scrollbar-track { background: rgba(0,0,0,0.3); }
    ::-webkit-scrollbar-thumb { background: rgba(255,0,85,0.4); border-radius:3px; }

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

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

    .nav-btn {
        background: rgba(255,0,85,0.05); border:1px solid rgba(255,0,85,0.3); color:var(--red);
        padding:6px 18px; border-radius:3px; font-weight:bold; font-size:0.85rem;
        text-decoration:none; transition:0.3s; letter-spacing:1px;
    }
    .nav-btn:hover { background:var(--red); color:#fff; box-shadow: 0 0 15px rgba(255,0,85,0.4); }

    .main-content {
        flex:1; display:grid; grid-template-columns: 1fr 380px;
        gap:20px; padding:20px 30px; min-height:0;
    }

    .panel {
        background: rgba(4,12,24,0.8); border:1px solid rgba(255,0,85,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(255,0,85,0.15);
        display:flex; align-items:center; gap:8px; flex-shrink:0;
    }

    /* 病害知识库卡片 */
    .kb-grid {
        display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 15px; padding: 20px; overflow-y: auto;
    }
    .kb-card {
        background: linear-gradient(145deg, rgba(6,15,28,0.9), rgba(2,6,13,0.95));
        border: 1px solid rgba(255,0,85,0.15); border-radius: 6px;
        padding: 20px; transition: 0.3s; position: relative;
        cursor: pointer;
    }
    .kb-card:hover {
        border-color: rgba(255,0,85,0.4); transform: translateY(-3px);
        box-shadow: 0 10px 30px rgba(255,0,85,0.1);
    }
    .kb-card::before {
        content:''; position:absolute; top:0; left:0; width:4px; height:100%;
        background: var(--red); border-radius: 6px 0 0 6px;
    }
    .kb-name { font-size: 1.1rem; font-weight: 900; color: #fff; margin-bottom: 5px; }
    .kb-en { font-size: 0.75rem; color: #6b7280; font-family: 'Fira Code', monospace; margin-bottom: 12px; }
    .kb-symptom { font-size: 0.8rem; color: #9ca3af; line-height: 1.5; margin-bottom: 12px; }
    .kb-tags { display: flex; gap: 8px; flex-wrap: wrap; }
    .kb-tag {
        padding: 3px 10px; border-radius: 3px; font-size: 0.7rem; font-weight: bold;
    }
    .tag-critical { background: rgba(255,0,85,0.15); color: var(--red); border: 1px solid rgba(255,0,85,0.3); }
    .tag-high { background: rgba(255,136,0,0.15); color: var(--orange); border: 1px solid rgba(255,136,0,0.3); }
    .tag-medium { background: rgba(255,204,0,0.15); color: var(--yellow); border: 1px solid rgba(255,204,0,0.3); }

    /* 诊断报告列表 */
    .report-list { flex: 1; overflow-y: auto; padding: 10px; }
    .report-item {
        background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.05);
        border-radius: 6px; padding: 15px; margin-bottom: 10px;
        transition: 0.3s; cursor: pointer;
    }
    .report-item:hover { border-color: rgba(255,0,85,0.3); background: rgba(255,0,85,0.03); }
    .r-header {
        display: flex; justify-content: space-between; align-items: flex-start;
        margin-bottom: 10px;
    }
    .r-name { font-weight: 900; color: #fff; font-size: 1rem; }
    .r-severity {
        padding: 3px 10px; border-radius: 3px; font-size: 0.7rem; font-weight: bold;
    }
    .sev-critical { background: rgba(255,0,85,0.2); color: var(--red); }
    .sev-severe { background: rgba(255,136,0,0.2); color: var(--orange); }
    .sev-moderate { background: rgba(255,204,0,0.2); color: var(--yellow); }
    .sev-mild { background: rgba(0,234,255,0.2); color: var(--cyan); }
    .r-time { font-size: 0.7rem; color: #6b7280; font-family: 'Fira Code', monospace; }
    .r-impact { font-size: 0.8rem; color: #9ca3af; margin-top: 8px; }

    /* 弹窗详情 */
    .modal-overlay {
        position: fixed; top:0; left:0; width:100vw; height:100vh;
        background: rgba(0,0,0,0.85); backdrop-filter: blur(10px);
        z-index: 99999; display: none; justify-content: center; align-items: center;
    }
    .modal-content {
        background: linear-gradient(145deg, rgba(6,15,28,0.95), rgba(2,6,13,0.98));
        border: 1px solid rgba(255,0,85,0.3); border-radius: 8px;
        width: 90%; max-width: 700px; max-height: 85vh;
        overflow-y: auto; padding: 30px;
        box-shadow: 0 0 50px rgba(255,0,85,0.2);
    }
    .modal-close {
        position: absolute; top: 20px; right: 20px;
        background: rgba(255,0,85,0.1); border: 1px solid rgba(255,0,85,0.3);
        color: var(--red); padding: 8px 15px; border-radius: 4px;
        cursor: pointer; font-weight: bold;
    }
    .modal-close:hover { background: var(--red); color: #fff; }

    .detail-section { margin-bottom: 20px; }
    .detail-title {
        color: var(--red); font-weight: 900; font-size: 0.85rem;
        letter-spacing: 2px; margin-bottom: 10px; text-transform: uppercase;
        display: flex; align-items: center; gap: 8px;
    }
    .detail-content {
        background: rgba(0,0,0,0.4); border-left: 3px solid var(--red);
        padding: 15px; border-radius: 0 6px 6px 0;
        font-size: 0.9rem; line-height: 1.6; color: #d1d5db;
    }
    .treatment-box {
        background: rgba(0,234,255,0.05); border: 1px solid rgba(0,234,255,0.2);
        border-radius: 6px; padding: 15px;
    }
    .treatment-item {
        display: flex; gap: 10px; margin-bottom: 8px; font-size: 0.85rem;
    }
    .treatment-label { color: var(--cyan); font-weight: bold; min-width: 80px; }
    .treatment-value { color: #d1d5db; }
</style>

<div class="disease-shell">
    <div class="d-header">
        <h1>病害诊断中心 <span>DISEASE CENTER</span></h1>
        <div style="display:flex; gap:12px;">
            <a href="{% url 'home' %}" class="nav-btn"><i class="fas fa-satellite"></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="main-content">
        <!-- 左侧：病害知识库 -->
        <div class="panel">
            <div class="panel-head" style="color:var(--red);">
                <i class="fas fa-book-medical"></i> 病害知识库 (Disease Knowledge Base)
            </div>
            <div class="kb-grid">
                <div class="kb-card" onclick="showDiseaseDetail('霜霉病')">
                    <div class="kb-name">霜霉病</div>
                    <div class="kb-en">Downy Mildew (Plasmopara viticola)</div>
                    <div class="kb-symptom">叶片正面出现淡黄色油浸状小斑点，背面产生白色霜状霉层，潮湿环境下迅速蔓延</div>
                    <div class="kb-tags">
                        <span class="kb-tag tag-critical">高传染性</span>
                        <span class="kb-tag tag-high">减产 20-40%</span>
                    </div>
                </div>

                <div class="kb-card" onclick="showDiseaseDetail('灰霉病')">
                    <div class="kb-name">灰霉病</div>
                    <div class="kb-en">Gray Mold (Botrytis cinerea)</div>
                    <div class="kb-symptom">果实表面出现灰色霉层，果粒软腐，有霉味，高湿环境下极易爆发</div>
                    <div class="kb-tags">
                        <span class="kb-tag tag-critical">极高传染性</span>
                        <span class="kb-tag tag-critical">果实腐烂</span>
                    </div>
                </div>

                <div class="kb-card" onclick="showDiseaseDetail('白腐病')">
                    <div class="kb-name">白腐病</div>
                    <div class="kb-en">White Rot (Coniella diplodiella)</div>
                    <div class="kb-symptom">果粒变褐腐烂，表面密生灰白色小粒点，高温高湿+伤口感染后易并发</div>
                    <div class="kb-tags">
                        <span class="kb-tag tag-high">严重损失</span>
                        <span class="kb-tag tag-medium">雨水传播</span>
                    </div>
                </div>

                <div class="kb-card" onclick="showDiseaseDetail('炭疽病')">
                    <div class="kb-name">炭疽病</div>
                    <div class="kb-en">Anthracnose (Elsinoe ampelina)</div>
                    <div class="kb-symptom">果实出现褐色凹陷病斑，中央有粉红色小点，潮湿时产生粉红色粘状物</div>
                    <div class="kb-tags">
                        <span class="kb-tag tag-medium">中等危害</span>
                        <span class="kb-tag tag-medium">高温易发</span>
                    </div>
                </div>

                <div class="kb-card" onclick="showDiseaseDetail('黑痘病')">
                    <div class="kb-name">黑痘病</div>
                    <div class="kb-en">Scab (Elsinoe ampelina)</div>
                    <div class="kb-symptom">叶片、果实出现褐色至黑色病斑，中央凹陷呈鸟眼状，严重影响光合作用和品质</div>
                    <div class="kb-tags">
                        <span class="kb-tag tag-high">影响品质</span>
                        <span class="kb-tag tag-medium">低温高湿</span>
                    </div>
                </div>

                <div class="kb-card" onclick="showDiseaseDetail('白粉病')">
                    <div class="kb-name">白粉病</div>
                    <div class="kb-en">Powdery Mildew (Uncinula necator)</div>
                    <div class="kb-symptom">叶片、果实表面覆盖白色粉状物，后期变褐枯焦，干旱高温条件下易发生</div>
                    <div class="kb-tags">
                        <span class="kb-tag tag-medium">中等危害</span>
                        <span class="kb-tag tag-medium">干旱易发</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 右侧：诊断报告 -->
        <div class="panel">
            <div class="panel-head" style="color:var(--orange);">
                <i class="fas fa-file-medical-alt"></i> 近期诊断报告
            </div>
            <div class="report-list">
                {% if reports %}
                    {% for report in reports %}
                    <div class="report-item" onclick="showReportDetail('{{ report.report_id }}')">
                        <div class="r-header">
                            <span class="r-name">{{ report.disease_name }}</span>
                            <span class="r-severity sev-{{ report.severity|lower }}">{{ report.get_severity_display }}</span>
                        </div>
                        <div class="r-time">{{ report.generated_at|date:"Y-m-d H:i" }}</div>
                        <div class="r-impact">{{ report.yield_impact|default:"影响评估中..." }}</div>
                    </div>
                    {% endfor %}
                {% else %}
                    <div style="text-align:center; padding:40px; color:#4b5563;">
                        <i class="fas fa-shield-virus" style="font-size:3rem; opacity:0.3; margin-bottom:15px;"></i>
                        <p>暂无病害诊断报告</p>
                        <p style="font-size:0.8rem; margin-top:10px;">当前检测样本健康，未发现病害特征</p>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- 详情弹窗 -->
<div class="modal-overlay" id="detailModal">
    <div class="modal-content" style="position:relative;">
        <button class="modal-close" onclick="closeModal()">× 关闭</button>
        <div id="modalBody">
            <!-- 动态内容 -->
        </div>
    </div>
</div>

{% endblock %}

{% block scripts %}
<script>
const DISEASE_KB = {
    '霜霉病': {
        symptom: '叶片正面出现淡黄色油浸状小斑点，背面产生白色霜状霉层。病斑逐渐扩大，严重时叶片枯黄脱落。果实受害后表面出现白色霉层，影响品质和产量。',
        cause: '由葡萄霜霉菌(Plasmopara viticola)引起，属于卵菌纲真菌。高温高湿条件下极易爆发，温度20-25℃、相对湿度>85%时传播最快。',
        treatment: {
            medication: '80%代森锰锌可湿性粉剂 600倍液 + 25%嘧菌酯悬浮剂 1500倍液',
            method: '叶面喷雾，重点喷施叶片背面和果穗',
            frequency: '每7-10天一次',
            duration: '连续3-4次',
            precautions: '避免在雨天或露水未干时喷药，采收前15天停药。注意轮换用药，防止产生抗药性。'
        },
        prevention: '加强通风透光，降低田间湿度；及时清除病叶病果；合理密植，避免枝叶过密；雨季前预防性喷药。'
    },
    '灰霉病': {
        symptom: '果实表面出现灰色霉层，果粒软腐，有霉味。叶片受害后出现褐色病斑，潮湿时产生灰色霉层。花穗受害后变褐腐烂，严重影响产量。',
        cause: '由灰葡萄孢菌(Botrytis cinerea)引起，属于半知菌类真菌。湿度>90%时极易发生，温度15-25℃为发病适温。伤口、裂果是主要侵染途径。',
        treatment: {
            medication: '50%腐霉利可湿性粉剂 1000倍液 或 40%嘧霉胺悬浮剂 1200倍液',
            method: '全株喷雾，重点喷施果穗和叶片',
            frequency: '每5-7天一次',
            duration: '连续2-3次',
            precautions: '及时疏果、摘除病穗，保持通风透光。采收前10天停药。'
        },
        prevention: '控制田间湿度，避免大水漫灌；及时整枝打杈，改善通风；果实套袋保护；清除病残体，减少菌源。'
    },
    '白腐病': {
        symptom: '果粒变褐腐烂，表面密生灰白色小粒点（分生孢子器）。叶片受害后出现褐色病斑，有同心轮纹。枝条受害后皮层纵裂，影响树势。',
        cause: '由白腐盾壳霉菌(Coniella diplodiella)引起。高温高湿+伤口感染，冰雹或虫害后易并发。病菌在土壤中越冬，雨水飞溅传播。',
        treatment: {
            medication: '80%炭疽福美可湿性粉剂 500倍液 或 50%福美双可湿性粉剂 600倍液',
            method: '全园喷雾，重点喷施果穗部位',
            frequency: '每10-15天一次',
            duration: '连续2-3次',
            precautions: '及时摘除病果病穗，深埋或销毁，避免交叉感染。注意保护伤口。'
        },
        prevention: '避免果实受伤；及时防治害虫；雨季前预防喷药；合理负载，避免果穗过密；清除地面病残体。'
    },
    '炭疽病': {
        symptom: '果实出现褐色凹陷病斑，中央有粉红色小点（分生孢子盘），潮湿时产生粉红色粘状物。叶片受害后出现圆形褐色病斑，边缘紫褐色。',
        cause: '由葡萄炭疽菌(Colletotrichum gloeosporioides)引起。高温多雨季节易发，病菌在病果和枝条上越冬，雨水传播。',
        treatment: {
            medication: '80%炭疽福美可湿性粉剂 600倍液 或 25%咪鲜胺乳油 1000倍液',
            method: '全株喷雾，重点喷施果实',
            frequency: '每10天一次',
            duration: '连续2-3次',
            precautions: '采收前20天停药。注意保护果实，避免机械损伤。'
        },
        prevention: '清除病残体，减少菌源；果实套袋保护；控制氮肥，增强树势；雨季加强预防喷药。'
    },
    '黑痘病': {
        symptom: '叶片出现褐色至黑色病斑，中央凹陷呈鸟眼状，边缘紫褐色。果实受害后出现黑色病斑，硬化龟裂，失去商品价值。',
        cause: '由葡萄痂囊腔菌(Elsinoe ampelina)引起。低温高湿条件下易发，春季多雨年份发病重。病菌在病枝上越冬。',
        treatment: {
            medication: '1:0.7:200 波尔多液 或 80%代森锰锌可湿性粉剂 600倍液',
            method: '全株喷雾，重点保护新梢和幼果',
            frequency: '每10-15天一次',
            duration: '连续3-4次',
            precautions: '萌芽前喷石硫合剂清园。注意保护剂和治疗剂轮换使用。'
        },
        prevention: '冬季清园，剪除病枝；萌芽前喷药保护；及时摘除病叶病果；选用抗病品种。'
    },
    '白粉病': {
        symptom: '叶片、果实表面覆盖白色粉状物，后期变褐枯焦。果实受害后表面有白色粉层，品质下降，易裂果。',
        cause: '由葡萄钩丝壳菌(Uncinula necator)引起。干旱高温条件下易发生，温度25-30℃、相对湿度40-60%时发病最重。',
        treatment: {
            medication: '50%硫磺悬浮剂 300倍液 或 25%三唑酮可湿性粉剂 1500倍液',
            method: '全株喷雾，重点喷施叶片正面',
            frequency: '每7-10天一次',
            duration: '连续2-3次',
            precautions: '高温时避免喷药，防止药害。注意轮换用药。'
        },
        prevention: '加强栽培管理，增强树势；及时整枝，改善通风；清除病残体；高温干旱季节加强预防。'
    }
};

function showDiseaseDetail(name) {
    const kb = DISEASE_KB[name];
    if (!kb) return;

    document.getElementById('modalBody').innerHTML = `
        <h2 style="color:#fff; font-size:1.5rem; margin-bottom:5px;">${name}</h2>
        <p style="color:#6b7280; font-size:0.85rem; margin-bottom:25px;">病害详情与治疗方案</p>

        <div class="detail-section">
            <div class="detail-title"><i class="fas fa-eye"></i> 症状识别</div>
            <div class="detail-content">${kb.symptom}</div>
        </div>

        <div class="detail-section">
            <div class="detail-title"><i class="fas fa-microscope"></i> 病因分析</div>
            <div class="detail-content">${kb.cause}</div>
        </div>

        <div class="detail-section">
            <div class="detail-title"><i class="fas fa-pills"></i> 治疗方案</div>
            <div class="treatment-box">
                <div class="treatment-item">
                    <span class="treatment-label">推荐药剂:</span>
                    <span class="treatment-value">${kb.treatment.medication}</span>
                </div>
                <div class="treatment-item">
                    <span class="treatment-label">施药方法:</span>
                    <span class="treatment-value">${kb.treatment.method}</span>
                </div>
                <div class="treatment-item">
                    <span class="treatment-label">施药频率:</span>
                    <span class="treatment-value">${kb.treatment.frequency}</span>
                </div>
                <div class="treatment-item">
                    <span class="treatment-label">疗程:</span>
                    <span class="treatment-value">${kb.treatment.duration}</span>
                </div>
                <div class="treatment-item">
                    <span class="treatment-label">注意事项:</span>
                    <span class="treatment-value">${kb.treatment.precautions}</span>
                </div>
            </div>
        </div>

        <div class="detail-section">
            <div class="detail-title"><i class="fas fa-shield-alt"></i> 预防措施</div>
            <div class="detail-content">${kb.prevention}</div>
        </div>
    `;

    document.getElementById('detailModal').style.display = 'flex';
}

function showReportDetail(reportId) {
    // 这里可以通过 AJAX 获取具体报告详情
    // 简化处理：显示提示
    alert('正在加载诊断报告详情...\n报告ID: ' + reportId);
}

function closeModal() {
    document.getElementById('detailModal').style.display = 'none';
}

// 点击遮罩关闭
document.getElementById('detailModal').addEventListener('click', function(e) {
    if (e.target === this) closeModal();
});
</script>
{% endblock %}