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

{% block title %}多模态视觉分析中枢 | TERMINAL{% 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 {
        --cyber-blue: #00eaff;
        --cyber-green: #00ff88;
        --cyber-red: #ff3366;
        --cyber-yellow: #ffcc00;
        --bg-deep: #030a14;
        --panel-bg: rgba(6, 15, 28, 0.65);
        --neon-glow: 0 0 15px rgba(0, 234, 255, 0.4);
    }

    .navbar, footer { display: none !important; }

    html, body {
        margin: 0; padding: 0;
        min-height: 100vh; height: auto;
        overflow-y: auto;
        overflow-x: auto;
        background-color: var(--bg-deep) !important;
        background-image:
            linear-gradient(rgba(0, 234, 255, 0.03) 1px, transparent 1px),
            linear-gradient(90deg, rgba(0, 234, 255, 0.03) 1px, transparent 1px) !important;
        background-size: 30px 30px !important;
        background-attachment: fixed;
        color: #e0e0e0;
        font-family: 'Nunito', "Microsoft YaHei", sans-serif;
    }

    ::-webkit-scrollbar { width: 8px; height: 8px; }
    ::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.5); }
    ::-webkit-scrollbar-thumb { background: var(--cyber-blue); box-shadow: var(--neon-glow); border-radius: 4px; }

    .container-fluid {
        display: flex; flex-direction: column;
        padding: 30px 40px !important; max-width: 100%; min-height: 100vh;
    }

    .top-bar {
        display: flex; justify-content: space-between; align-items: flex-end;
        padding-bottom: 20px; margin-bottom: 30px;
        border-bottom: 2px solid rgba(0, 234, 255, 0.2);
        position: relative; flex-shrink: 0;
    }
    .top-bar::after {
        content: ''; position: absolute; bottom: -2px; left: 0; width: 200px; height: 3px;
        background: var(--cyber-blue); box-shadow: var(--neon-glow);
    }
    .top-bar h2 {
        margin: 0; font-weight: 300; letter-spacing: 6px; color: #fff;
        text-shadow: 0 0 20px rgba(0, 234, 255, 0.8); font-size: 2.2rem; text-transform: uppercase;
    }
    .top-bar h2 span { font-weight: 900; color: var(--cyber-blue); }
    .top-links { display: flex; gap: 20px; }
    .top-links a {
        color: var(--cyber-blue); text-decoration: none; transition: 0.3s;
        font-size: 1.1rem; letter-spacing: 2px; text-transform: uppercase;
        display: flex; align-items: center; gap: 10px; font-weight: bold;
    }
    .top-links a:hover { color: #fff; text-shadow: var(--neon-glow); }

    .dashboard-row {
        display: flex; gap: 25px;
        flex-wrap: nowrap;
        padding-bottom: 40px;
        min-width: 1300px;
        min-height: 700px;
    }

    .dash-col { display: flex; flex-direction: column; gap: 25px; }

    .col-left { flex: 0 0 350px; }
    .col-center { flex: 1; min-width: 450px; }
    .col-right { flex: 0 0 420px; }

    .glass-panel {
        background: var(--panel-bg);
        border: 1px solid rgba(0, 234, 255, 0.1); border-radius: 6px;
        box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.8), 0 10px 30px rgba(0,0,0,0.5);
        backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
        display: flex; flex-direction: column; position: relative;
    }

    .glass-panel::before, .glass-panel::after {
        content: ''; position: absolute; width: 15px; height: 15px; border: 2px solid var(--cyber-blue); transition: 0.3s; pointer-events: none;
    }
    .glass-panel::before { top: -2px; left: -2px; border-right: none; border-bottom: none; }
    .glass-panel::after { bottom: -2px; right: -2px; border-left: none; border-top: none; }

    .panel-header {
        padding: 20px 25px; flex-shrink: 0; font-size: 1.2rem;
        border-bottom: 1px dashed rgba(0, 234, 255, 0.15);
        display: flex; align-items: center; gap: 12px;
        color: var(--cyber-blue); font-weight: 900; letter-spacing: 2px; text-shadow: var(--neon-glow);
    }

    .panel-content {
        padding: 25px;
        display: flex; flex-direction: column; gap: 25px;
        flex: 1;
    }

    .tech-label {
        color: #8d99ae; font-size: 1rem; letter-spacing: 1.5px;
        text-transform: uppercase; font-weight: 900; margin-bottom: 12px; display: block;
    }
    .tech-input {
        background: rgba(0, 0, 0, 0.6) !important; border: 1px solid rgba(0, 234, 255, 0.3) !important;
        color: var(--cyber-blue) !important; border-radius: 4px; padding: 12px 18px !important;
        font-family: 'Nunito', sans-serif; font-size: 1.1rem !important; transition: 0.3s;
    }
    .tech-input:focus { border-color: var(--cyber-blue) !important; box-shadow: 0 0 15px rgba(0,234,255,0.2) !important; outline: none; }

    input[type="file"].tech-input::file-selector-button {
        background: rgba(0, 234, 255, 0.1); border: 1px solid var(--cyber-blue); color: var(--cyber-blue);
        padding: 8px 15px; border-radius: 3px; margin-right: 15px; cursor: pointer; transition: 0.3s; font-weight: bold; font-size: 1rem;
    }
    input[type="file"].tech-input::file-selector-button:hover { background: var(--cyber-blue); color: #000; box-shadow: var(--neon-glow); }

    .tech-btn {
        background: linear-gradient(90deg, rgba(0,234,255,0.05), rgba(0,234,255,0.15));
        border: 1px solid var(--cyber-blue); color: var(--cyber-blue); font-size: 1.1rem;
        border-radius: 4px; padding: 15px 25px; font-weight: 900; letter-spacing: 2px;
        transition: 0.3s; width: 100%; text-transform: uppercase; cursor: pointer;
        display: flex; justify-content: center; align-items: center; gap: 10px;
    }
    .tech-btn:hover { background: var(--cyber-blue); color: #000; box-shadow: 0 0 20px rgba(0,234,255,0.5); transform: translateY(-2px); }
    .tech-btn-danger { border-color: var(--cyber-red); color: var(--cyber-red); background: rgba(255,51,102,0.05); }
    .tech-btn-danger:hover { background: var(--cyber-red); color: #fff; box-shadow: 0 0 20px rgba(255,51,102,0.5); }


    .monitor-wrapper { margin-bottom: 30px; }
    .monitor-label {
        font-size: 1.1rem; color: var(--cyber-green); font-family: 'Fira Code', monospace;
        margin-bottom: 12px; display: flex; align-items: center; gap: 8px; font-weight: bold;
    }
    .rec-dot { display: inline-block; width: 10px; height: 10px; background: var(--cyber-red); border-radius: 50%; animation: blinker 1s infinite; box-shadow: 0 0 10px var(--cyber-red); }

    .monitor-frame {
        background: #000; border: 1px solid rgba(0, 234, 255, 0.3); border-radius: 4px;
        position: relative; overflow: hidden; display: flex; justify-content: center; align-items: center;
        box-shadow: 0 10px 25px rgba(0,0,0,0.6); padding: 5px;
    }

    .monitor-frame::after {
        content: " "; display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0;
        background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.2) 50%),
                    linear-gradient(90deg, rgba(255, 0, 0, 0.04), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.04));
        z-index: 2; background-size: 100% 2px, 3px 100%; pointer-events: none;
    }

    .monitor-frame img, .monitor-frame video {
        width: 100%; height: auto; max-height: none;
        object-fit: contain; z-index: 1; position: relative; border-radius: 2px;
    }


    .hologram-wrapper {
        position: absolute; top: 0; left: 0; width: 100%; height: 100%;
        display: flex; flex-direction: column; justify-content: center; align-items: center;
        pointer-events: none; z-index: 5;
    }
    .hologram-img {
        width: 100%; max-width: 600px; object-fit: contain;
        mix-blend-mode: screen; filter: drop-shadow(0 0 20px rgba(0, 234, 255, 0.6)) brightness(1.2);
        animation: float-plant 6s ease-in-out infinite;
    }
    @keyframes float-plant {
        0% { transform: translateY(0) scale(1); }
        50% { transform: translateY(-20px) scale(1.02); filter: drop-shadow(0 0 30px rgba(0, 234, 255, 0.9)) brightness(1.4); }
        100% { transform: translateY(0) scale(1); }
    }
    .floating-sys-msg {
        background: rgba(0,0,0,0.8); border: 1px solid var(--cyber-blue); color: var(--cyber-blue);
        padding: 15px 30px; border-radius: 4px; font-family: 'Fira Code', monospace; font-size: 1.2rem;
        box-shadow: var(--neon-glow); backdrop-filter: blur(5px); transform: translateY(-20px);
    }


    .terminal-box {
        background: rgba(0, 3, 10, 0.8); border: 1px solid rgba(0, 255, 136, 0.2); border-radius: 4px;
        padding: 20px;

        height: 550px;
        overflow-y: auto;

        font-family: 'Fira Code', monospace;
        color: var(--cyber-green); font-size: 1.1rem; box-shadow: inset 0 0 40px rgba(0,0,0,1);
        display: flex; flex-direction: column; gap: 12px; line-height: 1.8;
    }
    .t-line { word-wrap: break-word; text-shadow: 0 0 5px rgba(0, 255, 136, 0.5); }
    .t-user { color: #fff; text-shadow: 0 0 5px rgba(255,255,255,0.5); }
    .t-sys { color: var(--cyber-yellow); }
    .t-ai { color: var(--cyber-blue); text-shadow: var(--neon-glow); }
    .t-err { color: var(--cyber-red); font-weight: bold; }

    .chat-input-wrapper { display: flex; gap: 15px; margin-top: auto; padding-top: 20px; flex-shrink: 0; }
    #ai-send-btn { width: 70px; font-size: 1.3rem; }


    @keyframes blinker { 50% { opacity: 0; } }
    .blink { animation: blinker 1s linear infinite; }


    #digital-twin-fullscreen {
        position: fixed;
        top: 0; left: 0; width: 100vw; height: 100vh;
        z-index: 9999;
        background: rgba(3, 10, 20, 0.95);
        backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);
        display: none;
        opacity: 0;
        /* 使用 Flexbox 将舞台完美居中 */
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    /* 严控尺寸的 16:9 中央画框 */
    .stage-virtual {
        position: relative;
        width: 80vw;           /* 宽度占屏幕的 80%，留出边缘呼吸感 */
        max-width: 1200px;     /* 最大不会超过 1200px，防止带鱼屏拉伸过大 */
        aspect-ratio: 16 / 9;  /* 黄金比例锁定 */
        background-color: #000;
        border-radius: 8px;
        border: 2px solid rgba(0, 234, 255, 0.4);
        box-shadow: 0 0 50px rgba(0, 234, 255, 0.15);
        overflow: hidden;      /* 超出框线的部分隐藏 */
    }

    .bg-layer {
        position: absolute; width: 100%; height: 100%; top: 0; left: 0;
        object-fit: cover;     /* 保证背景图完美铺满这个 16:9 的盒子 */
    }

    .drone-layer-pro {
        position: absolute;
        width: 6%;             /* 将无人机缩小到 6%，比例更真实 */
        top: 45%; left: 30%;   /* 根据大棚图调整到更合理的起始坐标 */
        z-index: 10;
        filter: drop-shadow(0px 15px 10px rgba(0, 0, 0, 0.8));
        transition: filter 0.3s;
    }

    .twin-ui-panel {
        position: absolute; bottom: 25px; right: 25px; background: rgba(4, 28, 52, 0.85);
        border: 1px solid #00e5ff; padding: 15px 25px; color: #e0e0e0; border-radius: 6px;
        z-index: 20; font-size: 1.2rem; backdrop-filter: blur(5px);
    }
    .status-standby { color: #00ff88; font-weight: bold; text-shadow: 0 0 5px rgba(0,255,136,0.5); }
    .status-working { color: #ffcc00; font-weight: bold; text-shadow: 0 0 5px rgba(255,204,0,0.5); }
</style>

<div class="container-fluid">
    <div class="top-bar">
        <h2>视觉分析 <span>TERMINAL</span></h2>
        <div class="top-links">
            <a href="{% url 'home' %}"><i class="fas fa-satellite"></i> 返回主控舱</a>
            <a href="{% url 'upload_model' %}"><i class="fas fa-cube"></i> 模型库</a>
            <a href="#"><i class="fas fa-user-shield"></i> {{ user.username|default:"MENG_ADMIN" }}</a>
        </div>
    </div>

    <div class="dashboard-row">

        <div class="dash-col col-left">
            <div class="glass-panel" style="flex: 0 0 auto;">
                <div class="panel-header"><i class="fas fa-server"></i> 节点配置</div>
                <div class="panel-content">
                    <div>
                        <label class="tech-label">选择权重模型 (支持并行)</label>
                        <select id="model-select" class="tech-input w-100" multiple style="height: 140px; margin-bottom: 20px;">
                            {% for model_file in model_files %}
                                <option value="{{ model_file }}" selected>{{ model_file }}</option>
                            {% endfor %}
                        </select>
                        <button class="tech-btn" onclick="updateModel()"><i class="fas fa-link"></i> 挂载模型节点</button>
                    </div>
                </div>
            </div>

            <div class="glass-panel" style="flex: 1;">
                <div class="panel-header"><i class="fas fa-upload"></i> 数据注入管线</div>
                <div class="panel-content">
                    <div>
                        <label class="tech-label">静态影像阵列</label>
                        <input type="file" class="tech-input w-100" id="image" accept="image/*">
                    </div>
                    <div>
                        <label class="tech-label">流媒体解析</label>
                        <input type="file" class="tech-input w-100 mb-3" id="video" accept="video/*">
                        <button class="tech-btn" onclick="uploadVideo()"><i class="fas fa-play"></i> 执行深层解析</button>
                    </div>
                    <div style="margin-top: auto;">
                        <label class="tech-label" style="color:var(--cyber-red);">实时传感器矩阵</label>
                        <button id="toggle-camera-btn" class="tech-btn" onclick="toggleCamera()">
                            {% if camera_active %}
                                <i class="fas fa-video-slash"></i> 切断 (终止哨兵)
                            {% else %}
                                <i class="fas fa-video"></i> 接入 (启动哨兵)
                            {% endif %}
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <div class="dash-col col-center">
            <div class="glass-panel" style="flex: 1;">
                <div class="panel-header"><i class="fas fa-crosshairs blink"></i> 核心监视器 (MAIN FEED)</div>

                <div id="empty-state" class="hologram-wrapper">
                    <img src="{% static 'images/444.png' %}" class="hologram-img" alt="Hologram Vine">
                    <div class="floating-sys-msg"><i class="fas fa-satellite-dish blink"></i> [SYS] 等待视觉信号接入...</div>
                </div>

                <div class="panel-content" style="position: relative; z-index: 10;">
                    <div id="image-results" style="display: none; flex: 1; flex-direction: row; gap: 20px; overflow: hidden;">
                        <div class="monitor-wrapper" style="flex: 1; margin-bottom: 0; display: flex; flex-direction: column;">
                            <div class="monitor-label"><span class="rec-dot"></span> >>> 原始传感器图像</div>
                            <div class="monitor-frame" style="flex: 1;"><img id="original-image" style="object-fit: contain;"></div>
                        </div>

                        <div id="detected-images" style="flex: 1; display: flex; flex-direction: column; gap: 20px; overflow-y: auto; padding-right: 5px;"></div>
                    </div>

                    <div id="video-results" style="display: none;">
                        <div class="monitor-wrapper">
                            <div class="monitor-label"><span class="rec-dot"></span> >>> 原始流媒体信号</div>
                            <div class="monitor-frame"><video id="original-video" controls></video></div>
                        </div>
                        <div id="processed-videos"></div>
                    </div>

                    <div id="camera-stream-container" style="display: none;">
                        <div class="monitor-wrapper" style="margin-bottom: 0;">
                            <div class="monitor-label" style="color: var(--cyber-red);"><span class="rec-dot"></span> >>> 哨兵巡航激活 / 实时帧捕获中</div>
                            <div class="monitor-frame" style="border-color: rgba(255, 51, 102, 0.4); box-shadow: 0 0 30px rgba(255,51,102,0.3);">
                                <img id="camera-feed" alt="Signal Lost">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="dash-col col-right">
            <div class="glass-panel" style="flex: 1;">
                <div class="panel-header" style="color: var(--cyber-green); border-bottom-color: rgba(0, 255, 136, 0.2);"><i class="fas fa-brain"></i> 认知决策中枢</div>
                <div class="panel-content">
                    <div class="terminal-box" id="chat-history">
                        <div class="t-line t-sys">Initializing Neural Link... <span style="color:var(--cyber-blue);">[OK]</span></div>
                        <div class="t-line t-sys">Connect GLM-4 API... <span style="color:var(--cyber-blue);">[OK]</span></div>
                        <div class="t-line t-ai">> 视觉处理管线就绪。等待指挥官下达指令。</div>
                    </div>

                    <div class="chat-input-wrapper">
                        <input type="text" id="ai-chat-input" class="tech-input" style="flex: 1;" placeholder="输入追问指令...">
                        <button id="ai-send-btn" class="tech-btn" style="padding: 0; color: var(--cyber-green); border-color: var(--cyber-green);">
                            <i class="fas fa-paper-plane"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

<div id="cyber-toast-container"></div>

<div id="digital-twin-fullscreen">
    <button class="tech-btn tech-btn-danger" style="position: absolute; top: 40px; right: 50px; width: auto; font-size: 1rem; padding: 10px 20px; z-index: 10000; background: rgba(255, 51, 102, 0.1);" onclick="closeDigitalTwin()">
        <i class="fas fa-sign-out-alt"></i> 终止作业并退出
    </button>

    <div class="stage-virtual" id="twin-stage">
        <img src="{% static 'images/bg.png' %}" class="bg-layer" alt="大棚底图" onerror="this.src='https://img.alicdn.com/tfs/TB184VIC2iTBuNjSszfXXXoKVXa-1920-1080.png'">

        <img src="{% static 'images/drone.png' %}" class="drone-layer-pro" id="myDrone" alt="作业无人机">

        <div class="twin-ui-panel" id="twin-status-panel">
            <span id="twin-status-text"><i class="fas fa-satellite-dish"></i> 硬件：<span class="status-standby">待命中</span></span>
        </div>
    </div>
</div>

{% endblock %}

{% block scripts %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script>
    // =========================================================================
    // 🚁 0. [修复版] 渐显高级 UI + 等比无人机航线
    // =========================================================================
    let isDroneFlying = false;

    // 让无人机初始处于悬停动画
    document.addEventListener("DOMContentLoaded", function() {
        const drone = document.getElementById("myDrone");
        if(drone) { gsap.to(drone, { y: "-=10", duration: 1.5, ease: "sine.inOut", yoyo: true, repeat: -1 }); }
    });

    window.triggerDronePatrol = function() {
        if (isDroneFlying) return;
        isDroneFlying = true;

        const twinContainer = document.getElementById('digital-twin-fullscreen');
        const drone = document.getElementById("myDrone");
        const statusText = document.getElementById("twin-status-text");
        const statusPanel = document.getElementById("twin-status-panel");

        // 1. 呼出覆盖层 (Flex 布局，保证中央画框居中)
        twinContainer.style.display = 'flex';

        statusPanel.style.borderColor = "#ffcc00";
        statusText.innerHTML = "<i class='fas fa-broadcast-tower'></i> 硬件：<span class='status-working'>离线作业中...</span>";
        appendT('sys', '>>> [系统] 正在全息投影高级数字孪生界面...');

        gsap.to(twinContainer, {
            opacity: 1,
            duration: 0.8,
            ease: "power2.inOut",
            onComplete: function() {
                // 2. 界面加载完毕后，无人机启动引擎执行巡航
                // 获取现在的精准画框宽度来计算航线比例
                const stageWidth = document.getElementById('twin-stage').offsetWidth;
                const scale = stageWidth / 1000;

                let tl = gsap.timeline({
                    onComplete: function() {
                        isDroneFlying = false;
                        statusPanel.style.borderColor = "#00eaff";
                        statusText.innerHTML = "<i class='fas fa-check-circle'></i> 硬件：<span class='status-standby'>已安全归位</span>";
                        appendT('sys', '>>> [系统] 硬件作业完成，画面将保持直到手动退出。');
                        showToast('无人机已完成农事实体作业，等待指令');
                    }
                });

                // 修正后的航线：右下 -> 盘旋 -> 归位
                // 飞行航线设计：
                // 1. 往右上方飞 (x为正数，y为负数)
                tl.to(drone, { x: 300 * scale, y: -180 * scale, duration: 4, ease: "power1.inOut" })
                  // 2. 轻微往左上方飞 (x比刚才的300小一点，y比刚才的-180更负一点)
                  .to(drone, { x: 150 * scale, y: -250 * scale, duration: 3, ease: "power1.inOut" })
                  // 3. 原路返回停机坪 (回到 0, 0)
                  .to(drone, { x: 0, y: 0, duration: 4, ease: "power2.inOut" });
            }
        });
    }

    // 手动关闭高级界面的逻辑
    window.closeDigitalTwin = function() {
        const twinContainer = document.getElementById('digital-twin-fullscreen');
        // 渐隐退出
        gsap.to(twinContainer, {
            opacity: 0, duration: 0.6, ease: "power2.inOut", onComplete: () => {
                twinContainer.style.display = 'none';
                appendT('sys', '>>> [系统] 已切断数字孪生流，返回基础控制台。');
            }
        });
    }
// 监听全局键盘事件：按下 ESC 键秒退全屏
    document.addEventListener('keydown', function(event) {
        const twinContainer = document.getElementById('digital-twin-fullscreen');
        // 如果按下的键是 Escape (ESC)，并且当前全屏层是显示状态
        if (event.key === "Escape" && twinContainer.style.display !== 'none') {
            closeDigitalTwin(); // 直接调用我们写好的退出函数
        }
    });


    let globalWeatherContext = "气象节点未就绪";

    function syncEnvironmentData() {
        appendT('sys', '>>> 正在链接气象卫星，获取实时环境数据...');

        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(position => {
                const lat = position.coords.latitude;
                const lon = position.coords.longitude;

                fetch(`https://api.open-meteo.com/v1/forecast?latitude=${lat}&longitude=${lon}&current_weather=true`)
                    .then(res => res.json())
                    .then(data => {
                        const cw = data.current_weather;
                        let condition = "晴朗或多云";
                        if(cw.weathercode > 50) condition = "⚠️ 即将有降雨/恶劣天气";

                        globalWeatherContext = `温度: ${cw.temperature}°C, 风速: ${cw.windspeed}km/h, 天气状况: ${condition}`;

                        appendT('sys', `[气象同步完成] 当前坐标环境: ${globalWeatherContext}`);
                        showToast("气象雷达数据已同步");
                    })
                    .catch(e => {
                        globalWeatherContext = "温度: 28°C, 湿度: 85%, ⚠️雷达显示即将有大暴雨 (备用模拟流)";
                        appendT('sys', '[气象预警] 卫星链接异常，已切入备用气象模拟流。');
                    });
            }, err => {
                globalWeatherContext = "温度: 32°C, 湿度: 90%, ⚠️局部有大暴雨 (备用模拟流)";
                appendT('sys', '[气象预警] 终端定位权限未开启，载入模拟极端气象用于战术推演。');
            });
        } else {
            globalWeatherContext = "温度: 32°C, 湿度: 90%, ⚠️局部有大暴雨 (备用模拟流)";
            appendT('sys', '[气象预警] 浏览器不支持定位，载入模拟极端气象用于战术推演。');
        }
    }

    function showToast(message, type = 'success') {
        const container = document.getElementById('cyber-toast-container');
        const toast = document.createElement('div');
        toast.className = `cyber-toast ${type === 'error' ? 'error' : ''}`;
        const icon = type === 'error' ? '<i class="fas fa-exclamation-triangle"></i>' : '<i class="fas fa-check-circle" style="color:#00eaff;"></i>';
        toast.innerHTML = `${icon} <span>${message}</span>`;
        container.appendChild(toast);
        setTimeout(() => toast.classList.add('show'), 10);
        setTimeout(() => {
            toast.classList.remove('show');
            setTimeout(() => toast.remove(), 400);
        }, 3000);
    }

    function hideEmptyState() {
        document.getElementById('empty-state').style.display = 'none';
        document.getElementById('image-results').style.display = 'none';
        document.getElementById('video-results').style.display = 'none';
        document.getElementById('camera-stream-container').style.display = 'none';
    }

    const chatHistory = document.getElementById('chat-history');

    function appendT(sender, text) {
        if (!chatHistory) return;
        const div = document.createElement('div');
        div.className = 't-line';

        if(sender === 'user'){
            div.className += ' t-user';
            div.innerHTML = `> OP_CMD: ${text}`;
        } else if(sender === 'ai') {

            let cleanText = text;
            let orderHtml = '';
            const jsonRegex = /```json\s*([\s\S]*?)\s*```/;
            const match = text.match(jsonRegex);

            if (match) {
                try {
                    const orderData = JSON.parse(match[1].trim());
                    cleanText = text.replace(jsonRegex, '').trim();

                    let urgencyColor = orderData.urgency.includes('高') ? 'var(--cyber-red)' : 'var(--cyber-yellow)';
                    let glowEffect = orderData.urgency.includes('极高') ? 'box-shadow: 0 0 15px rgba(255,51,102,0.4);' : '';

                    orderHtml = `
                    <div class="cyber-work-order" style="margin-top: 15px; border: 1px dashed var(--cyber-blue); background: rgba(0, 234, 255, 0.05); padding: 15px; border-radius: 4px; ${glowEffect}">
                        <div style="color: var(--cyber-blue); font-weight: bold; border-bottom: 1px solid rgba(0,234,255,0.3); padding-bottom: 8px; margin-bottom: 10px; font-size: 1.1rem; text-shadow: 0 0 5px rgba(0,234,255,0.5);">
                            <i class="fas fa-file-signature"></i> [SYS] 智能农事工单派发
                        </div>
                        <div style="margin-bottom: 8px;"><span style="color:#8d99ae; font-size:0.9rem;">[ 目标防区 ]：</span> <span style="color:#fff;">${orderData.target_area || '全局'}</span></div>
                        <div style="margin-bottom: 8px;"><span style="color:#8d99ae; font-size:0.9rem;">[ 执行动作 ]：</span> <span style="color:#fff;">${orderData.action || '无'}</span></div>
                        <div style="margin-bottom: 8px;"><span style="color:#8d99ae; font-size:0.9rem;">[ 紧急程度 ]：</span> <span style="color:${urgencyColor}; font-weight:900; text-shadow: 0 0 8px ${urgencyColor};">${orderData.urgency || '常规'}</span></div>
                        <div style="margin-bottom: 15px;"><span style="color:#8d99ae; font-size:0.9rem;">[ 完成时限 ]：</span> <span style="color:#fff;">${orderData.deadline || '尽快'}</span></div>

                        <button class="tech-btn" style="padding: 8px 10px; font-size: 0.95rem; display: flex; justify-content: center; gap: 8px;"
                                onclick="this.innerHTML='<i class=\\'fas fa-satellite-dish\\'></i> 指令已送达，正在全息投影'; this.style.borderColor='var(--cyber-green)'; this.style.color='var(--cyber-green)'; this.style.background='rgba(0,255,136,0.1)'; showToast('正在部署全屏数字孪生镜像'); triggerDronePatrol();">
                            <i class="fas fa-download"></i> 签收并下发硬件节点
                        </button>
                    </div>`;
                } catch(e) {
                    console.error("工单解析失败", e);
                }
            }

            div.innerHTML = `> <span style="color:var(--cyber-green);">[GLM-4 战略决策]</span>:<br>${cleanText.replace(/\n/g, '<br>')}${orderHtml}`;

        } else if(sender === 'sys') {
            div.className += ' t-sys';
            div.innerHTML = `> <span style="color:var(--cyber-yellow);">[SYS_AUTO]</span> ${text}`;
        } else if(sender === 'err') {
            div.className += ' t-err';
            div.innerHTML = `> [FATAL]: ${text}`;
        } else if(sender === 'load') {
            div.id = text;
            div.innerHTML = `> 认知网络满载推理中 <span style="animation: blinker 1s linear infinite;">_</span>`;
        }

        chatHistory.appendChild(div);
        chatHistory.scrollTo({ top: chatHistory.scrollHeight, behavior: 'smooth' });
    }

    function autoTriggerAgent(file, prompt_text, is_vision_task = false) {
        const loadingId = 'load-' + Date.now();
        appendT('load', loadingId);

        let final_prompt = prompt_text;

        if (is_vision_task) {
            final_prompt = `
【🚨 实时环境传感器数据融合】：
当前大棚外部气象实况为：${globalWeatherContext}。
请你作为顶级农业专家，务必结合上述实时天气情况给出指导。

【🚨 绝对诊断原则 (最高级防线)】：
禁止背诵通用农规手册！禁止使用任何假设性语气（如“如果葡萄成熟”、“若有病害”、“如果发现...”等模棱两可的废话）。
你必须睁大眼睛看清楚提供的图片，给出一个**唯一且肯定的判断事实**（例如直接说：“当前画面中葡萄已经成熟”），并仅基于你看到的这个肯定事实，下达唯一的、明确的农事操作指令！

【指挥官指令/视觉感知】：
${prompt_text}

【系统强制要求】：除了正常的文字分析外，在回复的最后，请严格按照以下JSON格式下发一份农事工单（必须包含在 \`\`\`json 和 \`\`\` 代码块之间）：
\`\`\`json
{
  "target_area": "需要处理的具体防区(如A区)",
  "action": "结合当前肯定状态和天气的具体农事操作指令",
  "urgency": "极高/高/中/低 (若有病害或极端天气必须是极高)",
  "deadline": "建议完成的时限"
}
\`\`\``;
        }

        const agentFormData = new FormData();

        // 🔥 修复：如果文件有效才添加，彻底阻断空 URL 报错
        if (file && file.size > 0) {
            agentFormData.append('image', file);
        }
        agentFormData.append('message', final_prompt);

        fetch('/users/api/agent/chat/', {
            method: 'POST', body: agentFormData, headers: { 'X-CSRFToken': '{{ csrf_token }}' }
        })
        .then(response => response.json())
        .then(data => {
            const loadEl = document.getElementById(loadingId);
            if(loadEl) loadEl.remove();

            if (data.status === 'success') {
                appendT('ai', data.reply);
                if (is_vision_task) {
                    appendT('sys', '>>> 本轮巡航分析完毕。进入静默监视状态。');
                }
            } else {
                appendT('err', data.error);
                showToast(data.error, 'error');
            }
        })
        .catch(error => {
            const loadEl = document.getElementById(loadingId);
            if(loadEl) loadEl.remove();
            appendT('err', '认知中枢通讯阻断: ' + error.message);
            showToast('认知中枢通讯阻断', 'error');
        });
    }

    let sentinelInterval = null;

    function captureAndAnalyze() {
        const img = document.getElementById('camera-feed');
        if (!img || !img.complete || img.naturalWidth === 0 || img.src === '' || img.src.endsWith(window.location.host + '/')) return;
        appendT('sys', '============== [实时巡航扫描] ==============');
        appendT('sys', '正在从传感器流中截取最新帧，呼叫专家大脑...');
        try {
            const canvas = document.createElement('canvas');
            canvas.width = img.naturalWidth;
            canvas.height = img.naturalHeight;
            const ctx = canvas.getContext('2d');
            ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
            canvas.toBlob(function(blob) {
                if(blob) {
                    const file = new File([blob], "live_patrol_frame.jpg", {type: "image/jpeg"});
                    const autoPrompt = "【哨兵模式自动指令】：这是摄像头刚刚截取的实时画面。请立即结合当前气象局预警数据，判断葡萄状态，拉响警报并给出最高优先级的抢救建议！";
                    autoTriggerAgent(file, autoPrompt, true);
                }
            }, 'image/jpeg', 0.8);
        } catch (e) {
            appendT('err', '跨域或流媒体安全限制，无法截取当前画面帧。');
            console.error('Canvas capture error:', e);
        }
    }

    function toggleCamera() {
        fetch("{% url 'toggle_camera' %}", { method: 'POST', headers: { 'Content-Type': 'application/json', 'X-CSRFToken': '{{ csrf_token }}' } })
        .then(response => response.json())
        .then(data => {
            const toggleBtn = document.getElementById('toggle-camera-btn');
            hideEmptyState();
            if (data.camera_active) {
                toggleBtn.innerHTML = '<i class="fas fa-video-slash"></i> 切断 (终止哨兵)';
                toggleBtn.classList.add('tech-btn-danger');
                document.getElementById('camera-stream-container').style.display = 'block';
                loadCameraStream();
                appendT('sys', '>>> 实时传感器已接入。正在启动 [全自动哨兵巡航模式]...');
                showToast('全自动哨兵巡航已激活');
                sentinelInterval = setInterval(captureAndAnalyze, 20000);
            } else {
                toggleBtn.innerHTML = '<i class="fas fa-video"></i> 接入 (启动哨兵)';
                toggleBtn.classList.remove('tech-btn-danger');
                document.getElementById('empty-state').style.display = 'block';
                clearCameraStream();
                if(sentinelInterval) {
                    clearInterval(sentinelInterval);
                    appendT('sys', '>>> 传感器已切断。哨兵模式终止。');
                    showToast('哨兵巡航已安全终止');
                }
            }
        }).catch(error => { showToast('摄像头指令下发失败', 'error'); console.error('Error:', error); });
    }

    document.addEventListener('DOMContentLoaded', function() {

        setTimeout(syncEnvironmentData, 1000);

        const fileInput = document.getElementById('image');
        const chatInput = document.getElementById('ai-chat-input');
        const sendBtn = document.getElementById('ai-send-btn');

        if(fileInput) {
            fileInput.addEventListener('change', function() {
                if(this.files.length > 0) {
                    const file = this.files[0];
                    const formData = new FormData();
                    formData.append('image', file);
                    hideEmptyState();
                    document.getElementById('image-results').style.display = 'flex'; // 🔥 这里改成了 flex
                    appendT('sys', '侦测到影像接入...');
                    showToast('影像就绪，开始解析');

                    fetch("{% url 'upload_image' %}", { method: 'POST', headers: { 'X-CSRFToken': '{{ csrf_token }}' }, body: formData })
                    .then(response => response.json())
                    .then(data => {
                        if (data.original_image) document.getElementById('original-image').src = data.original_image;
                        const detectedImagesDiv = document.getElementById('detected-images');
                        detectedImagesDiv.innerHTML = '';
                        for (const [model_name, image_url] of Object.entries(data.detected_images)) {
                            detectedImagesDiv.innerHTML += `
                                <div class="monitor-wrapper" style="position: relative; flex: 1; margin-bottom: 0; display: flex; flex-direction: column;">
                                    <div class="monitor-label">> 网络反馈: ${model_name}</div>
                                    <div class="monitor-frame" style="flex: 1;"><img src="${image_url}" style="object-fit: contain;"></div>
                                    <button class="tech-btn tech-btn-danger"
                                            style="position: absolute; top: 40px; right: 10px; width: auto; padding: 5px 12px; font-size: 0.8rem; z-index: 100; border-radius: 4px; box-shadow: 0 0 10px rgba(255,51,102,0.5);"
                                            onclick="submitCorrection('${image_url}', '${model_name}')">
                                        <i class="fas fa-crosshairs"></i> 误报纠偏
                                    </button>
                                </div>`;
                        }
                        const autoPrompt = "系统指令：请扫描图像，严格输出绝对肯定的【当前真实状态】和对应的【农事指导】。";
                        autoTriggerAgent(file, autoPrompt, true);
                    }).catch(err => { appendT('err', err); showToast('影像解析管线崩溃', 'error'); });
                }
            });
        }

        if(sendBtn && chatInput) {
            sendBtn.addEventListener('click', function() {
                const userText = chatInput.value.trim();
                if (!userText) return;
                appendT('user', userText);
                chatInput.value = '';

                autoTriggerAgent(null, userText, false);
            });
            chatInput.addEventListener('keypress', function(e) { if (e.key === 'Enter') sendBtn.click(); });
        }
    });

    function updateModel() {
        const modelSelect = document.getElementById('model-select');
        const selectedModels = Array.from(modelSelect.selectedOptions).map(option => option.value);
        if (selectedModels.length === 0) { showToast('请至少选择一个模型节点', 'error'); return; }
        fetch("{% url 'update_model' %}", {
            method: 'POST', headers: { 'Content-Type': 'application/json', 'X-CSRFToken': '{{ csrf_token }}' },
            body: JSON.stringify({ models: selectedModels })
        }).then(response => response.json()).then(data => {
            if (data.success) {
                showToast(`✅ 成功挂载 ${selectedModels.length} 个模型节点`);
                if(document.getElementById('camera-stream-container').style.display === 'block') { loadCameraStream(); }
            } else { showToast('节点挂载失败：' + data.error, 'error'); }
        }).catch(error => { showToast('服务器通讯异常', 'error'); console.error(error); });
    }

    function loadCameraStream() {
        const selectedModels = Array.from(document.getElementById('model-select').selectedOptions).map(option => option.value);
        if (selectedModels.length === 0) { showToast('未检测到挂载模型', 'error'); return; }
        document.getElementById('camera-feed').src = "{% url 'video_stream' %}?models=" + selectedModels.join(',');
    }

    function clearCameraStream() { document.getElementById('camera-feed').src = ''; }

    function uploadVideo() {
        const fileInput = document.getElementById('video');
        if(!fileInput.files.length){ showToast("检测到空输入，请选择流媒体", "error"); return; }
        hideEmptyState();
        document.getElementById('video-results').style.display = 'block';
        showToast("正在建立流媒体解析管线...");
        const formData = new FormData();
        formData.append('video', fileInput.files[0]);
        fetch("{% url 'upload_video' %}", {
            method: 'POST', headers: { 'X-CSRFToken': '{{ csrf_token }}' }, body: formData
        }).then(response => response.json()).then(data => {
            if (data.original_video) document.getElementById('original-video').src = data.original_video;
            const processedVideosDiv = document.getElementById('processed-videos');
            processedVideosDiv.innerHTML = '';
            for (const [model_name, video_url] of Object.entries(data.processed_videos)) {
                const videoDiv = document.createElement('div');
                videoDiv.className = 'monitor-wrapper';
                if (video_url) {
                    videoDiv.innerHTML = `<div class="monitor-label">> 网络反馈: ${model_name}</div><div class="monitor-frame"><video controls><source src="${video_url}" type="video/mp4"></video></div>`;
                } else {
                    videoDiv.innerHTML = `<div class="monitor-label" style="color:var(--cyber-red);">> 解析失败: ${model_name}</div>`;
                }
                processedVideosDiv.appendChild(videoDiv);
            }
            showToast("流媒体解析完成");
        }).catch(error => { showToast("流媒体上传中断", "error"); console.error(error); });
    }

    function submitCorrection(imgUrl, aiPrediction) {
        const trueLabel = prompt(`[系统标定日志]: ${aiPrediction}\n\n指挥官，请问该图像真实的特征应该是什么？\n(录入后将自动沉淀至底层困难样本库，用于下一代 YOLO 模型自监督学习)`, "");

        if (!trueLabel || trueLabel.trim() === "") return;

        showToast("正在将特征写入底层样本库...");

        fetch("/users/api/report_error/", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "X-CSRFToken": "{{ csrf_token }}"
            },
            body: JSON.stringify({
                image_url: imgUrl,
                ai_prediction: aiPrediction,
                true_label: trueLabel
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.status === "success") {
                showToast("✅ 纠偏特征已录入！AI 正在自我反思。");
                appendT('sys', '>>> 困难样本 [ ' + trueLabel + ' ] 已成功入库，模型待重训。');
            } else {
                showToast("写入样本库失败", "error");
            }
        })
        .catch(err => {
            console.error(err);
            showToast("中枢通讯中断", "error");
        });
    }
</script>
<style>
    @keyframes blinker { 50% { opacity: 0; } }
    .blink-icon { animation: blinker 2s linear infinite; }
</style>
{% endblock %}