<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5">
    <title>服务监测 - 运行维护平台</title>
    <style>
        :root {
            --primary: #2563eb;
            --primary-hover: #1d4ed8;
            --green: #16a34a;
            --yellow: #d97706;
            --red: #dc2626;
            --gray-50: #f9fafb;
            --gray-100: #f3f4f6;
            --gray-200: #e5e7eb;
            --gray-500: #6b7280;
            --gray-700: #374151;
            --gray-900: #111827;
        }
        * { box-sizing: border-box; margin: 0; padding: 0; }
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Microsoft YaHei", sans-serif;
            background: #f3f4f6;
            min-height: 100vh;
            display: flex; flex-direction: column;
        }
        /* 顶部导航 — 与平台首页统一 */
        .navbar {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            padding: 14px 24px; display: flex; align-items: center; justify-content: space-between;
        }
        .navbar-left { display: flex; align-items: center; gap: 14px; }
        .navbar-brand { color: #fff; font-size: 18px; font-weight: 700; text-decoration: none; }
        .navbar-module { color: rgba(255,255,255,.7); font-size: 14px; }
        .navbar-home {
            background: rgba(255,255,255,.2); color: #fff; border: 1px solid rgba(255,255,255,.35);
            padding: 6px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; text-decoration: none;
            white-space: nowrap;
        }
        .navbar-home:hover { background: rgba(255,255,255,.3); }
        .navbar-user { color: #fff; display: flex; align-items: center; gap: 14px; font-size: 14px; }
        .btn-logout {
            background: rgba(255,255,255,.15); color: #fff; border: 1px solid rgba(255,255,255,.3);
            padding: 8px 16px; border-radius: 8px; cursor: pointer; font-size: 14px;
        }
        .btn-logout:hover { background: rgba(255,255,255,.25); }

        .container { max-width: 1100px; margin: 0 auto; padding: 28px 24px; flex: 1; width: 100%; }

        /* 区块标题 */
        .section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
        .section-title { font-size: 18px; font-weight: 700; color: var(--gray-900); display: flex; align-items: center; gap: 8px; }
        .btn-add {
            background: var(--primary); color: #fff; border: none; padding: 8px 16px;
            border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none;
        }
        .btn-add:hover { background: var(--primary-hover); }

        /* 目标卡片网格 */
        .target-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 36px; }
        .target-card {
            background: #fff; border-radius: 12px; padding: 20px; box-shadow: 0 2px 8px rgba(0,0,0,.06);
            border: 1px solid var(--gray-200);
        }
        .target-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
        .target-icon { font-size: 28px; }
        .target-name { font-size: 16px; font-weight: 700; color: var(--gray-900); }
        .target-meta { font-size: 13px; color: var(--gray-500); margin-bottom: 14px; }
        .target-actions { display: flex; gap: 8px; }
        .btn-suite {
            flex: 1; padding: 8px 0; border-radius: 8px; font-size: 13px; font-weight: 600;
            text-align: center; text-decoration: none; cursor: pointer; border: none;
        }
        .btn-quick { background: var(--gray-100); color: var(--gray-700); }
        .btn-quick:hover { background: var(--gray-200); }
        .btn-full { background: #eef2ff; color: var(--primary); }
        .btn-full:hover { background: #e0e7ff; }
        .target-badge {
            display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 4px;
            background: var(--gray-100); color: var(--gray-500); margin-left: auto;
        }

        /* 报告列表 */
        .report-list { background: #fff; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,.06); border: 1px solid var(--gray-200); }
        .report-row {
            display: grid; grid-template-columns: 2fr 1fr 2fr 2fr 1fr; gap: 12px; align-items: center;
            padding: 14px 18px; border-bottom: 1px solid var(--gray-100); text-decoration: none;
        }
        .report-row:last-child { border-bottom: none; }
        .report-row:hover { background: var(--gray-50); }
        .report-target { font-weight: 600; color: var(--gray-900); }
        .report-suite { font-size: 13px; color: var(--gray-500); }
        .report-summary { display: flex; gap: 10px; font-size: 13px; }
        .sm-ok { color: var(--green); } .sm-warn { color: var(--yellow); } .sm-crit { color: var(--red); }
        .report-time { font-size: 13px; color: var(--gray-500); }
        .btn-view {
            background: var(--gray-100); color: var(--gray-700); padding: 6px 14px;
            border-radius: 6px; font-size: 13px; font-weight: 600; text-decoration: none; text-align: center;
        }
        .btn-view:hover { background: var(--gray-200); }

        .empty { text-align: center; padding: 40px; color: var(--gray-500); }

        .footer { text-align: center; padding: 20px; color: var(--gray-500); font-size: 12px; }

        @media screen and (max-width: 1024px) { .target-grid { grid-template-columns: repeat(2, 1fr); } }
        @media screen and (max-width: 768px) {
            .container { padding: 20px 14px; }
            .target-grid { grid-template-columns: 1fr; }
            .navbar-module { display: none; }
            .navbar-home, .btn-logout { min-height: 44px; font-size: 16px; }
            .report-row { grid-template-columns: 1fr 1fr; gap: 6px; }
            .report-summary { font-size: 12px; }
        }
    </style>
</head>
<body>
    <div class="navbar">
        <div class="navbar-left">
            <a href="/" class="navbar-brand">🛠️ 运行维护平台</a>
            <span class="navbar-module">/ 服务监测</span>
            <a href="/" class="navbar-home">🏠 返回首页</a>
        </div>
        <div class="navbar-user">
            <span>{{ user.username }}（{{ '管理员' if is_admin else '用户' }}）</span>
            {% if is_admin %}<a href="/service-monitor/targets" class="navbar-home">⚙️ 目标管理</a>{% endif %}
            <button class="btn-logout" onclick="handleLogout()">🚪 退出</button>
        </div>
    </div>

    <div class="container">
        <!-- 监测目标 -->
        <div class="section-head">
            <div class="section-title">📊 监测目标</div>
            {% if is_admin %}
            <a href="/service-monitor/targets" class="btn-add">+ 目标管理</a>
            {% endif %}
        </div>

        {% if targets %}
        <div class="target-grid">
            {% for t in targets %}
            <div class="target-card">
                <div class="target-card-head">
                    <div class="target-icon">{{ '🖥️' if t.type == 'local' else '🌐' }}</div>
                    <div class="target-name">{{ t.name }}</div>
                    {% if t.built_in %}<span class="target-badge">内置</span>{% endif %}
                </div>
                <div class="target-meta">
                    {{ '本机容器' if t.type == 'local' else (t.host ~ ':' ~ t.port ~ '  ' ~ t.username) }}
                </div>
                {% if is_admin %}
                <div class="target-actions">
                    <a href="/service-monitor/run/{{ t.id }}?suite=quick" class="btn-suite btn-quick">⚡ 快速巡检</a>
                    <a href="/service-monitor/run/{{ t.id }}?suite=full" class="btn-suite btn-full">🔍 全量巡检</a>
                </div>
                {% else %}
                <div class="target-actions">
                    <span class="btn-suite btn-quick" style="cursor:default; opacity:.5;">⚡ 快速巡检</span>
                    <span class="btn-suite btn-full" style="cursor:default; opacity:.5;">🔍 全量巡检</span>
                </div>
                {% endif %}
            </div>
            {% endfor %}
        </div>
        {% else %}
        <div class="empty">📭 暂无监测目标</div>
        {% endif %}

        <!-- 最近巡检报告 -->
        <div class="section-head">
            <div class="section-title">📋 最近巡检报告</div>
        </div>

        {% if reports %}
        <div class="report-list">
            {% for r in reports %}
            <a href="/service-monitor/report/{{ r.id }}" class="report-row">
                <span class="report-target">{{ r.target_name }}</span>
                <span class="report-suite">{{ '快速' if r.suite == 'quick' else '全量' }}</span>
                <span class="report-summary">
                    <span class="sm-ok">✓{{ r.summary.正常 if r.summary else 0 }}</span>
                    <span class="sm-warn">⚠{{ r.summary.警告 if r.summary else 0 }}</span>
                    <span class="sm-crit">✗{{ r.summary.严重 if r.summary else 0 }}</span>
                </span>
                <span class="report-time">{{ (r.started_at or '')[5:16].replace('T', ' ') }}</span>
                <span class="btn-view">查看</span>
            </a>
            {% endfor %}
        </div>
        {% else %}
        <div class="empty">📭 暂无巡检报告，点击目标卡片开始巡检</div>
        {% endif %}
    </div>

    <div class="footer">运行维护平台 · 服务监测模块</div>

    <script>
        async function handleLogout() {
            try { await fetch('/logout', {method:'POST', headers:{'Content-Type':'application/json'}, credentials:'include'}); } catch(e) {}
            window.location.href = '/login';
        }
    </script>
</body>
</html>
