{% extends "base.html" %}
{% block title %}System Monitor - Hermetic Suite{% endblock %}

{% block content %}
<div class="page-header">
    <h1 class="icon" id="system_monitor">System Monitor</h1>
    <p class="subtitle">Monitor server CPU, memory, disk, and network metrics</p>
    <div class="header-actions">
        <a href="{{ url_for('system_monitor.config_page') }}" class="btn btn-secondary">⚙️ Configuration</a>
        <a href="{{ url_for('system_monitor.alerts_list') }}" class="btn btn-secondary">
            🔔 Alerts
            {% if active_alerts %}
            <span class="badge badge-critical">{{ active_alerts|length }}</span>
            {% endif %}
        </a>
    </div>
</div>

{% if active_alerts %}
<div class="card" style="border-left: 4px solid var(--danger);">
    <div class="card-header">
        <h2>🚨 Active Alerts</h2>
    </div>
    <div class="card-body">
        <table class="table">
            <thead>
                <tr>
                    <th>Server</th>
                    <th>Severity</th>
                    <th>Metric</th>
                    <th>Message</th>
                    <th>Since</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                {% for alert in active_alerts %}
                <tr>
                    <td>
                        <a href="{{ url_for('system_monitor.server_detail', server_id=alert.server_id) }}">
                            {% set alert_server = server_lookup.get(alert.server_id) %}
                            {{ alert_server.hostname if alert_server and alert_server.hostname else alert_server.ip_address if alert_server else 'Server #' ~ alert.server_id }}
                        </a>
                    </td>
                    <td>
                        <span class="badge badge-{{ 'critical' if alert.severity == 'critical' else 'warning' }}">
                            {{ alert.severity|upper }}
                        </span>
                    </td>
                    <td>{{ alert.metric_type }}</td>
                    <td>{{ alert.message }}</td>
                    <td>{{ alert.triggered_at.strftime('%Y-%m-%d %H:%M') }}</td>
                    <td>
                        <form action="{{ url_for('system_monitor.acknowledge_alert', alert_id=alert.id) }}" method="POST" style="display: inline;">
                            <button type="submit" class="btn btn-sm btn-secondary">Acknowledge</button>
                        </form>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endif %}

<div class="card">
    <div class="card-header">
        <h2>Monitored Servers</h2>
    </div>
    <div class="card-body">
        {% if monitored_servers %}
        <div class="server-grid">
            {% for item in monitored_servers %}
            {% set server = item.server %}
            {% set snapshot = item.snapshot %}
            {% set metrics = snapshot.metrics if snapshot and snapshot.metrics else {} %}
            {% set cpu = metrics.get('cpu', {}) %}
            {% set memory = metrics.get('memory', {}) %}
            {% set disk = metrics.get('disk', {}) %}
            
            <div class="server-card {% if snapshot and snapshot.status != 'online' %}server-offline{% endif %}">
                <div class="server-card-header">
                    <h3>
                        <a href="{{ url_for('system_monitor.server_detail', server_id=server.id) }}">
                            {{ server.hostname or server.ip_address }}
                        </a>
                    </h3>
                    {% if item.alert_count > 0 %}
                    <span class="badge badge-critical">{{ item.alert_count }} alert{{ 's' if item.alert_count > 1 }}</span>
                    {% endif %}
                    <span class="badge badge-{{ 'success' if snapshot and snapshot.status == 'online' else 'secondary' }}">
                        {{ snapshot.status if snapshot else 'No data' }}
                    </span>
                </div>
                
                {% if snapshot and snapshot.status == 'online' %}
                <div class="server-metrics">
                    <div class="metric">
                        <div class="metric-label">CPU</div>
                        <div class="metric-value {% if cpu.get('usage_percent', 0) > 80 %}text-warning{% endif %}{% if cpu.get('usage_percent', 0) > 95 %}text-danger{% endif %}">
                            {{ cpu.get('usage_percent', 0)|round(1) }}%
                        </div>
                        <div class="metric-bar">
                            <div class="metric-bar-fill {% if cpu.get('usage_percent', 0) > 80 %}bar-warning{% endif %}{% if cpu.get('usage_percent', 0) > 95 %}bar-critical{% endif %}" 
                                 style="width: {{ cpu.get('usage_percent', 0) }}%"></div>
                        </div>
                    </div>
                    
                    <div class="metric">
                        <div class="metric-label">Memory</div>
                        <div class="metric-value {% if memory.get('used_percent', 0) > 80 %}text-warning{% endif %}{% if memory.get('used_percent', 0) > 95 %}text-danger{% endif %}">
                            {{ memory.get('used_percent', 0)|round(1) }}%
                        </div>
                        <div class="metric-bar">
                            <div class="metric-bar-fill {% if memory.get('used_percent', 0) > 80 %}bar-warning{% endif %}{% if memory.get('used_percent', 0) > 95 %}bar-critical{% endif %}" 
                                 style="width: {{ memory.get('used_percent', 0) }}%"></div>
                        </div>
                    </div>
                    
                    {% if disk.get('filesystems') %}
                    {% set root_disk = disk.filesystems|selectattr('mount_point', 'equalto', '/')|first %}
                    {% if root_disk %}
                    <div class="metric">
                        <div class="metric-label">Disk (/)</div>
                        <div class="metric-value {% if root_disk.used_percent > 80 %}text-warning{% endif %}{% if root_disk.used_percent > 95 %}text-danger{% endif %}">
                            {{ root_disk.used_percent|round(1) }}%
                        </div>
                        <div class="metric-bar">
                            <div class="metric-bar-fill {% if root_disk.used_percent > 80 %}bar-warning{% endif %}{% if root_disk.used_percent > 95 %}bar-critical{% endif %}" 
                                 style="width: {{ root_disk.used_percent }}%"></div>
                        </div>
                    </div>
                    {% endif %}
                    {% endif %}
                    
                    <div class="metric">
                        <div class="metric-label">Load</div>
                        <div class="metric-value">
                            {{ cpu.get('load_1', 0)|round(2) }} / {{ cpu.get('cores', 1) }} cores
                        </div>
                    </div>
                </div>
                
                <div class="server-card-footer">
                    <small class="text-muted">
                        Updated: {{ snapshot.collected_at.strftime('%H:%M:%S') if snapshot else 'Never' }}
                    </small>
                    <form action="{{ url_for('system_monitor.collect_now', server_id=server.id) }}" method="POST" style="display: inline;">
                        <input type="hidden" name="next" value="{{ url_for('system_monitor.index') }}">
                        <button type="submit" class="btn btn-sm btn-secondary">🔄 Refresh</button>
                    </form>
                </div>
                {% else %}
                <div class="server-metrics">
                    <p class="text-muted">
                        {% if snapshot %}
                        {{ snapshot.error_message or 'Connection failed' }}
                        {% else %}
                        No metrics collected yet
                        {% endif %}
                    </p>
                </div>
                <div class="server-card-footer">
                    <form action="{{ url_for('system_monitor.collect_now', server_id=server.id) }}" method="POST">
                        <input type="hidden" name="next" value="{{ url_for('system_monitor.index') }}">
                        <button type="submit" class="btn btn-sm btn-primary">Collect Now</button>
                    </form>
                </div>
                {% endif %}
            </div>
            {% endfor %}
        </div>
        {% else %}
        <div class="empty-state">
            <p>No servers are being monitored.</p>
            <a href="{{ url_for('system_monitor.config_page') }}" class="btn btn-primary">Configure Monitoring</a>
        </div>
        {% endif %}
    </div>
</div>

{% if unconfigured_servers %}
<div class="card">
    <div class="card-header">
        <h2>Available Servers</h2>
    </div>
    <div class="card-body">
        <p class="text-muted">These servers have SSH enabled but are not being monitored:</p>
        <table class="table">
            <thead>
                <tr>
                    <th>Hostname</th>
                    <th>IP Address</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                {% for server in unconfigured_servers %}
                <tr>
                    <td>{{ server.hostname or '-' }}</td>
                    <td><code>{{ server.ip_address }}</code></td>
                    <td>
                        <form action="{{ url_for('system_monitor.config_page') }}" method="POST" style="display: inline;">
                            <input type="hidden" name="action" value="add_server">
                            <input type="hidden" name="server_id" value="{{ server.id }}">
                            <button type="submit" class="btn btn-sm btn-primary">+ Add to Monitoring</button>
                        </form>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endif %}

<style>
.server-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}

.server-card {
    background: var(--bg-secondary);
    border-radius: 8px;
    padding: 1rem;
    border: 1px solid var(--border);
}

.server-card.server-offline {
    opacity: 0.7;
    border-color: var(--danger);
}

.server-card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.server-card-header h3 {
    margin: 0;
    font-size: 1rem;
    flex: 1;
}

.server-card-header h3 a {
    color: inherit;
    text-decoration: none;
}

.server-card-header h3 a:hover {
    color: var(--primary);
}

.server-metrics {
    margin-bottom: 1rem;
}

.metric {
    margin-bottom: 0.75rem;
}

.metric-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
}

.metric-value {
    font-size: 1.25rem;
    font-weight: 600;
}

.metric-bar {
    height: 4px;
    background: var(--bg-tertiary);
    border-radius: 2px;
    margin-top: 0.25rem;
    overflow: hidden;
}

.metric-bar-fill {
    height: 100%;
    background: var(--success);
    transition: width 0.3s ease;
}

.metric-bar-fill.bar-warning {
    background: var(--warning);
}

.metric-bar-fill.bar-critical {
    background: var(--danger);
}

.server-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
}

.text-warning {
    color: var(--warning) !important;
}

.text-danger {
    color: var(--danger) !important;
}
</style>
{% endblock %}