{% extends "base.html" %}

{% block extra_head %}
<style>
.status-card {
    transition: all 0.3s ease;
    border-left: 4px solid #dee2e6;
}

.status-card.healthy {
    border-left-color: #28a745;
    background-color: #f8fff9;
}

.status-card.unhealthy {
    border-left-color: #dc3545;
    background-color: #fff8f8;
}

.status-card.degraded {
    border-left-color: #ffc107;
    background-color: #fffdf5;
}

.status-card.error {
    border-left-color: #dc3545;
    background-color: #fff8f8;
}

.status-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 8px;
}

.status-indicator.healthy {
    background-color: #28a745;
    box-shadow: 0 0 8px rgba(40, 167, 69, 0.4);
}

.status-indicator.unhealthy {
    background-color: #dc3545;
    box-shadow: 0 0 8px rgba(220, 53, 69, 0.4);
}

.status-indicator.degraded {
    background-color: #ffc107;
    box-shadow: 0 0 8px rgba(255, 193, 7, 0.4);
}

.status-indicator.error {
    background-color: #dc3545;
    box-shadow: 0 0 8px rgba(220, 53, 69, 0.4);
}

.metric-value {
    font-size: 1.5rem;
    font-weight: bold;
    color: #495057;
}

.metric-label {
    font-size: 0.875rem;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.action-btn {
    margin: 2px;
}

.context-item {
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 8px;
    background-color: #f8f9fa;
}

.context-item.healthy {
    border-color: #28a745;
    background-color: #f8fff9;
}

.context-item.unhealthy {
    border-color: #dc3545;
    background-color: #fff8f8;
}

.context-status-info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.context-status-info .badge {
    font-size: 0.75rem;
}

.context-item {
    padding: 1rem;
    margin-bottom: 0.75rem;
}

.context-item:last-child {
    margin-bottom: 0;
}



.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

.pulse {
    animation: pulse 2s infinite;
}
</style>
{% endblock %}

{% block content %}


<!-- 页面标题 -->
<div class="row mb-4">
    <div class="col-12">
        <div class="d-flex justify-content-between align-items-center">
            <div>
                <h2>
                    <i class="fas fa-chart-line me-2"></i>
                    系统监控
                </h2>
                <p class="text-muted mb-0">Browser 和 Context 服务状态监控</p>
            </div>
            <div>
                <div class="form-check form-switch d-inline-block me-3">
                    <input class="form-check-input" type="checkbox" id="autoRefresh" checked>
                    <label class="form-check-label" for="autoRefresh">
                        <small>自动刷新 (30s)</small>
                    </label>
                </div>
                <button class="btn btn-outline-primary" onclick="refreshAll()">
                    <i class="fas fa-sync-alt me-1"></i>
                    刷新状态
                </button>
            </div>
        </div>
    </div>
</div>

<!-- 服务概览 -->
<div class="row mb-4">
    <div class="col-12">
        <div class="card status-card" id="overview-card">
            <div class="card-header">
                <h5 class="mb-0">
                    <i class="fas fa-tachometer-alt me-2"></i>
                    服务概览
                    <span id="overall-status-indicator" class="status-indicator ms-2"></span>
                </h5>
            </div>
            <div class="card-body position-relative">
                <div id="overview-loading" class="loading-overlay d-none">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">加载中...</span>
                    </div>
                </div>
                <div id="overview-content">
                    <div class="row text-center">
                        <div class="col-md-6">
                            <div class="metric-value" id="browser-status-text">-</div>
                            <div class="metric-label">Browser 状态</div>
                        </div>
                        <div class="col-md-6">
                            <div class="metric-value" id="context-count-text">-</div>
                            <div class="metric-label">活跃上下文数</div>
                        </div>
                    </div>
                    <div class="row mt-3">
                        <div class="col-12">
                            <small class="text-muted">
                                最后更新: <span id="overview-timestamp">-</span>
                            </small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Browser 服务监控 -->
<div class="row mb-4">
    <div class="col-12">
        <div class="card status-card" id="browser-card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0">
                    <i class="fas fa-globe me-2"></i>
                    Browser 服务
                    <span id="browser-status-indicator" class="status-indicator ms-2"></span>
                </h5>
                <div>
                    <button class="btn btn-sm btn-outline-success action-btn" onclick="browserAction('initialize')">
                        <i class="fas fa-play me-1"></i>初始化
                    </button>
                    <button class="btn btn-sm btn-outline-warning action-btn" onclick="browserAction('restart')">
                        <i class="fas fa-redo me-1"></i>重启
                    </button>
                    <button class="btn btn-sm btn-outline-danger action-btn" onclick="browserAction('close')">
                        <i class="fas fa-stop me-1"></i>关闭
                    </button>
                </div>
            </div>
            <div class="card-body position-relative">
                <div id="browser-loading" class="loading-overlay d-none">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">加载中...</span>
                    </div>
                </div>
                <div id="browser-content">
                    <div class="row">
                        <div class="col-md-3">
                            <div class="metric-value" id="browser-status">-</div>
                            <div class="metric-label">状态</div>
                        </div>
                        <div class="col-md-3">
                            <div class="metric-value" id="browser-version">-</div>
                            <div class="metric-label">版本</div>
                        </div>
                        <div class="col-md-3">
                            <div class="metric-value" id="browser-contexts">-</div>
                            <div class="metric-label">上下文数</div>
                        </div>
                        <div class="col-md-3">
                            <div class="metric-value" id="browser-connected">-</div>
                            <div class="metric-label">连接状态</div>
                        </div>
                    </div>
                    <div class="row mt-3">
                        <div class="col-12">
                            <small class="text-muted">
                                最后健康检查: <span id="browser-health-check">-</span>
                            </small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Context 服务监控 -->
<div class="row mb-4">
    <div class="col-12">
        <div class="card status-card" id="context-card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0">
                    <i class="fas fa-layer-group me-2"></i>
                    Context 服务
                    <span id="context-status-indicator" class="status-indicator ms-2"></span>
                </h5>
                <div>
                    <button class="btn btn-sm btn-outline-info action-btn" onclick="contextAction('cleanup')">
                        <i class="fas fa-broom me-1"></i>清理过期
                    </button>
                    <button class="btn btn-sm btn-outline-danger action-btn" onclick="contextAction('close_all')">
                        <i class="fas fa-times-circle me-1"></i>关闭所有
                    </button>
                </div>
            </div>
            <div class="card-body position-relative">
                <div id="context-loading" class="loading-overlay d-none">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">加载中...</span>
                    </div>
                </div>
                <div id="context-content">
                    <div class="row mb-3">
                        <div class="col-md-4">
                            <div class="metric-value" id="context-total">-</div>
                            <div class="metric-label">总上下文数</div>
                        </div>
                        <div class="col-md-4">
                            <div class="metric-value" id="context-creating">-</div>
                            <div class="metric-label">创建中</div>
                        </div>
                        <div class="col-md-4">
                            <div class="metric-value" id="context-healthy-count">-</div>
                            <div class="metric-label">健康上下文</div>
                        </div>
                    </div>
                    
                    <!-- 上下文详情列表 -->
                    <div id="context-details">
                        <h6 class="mb-3">上下文详情</h6>
                        <div id="context-list">
                            <div class="text-center text-muted py-3">
                                <i class="fas fa-info-circle me-2"></i>
                                暂无活跃上下文
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 系统日志 -->
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0">
                    <i class="fas fa-file-alt me-2"></i>
                    系统日志
                </h5>
                <div>
                    <select class="form-select form-select-sm d-inline-block me-2" id="logFilterType" style="width: auto;">
                        <option value="lines">按行数</option>
                        <option value="days">按日期</option>
                    </select>
                    <select class="form-select form-select-sm d-inline-block me-2" id="logLines" style="width: auto;">
                        <option value="50">最近50行</option>
                        <option value="100" selected>最近100行</option>
                        <option value="200">最近200行</option>
                        <option value="500">最近500行</option>
                    </select>
                    <select class="form-select form-select-sm d-inline-block me-2 d-none" id="logDays" style="width: auto;">
                        <option value="1">最近1天</option>
                        <option value="3">最近3天</option>
                        <option value="7" selected>最近7天</option>
                        <option value="15">最近15天</option>
                        <option value="30">最近30天</option>
                    </select>
                    <select class="form-select form-select-sm d-inline-block me-2" id="logLevel" style="width: auto;">
                        <option value="ALL" selected>所有级别</option>
                        <option value="INFO">INFO</option>
                        <option value="WARNING">WARNING</option>
                        <option value="ERROR">ERROR</option>
                    </select>
                    <button class="btn btn-sm btn-outline-primary" onclick="refreshSystemLogs()">
                        <i class="fas fa-sync-alt me-1"></i>刷新日志
                    </button>
                </div>
            </div>
            <div class="card-body">
                <div id="system-logs" style="max-height: 400px; overflow-y: auto; font-family: 'Courier New', monospace; font-size: 0.875rem; background-color: #f8f9fa; padding: 10px; border-radius: 4px;">
                    <div class="text-center text-muted py-3">
                        <i class="fas fa-info-circle me-2"></i>
                        正在加载系统日志...
                    </div>
                </div>
                <div class="mt-2">
                    <small class="text-muted">
                        日志路径: <span id="log-path">-</span> | 
                        筛选条件: <span id="log-filter-info">-</span> | 
                        最后更新: <span id="log-timestamp">-</span>
                    </small>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_scripts %}
<script>
let autoRefreshInterval = null;

// 页面加载时初始化
document.addEventListener('DOMContentLoaded', function() {
    refreshAll();
    refreshSystemLogs();
    startAutoRefresh();
    
    // 自动刷新开关
    document.getElementById('autoRefresh').addEventListener('change', function() {
        if (this.checked) {
            startAutoRefresh();
        } else {
            stopAutoRefresh();
        }
    });
    
    // 日志行数选择变化时刷新日志
    document.getElementById('logLines').addEventListener('change', function() {
        refreshSystemLogs();
    });
    
    // 日志天数选择变化时刷新日志
    document.getElementById('logDays').addEventListener('change', function() {
        refreshSystemLogs();
    });
    
    // 日志级别选择变化时刷新日志
    document.getElementById('logLevel').addEventListener('change', function() {
        refreshSystemLogs();
    });
    
    // 日志筛选类型变化时切换显示
    document.getElementById('logFilterType').addEventListener('change', function() {
        const filterType = this.value;
        const linesSelect = document.getElementById('logLines');
        const daysSelect = document.getElementById('logDays');
        
        if (filterType === 'days') {
            linesSelect.classList.add('d-none');
            daysSelect.classList.remove('d-none');
        } else {
            linesSelect.classList.remove('d-none');
            daysSelect.classList.add('d-none');
        }
        
        refreshSystemLogs();
    });
});

// 开始自动刷新
function startAutoRefresh() {
    stopAutoRefresh(); // 先停止现有的
    autoRefreshInterval = setInterval(refreshAll, 30000); // 30秒刷新一次
}

// 停止自动刷新
function stopAutoRefresh() {
    if (autoRefreshInterval) {
        clearInterval(autoRefreshInterval);
        autoRefreshInterval = null;
    }
}

// 刷新所有状态
async function refreshAll() {
    await Promise.all([
        refreshOverview(),
        refreshBrowserStatus(),
        refreshContextStatus(),
        refreshSystemLogs()
    ]);
}

// 刷新服务概览
async function refreshOverview() {
    showLoading('overview');
    try {
        const response = await axios.get('/api/monitor/overview');
        
        if (response.data.success) {
            const data = response.data.data;
            updateOverviewDisplay(data);
        } else {
            showMessage('获取服务概览失败: ' + response.data.message, 'danger');
        }
    } catch (error) {
        console.error('获取服务概览失败:', error);
        showMessage('获取服务概览失败: ' + error.message, 'danger');
    } finally {
        hideLoading('overview');
    }
}

// 刷新Browser状态
async function refreshBrowserStatus() {
    showLoading('browser');
    try {
        const response = await axios.get('/api/monitor/browser/status');
        
        if (response.data.success) {
            const data = response.data.data;
            updateBrowserDisplay(data);
        } else {
            showMessage('获取Browser状态失败: ' + response.data.message, 'danger');
        }
    } catch (error) {
        console.error('获取Browser状态失败:', error);
        showMessage('获取Browser状态失败: ' + error.message, 'danger');
    } finally {
        hideLoading('browser');
    }
}

// 刷新Context状态
async function refreshContextStatus() {
    showLoading('context');
    try {
        const response = await axios.get('/api/monitor/context/status');
        
        if (response.data.success) {
            const data = response.data.data;
            updateContextDisplay(data);
        } else {
            showMessage('获取Context状态失败: ' + response.data.message, 'danger');
        }
    } catch (error) {
        console.error('获取Context状态失败:', error);
        showMessage('获取Context状态失败: ' + error.message, 'danger');
    } finally {
        hideLoading('context');
    }
}

// 更新概览显示
function updateOverviewDisplay(data) {
    const overallStatus = data.overall_status;
    const browserStatus = data.services.browser.status || 'unknown';
    const contextCount = data.services.context.total_contexts || 0;
    
    // 更新状态指示器
    updateStatusIndicator('overall-status-indicator', overallStatus);
    updateCardStatus('overview-card', overallStatus);
    
    // 更新数值
    document.getElementById('browser-status-text').textContent = getStatusText(browserStatus);
    document.getElementById('context-count-text').textContent = contextCount;
    document.getElementById('overview-timestamp').textContent = formatTimestamp(data.timestamp);
}

// 更新Browser显示
function updateBrowserDisplay(data) {
    const status = data.status || 'unknown';
    
    // 更新状态指示器和卡片
    updateStatusIndicator('browser-status-indicator', status);
    updateCardStatus('browser-card', status);
    
    // 更新详细信息
    document.getElementById('browser-status').textContent = getStatusText(status);
    document.getElementById('browser-version').textContent = data.version || '-';
    document.getElementById('browser-contexts').textContent = data.context_count || '-';
    document.getElementById('browser-connected').textContent = data.is_connected ? '已连接' : '未连接';
    document.getElementById('browser-health-check').textContent = 
        data.last_health_check ? formatTimestamp(data.last_health_check * 1000) : '-';
}

// 更新Context显示
function updateContextDisplay(data) {
    const totalContexts = data.total_contexts || 0;
    const creatingContexts = data.creating_contexts || 0;
    const contexts = data.contexts || {};
    
    // 计算健康上下文数
    let healthyCount = 0;
    Object.values(contexts).forEach(ctx => {
        if (ctx.is_healthy) healthyCount++;
    });
    
    // 更新状态指示器
    const contextStatus = totalContexts > 0 ? 'healthy' : 'degraded';
    updateStatusIndicator('context-status-indicator', contextStatus);
    updateCardStatus('context-card', contextStatus);
    
    // 更新数值
    document.getElementById('context-total').textContent = totalContexts;
    document.getElementById('context-creating').textContent = creatingContexts;
    document.getElementById('context-healthy-count').textContent = healthyCount;
    
    // 更新上下文列表
    updateContextList(contexts);
}

// 更新上下文列表
function updateContextList(contexts) {
    const listContainer = document.getElementById('context-list');
    
    if (Object.keys(contexts).length === 0) {
        listContainer.innerHTML = `
            <div class="text-center text-muted py-3">
                <i class="fas fa-info-circle me-2"></i>
                暂无活跃上下文
            </div>
        `;
        return;
    }
    
    let html = '';
    Object.entries(contexts).forEach(([siteName, info]) => {
        const statusClass = info.is_healthy ? 'healthy' : 'unhealthy';
        const statusText = info.is_healthy ? '健康' : '异常';
        const creationTime = info.creation_time ? formatTimestamp(info.creation_time * 1000) : '-';
        const lastUsedTime = info.last_used ? formatTimestamp(info.last_used * 1000) : '-';
        
        html += `
            <div class="context-item ${statusClass}">
                <div class="row align-items-center mb-2">
                    <div class="col-md-3">
                        <strong>${siteName}</strong>
                        <span class="status-indicator ${statusClass} ms-2"></span>
                    </div>
                    <div class="col-md-9">
                        <div class="context-status-info">
                            <span class="badge bg-${statusClass === 'healthy' ? 'success' : 'danger'} me-2">状态: ${statusText}</span>
                            <small class="text-muted me-3">创建时间: ${creationTime}</small>
                            <small class="text-muted">最后使用: ${lastUsedTime}</small>
                        </div>
                    </div>
                </div>
                <div class="row align-items-center">
                    <div class="col-md-3">
                        <small class="text-muted">存活: ${formatDuration(info.age_seconds)}</small>
                    </div>
                    <div class="col-md-3">
                        <small class="text-muted">空闲: ${formatDuration(info.idle_seconds)}</small>
                    </div>
                    <div class="col-md-3">
                        <small class="text-muted">使用: ${info.usage_count}次</small>
                    </div>
                    <div class="col-md-3 text-end">
                        <button class="btn btn-sm btn-outline-warning me-1" onclick="refreshContext('${siteName}')" title="刷新上下文">
                            <i class="fas fa-redo"></i>
                        </button>
                        <button class="btn btn-sm btn-outline-danger" onclick="closeContext('${siteName}')" title="关闭上下文">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                </div>
            </div>
        `;
    });
    
    listContainer.innerHTML = html;
}

// Browser操作
async function browserAction(action) {
    showLoading('browser');
    
    try {
        const response = await axios.post('/api/monitor/browser/action', {
            action: action
        });
        
        if (response.data.success) {
            showMessage(response.data.message, 'success');
            await refreshBrowserStatus();
        } else {
            showMessage('Browser操作失败: ' + response.data.message, 'danger');
        }
    } catch (error) {
        console.error('Browser操作失败:', error);
        showMessage('Browser操作失败: ' + error.message, 'danger');
    } finally {
        hideLoading('browser');
    }
}

// Context操作
async function contextAction(action, target = null) {
    showLoading('context');
    
    try {
        const response = await axios.post('/api/monitor/context/action', {
            action: action,
            target: target
        });
        
        if (response.data.success) {
            showMessage(response.data.message, 'success');
            await refreshContextStatus();
        } else {
            showMessage('Context操作失败: ' + response.data.message, 'danger');
        }
    } catch (error) {
        console.error('Context操作失败:', error);
        showMessage('Context操作失败: ' + error.message, 'danger');
    } finally {
        hideLoading('context');
    }
}

// 刷新指定上下文
function refreshContext(siteName) {
    contextAction('refresh', siteName);
}

// 关闭指定上下文
function closeContext(siteName) {
    if (confirm(`确定要关闭上下文 "${siteName}" 吗？`)) {
        contextAction('close', siteName);
    }
}

// 工具函数
function showLoading(service) {
    document.getElementById(`${service}-loading`).classList.remove('d-none');
}

function hideLoading(service) {
    document.getElementById(`${service}-loading`).classList.add('d-none');
}

function updateStatusIndicator(elementId, status) {
    const indicator = document.getElementById(elementId);
    indicator.className = `status-indicator ${status}`;
}

function updateCardStatus(cardId, status) {
    const card = document.getElementById(cardId);
    card.className = `card status-card ${status}`;
}

function getStatusText(status) {
    const statusMap = {
        'healthy': '健康',
        'unhealthy': '异常',
        'degraded': '降级',
        'error': '错误',
        'not_initialized': '未初始化',
        'disconnected': '已断开'
    };
    return statusMap[status] || status;
}

function formatTimestamp(timestamp) {
    if (!timestamp) return '-';
    const date = new Date(timestamp);
    return date.toLocaleString('zh-CN');
}

function formatDuration(seconds) {
    if (seconds < 60) return `${seconds}秒`;
    if (seconds < 3600) return `${Math.floor(seconds / 60)}分钟`;
    return `${Math.floor(seconds / 3600)}小时`;
}

// 刷新系统日志
async function refreshSystemLogs() {
    try {
        const filterType = document.getElementById('logFilterType').value;
        const level = document.getElementById('logLevel').value;
        let url = '/api/monitor/logs';
        let params = [];
        
        if (filterType === 'days') {
            const days = document.getElementById('logDays').value;
            params.push(`days=${days}`);
        } else {
            const lines = document.getElementById('logLines').value;
            params.push(`lines=${lines}`);
        }
        
        if (level && level !== 'ALL') {
            params.push(`level=${level}`);
        }
        
        if (params.length > 0) {
            url += '?' + params.join('&');
        }
        
        const response = await axios.get(url);
        
        if (response.data.success) {
            const data = response.data.data;
            updateSystemLogsDisplay(data);
        } else {
            showSystemLogsError(response.data.message);
        }
    } catch (error) {
        console.error('获取系统日志失败:', error);
        showSystemLogsError('获取系统日志失败: ' + error.message);
    }
}

// 更新系统日志显示
function updateSystemLogsDisplay(data) {
    const logContainer = document.getElementById('system-logs');
    const logPath = document.getElementById('log-path');
    const logFilterInfo = document.getElementById('log-filter-info');
    const logTimestamp = document.getElementById('log-timestamp');
    
    // 更新日志路径和时间戳
    logPath.textContent = data.log_path || '-';
    logTimestamp.textContent = formatTimestamp(data.timestamp);
    
    // 更新筛选信息
    let filterParts = [];
    
    if (data.filter_level && data.filter_level !== 'ALL') {
        filterParts.push(`${data.filter_level}级别`);
    }
    
    if (data.filter_type === 'days') {
        filterParts.push(`最近${data.filter_value}天`);
    } else {
        filterParts.push(`最近${data.filter_value}行`);
    }
    
    logFilterInfo.textContent = filterParts.join(' + ');
    
    if (!data.logs || data.logs.length === 0) {
        logContainer.innerHTML = `
            <div class="text-center text-muted py-3">
                <i class="fas fa-info-circle me-2"></i>
                暂无日志记录
            </div>
        `;
        return;
    }
    
    // 处理日志行，添加颜色标识
    const html = data.logs.map(log => {
        let className = '';
        if (log.includes('ERROR') || log.includes('error')) {
            className = 'text-danger';
        } else if (log.includes('WARNING') || log.includes('warning')) {
            className = 'text-warning';
        } else if (log.includes('INFO') || log.includes('info')) {
            className = 'text-info';
        }
        
        return `<div class="${className} mb-1" style="word-break: break-all;">${escapeHtml(log)}</div>`;
    }).join('');
    
    logContainer.innerHTML = html;
    
    // 滚动到底部显示最新日志
    logContainer.scrollTop = logContainer.scrollHeight;
}

// 更新上下文列表
function updateContextList(contexts) {
    const listContainer = document.getElementById('context-list');
    
    if (Object.keys(contexts).length === 0) {
        listContainer.innerHTML = `
            <div class="text-center text-muted py-3">
                <i class="fas fa-info-circle me-2"></i>
                暂无活跃上下文
            </div>
        `;
        return;
    }
    
    let html = '';
    Object.entries(contexts).forEach(([siteName, info]) => {
        const statusClass = info.is_healthy ? 'healthy' : 'unhealthy';
        const statusText = info.is_healthy ? '健康' : '异常';
        const creationTime = info.creation_time ? formatTimestamp(info.creation_time * 1000) : '-';
        const lastUsedTime = info.last_used ? formatTimestamp(info.last_used * 1000) : '-';
        
        html += `
            <div class="context-item ${statusClass}">
                <div class="row align-items-center mb-2">
                    <div class="col-md-3">
                        <strong>${siteName}</strong>
                        <span class="status-indicator ${statusClass} ms-2"></span>
                    </div>
                    <div class="col-md-9">
                        <div class="context-status-info">
                            <span class="badge bg-${statusClass === 'healthy' ? 'success' : 'danger'} me-2">状态: ${statusText}</span>
                            <small class="text-muted me-3">创建时间: ${creationTime}</small>
                            <small class="text-muted">最后使用: ${lastUsedTime}</small>
                        </div>
                    </div>
                </div>
                <div class="row align-items-center">
                    <div class="col-md-3">
                        <small class="text-muted">存活: ${formatDuration(info.age_seconds)}</small>
                    </div>
                    <div class="col-md-3">
                        <small class="text-muted">空闲: ${formatDuration(info.idle_seconds)}</small>
                    </div>
                    <div class="col-md-3">
                        <small class="text-muted">使用: ${info.usage_count}次</small>
                    </div>
                    <div class="col-md-3 text-end">
                        <button class="btn btn-sm btn-outline-warning me-1" onclick="refreshContext('${siteName}')" title="刷新上下文">
                            <i class="fas fa-redo"></i>
                        </button>
                        <button class="btn btn-sm btn-outline-danger" onclick="closeContext('${siteName}')" title="关闭上下文">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                </div>
            </div>
        `;
    });
    
    listContainer.innerHTML = html;
}

// 显示系统日志错误
function showSystemLogsError(message) {
    const logContainer = document.getElementById('system-logs');
    logContainer.innerHTML = `
        <div class="text-center text-danger py-3">
            <i class="fas fa-exclamation-triangle me-2"></i>
            ${escapeHtml(message)}
        </div>
    `;
}

// HTML转义函数
function escapeHtml(text) {
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}

function showMessage(message, type) {
    // 这里可以使用现有的消息显示函数
    console.log(`[${type.toUpperCase()}] ${message}`);
    
    // 简单的toast提示
    const toast = document.createElement('div');
    toast.className = `alert alert-${type} alert-dismissible fade show position-fixed`;
    toast.style.cssText = 'top: 20px; left: 50%; transform: translateX(-50%); z-index: 9999; min-width: 300px;';
    toast.innerHTML = `
        ${message}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    `;
    
    document.body.appendChild(toast);
    
    // 3秒后自动移除
    setTimeout(() => {
        if (toast.parentNode) {
            toast.parentNode.removeChild(toast);
        }
    }, 3000);
}
</script>
{% endblock %}