{% extends 'base.html' %}
{% block title %}Terminal — {{ c.label }}{% endblock %}
{% block content %}
<div class="flex justify-between items-center mb-4">
    <div>
        <a href="/safe-patching/{{ c.id }}" class="text-xs text-gray-500 hover:text-gray-300">← Retour campagne</a>
        <h2 class="text-xl font-bold text-cyber-accent">{{ c.label }} — Exécution {{ 'Hors-prod' if branch == 'hprod' else 'Production' }}</h2>
    </div>
    <div class="flex items-center gap-2">
        <span id="status-badge" class="badge badge-yellow">En cours</span>
        <span id="counter" class="text-xs text-gray-500">0 traité(s)</span>
    </div>
</div>

<!-- Terminal -->
<div class="card" style="background:#0d1117; border-color:#1e3a5f">
    <div class="p-2 border-b border-cyber-border flex items-center gap-2">
        <span class="w-3 h-3 rounded-full bg-cyber-red"></span>
        <span class="w-3 h-3 rounded-full bg-cyber-yellow"></span>
        <span class="w-3 h-3 rounded-full bg-cyber-green"></span>
        <span class="text-xs text-gray-500 ml-2">PatchCenter Terminal — Safe Patching</span>
    </div>
    <div id="terminal" class="p-4 font-mono text-xs overflow-y-auto" style="height:500px; line-height:1.6">
        <div class="text-gray-500">Connexion au stream...</div>
    </div>
</div>

<div class="flex gap-2 mt-4">
    <a href="/safe-patching/{{ c.id }}" class="btn-primary px-4 py-2 text-sm" id="btn-back" style="display:none">Voir les résultats</a>
</div>

<script>
var terminal = document.getElementById('terminal');
var counter = 0;

var source = new EventSource('/safe-patching/{{ c.id }}/stream');

source.onmessage = function(e) {
    var data = JSON.parse(e.data);
    if (data.level === 'done') {
        source.close();
        document.getElementById('status-badge').textContent = 'Terminé';
        document.getElementById('status-badge').className = 'badge badge-green';
        document.getElementById('btn-back').style.display = '';
        return;
    }

    var line = document.createElement('div');
    var color = {
        'header': 'color:#00d4ff; font-weight:bold',
        'server': 'color:#00d4ff; font-weight:bold; margin-top:4px',
        'step': 'color:#94a3b8',
        'ok': 'color:#00ff88',
        'error': 'color:#ff3366',
        'success': 'color:#00ff88; font-weight:bold',
        'info': 'color:#e2e8f0',
    }[data.level] || 'color:#94a3b8';

    if (data.msg === '') {
        line.innerHTML = '&nbsp;';
    } else {
        line.innerHTML = '<span style="color:#4a5568">[' + data.ts + ']</span> <span style="' + color + '">' + data.msg + '</span>';
    }

    terminal.appendChild(line);
    terminal.scrollTop = terminal.scrollHeight;

    if (data.level === 'success') counter++;
    document.getElementById('counter').textContent = counter + ' traité(s)';
};

source.onerror = function() {
    var line = document.createElement('div');
    line.innerHTML = '<span style="color:#ff3366">Connexion perdue. Rafraîchir la page.</span>';
    terminal.appendChild(line);
    source.close();
};
</script>
{% endblock %}