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

{% block title %}AI 总管 · 葡萄智能决策网{% endblock %}

{% block content %}
<style>
/* ============================================================
   AI 总管大屏 - 科技感全屏布局
   ============================================================ */
.agent-container {
    display: grid;
    grid-template-columns: 340px 1fr;
    grid-template-rows: auto 1fr;
    gap: 16px;
    height: calc(100vh - 80px);
    padding: 0;
}

/* 顶部状态栏 */
.agent-header {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 20px;
    background: rgba(4, 28, 52, 0.8);
    border: 1px solid rgba(0, 229, 255, 0.25);
    border-radius: 10px;
    backdrop-filter: blur(10px);
}

.agent-title {
    font-size: 1.4em;
    font-weight: 800;
    color: #00e5ff;
    text-shadow: 0 0 15px rgba(0,229,255,0.6);
    letter-spacing: 2px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.agent-status-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: #00ff88;
    box-shadow: 0 0 8px #00ff88;
    animation: pulse-green 2s infinite;
    flex-shrink: 0;
}

@keyframes pulse-green {
    0%, 100% { box-shadow: 0 0 5px #00ff88; }
    50% { box-shadow: 0 0 18px #00ff88, 0 0 30px rgba(0,255,136,0.3); }
}

.status-chips {
    display: flex;
    gap: 10px;
    margin-left: auto;
    flex-wrap: wrap;
}

.status-chip {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.78em;
    font-weight: 600;
    border: 1px solid;
    letter-spacing: 0.5px;
    cursor: default;
}

.chip-cyan { color: #00e5ff; border-color: rgba(0,229,255,0.4); background: rgba(0,229,255,0.08); }
.chip-green { color: #00ff88; border-color: rgba(0,255,136,0.4); background: rgba(0,255,136,0.08); }
.chip-purple { color: #b026ff; border-color: rgba(176,38,255,0.4); background: rgba(176,38,255,0.08); }
.chip-red { color: #ff0055; border-color: rgba(255,0,85,0.4); background: rgba(255,0,85,0.08); }

/* ============================================================
   左侧面板：快捷指令 + 系统状态
   ============================================================ */
.left-panel {
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow-y: auto;
}

.panel-card {
    background: rgba(4, 28, 52, 0.75);
    border: 1px solid rgba(0, 229, 255, 0.2);
    border-radius: 10px;
    padding: 16px;
    backdrop-filter: blur(8px);
}

.panel-card-title {
    font-size: 0.85em;
    color: #00e5ff;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    border-bottom: 1px solid rgba(0,229,255,0.15);
    padding-bottom: 8px;
}

/* 快捷问题按钮 */
.quick-btn {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 12px;
    margin-bottom: 7px;
    background: rgba(0, 229, 255, 0.06);
    border: 1px solid rgba(0, 229, 255, 0.2);
    border-radius: 7px;
    color: #c0d0e0;
    font-size: 0.85em;
    cursor: pointer;
    transition: all 0.25s;
    line-height: 1.4;
}

.quick-btn:hover {
    background: rgba(0, 229, 255, 0.15);
    border-color: rgba(0, 229, 255, 0.5);
    color: #fff;
    transform: translateX(4px);
    box-shadow: 0 0 10px rgba(0,229,255,0.15);
}

.quick-btn .icon { margin-right: 6px; }

/* 系统状态指标 */
.stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    font-size: 0.83em;
}

.stat-row:last-child { border-bottom: none; }
.stat-label { color: #8d99ae; }
.stat-value { color: #00e5ff; font-weight: 700; font-family: monospace; }
.stat-value.green { color: #00ff88; }
.stat-value.yellow { color: #ffcc00; }
.stat-value.red { color: #ff0055; }

/* ============================================================
   右侧对话区
   ============================================================ */
.chat-panel {
    display: flex;
    flex-direction: column;
    background: rgba(4, 28, 52, 0.75);
    border: 1px solid rgba(0, 229, 255, 0.2);
    border-radius: 10px;
    backdrop-filter: blur(8px);
    overflow: hidden;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* 欢迎消息 */
.welcome-msg {
    text-align: center;
    padding: 40px 20px;
    color: #8d99ae;
}

.welcome-icon {
    font-size: 3em;
    margin-bottom: 12px;
    filter: drop-shadow(0 0 10px rgba(0,229,255,0.5));
}

.welcome-title {
    font-size: 1.3em;
    color: #00e5ff;
    font-weight: 700;
    margin-bottom: 8px;
}

.welcome-sub {
    font-size: 0.9em;
    line-height: 1.6;
}

/* 消息气泡 */
.msg-row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.msg-row.user-row { flex-direction: row-reverse; }

.msg-avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9em;
    font-weight: 700;
    flex-shrink: 0;
}

.avatar-ai {
    background: linear-gradient(135deg, #00e5ff22, #b026ff22);
    border: 1px solid rgba(0,229,255,0.4);
    color: #00e5ff;
}

.avatar-user {
    background: linear-gradient(135deg, #00ff8822, #00e5ff22);
    border: 1px solid rgba(0,255,136,0.4);
    color: #00ff88;
}

.msg-bubble {
    max-width: 78%;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 0.9em;
    line-height: 1.7;
    word-break: break-word;
}

.bubble-ai {
    background: rgba(0, 229, 255, 0.07);
    border: 1px solid rgba(0, 229, 255, 0.2);
    color: #d0e8ff;
    border-radius: 4px 12px 12px 12px;
}

.bubble-user {
    background: rgba(0, 255, 136, 0.08);
    border: 1px solid rgba(0, 255, 136, 0.25);
    color: #c0ffd8;
    border-radius: 12px 4px 12px 12px;
    text-align: right;
}

/* Markdown 样式 */
.bubble-ai strong { color: #00e5ff; }
.bubble-ai em { color: #b0d0ff; }
.bubble-ai code {
    background: rgba(0,229,255,0.1);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 0.88em;
    color: #00ff88;
}

/* 思考中动画 */
.thinking-dots span {
    display: inline-block;
    width: 6px; height: 6px;
    background: #00e5ff;
    border-radius: 50%;
    margin: 0 2px;
    animation: bounce 1.2s infinite;
}

.thinking-dots span:nth-child(2) { animation-delay: 0.2s; }
.thinking-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes bounce {
    0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
    40% { transform: translateY(-8px); opacity: 1; }
}

/* 图片上传预览 */
.img-upload-btn {
    width: 42px; height: 42px;
    border-radius: 8px;
    background: rgba(0, 100, 80, 0.3);
    border: 1px solid rgba(0, 229, 255, 0.3);
    color: #00e5ff;
    font-size: 1em;
    cursor: pointer;
    transition: all 0.25s;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.img-upload-btn:hover {
    background: rgba(0, 229, 255, 0.15);
    border-color: rgba(0, 229, 255, 0.5);
    box-shadow: 0 0 12px rgba(0, 229, 255, 0.2);
}

.img-upload-btn input[type="file"] {
    display: none;
}

.img-preview-container {
    position: relative;
    display: inline-block;
    margin-right: 8px;
}

.img-preview {
    max-width: 60px;
    max-height: 60px;
    border-radius: 8px;
    border: 2px solid rgba(0, 229, 255, 0.3);
    object-fit: cover;
}

.img-preview-remove {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 18px;
    height: 18px;
    background: #ff4070;
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* 输入区 */
.chat-input-area {
    padding: 14px 16px;
    border-top: 1px solid rgba(0, 229, 255, 0.15);
    display: flex;
    gap: 10px;
    align-items: flex-end;
}

.chat-input {
    flex: 1;
    background: rgba(0, 20, 40, 0.8);
    border: 1px solid rgba(0, 229, 255, 0.3);
    border-radius: 8px;
    color: #e0e0e0;
    padding: 10px 14px;
    font-size: 0.92em;
    resize: none;
    min-height: 42px;
    max-height: 120px;
    outline: none;
    transition: border-color 0.3s;
    line-height: 1.5;
}

.chat-input:focus {
    border-color: rgba(0, 229, 255, 0.7);
    box-shadow: 0 0 12px rgba(0, 229, 255, 0.15);
}

.chat-input::placeholder { color: #4a6080; }

.send-btn {
    width: 42px; height: 42px;
    border-radius: 8px;
    background: linear-gradient(135deg, #00a0cc, #0060a0);
    border: 1px solid rgba(0,229,255,0.4);
    color: #fff;
    font-size: 1em;
    cursor: pointer;
    transition: all 0.25s;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.send-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #00c0ee, #0080c0);
    box-shadow: 0 0 15px rgba(0, 229, 255, 0.4);
    transform: scale(1.05);
}

.send-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

.clear-btn {
    padding: 0 12px;
    height: 42px;
    border-radius: 8px;
    background: rgba(255, 0, 85, 0.1);
    border: 1px solid rgba(255, 0, 85, 0.3);
    color: #ff4070;
    font-size: 0.8em;
    cursor: pointer;
    transition: all 0.25s;
    white-space: nowrap;
    flex-shrink: 0;
}

.clear-btn:hover {
    background: rgba(255, 0, 85, 0.2);
    border-color: rgba(255, 0, 85, 0.6);
}

/* Token 输入 */
.token-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.token-bar label {
    font-size: 0.75em;
    color: #8d99ae;
    white-space: nowrap;
}

.token-input {
    width: 180px;
    background: rgba(0,20,40,0.8);
    border: 1px solid rgba(0,229,255,0.3);
    border-radius: 6px;
    color: #00e5ff;
    padding: 4px 10px;
    font-size: 0.8em;
    font-family: monospace;
    outline: none;
}

.token-input:focus {
    border-color: rgba(0,229,255,0.7);
    box-shadow: 0 0 8px rgba(0,229,255,0.2);
}

.token-status {
    font-size: 0.75em;
    padding: 2px 8px;
    border-radius: 10px;
}

.token-status.ok { color: #00ff88; border: 1px solid rgba(0,255,136,0.4); background: rgba(0,255,136,0.08); }
.token-status.no { color: #ff4070; border: 1px solid rgba(255,0,85,0.4); background: rgba(255,0,85,0.08); }
.token-status.warn { color: #ffcc00; border: 1px solid rgba(255,204,0,0.4); background: rgba(255,204,0,0.08); }

/* 工具栏按钮 */
.toolbar-btn {
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 0.78em;
    cursor: pointer;
    border: 1px solid;
    transition: all 0.2s;
    background: transparent;
}

.toolbar-btn.green {
    color: #00ff88; border-color: rgba(0,255,136,0.4);
}
.toolbar-btn.green:hover {
    background: rgba(0,255,136,0.12);
}

.toolbar-btn.purple {
    color: #b026ff; border-color: rgba(176,38,255,0.4);
}
.toolbar-btn.purple:hover {
    background: rgba(176,38,255,0.12);
}

/* 模态框 */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}

.modal-overlay.active { display: flex; }

.modal-box {
    background: rgba(4, 28, 52, 0.98);
    border: 1px solid rgba(0,229,255,0.3);
    border-radius: 12px;
    width: 90%;
    max-width: 800px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 40px rgba(0,229,255,0.15);
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(0,229,255,0.2);
}

.modal-title {
    color: #00e5ff;
    font-weight: 700;
    font-size: 1em;
    display: flex;
    align-items: center;
    gap: 8px;
}

.modal-close {
    background: none;
    border: none;
    color: #8d99ae;
    font-size: 1.2em;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
}
.modal-close:hover { color: #ff4070; background: rgba(255,0,85,0.1); }

.modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
}

/* 审计日志样式 */
.audit-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82em;
}

.audit-table th {
    color: #00e5ff;
    font-weight: 600;
    text-align: left;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(0,229,255,0.2);
    white-space: nowrap;
}

.audit-table td {
    padding: 8px 10px;
    color: #c0d0e0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.audit-table tr:hover td { background: rgba(0,229,255,0.04); }

.audit-flag { padding: 2px 6px; border-radius: 8px; font-size: 0.75em; }
.flag-normal { color: #00ff88; border: 1px solid rgba(0,255,136,0.4); }
.flag-flagged { color: #ffcc00; border: 1px solid rgba(255,204,0,0.4); }
.flag-resolved { color: #8d99ae; border: 1px solid rgba(141,153,174,0.4); }

.audit-success { color: #00ff88; }
.audit-fail { color: #ff4070; }

/* 会话列表 */
.session-list { display: flex; flex-direction: column; gap: 8px; }

.session-item {
    padding: 10px 14px;
    background: rgba(0,20,40,0.6);
    border: 1px solid rgba(0,229,255,0.15);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 10px;
}

.session-item:hover { border-color: rgba(0,229,255,0.4); background: rgba(0,229,255,0.06); }
.session-item.active { border-color: rgba(0,229,255,0.5); background: rgba(0,229,255,0.08); }

.session-icon { font-size: 1.2em; }
.session-info { flex: 1; min-width: 0; }
.session-name { color: #d0e8ff; font-size: 0.88em; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.session-meta { color: #6a7a8a; font-size: 0.75em; margin-top: 2px; }

/* 统计卡片 */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.stat-card {
    background: rgba(0,20,40,0.6);
    border: 1px solid rgba(0,229,255,0.15);
    border-radius: 8px;
    padding: 14px;
    text-align: center;
}

.stat-card-num {
    font-size: 1.6em;
    font-weight: 800;
    font-family: monospace;
    color: #00e5ff;
    text-shadow: 0 0 10px rgba(0,229,255,0.5);
}

.stat-card-label { font-size: 0.75em; color: #8d99ae; margin-top: 4px; }

/* 响应式 */
@media (max-width: 900px) {
    .agent-container {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto 1fr;
        height: auto;
    }
    .left-panel { max-height: 320px; }
    .chat-panel { min-height: 500px; }
}

/* 图片上传预览 */
.img-upload-btn {
    width: 42px; height: 42px;
    border-radius: 8px;
    background: rgba(0, 100, 80, 0.3);
    border: 1px solid rgba(0, 229, 255, 0.3);
    color: #00e5ff;
    font-size: 1em;
    cursor: pointer;
    transition: all 0.25s;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.img-upload-btn:hover {
    background: rgba(0, 229, 255, 0.15);
    border-color: rgba(0, 229, 255, 0.5);
    box-shadow: 0 0 12px rgba(0, 229, 255, 0.2);
}

.img-upload-btn input[type="file"] {
    display: none;
}

.img-preview-container {
    position: relative;
    display: inline-block;
    margin-right: 8px;
}

.img-preview {
    max-width: 60px;
    max-height: 60px;
    border-radius: 8px;
    border: 2px solid rgba(0, 229, 255, 0.3);
    object-fit: cover;
}

.img-preview-remove {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 18px;
    height: 18px;
    background: #ff4070;
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
</style>

<div class="agent-container">

    <!-- ── 顶部状态栏 ── -->
    <div class="agent-header">
        <div class="agent-status-dot"></div>
        <div class="agent-title">
            <i class="fas fa-robot"></i> AI 总管 · 总管-α
        </div>
        <div style="font-size:0.8em; color:#8d99ae; margin-left:4px;">统筹管理 · 智能决策</div>
        <div class="status-chips" id="statusChips">
            <span class="status-chip chip-cyan">⚙️ 初始化中...</span>
        </div>

        <!-- Token 鉴权栏 -->
        <div class="token-bar">
            <label>🔑 Token:</label>
            <input type="password" class="token-input" id="tokenInput"
                   placeholder="填入 API Token"
                   oninput="checkToken()" />
            <span class="token-status warn" id="tokenStatus">未认证</span>
        </div>

        <!-- 工具按钮 -->
        <div style="display:flex; gap:6px; margin-left:8px;">
            <button class="toolbar-btn purple" onclick="showModal('sessions')">
                <i class="fas fa-history"></i> 历史会话
            </button>
            <button class="toolbar-btn green" onclick="showModal('audit')">
                <i class="fas fa-shield-alt"></i> 审计日志
            </button>
            <button class="toolbar-btn purple" onclick="showModal('stats')">
                <i class="fas fa-chart-bar"></i> 统计
            </button>
        </div>
    </div>

    <!-- ── 模态框：历史会话 ── -->
    <div class="modal-overlay" id="modal-sessions">
        <div class="modal-box">
            <div class="modal-header">
                <div class="modal-title"><i class="fas fa-history"></i> 历史会话</div>
                <div style="display:flex; gap:8px; align-items:center;">
                    <button class="toolbar-btn green" onclick="createSession()"><i class="fas fa-plus"></i> 新会话</button>
                    <button class="modal-close" onclick="hideModal('sessions')">&times;</button>
                </div>
            </div>
            <div class="modal-body">
                <div class="session-list" id="sessionList"></div>
            </div>
        </div>
    </div>

    <!-- ── 模态框：审计日志 ── -->
    <div class="modal-overlay" id="modal-audit">
        <div class="modal-box">
            <div class="modal-header">
                <div class="modal-title"><i class="fas fa-shield-alt"></i> 审计日志</div>
                <div style="display:flex; gap:8px; align-items:center;">
                    <select id="auditFilter" onchange="loadAuditLogs()" style="background:rgba(0,20,40,0.8);border:1px solid rgba(0,229,255,0.3);border-radius:6px;color:#00e5ff;font-size:0.8em;padding:4px 8px;outline:none;">
                        <option value="">全部</option>
                        <option value="true">成功</option>
                        <option value="false">失败</option>
                    </select>
                    <button class="modal-close" onclick="hideModal('audit')">&times;</button>
                </div>
            </div>
            <div class="modal-body">
                <table class="audit-table" id="auditTable">
                    <thead>
                        <tr>
                            <th>时间</th>
                            <th>请求</th>
                            <th>Token</th>
                            <th>耗时</th>
                            <th>工具</th>
                            <th>状态</th>
                            <th>标记</th>
                        </tr>
                    </thead>
                    <tbody id="auditBody"></tbody>
                </table>
                <div id="auditPagination" style="text-align:center; margin-top:12px; display:flex; gap:8px; justify-content:center; align-items:center;"></div>
            </div>
        </div>
    </div>

    <!-- ── 模态框：统计面板 ── -->
    <div class="modal-overlay" id="modal-stats">
        <div class="modal-box">
            <div class="modal-header">
                <div class="modal-title"><i class="fas fa-chart-bar"></i> Agent 运行统计</div>
                <button class="modal-close" onclick="hideModal('stats')">&times;</button>
            </div>
            <div class="modal-body">
                <div class="stats-grid" id="statsGrid"></div>
                <div id="recentFailures"></div>
            </div>
        </div>
    </div>

    <!-- ── 左侧面板 ── -->
    <div class="left-panel">

        <!-- 快捷指令 -->
        <div class="panel-card">
            <div class="panel-card-title"><i class="fas fa-bolt"></i> 快捷指令</div>

            <button class="quick-btn" onclick="sendQuick('查看系统检测统计总览')">
                <span class="icon">📊</span>系统检测统计总览
            </button>
            <button class="quick-btn" onclick="sendQuick('最近有没有检测到病害？详细说明')">
                <span class="icon">🦠</span>最近病害检测情况
            </button>
            <button class="quick-btn" onclick="sendQuick('分析最近7天葡萄成熟度趋势')">
                <span class="icon">📈</span>近7天成熟度趋势
            </button>
            <button class="quick-btn" onclick="sendQuick('联邦学习节点当前在线状态')">
                <span class="icon">🌐</span>联邦节点在线状态
            </button>
            <button class="quick-btn" onclick="sendQuick('查看用户反馈汇总，有多少待处理')">
                <span class="icon">💬</span>用户反馈汇总
            </button>
            <button class="quick-btn" onclick="sendQuick('系统当前已部署哪些AI检测模型')">
                <span class="icon">🤖</span>已部署模型清单
            </button>
            <button class="quick-btn" onclick="sendQuick('现在应该采摘葡萄了吗？根据数据分析')">
                <span class="icon">🍇</span>采摘时机分析
            </button>
            <button class="quick-btn" onclick="sendQuick('给我一份完整的项目综合状态报告')">
                <span class="icon">🎛️</span>完整综合报告
            </button>
        </div>

        <!-- 系统实时状态 -->
        <div class="panel-card">
            <div class="panel-card-title"><i class="fas fa-tachometer-alt"></i> 实时状态</div>
            <div id="sysStats">
                <div class="stat-row">
                    <span class="stat-label">累计检测次数</span>
                    <span class="stat-value" id="s-total">--</span>
                </div>
                <div class="stat-row">
                    <span class="stat-label">平均成熟度</span>
                    <span class="stat-value" id="s-maturity">--%</span>
                </div>
                <div class="stat-row">
                    <span class="stat-label">平均含糖量</span>
                    <span class="stat-value" id="s-brix">--°Bx</span>
                </div>
                <div class="stat-row">
                    <span class="stat-label">健康评分</span>
                    <span class="stat-value green" id="s-health">--分</span>
                </div>
                <div class="stat-row">
                    <span class="stat-label">病害检出</span>
                    <span class="stat-value red" id="s-disease">--处</span>
                </div>
                <div class="stat-row">
                    <span class="stat-label">联邦节点</span>
                    <span class="stat-value" id="s-nodes">在线 -- / --</span>
                </div>
                <div class="stat-row">
                    <span class="stat-label">待处理反馈</span>
                    <span class="stat-value yellow" id="s-feedback">--条</span>
                </div>
            </div>
        </div>

        <!-- 快速导航 -->
        <div class="panel-card">
            <div class="panel-card-title"><i class="fas fa-map-signs"></i> 快速导航</div>
            <a href="{% url 'analytics_dashboard' %}" class="quick-btn" style="text-decoration:none; display:block;">
                <span class="icon">📊</span>数据矩阵大屏
            </a>
            <a href="{% url 'disease_center' %}" class="quick-btn" style="text-decoration:none; display:block;">
                <span class="icon">🦠</span>病害诊断中心
            </a>
            <a href="{% url 'predict' %}" class="quick-btn" style="text-decoration:none; display:block;">
                <span class="icon">🎯</span>视觉检测
            </a>
            <a href="{% url 'federated:dashboard' %}" class="quick-btn" style="text-decoration:none; display:block;">
                <span class="icon">🌐</span>联邦星图
            </a>
        </div>
    </div>

    <!-- ── 右侧对话区 ── -->
    <div class="chat-panel">
        <div class="chat-messages" id="chatMessages">
            <div class="welcome-msg" id="welcomeMsg">
                <div class="welcome-icon">🤖</div>
                <div class="welcome-title">总管-α 就绪</div>
                <div class="welcome-sub">
                    我是葡萄智能决策网的 AI 总管，负责统筹管理整个系统。<br>
                    你可以问我任何关于检测数据、病害状况、成熟趋势或系统运行的问题。<br><br>
                    <span style="color:#00e5ff; font-size:0.9em;">← 左侧快捷指令可一键查询</span>
                </div>
            </div>
        </div>
        <div class="chat-input-area">
            <!-- 图片预览区域 -->
            <div id="imgPreviewContainer" style="display:none;"></div>
            
            <!-- 图片上传按钮 -->
            <label class="img-upload-btn" title="上传图片">
                <i class="fas fa-image"></i>
                <input type="file" accept="image/*" id="imgInput" onchange="handleImageUpload(this)" />
            </label>
            
            <textarea
                class="chat-input"
                id="chatInput"
                placeholder="问总管任何问题，例如：最近葡萄成熟度如何？有病害吗？"
                rows="1"
            ></textarea>
            <button class="send-btn" id="sendBtn" onclick="sendMessage()" title="发送">
                <i class="fas fa-paper-plane"></i>
            </button>
            <button class="clear-btn" onclick="clearChat()">
                <i class="fas fa-trash-alt"></i> 清空
            </button>
        </div>
    </div>

</div>
{% endblock %}

{% block scripts %}
<script>
// ─────────────────────────────────────────────────────
// 状态
// ─────────────────────────────────────────────────────
let chatHistory = [];
let isThinking = false;
let currentSessionId = null;
let auditPage = 1;
let uploadedImageBase64 = null;  // 存储上传图片的 base64

// ─────────────────────────────────────────────────────
// 初始化：加载系统实时状态
// ─────────────────────────────────────────────────────
document.addEventListener('DOMContentLoaded', () => {
    loadSystemStats();
    autoResizeInput();
    document.getElementById('chatInput').addEventListener('keydown', handleKeydown);
});

function loadSystemStats() {
    fetch("{% url 'agent:quick_report' %}")
        .then(r => r.json())
        .then(data => {
            const d = data.detection || {};
            const f = data.federated || {};
            const fb = data.feedback || {};
            const diseases = data.diseases || [];

            setEl('s-total', d.total_detections ?? '--');
            setEl('s-maturity', d.avg_maturity ? d.avg_maturity + '%' : '--%');
            setEl('s-brix', d.avg_brix ? d.avg_brix + '°Bx' : '--°Bx');
            setEl('s-health', d.avg_health_score ? d.avg_health_score + '分' : '--分');
            setEl('s-disease', (d.total_disease_found ?? '--') + '处');
            setEl('s-nodes', `在线 ${f.online_nodes ?? '--'} / ${f.total_nodes ?? '--'}`);
            setEl('s-feedback', (fb.unprocessed ?? '--') + '条');

            // 状态胶囊
            const chips = document.getElementById('statusChips');
            chips.innerHTML = '';
            const maturity = d.avg_maturity || 0;
            const disease = d.total_disease_found || 0;
            const online = f.online_nodes || 0;

            chips.innerHTML += `<span class="status-chip chip-cyan">成熟度 ${maturity}%</span>`;
            if (disease > 0) {
                chips.innerHTML += `<span class="status-chip chip-red">⚠ 病害 ${disease} 处</span>`;
            } else {
                chips.innerHTML += `<span class="status-chip chip-green">✅ 无病害</span>`;
            }
            chips.innerHTML += `<span class="status-chip chip-purple">节点 ${online} 在线</span>`;
            if (fb.unprocessed > 0) {
                chips.innerHTML += `<span class="status-chip chip-red">反馈待处理 ${fb.unprocessed}</span>`;
            }
        })
        .catch(() => {
            document.getElementById('statusChips').innerHTML =
                '<span class="status-chip chip-red">⚠ 数据加载失败</span>';
        });
}

function setEl(id, val) {
    const el = document.getElementById(id);
    if (el) el.textContent = val;
}

// ─────────────────────────────────────────────────────
// 发送消息
// ─────────────────────────────────────────────────────
function sendMessage() {
    const input = document.getElementById('chatInput');
    const text = input.value.trim();
    if (!text && !uploadedImageBase64) return;
    if (isThinking) return;

    input.value = '';
    input.style.height = 'auto';

    // 隐藏欢迎语
    const welcome = document.getElementById('welcomeMsg');
    if (welcome) welcome.style.display = 'none';

    // 显示用户消息（带图片时显示图片预览）
    const displayText = text || (uploadedImageBase64 ? '[已上传图片]' : '');
    appendMessage('user', displayText, uploadedImageBase64);
    showThinking();
    setThinking(true);

    const token = document.getElementById('tokenInput').value.trim();
    const body = {
        message: text,
        history: chatHistory,
        ...(currentSessionId ? {session_id: currentSessionId} : {}),
        ...(uploadedImageBase64 ? {image_base64: uploadedImageBase64} : {}),
    };

    const headers = {
        'Content-Type': 'application/json',
        'X-CSRFToken': getCsrf(),
    };
    if (token) {
        headers['Authorization'] = 'Bearer ' + token;
    }

    fetch("{% url 'agent:chat' %}", {
        method: 'POST',
        headers: headers,
        body: JSON.stringify(body),
    })
    .then(r => r.json())
    .then(data => {
        removeThinking();
        setThinking(false);
        clearImagePreview();  // 清空图片
        if (data.status === 'success') {
            appendMessage('ai', data.reply);
            chatHistory = data.history || [];
            currentSessionId = data.session_id || currentSessionId;
            // 记录 session_id 到 cookie
            if (data.session_id) {
                document.cookie = `agent_session_id=${data.session_id}; path=/; max-age=${60*60*24*30}`;
            }
            // 更新 token 状态
            if (data.error && data.error.includes('Token')) {
                showTokenStatus('no', data.error);
            }
        } else if (data.code === 'AUTH_REQUIRED') {
            appendMessage('ai', '🔑 ' + (data.error || '需要 API Token 才能使用对话功能'));
            showTokenStatus('warn', '未认证');
        } else if (data.code === 'INVALID_TOKEN') {
            appendMessage('ai', '🔑 无效的 Token，请检查是否正确');
            showTokenStatus('no', 'Token 无效');
        } else {
            appendMessage('ai', '❌ 出错了：' + (data.error || '未知错误'));
        }
    })
    .catch(e => {
        removeThinking();
        setThinking(false);
        clearImagePreview();  // 清空图片
        appendMessage('ai', '❌ 网络错误，请检查服务器状态：' + e.message);
    });
}

// ─────────────────────────────────────────────────────
// 图片上传处理
// ─────────────────────────────────────────────────────
function handleImageUpload(input) {
    const file = input.files[0];
    if (!file) return;
    
    // 检查文件大小（限制 10MB）
    if (file.size > 10 * 1024 * 1024) {
        alert('图片大小不能超过 10MB');
        input.value = '';
        return;
    }
    
    const reader = new FileReader();
    reader.onload = function(e) {
        uploadedImageBase64 = e.target.result.split(',')[1]; // 去掉 data:image/xxx;base64, 前缀
        showImagePreview(e.target.result);
    };
    reader.readAsDataURL(file);
}

function showImagePreview(dataUrl) {
    const container = document.getElementById('imgPreviewContainer');
    container.innerHTML = `
        <div class="img-preview-container">
            <img src="${dataUrl}" class="img-preview" />
            <button class="img-preview-remove" onclick="clearImagePreview()">×</button>
        </div>
    `;
    container.style.display = 'inline-block';
}

function clearImagePreview() {
    uploadedImageBase64 = null;
    document.getElementById('imgInput').value = '';
    const container = document.getElementById('imgPreviewContainer');
    container.innerHTML = '';
    container.style.display = 'none';
}

function sendQuick(text) {
    document.getElementById('chatInput').value = text;
    sendMessage();
}

function clearChat() {
    chatHistory = [];
    const msgs = document.getElementById('chatMessages');
    msgs.innerHTML = `
        <div class="welcome-msg" id="welcomeMsg">
            <div class="welcome-icon">🤖</div>
            <div class="welcome-title">对话已清空 · 总管-α 重新就绪</div>
            <div class="welcome-sub">随时开始新的对话 ←</div>
        </div>`;
}

// ─────────────────────────────────────────────────────
// DOM 工具
// ─────────────────────────────────────────────────────
function appendMessage(role, text, imageBase64) {
    const container = document.getElementById('chatMessages');
    const row = document.createElement('div');
    row.className = 'msg-row' + (role === 'user' ? ' user-row' : '');

    const avatar = document.createElement('div');
    avatar.className = 'msg-avatar ' + (role === 'ai' ? 'avatar-ai' : 'avatar-user');
    avatar.innerHTML = role === 'ai' ? '<i class="fas fa-robot"></i>' : '<i class="fas fa-user"></i>';

    const bubble = document.createElement('div');
    bubble.className = 'msg-bubble ' + (role === 'ai' ? 'bubble-ai' : 'bubble-user');
    
    // 如果有图片，添加图片预览
    let bubbleContent = '';
    if (role === 'user' && imageBase64) {
        bubbleContent += `<img src="data:image/jpeg;base64,${imageBase64}" style="max-width:200px;max-height:150px;border-radius:8px;margin-bottom:8px;cursor:pointer;" onclick="this.style.max-width=this.style.maxWidth==='200px'?'100%':'200px';" />`;
    }
    bubbleContent += role === 'ai' ? renderMarkdown(text) : escapeHtml(text);
    bubble.innerHTML = bubbleContent;

    row.appendChild(avatar);
    row.appendChild(bubble);
    container.appendChild(row);
    container.scrollTop = container.scrollHeight;
}

function showThinking() {
    const container = document.getElementById('chatMessages');
    const row = document.createElement('div');
    row.className = 'msg-row';
    row.id = 'thinkingRow';
    row.innerHTML = `
        <div class="msg-avatar avatar-ai"><i class="fas fa-robot"></i></div>
        <div class="msg-bubble bubble-ai">
            <div class="thinking-dots">
                <span></span><span></span><span></span>
            </div>
        </div>`;
    container.appendChild(row);
    container.scrollTop = container.scrollHeight;
}

function removeThinking() {
    const row = document.getElementById('thinkingRow');
    if (row) row.remove();
}

function setThinking(val) {
    isThinking = val;
    document.getElementById('sendBtn').disabled = val;
}

// ─────────────────────────────────────────────────────
// Markdown 简单渲染
// ─────────────────────────────────────────────────────
function renderMarkdown(text) {
    return text
        .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
        .replace(/\*(.+?)\*/g, '<em>$1</em>')
        .replace(/`(.+?)`/g, '<code>$1</code>')
        .replace(/^#{1,3} (.+)$/gm, '<div style="color:#00e5ff;font-weight:700;margin:8px 0 4px;">$1</div>')
        .replace(/^• (.+)$/gm, '<div style="padding:2px 0;"><span style="color:#00e5ff;margin-right:6px;">•</span>$1</div>')
        .replace(/\n\n/g, '<br><br>')
        .replace(/\n/g, '<br>');
}

function escapeHtml(text) {
    const d = document.createElement('div');
    d.textContent = text;
    return d.innerHTML;
}

// ─────────────────────────────────────────────────────
// 输入框自适应高度
// ─────────────────────────────────────────────────────
function autoResizeInput() {
    const input = document.getElementById('chatInput');
    input.addEventListener('input', () => {
        input.style.height = 'auto';
        input.style.height = Math.min(input.scrollHeight, 120) + 'px';
    });
}

function handleKeydown(e) {
    if (e.key === 'Enter' && !e.shiftKey) {
        e.preventDefault();
        sendMessage();
    }
}

// ─────────────────────────────────────────────────────
// CSRF
// ─────────────────────────────────────────────────────
function getCsrf() {
    const cookie = document.cookie.split(';').find(c => c.trim().startsWith('csrftoken='));
    return cookie ? cookie.split('=')[1] : '';
}

// ─────────────────────────────────────────────────────
// Token 状态
// ─────────────────────────────────────────────────────
function showTokenStatus(type, text) {
    const el = document.getElementById('tokenStatus');
    if (!el) return;
    el.className = 'token-status ' + type;
    el.textContent = text;
}

function checkToken() {
    const token = document.getElementById('tokenInput').value.trim();
    if (!token) {
        showTokenStatus('warn', '未认证');
    }
}

// ─────────────────────────────────────────────────────
// 模态框
// ─────────────────────────────────────────────────────
function showModal(name) {
    document.getElementById('modal-' + name).classList.add('active');
    if (name === 'sessions') loadSessions();
    if (name === 'audit') { auditPage = 1; loadAuditLogs(); }
    if (name === 'stats') loadStats();
}

function hideModal(name) {
    document.getElementById('modal-' + name).classList.remove('active');
}

// ─────────────────────────────────────────────────────
// 会话管理
// ─────────────────────────────────────────────────────
async function loadSessions() {
    const token = document.getElementById('tokenInput').value.trim();
    if (!token) {
        document.getElementById('sessionList').innerHTML =
            '<div style="text-align:center;color:#8d99ae;padding:20px;">🔑 请先填入 API Token</div>';
        return;
    }
    const data = await fetchAPI("{% url 'agent:sessions' %}", {}, token);
    const list = document.getElementById('sessionList');
    if (!data || !data.sessions) {
        list.innerHTML = '<div style="text-align:center;color:#ff4070;padding:20px;">加载失败</div>';
        return;
    }
    if (data.sessions.length === 0) {
        list.innerHTML = '<div style="text-align:center;color:#8d99ae;padding:20px;">暂无会话记录</div>';
        return;
    }
    list.innerHTML = data.sessions.map(s => `
        <div class="session-item ${s.id === currentSessionId ? 'active' : ''}" onclick="loadSession('${s.id}')">
            <div class="session-icon">💬</div>
            <div class="session-info">
                <div class="session-name">${s.name || '未命名会话'}</div>
                <div class="session-meta">${s.summary || ''} · ${s.message_count}条 · ${s.last_active_at}</div>
            </div>
            ${s.is_pinned ? '📌' : ''}
        </div>
    `).join('');
}

async function createSession() {
    const token = document.getElementById('tokenInput').value.trim();
    if (!token) { alert('需要 API Token'); return; }
    const data = await fetchAPI("{% url 'agent:sessions' %}", {method:'POST'}, token);
    if (data && data.session_id) {
        currentSessionId = data.session_id;
        chatHistory = [];
        clearChat();
        hideModal('sessions');
    }
}

async function loadSession(sessionId) {
    const token = document.getElementById('tokenInput').value.trim();
    if (!token) return;
    const data = await fetchAPI(`/agent/sessions/${sessionId}/`, {}, token);
    if (!data || !data.messages) return;
    currentSessionId = sessionId;
    chatHistory = [];
    clearChat();
    data.messages.forEach(m => {
        if (m.role === 'user') appendMessage('user', m.content);
        else if (m.role === 'assistant') appendMessage('ai', m.content);
    });
    chatHistory = data.messages.filter(m => m.role !== 'system').map(m => ({role: m.role, content: m.content}));
    hideModal('sessions');
}

// ─────────────────────────────────────────────────────
// 审计日志
// ─────────────────────────────────────────────────────
async function loadAuditLogs() {
    const token = document.getElementById('tokenInput').value.trim();
    const filter = document.getElementById('auditFilter').value;
    if (!token) {
        document.getElementById('auditBody').innerHTML =
            '<tr><td colspan="7" style="text-align:center;color:#8d99ae;">🔑 请先填入 API Token（admin 权限）</td></tr>';
        return;
    }
    const params = `?page=${auditPage}&page_size=20` + (filter ? `&success=${filter}` : '');
    const data = await fetchAPI("{% url 'agent:audit_logs' %}" + params, {}, token);
    const tbody = document.getElementById('auditBody');
    if (!data || !data.logs) {
        tbody.innerHTML = '<tr><td colspan="7" style="text-align:center;color:#ff4070;">加载失败</td></tr>';
        return;
    }
    if (data.logs.length === 0) {
        tbody.innerHTML = '<tr><td colspan="7" style="text-align:center;color:#8d99ae;">暂无记录</td></tr>';
        return;
    }
    tbody.innerHTML = data.logs.map(l => `
        <tr>
            <td style="white-space:nowrap;">${l.created_at}</td>
            <td title="${escapeHtml(l.request_message)}">${escapeHtml(l.request_message.slice(0,50))}${l.request_message.length > 50 ? '...' : ''}</td>
            <td>${l.token_name || '无'}</td>
            <td>${l.latency_ms}ms</td>
            <td>${l.tools_used_count}</td>
            <td class="${l.response_success ? 'audit-success' : 'audit-fail'}">${l.response_success ? '✅' : '❌'}</td>
            <td><span class="audit-flag flag-${l.flag === 'flagged' ? 'flagged' : l.flag === 'resolved' ? 'resolved' : 'normal'}">${l.flag}</span></td>
        </tr>
    `).join('');

    // 分页
    const totalPages = Math.ceil(data.total / 20);
    const pg = document.getElementById('auditPagination');
    pg.innerHTML = `
        <button class="toolbar-btn purple" ${auditPage <= 1 ? 'disabled' : ''} onclick="auditPage--; loadAuditLogs()">◀</button>
        <span style="color:#8d99ae;font-size:0.82em;">第 ${auditPage} / ${totalPages} 页 · 共 ${data.total} 条</span>
        <button class="toolbar-btn purple" ${auditPage >= totalPages ? 'disabled' : ''} onclick="auditPage++; loadAuditLogs()">▶</button>
    `;
}

// ─────────────────────────────────────────────────────
// 统计
// ─────────────────────────────────────────────────────
async function loadStats() {
    const token = document.getElementById('tokenInput').value.trim();
    const grid = document.getElementById('statsGrid');
    if (!token) {
        grid.innerHTML = '<div style="text-align:center;color:#8d99ae;padding:20px;">🔑 请先填入 API Token（admin 权限）</div>';
        return;
    }
    const data = await fetchAPI("{% url 'agent:stats' %}", {}, token);
    if (!data || !data.overview) {
        grid.innerHTML = '<div style="text-align:center;color:#ff4070;padding:20px;">加载失败</div>';
        return;
    }
    const o = data.overview;
    grid.innerHTML = `
        <div class="stat-card"><div class="stat-card-num">${o.total_calls}</div><div class="stat-card-label">总调用次数</div></div>
        <div class="stat-card"><div class="stat-card-num">${o.calls_today}</div><div class="stat-card-label">今日调用</div></div>
        <div class="stat-card"><div class="stat-card-num">${o.calls_7d}</div><div class="stat-card-label">近7天</div></div>
        <div class="stat-card"><div class="stat-card-num">${o.success_rate}%</div><div class="stat-card-label">成功率</div></div>
        <div class="stat-card"><div class="stat-card-num">${o.avg_latency_ms}ms</div><div class="stat-card-label">平均耗时</div></div>
        <div class="stat-card"><div class="stat-card-num">${o.active_sessions}</div><div class="stat-card-label">活跃会话</div></div>
    `;
    const fail = document.getElementById('recentFailures');
    if (data.recent_failures && data.recent_failures.length > 0) {
        fail.innerHTML = '<div style="color:#ff4070;font-weight:700;margin-bottom:8px;">⚠️ 最近失败记录</div>' +
            data.recent_failures.map(f => `
                <div style="padding:6px 0;border-bottom:1px solid rgba(255,0,85,0.1);font-size:0.82em;color:#c0d0e0;">
                    <span style="color:#ff4070;">[${f.time}]</span> ${escapeHtml(f.message)} <br>
                    <span style="color:#8d99ae;">${escapeHtml(f.error)}</span>
                </div>
            `).join('');
    } else {
        fail.innerHTML = '<div style="color:#00ff88;text-align:center;padding:10px;">✅ 无失败记录</div>';
    }
}

// ─────────────────────────────────────────────────────
// 通用 API 调用（带 Token）
// ─────────────────────────────────────────────────────
async function fetchAPI(url, opts={}, token) {
    const headers = {
        'Content-Type': 'application/json',
        'X-CSRFToken': getCsrf(),
        ...(token ? {'Authorization': 'Bearer ' + token} : {}),
    };
    try {
        const res = await fetch(url, {
            ...opts,
            headers,
            ...(opts.body ? {body: opts.body} : {}),
        });
        return await res.json();
    } catch (e) {
        return null;
    }
}
</script>
{% endblock %}