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

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

<div class="row">
    <div class="col-lg-6 mb-4">
        <!-- Seuils d'alerte -->
        <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">
        <!-- Parametres de monitoring -->
        <div class="card">
            <div class="card-header"><h6 class="mb-0"><i class="bi bi-clock"></i> Frequence 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 verification (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">Delai minimum entre deux alertes du meme type.</div>
                    </div>
                    <button type="submit" class="btn btn-primary">
                        <i class="bi bi-check-lg"></i> Enregistrer
                    </button>
                </form>
            </div>
        </div>

        <!-- Port -->
        <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 (redemarrage 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>

<!-- Configuration 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 defini{% 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 expediteur</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 (separes par des 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>
                    <div class="d-flex gap-2">
                        <button type="submit" class="btn btn-primary">
                            <i class="bi bi-check-lg"></i> Enregistrer
                        </button>
                    </div>
                </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 surveilles -->
<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 surveilles</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 (recherche)</th>
                                <th>Seuil memoire (Mo)</th>
                                <th>Actif</th>
                                <th>Alerte si arrete</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>

<!-- Changement de 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 caracteres.</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>

{% endblock content %}

{% block scripts %}
<script>
// Ajouter un processus
document.getElementById('btn-add-proc').addEventListener('click', function() {
    const tbody = document.querySelector('#proc-table tbody');
    const idx = tbody.children.length;
    const row = document.createElement('tr');
    row.innerHTML = `
        <td><input type="text" class="form-control form-control-sm" name="proc_name[]" required></td>
        <td><input type="text" class="form-control form-control-sm" name="proc_pattern[]" required></td>
        <td><input type="number" class="form-control form-control-sm" name="proc_mem_threshold[]" value="0" 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="${idx}" checked></div></td>
        <td><div class="form-check"><input type="checkbox" class="form-check-input" name="proc_alert_down[]" value="${idx}" checked></div></td>
        <td><button type="button" class="btn btn-sm btn-outline-danger btn-remove-proc"><i class="bi bi-trash"></i></button></td>
    `;
    tbody.appendChild(row);
});

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