{% extends "base.html" %}
{% block title %}Supervision - Configuration{% endblock %}

{% block content %}
<h4 class="mb-3"><i class="bi bi-gear"></i> Configuration</h4>

<div class="row">
    <div class="col-lg-6 mb-4">
        <div class="card">
            <div class="card-header"><h6 class="mb-0"><i class="bi bi-sliders"></i> Seuils d'alerte (%)</h6></div>
            <div class="card-body">
                <form method="POST" action="/settings/thresholds">
                    <div class="mb-3">
                        <label for="cpu_percent" class="form-label">CPU (%)</label>
                        <input type="number" class="form-control" id="cpu_percent" name="cpu_percent"
                               value="{{ config.thresholds.cpu_percent }}" min="1" max="100" required>
                    </div>
                    <div class="mb-3">
                        <label for="ram_percent" class="form-label">RAM (%)</label>
                        <input type="number" class="form-control" id="ram_percent" name="ram_percent"
                               value="{{ config.thresholds.ram_percent }}" min="1" max="100" required>
                    </div>
                    <div class="mb-3">
                        <label for="disk_percent" class="form-label">Disque (%)</label>
                        <input type="number" class="form-control" id="disk_percent" name="disk_percent"
                               value="{{ config.thresholds.disk_percent }}" min="1" max="100" required>
                    </div>
                    <button type="submit" class="btn btn-primary"><i class="bi bi-check-lg"></i> Enregistrer</button>
                </form>
            </div>
        </div>
    </div>

    <div class="col-lg-6 mb-4">
        <div class="card">
            <div class="card-header"><h6 class="mb-0"><i class="bi bi-clock"></i> Fréquence et alertes</h6></div>
            <div class="card-body">
                <form method="POST" action="/settings/monitoring">
                    <div class="mb-3">
                        <label for="check_interval_minutes" class="form-label">Intervalle de vérification (minutes)</label>
                        <input type="number" class="form-control" id="check_interval_minutes"
                               name="check_interval_minutes" value="{{ config.check_interval_minutes }}" min="1" required>
                    </div>
                    <div class="mb-3">
                        <label for="alert_cooldown_minutes" class="form-label">Cooldown entre alertes (minutes)</label>
                        <input type="number" class="form-control" id="alert_cooldown_minutes"
                               name="alert_cooldown_minutes" value="{{ config.alert_cooldown_minutes }}" min="1" required>
                        <div class="form-text">Délai minimum entre deux alertes du même type.</div>
                    </div>
                    <button type="submit" class="btn btn-primary"><i class="bi bi-check-lg"></i> Enregistrer</button>
                </form>
            </div>
        </div>

        <div class="card mt-4">
            <div class="card-header"><h6 class="mb-0"><i class="bi bi-diagram-3"></i> Port de l'application</h6></div>
            <div class="card-body">
                <form method="POST" action="/settings/port">
                    <div class="mb-3">
                        <label for="port" class="form-label">Port (redémarrage requis)</label>
                        <input type="number" class="form-control" id="port" name="port"
                               value="{{ config.port }}" min="1024" max="65535" required>
                    </div>
                    <button type="submit" class="btn btn-primary"><i class="bi bi-check-lg"></i> Enregistrer</button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- SMTP -->
<div class="row">
    <div class="col-12 mb-4">
        <div class="card">
            <div class="card-header"><h6 class="mb-0"><i class="bi bi-envelope"></i> Configuration SMTP</h6></div>
            <div class="card-body">
                <form method="POST" action="/settings/smtp">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="smtp_server" class="form-label">Serveur SMTP</label>
                            <input type="text" class="form-control" id="smtp_server" name="smtp_server"
                                   value="{{ smtp.server }}" placeholder="smtp.example.com">
                        </div>
                        <div class="col-md-3 mb-3">
                            <label for="smtp_port" class="form-label">Port</label>
                            <input type="number" class="form-control" id="smtp_port" name="smtp_port"
                                   value="{{ smtp.port }}">
                        </div>
                        <div class="col-md-3 mb-3 d-flex align-items-end">
                            <div class="form-check">
                                <input type="checkbox" class="form-check-input" id="smtp_tls" name="smtp_tls"
                                       {% if smtp.use_tls %}checked{% endif %}>
                                <label class="form-check-label" for="smtp_tls">STARTTLS</label>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="smtp_username" class="form-label">Nom d'utilisateur</label>
                            <input type="text" class="form-control" id="smtp_username" name="smtp_username"
                                   value="{{ smtp.username }}" autocomplete="off">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="smtp_password" class="form-label">Mot de passe</label>
                            <input type="password" class="form-control" id="smtp_password" name="smtp_password"
                                   placeholder="{% if smtp_password_masked %}{{ smtp_password_masked }}{% else %}Non défini{% endif %}"
                                   autocomplete="new-password">
                            <div class="form-text">Laissez vide pour conserver le mot de passe actuel.</div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="smtp_from" class="form-label">Email expéditeur</label>
                            <input type="email" class="form-control" id="smtp_from" name="smtp_from"
                                   value="{{ smtp.from_email }}" placeholder="supervision@example.com">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="smtp_to" class="form-label">Destinataires (séparés par virgules)</label>
                            <input type="text" class="form-control" id="smtp_to" name="smtp_to"
                                   value="{{ smtp.to_emails | join(sep=', ') }}"
                                   placeholder="admin@example.com, tech@example.com">
                        </div>
                    </div>

                    <button type="submit" class="btn btn-primary"><i class="bi bi-check-lg"></i> Enregistrer</button>
                </form>
                <hr>
                <form method="POST" action="/settings/smtp/test" class="d-inline">
                    <button type="submit" class="btn btn-outline-info">
                        <i class="bi bi-send"></i> Envoyer un email de test
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Processus surveillés -->
<div class="row">
    <div class="col-12 mb-4">
        <div class="card">
            <div class="card-header"><h6 class="mb-0"><i class="bi bi-list-task"></i> Processus surveillés</h6></div>
            <div class="card-body">
                <form method="POST" action="/settings/processes" id="process-form">
                    <table class="table" id="proc-table">
                        <thead>
                            <tr>
                                <th>Nom</th><th>Pattern</th><th>Seuil mémoire (Mo)</th>
                                <th>Actif</th><th>Alerte si arrêté</th><th></th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for proc in config.processes %}
                            <tr>
                                <td><input type="text" class="form-control form-control-sm" name="proc_name[]" value="{{ proc.name }}" required></td>
                                <td><input type="text" class="form-control form-control-sm" name="proc_pattern[]" value="{{ proc.pattern }}" required></td>
                                <td>
                                    <input type="number" class="form-control form-control-sm" name="proc_mem_threshold[]" value="{{ proc.memory_threshold_mb }}" min="0">
                                    <div class="form-text">0 = pas de seuil</div>
                                </td>
                                <td>
                                    <div class="form-check">
                                        <input type="checkbox" class="form-check-input" name="proc_enabled[]" value="{{ loop.index0 }}"
                                               {% if proc.enabled %}checked{% endif %}>
                                    </div>
                                </td>
                                <td>
                                    <div class="form-check">
                                        <input type="checkbox" class="form-check-input" name="proc_alert_down[]" value="{{ loop.index0 }}"
                                               {% if proc.alert_on_down %}checked{% endif %}>
                                    </div>
                                </td>
                                <td>
                                    <button type="button" class="btn btn-sm btn-outline-danger btn-remove-proc">
                                        <i class="bi bi-trash"></i>
                                    </button>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                    <div class="d-flex gap-2">
                        <button type="button" class="btn btn-outline-success" id="btn-add-proc">
                            <i class="bi bi-plus-lg"></i> Ajouter un processus
                        </button>
                        <button type="submit" class="btn btn-primary"><i class="bi bi-check-lg"></i> Enregistrer</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Mot de passe -->
<div class="row" id="password">
    <div class="col-lg-6 mb-4">
        <div class="card {% if default_pw %}border-danger{% endif %}">
            <div class="card-header"><h6 class="mb-0"><i class="bi bi-shield-lock"></i> Mot de passe administrateur</h6></div>
            <div class="card-body">
                <form method="POST" action="/settings/password">
                    <div class="mb-3">
                        <label for="current_password" class="form-label">Mot de passe actuel</label>
                        <input type="password" class="form-control" id="current_password" name="current_password" required autocomplete="current-password">
                    </div>
                    <div class="mb-3">
                        <label for="new_password" class="form-label">Nouveau mot de passe</label>
                        <input type="password" class="form-control" id="new_password" name="new_password" required minlength="8" autocomplete="new-password">
                        <div class="form-text">Minimum 8 caractères.</div>
                    </div>
                    <div class="mb-3">
                        <label for="confirm_password" class="form-label">Confirmer le mot de passe</label>
                        <input type="password" class="form-control" id="confirm_password" name="confirm_password" required autocomplete="new-password">
                    </div>
                    <button type="submit" class="btn btn-warning"><i class="bi bi-check-lg"></i> Changer le mot de passe</button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Amadea + seuils utilisateurs -->
<div class="row">
    <div class="col-lg-6 mb-4">
        <div class="card">
            <div class="card-header"><h6 class="mb-0"><i class="bi bi-folder2-open"></i> Chemin des logs Amadea</h6></div>
            <div class="card-body">
                <form method="POST" action="/settings/amadea-log-path">
                    <div class="mb-3">
                        <label for="amadea_log_path" class="form-label">Dossier des logs</label>
                        <input type="text" class="form-control" id="amadea_log_path" name="amadea_log_path"
                               value="{{ config.amadea_log_path }}"
                               placeholder="C:\ProgramData\ISoft\Amadea Web 8 x64\data\logs">
                        <div class="form-text">Dossier contenant les fichiers isoft_*.txt et awevents_*.txt.</div>
                    </div>
                    <button type="submit" class="btn btn-primary"><i class="bi bi-check-lg"></i> Enregistrer</button>
                </form>
            </div>
        </div>
    </div>
    <div class="col-lg-6 mb-4">
        <div class="card">
            <div class="card-header"><h6 class="mb-0"><i class="bi bi-people"></i> Seuils statut utilisateurs</h6></div>
            <div class="card-body">
                <form method="POST" action="/settings/user-thresholds">
                    <div class="mb-3">
                        <label for="active_minutes" class="form-label">Actif si dernière action &lt; (minutes)</label>
                        <input type="number" class="form-control" id="active_minutes" name="active_minutes"
                               value="{{ config.user_status_thresholds.active_minutes }}" min="1" required>
                    </div>
                    <div class="mb-3">
                        <label for="inactive_minutes" class="form-label">Inactif si dernière action &lt; (minutes)</label>
                        <input type="number" class="form-control" id="inactive_minutes" name="inactive_minutes"
                               value="{{ config.user_status_thresholds.inactive_minutes }}" min="1" required>
                        <div class="form-text">Au-delà de ce seuil sans déconnexion explicite : Absent (orange).</div>
                    </div>
                    <div class="mb-3">
                        <label for="pause_threshold_minutes" class="form-label">Seuil de pause pour temps actif (minutes)</label>
                        <input type="number" class="form-control" id="pause_threshold_minutes" name="pause_threshold_minutes"
                               value="{{ config.user_status_thresholds.pause_threshold_minutes }}" min="1" required>
                        <div class="form-text">Un écart &gt; ce seuil entre deux actions est compté comme une pause (non actif).</div>
                    </div>
                    <button type="submit" class="btn btn-primary"><i class="bi bi-check-lg"></i> Enregistrer</button>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
// Ajouter un processus via DOM (pas innerHTML pour la sécurité)
document.getElementById('btn-add-proc').addEventListener('click', function() {
    var tbody = document.querySelector('#proc-table tbody');
    var idx = tbody.children.length;
    var row = tbody.insertRow();

    function makeInput(type, name, value, extra) {
        var td = row.insertCell();
        var input = document.createElement('input');
        input.type = type;
        input.className = 'form-control form-control-sm';
        input.name = name;
        if (value !== undefined) input.value = value;
        if (extra) Object.assign(input, extra);
        td.appendChild(input);
        return td;
    }
    function makeCheckbox(name, value, checked) {
        var td = row.insertCell();
        var div = document.createElement('div');
        div.className = 'form-check';
        var cb = document.createElement('input');
        cb.type = 'checkbox';
        cb.className = 'form-check-input';
        cb.name = name;
        cb.value = String(value);
        cb.checked = checked;
        div.appendChild(cb);
        td.appendChild(div);
    }

    makeInput('text', 'proc_name[]', '', { required: true });
    makeInput('text', 'proc_pattern[]', '', { required: true });
    var tdMem = makeInput('number', 'proc_mem_threshold[]', '0', { min: 0 });
    var hint = document.createElement('div');
    hint.className = 'form-text';
    hint.textContent = '0 = pas de seuil';
    tdMem.appendChild(hint);
    makeCheckbox('proc_enabled[]', idx, true);
    makeCheckbox('proc_alert_down[]', idx, true);

    var tdBtn = row.insertCell();
    var btn = document.createElement('button');
    btn.type = 'button';
    btn.className = 'btn btn-sm btn-outline-danger btn-remove-proc';
    btn.appendChild(document.createElement('i')).className = 'bi bi-trash';
    tdBtn.appendChild(btn);
});

document.addEventListener('click', function(e) {
    if (e.target.closest('.btn-remove-proc')) {
        e.target.closest('tr').remove();
    }
});
</script>
{% endblock %}