{% extends "base.html" %}
{% block title %}{{ server.hostname or server.ip_address }} - System Monitor{% endblock %}

{% block content %}
<div class="page-header">
    <h1 class="icon" id="system_monitor">{{ server.hostname or server.ip_address }}</h1>
    <p class="subtitle">System metrics and performance</p>
    <div class="header-actions">
        <a href="{{ url_for('system_monitor.index') }}" class="btn btn-secondary">← Back to Dashboard</a>
        <form action="{{ url_for('system_monitor.collect_now', server_id=server.id) }}" method="POST" style="display: inline;">
            <button type="submit" class="btn btn-primary">🔄 Collect Now</button>
        </form>
    </div>
</div>

{% if latest_snapshot %}
<div class="stats-grid">
    <div class="stat-card">
        <div class="stat-label">Status</div>
        <div class="stat-value">
            <span class="badge badge-{{ 'success' if latest_snapshot.status == 'online' else 'danger' }}" style="font-size: 1rem;">
                {{ latest_snapshot.status|upper }}
            </span>
        </div>
    </div>
    <div class="stat-card">
        <div class="stat-label">Last Collected</div>
        <div class="stat-value">{{ latest_snapshot.collected_at.strftime('%Y-%m-%d %H:%M:%S') }}</div>
    </div>
    <div class="stat-card">
        <div class="stat-label">Uptime</div>
        <div class="stat-value">
            {% if latest_snapshot.uptime_seconds %}
            {{ (latest_snapshot.uptime_seconds // 86400) }}d {{ ((latest_snapshot.uptime_seconds % 86400) // 3600) }}h
            {% else %}
            -
            {% endif %}
        </div>
    </div>
    <div class="stat-card">
        <div class="stat-label">Latency</div>
        <div class="stat-value">{{ latest_snapshot.latency_ms or '-' }} ms</div>
    </div>
</div>

{% set metrics = latest_snapshot.metrics or {} %}
{% set cpu = metrics.get('cpu', {}) %}
{% set memory = metrics.get('memory', {}) %}
{% set disk = metrics.get('disk', {}) %}
{% set network = metrics.get('network', {}) %}
{% set services = metrics.get('services', []) %}

{% if latest_snapshot.status == 'online' %}
<!-- System Information Card with Current Metrics -->
<div class="card">
    <div class="card-header">
        <h2>System Information</h2>
    </div>
    <div class="card-body">
        <div class="info-grid-extended">
            <!-- System Info Column -->
            <div class="info-section">
                <h4>System</h4>
                <div class="info-item">
                    <span class="info-label">Hostname:</span>
                    <strong>{{ latest_snapshot.hostname or '-' }}</strong>
                </div>
                <div class="info-item">
                    <span class="info-label">Operating System:</span>
                    <span>{{ latest_snapshot.os_info or '-' }}</span>
                </div>
                <div class="info-item">
                    <span class="info-label">Kernel:</span>
                    <code>{{ latest_snapshot.kernel or '-' }}</code>
                </div>
                <div class="info-item">
                    <span class="info-label">Architecture:</span>
                    <span>{{ latest_snapshot.architecture or '-' }}</span>
                </div>
                <div class="info-item">
                    <span class="info-label">Boot Time:</span>
                    <span>{{ latest_snapshot.boot_time.strftime('%Y-%m-%d %H:%M') if latest_snapshot.boot_time else '-' }}</span>
                </div>
            </div>
            
            <!-- CPU/Memory Column -->
            <div class="info-section">
                <h4>Resources</h4>
                <div class="info-item">
                    <span class="info-label">CPU Cores:</span>
                    <span>{{ cpu.get('cores', '-') }}</span>
                </div>
                <div class="info-item">
                    <span class="info-label">Total Memory:</span>
                    <span>{{ (memory.get('total_bytes', 0) / 1073741824)|round(1) }} GB</span>
                </div>
                <div class="info-item">
                    <span class="info-label">Swap:</span>
                    <span>{{ (memory.get('swap_total_bytes', 0) / 1073741824)|round(2) }} GB ({{ memory.get('swap_percent', 0)|round(1) }}% used)</span>
                </div>
                <div class="info-item">
                    <span class="info-label">Active Connections:</span>
                    <strong>{{ network.get('active_connections', 0) }}</strong>
                </div>
            </div>
            
            <!-- Disk Usage Column -->
            <div class="info-section">
                <h4>Disk Usage</h4>
                {% if disk.get('filesystems') %}
                {% for fs in disk.filesystems %}
                <div class="info-item disk-item">
                    <span class="info-label">{{ fs.mount_point }}:</span>
                    <div class="disk-info">
                        <div class="disk-bar-container">
                            <div class="disk-bar">
                                <div class="disk-bar-fill {% if fs.used_percent > 80 %}bar-warning{% endif %}{% if fs.used_percent > 95 %}bar-critical{% endif %}" 
                                     style="width: {{ fs.used_percent }}%"></div>
                            </div>
                            <span class="disk-percent {% if fs.used_percent > 80 %}text-warning{% endif %}{% if fs.used_percent > 95 %}text-danger{% endif %}">{{ fs.used_percent|round(1) }}%</span>
                        </div>
                        <span class="disk-details">{{ (fs.used_bytes / 1073741824)|round(1) }} / {{ (fs.total_bytes / 1073741824)|round(1) }} GB</span>
                    </div>
                </div>
                {% endfor %}
                {% else %}
                <p class="text-muted">No disk information</p>
                {% endif %}
            </div>
            
            <!-- Network Interfaces Column -->
            <div class="info-section">
                <h4>Network Interfaces</h4>
                {% if network.get('interfaces') %}
                {% for iface in network.interfaces %}
                <div class="info-item">
                    <span class="info-label">{{ iface.name }}:</span>
                    <span class="network-stats">
                        ↓ {{ (iface.rx_bytes / 1073741824)|round(2) }} GB / 
                        ↑ {{ (iface.tx_bytes / 1073741824)|round(2) }} GB
                    </span>
                </div>
                {% endfor %}
                {% else %}
                <p class="text-muted">No network interfaces</p>
                {% endif %}
            </div>
        </div>
        
        {% if services %}
        <!-- Running Services -->
        <div class="services-section">
            <h4>Running Services</h4>
            <div class="services-grid">
                {% for service in services %}
                <div class="service-item">
                    <span class="service-status {{ 'running' if service.status == 'running' else 'stopped' }}"></span>
                    {{ service.name }}
                </div>
                {% endfor %}
            </div>
        </div>
        {% endif %}
    </div>
</div>

<!-- Time Range Filter -->
<div class="card">
    <div class="card-header">
        <h2>Historical Metrics</h2>
    </div>
    <div class="card-body">
        <form action="{{ url_for('system_monitor.server_detail', server_id=server.id) }}" method="GET" class="inline-form">
            <div class="form-row">
                <div class="form-group">
                    <label for="hours">Show last</label>
                    <select id="hours" name="hours">
                        <option value="1" {% if hours == 1 %}selected{% endif %}>1 hour</option>
                        <option value="6" {% if hours == 6 %}selected{% endif %}>6 hours</option>
                        <option value="12" {% if hours == 12 %}selected{% endif %}>12 hours</option>
                        <option value="24" {% if hours == 24 %}selected{% endif %}>24 hours</option>
                        <option value="48" {% if hours == 48 %}selected{% endif %}>48 hours</option>
                        <option value="168" {% if hours == 168 %}selected{% endif %}>7 days</option>
                    </select>
                </div>
                <div class="form-group" style="margin-top: 1.5rem;">
                    <button type="submit" class="btn btn-primary">Apply</button>
                </div>
            </div>
        </form>
    </div>
</div>

{% if snapshots %}
<div class="card">
    <div class="card-header">
        <h2>CPU Usage</h2>
    </div>
    <div class="card-body">
        <div class="chart-container">
            <canvas id="cpuChart"></canvas>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-header">
        <h2>Memory Usage</h2>
    </div>
    <div class="card-body">
        <div class="chart-container">
            <canvas id="memoryChart"></canvas>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-header">
        <h2>Load Average</h2>
    </div>
    <div class="card-body">
        <div class="chart-container">
            <canvas id="loadChart"></canvas>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-header">
        <h2>Disk Usage</h2>
    </div>
    <div class="card-body">
        <div class="chart-container">
            <canvas id="diskChart"></canvas>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-header">
        <h2>Network Traffic</h2>
    </div>
    <div class="card-body">
        <div class="chart-container">
            <canvas id="networkChart"></canvas>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-header">
        <h2>Active Connections</h2>
    </div>
    <div class="card-body">
        <div class="chart-container">
            <canvas id="connectionsChart"></canvas>
        </div>
    </div>
</div>
{% else %}
<div class="card">
    <div class="card-body">
        <div class="empty-state">
            <p>No metrics collected in the selected time range.</p>
        </div>
    </div>
</div>
{% endif %}

{% else %}
<div class="card">
    <div class="card-body">
        <div class="empty-state">
            <p>Server is {{ latest_snapshot.status }}</p>
            {% if latest_snapshot.error_message %}
            <p class="text-muted">{{ latest_snapshot.error_message }}</p>
            {% endif %}
        </div>
    </div>
</div>
{% endif %}

{% else %}
<div class="card">
    <div class="card-body">
        <div class="empty-state">
            <p>No metrics have been collected for this server yet.</p>
            <form action="{{ url_for('system_monitor.collect_now', server_id=server.id) }}" method="POST">
                <button type="submit" class="btn btn-primary">Collect Metrics Now</button>
            </form>
        </div>
    </div>
</div>
{% endif %}

{% if alerts %}
<div class="card">
    <div class="card-header">
        <h2>Recent Alerts</h2>
    </div>
    <div class="card-body">
        <table class="table">
            <thead>
                <tr>
                    <th>Severity</th>
                    <th>Metric</th>
                    <th>Message</th>
                    <th>Triggered</th>
                    <th>Status</th>
                </tr>
            </thead>
            <tbody>
                {% for alert in alerts %}
                <tr>
                    <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>
                        {% if alert.is_active %}
                        <span class="badge badge-danger">Active</span>
                        {% else %}
                        <span class="badge badge-secondary">Resolved</span>
                        {% endif %}
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endif %}

{% if snapshots %}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// Prepare data
const snapshots = [
    {% for snapshot in snapshots %}
    {% set snap_metrics = snapshot.metrics or {} %}
    {% set snap_cpu = snap_metrics.get('cpu', {}) %}
    {% set snap_memory = snap_metrics.get('memory', {}) %}
    {% set snap_disk = snap_metrics.get('disk', {}) %}
    {% set snap_network = snap_metrics.get('network', {}) %}
    {% set filesystems = snap_disk.get('filesystems', []) %}
    {
        time: '{{ snapshot.collected_at.strftime("%H:%M") }}',
        fullTime: '{{ snapshot.collected_at.strftime("%Y-%m-%d %H:%M") }}',
        cpuUsage: {{ snap_cpu.get('usage_percent', 0) }},
        load1: {{ snap_cpu.get('load_1', 0) }},
        load5: {{ snap_cpu.get('load_5', 0) }},
        load15: {{ snap_cpu.get('load_15', 0) }},
        memoryPercent: {{ snap_memory.get('used_percent', 0) }},
        disks: {
            {% for fs in filesystems %}
            '{{ fs.mount_point }}': {{ fs.used_percent }},
            {% endfor %}
        },
        {% set ifaces = snap_network.get('interfaces', []) %}
        {% set first_iface = ifaces[0] if ifaces else {} %}
        rxBytes: {{ first_iface.get('rx_bytes', 0) if first_iface else 0 }},
        txBytes: {{ first_iface.get('tx_bytes', 0) if first_iface else 0 }},
        activeConnections: {{ snap_network.get('active_connections', 0) }},
    },
    {% endfor %}
];

// Extract unique mount points from all snapshots for disk chart
const allMountPoints = new Set();
snapshots.forEach(s => {
    Object.keys(s.disks).forEach(mp => allMountPoints.add(mp));
});
const mountPoints = Array.from(allMountPoints).sort((a, b) => {
    // Sort with '/' first, then alphabetically
    if (a === '/') return -1;
    if (b === '/') return 1;
    return a.localeCompare(b);
});

// Color palette for disk mount points
const diskColors = [
    { border: '#E91E63', bg: 'rgba(233, 30, 99, 0.1)' },   // Pink
    { border: '#9C27B0', bg: 'rgba(156, 39, 176, 0.1)' },  // Purple
    { border: '#3F51B5', bg: 'rgba(63, 81, 181, 0.1)' },   // Indigo
    { border: '#009688', bg: 'rgba(0, 150, 136, 0.1)' },   // Teal
    { border: '#FF5722', bg: 'rgba(255, 87, 34, 0.1)' },   // Deep Orange
    { border: '#795548', bg: 'rgba(121, 85, 72, 0.1)' },   // Brown
    { border: '#607D8B', bg: 'rgba(96, 125, 139, 0.1)' },  // Blue Grey
];

const labels = snapshots.map(s => s.time);

const chartOptions = {
    responsive: true,
    maintainAspectRatio: false,
    interaction: {
        intersect: false,
        mode: 'index',
    },
    scales: {
        y: {
            beginAtZero: true,
            grid: {
                color: 'rgba(255, 255, 255, 0.1)'
            },
            ticks: {
                color: '#aaa'
            }
        },
        x: {
            grid: {
                color: 'rgba(255, 255, 255, 0.1)'
            },
            ticks: {
                color: '#aaa',
                maxRotation: 45,
                minRotation: 45
            }
        }
    },
    plugins: {
        legend: {
            labels: {
                color: '#eee'
            }
        }
    }
};

// CPU Chart
new Chart(document.getElementById('cpuChart'), {
    type: 'line',
    data: {
        labels: labels,
        datasets: [{
            label: 'CPU Usage %',
            data: snapshots.map(s => s.cpuUsage),
            borderColor: '#4CAF50',
            backgroundColor: 'rgba(76, 175, 80, 0.1)',
            fill: true,
            tension: 0.3
        }]
    },
    options: {
        ...chartOptions,
        scales: {
            ...chartOptions.scales,
            y: {
                ...chartOptions.scales.y,
                max: 100
            }
        }
    }
});

// Memory Chart
new Chart(document.getElementById('memoryChart'), {
    type: 'line',
    data: {
        labels: labels,
        datasets: [{
            label: 'Memory Usage %',
            data: snapshots.map(s => s.memoryPercent),
            borderColor: '#2196F3',
            backgroundColor: 'rgba(33, 150, 243, 0.1)',
            fill: true,
            tension: 0.3
        }]
    },
    options: {
        ...chartOptions,
        scales: {
            ...chartOptions.scales,
            y: {
                ...chartOptions.scales.y,
                max: 100
            }
        }
    }
});

// Load Chart
new Chart(document.getElementById('loadChart'), {
    type: 'line',
    data: {
        labels: labels,
        datasets: [
            {
                label: 'Load 1m',
                data: snapshots.map(s => s.load1),
                borderColor: '#FF9800',
                backgroundColor: 'transparent',
                tension: 0.3
            },
            {
                label: 'Load 5m',
                data: snapshots.map(s => s.load5),
                borderColor: '#FF5722',
                backgroundColor: 'transparent',
                tension: 0.3
            },
            {
                label: 'Load 15m',
                data: snapshots.map(s => s.load15),
                borderColor: '#9C27B0',
                backgroundColor: 'transparent',
                tension: 0.3
            }
        ]
    },
    options: chartOptions
});

// Disk Chart - All mount points
const diskDatasets = mountPoints.map((mp, idx) => {
    const color = diskColors[idx % diskColors.length];
    const label = mp === '/' ? '/ (Root)' : mp;
    return {
        label: label,
        data: snapshots.map(s => s.disks[mp] !== undefined ? s.disks[mp] : null),
        borderColor: color.border,
        backgroundColor: 'transparent',
        tension: 0.3,
        spanGaps: true
    };
});

new Chart(document.getElementById('diskChart'), {
    type: 'line',
    data: {
        labels: labels,
        datasets: diskDatasets
    },
    options: {
        ...chartOptions,
        scales: {
            ...chartOptions.scales,
            y: {
                ...chartOptions.scales.y,
                max: 100
            }
        }
    }
});

// Network Traffic Chart - Calculate delta (traffic rate) between snapshots
// Network bytes from /proc/net/dev are cumulative since boot, so we show the
// difference between snapshots to represent actual traffic in each interval
const networkRxDeltas = [];
const networkTxDeltas = [];
const networkLabels = [];

for (let i = 1; i < snapshots.length; i++) {
    const prev = snapshots[i - 1];
    const curr = snapshots[i];
    
    // Calculate delta - handle counter reset (reboot) by showing 0 if negative
    let rxDelta = curr.rxBytes - prev.rxBytes;
    let txDelta = curr.txBytes - prev.txBytes;
    
    // If delta is negative, counter was reset (reboot), show 0
    if (rxDelta < 0) rxDelta = 0;
    if (txDelta < 0) txDelta = 0;
    
    // Convert to MB for better readability at per-interval scale
    networkRxDeltas.push((rxDelta / 1048576).toFixed(2));
    networkTxDeltas.push((txDelta / 1048576).toFixed(2));
    networkLabels.push(curr.time);
}

new Chart(document.getElementById('networkChart'), {
    type: 'line',
    data: {
        labels: networkLabels,
        datasets: [
            {
                label: 'RX (MB)',
                data: networkRxDeltas,
                borderColor: '#00BCD4',
                backgroundColor: 'rgba(0, 188, 212, 0.1)',
                fill: true,
                tension: 0.3
            },
            {
                label: 'TX (MB)',
                data: networkTxDeltas,
                borderColor: '#8BC34A',
                backgroundColor: 'rgba(139, 195, 74, 0.1)',
                fill: true,
                tension: 0.3
            }
        ]
    },
    options: chartOptions
});

// Active Connections Chart
new Chart(document.getElementById('connectionsChart'), {
    type: 'line',
    data: {
        labels: labels,
        datasets: [{
            label: 'Active Connections',
            data: snapshots.map(s => s.activeConnections),
            borderColor: '#9C27B0',
            backgroundColor: 'rgba(156, 39, 176, 0.1)',
            fill: true,
            tension: 0.3
        }]
    },
    options: chartOptions
});
</script>
{% endif %}

<style>
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.stat-card {
    background: var(--bg-secondary);
    padding: 1rem;
    border-radius: 8px;
    text-align: center;
}

.stat-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

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

.info-grid-extended {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.info-section {
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 8px;
}

.info-section h4 {
    margin: 0 0 1rem 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.5rem;
}

.info-item {
    margin-bottom: 0.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.info-label {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.disk-item {
    flex-direction: column;
    gap: 0.25rem;
}

.disk-info {
    width: 100%;
}

.disk-bar-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.disk-bar {
    flex: 1;
    height: 8px;
    background: var(--bg-tertiary);
    border-radius: 4px;
    overflow: hidden;
}

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

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

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

.disk-percent {
    font-size: 0.85rem;
    font-weight: 600;
    min-width: 45px;
    text-align: right;
}

.disk-details {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.network-stats {
    font-size: 0.85rem;
    font-family: monospace;
}

.services-section {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
}

.services-section h4 {
    margin: 0 0 1rem 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.services-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.service-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem;
    background: var(--bg-tertiary);
    border-radius: 4px;
    font-size: 0.85rem;
}

.service-status {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-secondary);
}

.service-status.running {
    background: var(--success);
}

.service-status.stopped {
    background: var(--danger);
}

.chart-container {
    position: relative;
    height: 300px;
}

.inline-form .form-row {
    display: flex;
    gap: 1rem;
    align-items: flex-end;
    flex-wrap: wrap;
}

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

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