{% extends "base.html" %}

{% block title %}{{ computer.hostname }} — InfoUser Monitor{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2>{{ computer.hostname }}</h2>
    <a href="/" class="btn btn-outline-secondary">← Назад</a>
</div>

<div class="row g-4 mb-4">
    <div class="col-md-3">
        <div class="card text-center shadow-sm">
            <div class="card-body">
                <div class="text-muted small">Статус</div>
                <span class="badge {% if computer.status == 'online' %}bg-success{% else %}bg-secondary{% endif %} fs-6">
                    {{ computer.status }}
                </span>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card text-center shadow-sm">
            <div class="card-body">
                <div class="text-muted small">Пользователь</div>
                <div class="fw-bold">{{ computer.current_user or '-' }}</div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card text-center shadow-sm">
            <div class="card-body">
                <div class="text-muted small">IP</div>
                <div class="fw-bold">{{ computer.current_ip or '-' }}</div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card text-center shadow-sm">
            <div class="card-body">
                <div class="text-muted small">OS</div>
                <div class="fw-bold">{{ computer.os_info or '-' }}</div>
            </div>
        </div>
    </div>
</div>

<div class="row g-4 mb-4">
    <div class="col-md-6">
        <div class="card shadow-sm">
            <div class="card-body">
                <h5 class="card-title">CPU, %</h5>
                <canvas id="cpuChart"></canvas>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="card shadow-sm">
            <div class="card-body">
                <h5 class="card-title">RAM, %</h5>
                <canvas id="ramChart"></canvas>
            </div>
        </div>
    </div>
</div>

<div class="card shadow-sm mb-4">
    <div class="card-body">
        <h5 class="card-title">Последние процессы</h5>
        {% if heartbeats and heartbeats[-1].processes %}
        <table class="table table-sm">
            <thead><tr><th>PID</th><th>Имя</th><th>CPU%</th><th>RAM%</th></tr></thead>
            <tbody>
                {% for p in heartbeats[-1].processes[:10] %}
                <tr>
                    <td>{{ p.pid }}</td>
                    <td>{{ p.name }}</td>
                    <td>{{ p.cpu_percent | round(1) }}</td>
                    <td>{{ p.ram_percent | round(1) }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
        {% else %}
        <div class="text-muted">Нет данных о процессах.</div>
        {% endif %}
    </div>
</div>

<div class="card shadow-sm">
    <div class="card-body">
        <h5 class="card-title">История heartbeats</h5>
        <table class="table table-sm">
            <thead><tr><th>Время</th><th>CPU</th><th>RAM</th><th>IP</th></tr></thead>
            <tbody>
                {% for h in heartbeats[-20:] | reverse %}
                <tr>
                    <td>{{ h.timestamp[:16] | replace('T', ' ') if h.timestamp else '-' }}</td>
                    <td>{{ h.cpu_percent | round(1) }}%</td>
                    <td>{{ h.ram_percent | round(1) }}%</td>
                    <td>{{ h.local_ip or '-' }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

<script>
const heartbeats = {{ heartbeats | tojson }};
const labels = heartbeats.map(h => h.timestamp.replace('T', ' ').slice(0, 16));
const cpuData = heartbeats.map(h => h.cpu_percent);
const ramData = heartbeats.map(h => h.ram_percent);

new Chart(document.getElementById('cpuChart'), {
    type: 'line',
    data: { labels, datasets: [{ label: 'CPU %', data: cpuData, borderColor: 'rgb(255, 99, 132)', tension: 0.2 }] },
    options: { scales: { y: { beginAtZero: true, max: 100 } } }
});

new Chart(document.getElementById('ramChart'), {
    type: 'line',
    data: { labels, datasets: [{ label: 'RAM %', data: ramData, borderColor: 'rgb(54, 162, 235)', tension: 0.2 }] },
    options: { scales: { y: { beginAtZero: true, max: 100 } } }
});
</script>
{% endblock %}