{% extends 'swimmonitor/base.html.twig' %}

{% block title %}Lilian Labs · Konfiguration{% endblock %}

{% block breadcrumb %}
    <li>Wasser</li>
    <li><a href="{{ path('admin_lilian_labs_index') }}">Lilian Labs</a></li>
    <li>Konfiguration</li>
{% endblock %}

{% set json_flags = constant('JSON_PRETTY_PRINT') b-or constant('JSON_UNESCAPED_UNICODE') b-or constant('JSON_UNESCAPED_SLASHES') %}

{% block page_head %}
    <div>
        <h1>Konfiguration</h1>
        <p class="sm-lead">Zugang zu Lilian Labs, Messpunkte und Zuordnung zu den InfluxDB-Standorten.</p>
    </div>
    <div class="sm-page-actions">
        <a href="{{ path('admin_lilian_labs_index') }}" class="btn btn-secondary">Zur Übersicht</a>
    </div>
{% endblock %}

{% block content %}
    <div class="sm-grid-aside">
        <form method="post" action="{{ path('admin_lilian_labs_config') }}" class="sm-panel" data-sm-lilian-config>
            <div class="sm-panel-body sm-form">
                <fieldset class="sm-fieldset">
                    <legend>Zugang</legend>
                    <label for="access_token" class="form-label">Access Token</label>
                    <div class="input-group">
                        <input type="password" class="form-control sm-mono" id="access_token" name="access_token" value="{{ config.accessToken }}"
                               placeholder="Access Token von Lilian Labs" autocomplete="off" spellcheck="false" required aria-describedby="token-help">
                        <button type="button" class="btn btn-secondary" data-sm-reveal="#access_token" aria-pressed="false">Anzeigen</button>
                    </div>
                    <div class="form-text" id="token-help">
                        {% if config.tokenExpiry %}
                            {% if config.daysUntilExpiry > 0 %}
                                Läuft ab am {{ config.tokenExpiry|date('d.m.Y H:i') }} (noch {{ config.daysUntilExpiry }} Tage).
                            {% else %}
                                <span class="is-alarm">Abgelaufen am {{ config.tokenExpiry|date('d.m.Y H:i') }}.</span> Bitte ein neues Token eintragen.
                            {% endif %}
                        {% else %}
                            Das Ablaufdatum wird beim Speichern automatisch ermittelt.
                        {% endif %}
                    </div>
                </fieldset>

                <fieldset class="sm-fieldset">
                    <legend>Messpunkte</legend>
                    <label for="point_ids" class="form-label">Point-IDs (JSON)</label>
                    <textarea class="form-control sm-code-input" id="point_ids" name="point_ids" rows="12" required spellcheck="false" data-ll-json
                              aria-describedby="points-help">{{ config.pointIds|json_encode(json_flags)|raw }}</textarea>
                    <div class="form-text" id="points-help">Format: <code>{"Name": "point_id", …}</code></div>
                </fieldset>

                <fieldset class="sm-fieldset">
                    <legend>Zuordnung InfluxDB</legend>
                    <label for="influx_mappings" class="form-label">Standort-Mapping (JSON)</label>
                    <textarea class="form-control sm-code-input" id="influx_mappings" name="influx_mappings" rows="9" spellcheck="false" data-ll-json
                              aria-describedby="influx-help">{{ config.influxMappings|json_encode(json_flags)|raw }}</textarea>
                    <div class="form-text" id="influx-help">
                        Ordnet Präfixe der InfluxDB-Measurements einem Lilian-Labs-Standort zu. Format: <code>{"präfix": "Standort", …}</code>.
                        Beispiel: <code>{"bayrol": "Blankenheim", "narwali2": "Köln Mengenicher Strasse"}</code> – alles, was mit <code>bayrol</code> beginnt
                        (<code>bayrol_chlor</code>, <code>bayrol_ph</code> …), gehört dann zu Blankenheim.
                    </div>
                </fieldset>

                <fieldset class="sm-fieldset">
                    <legend>Synchronisation</legend>
                    <label for="sync_days_back" class="form-label">Zeitbereich</label>
                    <select class="form-select sm-input-narrow" id="sync_days_back" name="sync_days_back" aria-describedby="days-help">
                        {% for days in [7, 14, 30, 60, 90, 180, 365] %}
                            <option value="{{ days }}" {{ config.syncDaysBack == days ? 'selected' }}>Letzte {{ days }} Tage</option>
                        {% endfor %}
                    </select>
                    <div class="form-text" id="days-help">So weit zurück werden Messungen bei jeder Synchronisation abgerufen.</div>

                    <div class="form-check form-switch mt-3">
                        <input class="form-check-input" type="checkbox" role="switch" id="prevent_duplicates" name="prevent_duplicates" value="1" {{ config.preventDuplicates ? 'checked' }}>
                        <label class="form-check-label" for="prevent_duplicates">Duplikat-Schutz</label>
                    </div>
                    <div class="form-text">Bereits vorhandene Messungen werden nicht erneut gespeichert (empfohlen).</div>

                    <div class="form-check form-switch mt-3">
                        <input class="form-check-input" type="checkbox" role="switch" id="active" name="active" value="1" {{ config.active ? 'checked' }}>
                        <label class="form-check-label" for="active">Integration aktiv</label>
                    </div>
                    <div class="form-text">Ausgeschaltet laufen keine automatischen Synchronisationen.</div>
                </fieldset>
            </div>
            <div class="sm-panel-foot">
                <a href="{{ path('admin_lilian_labs_index') }}" class="btn btn-secondary">Abbrechen</a>
                <button type="submit" class="btn btn-primary">Konfiguration speichern</button>
            </div>
        </form>

        <div class="sm-stack">
            <section class="sm-panel">
                <div class="sm-panel-head"><h2>Token erneuern</h2></div>
                <div class="sm-panel-body sm-prose">
                    <ol>
                        <li>Auf <a href="https://app.lilianlabs.com" target="_blank" rel="noopener noreferrer">app.lilianlabs.com</a> mit 2FA anmelden.</li>
                        <li>Entwicklerwerkzeuge öffnen (F12) und zur Konsole wechseln.</li>
                        <li><code>localStorage.getItem('accessToken')</code> ausführen.</li>
                        <li>Den Wert kopieren und links einfügen.</li>
                    </ol>
                </div>
            </section>

            {% if config.id %}
                <section class="sm-panel">
                    <div class="sm-panel-head"><h2>Aktueller Stand</h2></div>
                    <dl class="sm-kv">
                        <dt>Erstellt</dt><dd>{{ config.createdAt ? config.createdAt|date('d.m.Y H:i') : '–' }}</dd>
                        <dt>Geändert</dt><dd>{{ config.updatedAt ? config.updatedAt|date('d.m.Y H:i') : '–' }}</dd>
                        <dt>Letzte Synchronisation</dt><dd>{{ config.lastSync ? config.lastSync|date('d.m.Y H:i') : 'nie' }}</dd>
                        <dt>Messpunkte</dt><dd>{{ config.pointIds|length }}</dd>
                        <dt>InfluxDB-Zuordnungen</dt><dd>{{ config.influxMappings ? config.influxMappings|length : 0 }}</dd>
                        <dt>Zeitbereich</dt><dd>{{ config.syncDaysBack }} Tage</dd>
                        <dt>Duplikat-Schutz</dt><dd>{{ config.preventDuplicates ? 'an' : 'aus' }}</dd>
                    </dl>
                    {% if config.lastError %}
                        <div class="sm-panel-body"><div class="alert alert-danger mb-0"><strong>Letzter Fehler:</strong> {{ config.lastError }}</div></div>
                    {% endif %}
                </section>
            {% endif %}
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    <script src="{{ asset('js/pages/lilian-labs.js') }}?v={{ sm_v }}" defer></script>
{% endblock %}