{% extends "base.html" %}
{% block title %}Supervision - Tableau de bord{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-3">
    <h4 class="mb-0">
        <i class="bi bi-speedometer2"></i> Tableau de bord
        {% if metrics and metrics.hostname %}
        <small class="text-muted">— {{ metrics.hostname }}</small>
        {% endif %}
    </h4>
    <div class="d-flex align-items-center gap-2">
        <span id="last-update" class="text-muted small"></span>
        <form method="POST" action="{{ url_for('toggle_monitoring') }}" class="d-inline">
            {% if metrics and metrics.monitoring_active %}
            <button type="submit" class="btn btn-sm btn-outline-warning">
                <i class="bi bi-pause-circle"></i> Pause
            </button>
            {% else %}
            <button type="submit" class="btn btn-sm btn-outline-success">
                <i class="bi bi-play-circle"></i> Demarrer
            </button>
            {% endif %}
        </form>
    </div>
</div>

{% if not metrics %}
<div class="alert alert-info">
    <i class="bi bi-hourglass-split"></i> Collecte des metriques en cours...
</div>
{% else %}

<!-- Infos systeme -->
<div class="row mb-3">
    <div class="col-12">
        <div class="card bg-dark text-light">
            <div class="card-body py-2 d-flex gap-4 flex-wrap small">
                <span><i class="bi bi-pc-display"></i> <strong id="sys-hostname">{{ metrics.hostname }}</strong></span>
                <span><i class="bi bi-windows"></i> <span id="sys-os">{{ metrics.os }}</span></span>
                <span><i class="bi bi-clock-history"></i> Uptime: <span id="sys-uptime">{{ metrics.uptime }}</span></span>
                <span><i class="bi bi-cpu"></i> <span id="sys-cores">{{ metrics.cpu.cores }}</span> coeurs</span>
                <span><i class="bi bi-memory"></i> <span id="sys-ram-total">{{ metrics.ram.total_gb }}</span> Go RAM</span>
            </div>
        </div>
    </div>
</div>

<!-- Metriques principales -->
<div class="row mb-3" id="main-metrics">
    <!-- CPU -->
    <div class="col-md-4 mb-3">
        <div class="card metric-card" id="card-cpu">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <h6 class="card-title"><i class="bi bi-cpu"></i> CPU</h6>
                    <span class="badge" id="badge-cpu">{{ metrics.cpu.status }}</span>
                </div>
                <div class="metric-value" id="val-cpu">{{ metrics.cpu.percent }}%</div>
                <div class="progress mt-2" style="height: 8px;">
                    <div class="progress-bar" id="bar-cpu" role="progressbar"
                         style="width: {{ metrics.cpu.percent }}%"></div>
                </div>
                <small class="text-muted">Seuil: <span id="thresh-cpu">{{ metrics.cpu.threshold }}</span>%</small>
            </div>
        </div>
    </div>
    <!-- RAM -->
    <div class="col-md-4 mb-3">
        <div class="card metric-card" id="card-ram">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <h6 class="card-title"><i class="bi bi-memory"></i> RAM</h6>
                    <span class="badge" id="badge-ram">{{ metrics.ram.status }}</span>
                </div>
                <div class="metric-value" id="val-ram">{{ metrics.ram.percent }}%</div>
                <div class="progress mt-2" style="height: 8px;">
                    <div class="progress-bar" id="bar-ram" role="progressbar"
                         style="width: {{ metrics.ram.percent }}%"></div>
                </div>
                <small class="text-muted">
                    <span id="ram-used">{{ metrics.ram.used_gb }}</span> /
                    <span id="ram-total">{{ metrics.ram.total_gb }}</span> Go
                    — Seuil: <span id="thresh-ram">{{ metrics.ram.threshold }}</span>%
                </small>
            </div>
        </div>
    </div>
    <!-- Placeholder pour les disques - sera rempli par JS aussi -->
    {% for disk in metrics.disks %}
    <div class="col-md-4 mb-3">
        <div class="card metric-card" id="card-disk-{{ loop.index0 }}">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <h6 class="card-title"><i class="bi bi-hdd"></i> {{ disk.drive }}</h6>
                    <span class="badge" id="badge-disk-{{ loop.index0 }}">{{ disk.status }}</span>
                </div>
                <div class="metric-value" id="val-disk-{{ loop.index0 }}">{{ disk.percent }}%</div>
                <div class="progress mt-2" style="height: 8px;">
                    <div class="progress-bar" id="bar-disk-{{ loop.index0 }}" role="progressbar"
                         style="width: {{ disk.percent }}%"></div>
                </div>
                <small class="text-muted">
                    {{ disk.used_gb }} / {{ disk.total_gb }} Go
                    ({{ disk.free_gb }} Go libres)
                    — Seuil: {{ disk.threshold }}%
                </small>
            </div>
        </div>
    </div>
    {% endfor %}
</div>

<!-- Processus surveilles -->
<div class="row mb-3">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h6 class="mb-0"><i class="bi bi-list-task"></i> Processus surveilles</h6>
            </div>
            <div class="card-body p-0">
                <table class="table table-hover mb-0" id="process-table">
                    <thead>
                        <tr>
                            <th>Processus</th>
                            <th>Statut</th>
                            <th>Instances</th>
                            <th>Memoire</th>
                            <th>CPU</th>
                            <th>PID(s)</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for proc in metrics.processes %}
                        <tr>
                            <td>
                                <strong>{{ proc.name }}</strong>
                                <br><small class="text-muted">pattern: {{ proc.pattern }}</small>
                            </td>
                            <td>
                                {% if not proc.enabled %}
                                <span class="badge bg-secondary">Desactive</span>
                                {% elif proc.running %}
                                <span class="badge bg-success">Actif</span>
                                {% else %}
                                <span class="badge bg-danger">Arrete</span>
                                {% endif %}
                            </td>
                            <td>{{ proc.instance_count }}</td>
                            <td>
                                {{ proc.total_memory_mb }} Mo
                                {% if proc.memory_threshold_mb > 0 %}
                                <br><small class="text-muted">seuil: {{ proc.memory_threshold_mb }} Mo</small>
                                {% endif %}
                            </td>
                            <td>{{ proc.total_cpu_percent }}%</td>
                            <td><small>{{ proc.pids | join(', ') }}</small></td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Alertes recentes -->
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header d-flex justify-content-between">
                <h6 class="mb-0"><i class="bi bi-bell"></i> Alertes recentes</h6>
                <a href="{{ url_for('alerts') }}" class="btn btn-sm btn-outline-primary">Voir tout</a>
            </div>
            <div class="card-body p-0">
                <table class="table table-sm mb-0" id="recent-alerts">
                    <tbody>
                        <!-- Rempli par JS -->
                    </tbody>
                </table>
                <div id="no-alerts" class="text-center text-muted py-3">
                    Aucune alerte recente.
                </div>
            </div>
        </div>
    </div>
</div>

{% endif %}
{% endblock %}

{% block scripts %}
<script>
const statusColors = {
    ok: 'success',
    warning: 'warning',
    critical: 'danger'
};

function updateMetric(id, percent, status) {
    const card = document.getElementById('card-' + id);
    const badge = document.getElementById('badge-' + id);
    const bar = document.getElementById('bar-' + id);
    const val = document.getElementById('val-' + id);
    if (!card) return;

    val.textContent = percent + '%';
    bar.style.width = percent + '%';

    const color = statusColors[status] || 'secondary';
    badge.textContent = status;
    badge.className = 'badge bg-' + color;
    bar.className = 'progress-bar bg-' + color;
    card.className = 'card metric-card border-' + color;
}

function refreshMetrics() {
    fetch('/api/metrics')
        .then(r => r.json())
        .then(data => {
            if (!data || !data.cpu) return;

            updateMetric('cpu', data.cpu.percent, data.cpu.status);
            updateMetric('ram', data.ram.percent, data.ram.status);

            document.getElementById('ram-used').textContent = data.ram.used_gb;
            document.getElementById('sys-uptime').textContent = data.uptime;

            data.disks.forEach((disk, i) => {
                updateMetric('disk-' + i, disk.percent, disk.status);
            });

            const now = new Date();
            document.getElementById('last-update').textContent =
                'Mis a jour: ' + now.toLocaleTimeString('fr-FR');
        })
        .catch(() => {});
}

function loadRecentAlerts() {
    fetch('/api/metrics')
        .then(r => r.json())
        .then(() => {
            // Charger les alertes separement via la page
        })
        .catch(() => {});
}

// Rafraichir toutes les 30 secondes
setInterval(refreshMetrics, 30000);
</script>
{% endblock %}