{% extends "base.html" %}

{% block title %}Настройки — InfoUser Monitor{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2>Настройки</h2>
    <a href="/" class="btn btn-outline-secondary btn-sm">← Назад</a>
</div>

<div class="card shadow-sm">
    <div class="card-body">
        <form id="settings-form">
            <div class="mb-3">
                <label class="form-label">AGENT_TOKEN</label>
                <input type="text" class="form-control" id="AGENT_TOKEN" value="{{ settings.AGENT_TOKEN or '' }}" required>
            </div>
            <div class="mb-3">
                <label class="form-label">OFFLINE_THRESHOLD_MINUTES</label>
                <input type="number" class="form-control" id="OFFLINE_THRESHOLD_MINUTES" value="{{ settings.OFFLINE_THRESHOLD_MINUTES or '' }}">
            </div>
            <div class="mb-3">
                <label class="form-label">NOTIFICATION_WEBHOOK_URL</label>
                <input type="text" class="form-control" id="NOTIFICATION_WEBHOOK_URL" value="{{ settings.NOTIFICATION_WEBHOOK_URL or '' }}">
            </div>
            <div class="mb-3">
                <label class="form-label">NOTIFICATION_TELEGRAM_BOT_TOKEN</label>
                <input type="text" class="form-control" id="NOTIFICATION_TELEGRAM_BOT_TOKEN" value="{{ settings.NOTIFICATION_TELEGRAM_BOT_TOKEN or '' }}">
            </div>
            <div class="mb-3">
                <label class="form-label">NOTIFICATION_TELEGRAM_CHAT_ID</label>
                <input type="text" class="form-control" id="NOTIFICATION_TELEGRAM_CHAT_ID" value="{{ settings.NOTIFICATION_TELEGRAM_CHAT_ID or '' }}">
            </div>
            <div class="mb-3">
                <label class="form-label">Часовой пояс</label>
                <select class="form-select" id="TIMEZONE">
                    {% for tz in timezones %}
                    <option value="{{ tz }}" {% if settings.TIMEZONE == tz %}selected{% endif %}>{{ tz }}</option>
                    {% endfor %}
                </select>
                <div class="form-text">UTC хранится как есть, в веб-интерфейсе время отображается в выбранном поясе.</div>
            </div>
            <button type="submit" class="btn btn-primary">Сохранить</button>
        </form>
        <div id="settings-error" class="alert alert-danger mt-3 d-none"></div>
        <div id="settings-success" class="alert alert-success mt-3 d-none">Настройки сохранены</div>
    </div>
</div>

<script>
document.getElementById('settings-form').addEventListener('submit', async (e) => {
    e.preventDefault();
    const err = document.getElementById('settings-error');
    const ok = document.getElementById('settings-success');
    err.classList.add('d-none');
    ok.classList.add('d-none');
    const body = {
        AGENT_TOKEN: document.getElementById('AGENT_TOKEN').value,
        OFFLINE_THRESHOLD_MINUTES: parseInt(document.getElementById('OFFLINE_THRESHOLD_MINUTES').value),
        NOTIFICATION_WEBHOOK_URL: document.getElementById('NOTIFICATION_WEBHOOK_URL').value,
        NOTIFICATION_TELEGRAM_BOT_TOKEN: document.getElementById('NOTIFICATION_TELEGRAM_BOT_TOKEN').value,
        NOTIFICATION_TELEGRAM_CHAT_ID: document.getElementById('NOTIFICATION_TELEGRAM_CHAT_ID').value,
        TIMEZONE: document.getElementById('TIMEZONE').value,
    };
    const res = await fetch('/api/settings', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        credentials: 'include',
        body: JSON.stringify(body),
    });
    if (res.ok) {
        ok.classList.remove('d-none');
    } else {
        const data = await res.json();
        err.textContent = data.detail || 'Ошибка';
        err.classList.remove('d-none');
    }
});
</script>
{% endblock %}