{% 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>Anmeldung</legend>
                    <label for="login_email" class="form-label">E-Mail</label>
                    <input type="email" class="form-control" id="login_email" name="login_email" value="{{ config.loginEmail }}" autocomplete="username" spellcheck="false" aria-describedby="login-help">
                    <label for="login_password" class="form-label mt-3">Passwort</label>
                    <input type="password" class="form-control" id="login_password" name="login_password" value="" autocomplete="new-password" aria-describedby="login-help" placeholder="{{ config.hasStoredPassword ? 'gespeichert, nur zum Ändern ausfüllen' : '' }}">
                    <label for="mfa_code" class="form-label mt-3">Einmalcode</label>
                    <input type="text" class="form-control sm-input-narrow" id="mfa_code" name="mfa_code" value="" inputmode="numeric" autocomplete="one-time-code" spellcheck="false" aria-describedby="login-help">
                    <div class="form-text" id="login-help">
                        E-Mail und Passwort bleiben auf dem Server, das Passwort verschlüsselt. Der Einmalcode kommt per Mail von Lilian, wird nicht gespeichert und nur beim Speichern mit Code verwendet.
                        {% if config.hasStoredPassword %}Passwort ist hinterlegt.{% endif %}
                    </div>
                </fieldset>

                <fieldset class="sm-fieldset">
                    <legend>Token</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="wird nach der Anmeldung gesetzt" autocomplete="off" spellcheck="false" 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>Zuordnung Container</legend>
                    <label for="location_containers" class="form-label">Standort → Container-ID (JSON)</label>
                    <textarea class="form-control sm-code-input" id="location_containers" name="location_containers" rows="6" spellcheck="false" data-ll-json
                              aria-describedby="containers-help">{{ config.locationContainers|json_encode(json_flags)|raw }}</textarea>
                    <div class="form-text" id="containers-help">
                        Welcher Container stand an welchem Lilian-Labs-Standort. Format: <code>{"Kall": 2, …}</code>.
                        Container: {% for container in containers %}<code>{{ container.id }}</code> = {{ container.name }}{{ not loop.last ? ', ' }}{% endfor %}.
                        Beim Speichern werden alle vorhandenen Messungen neu zugeordnet.
                    </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" data-ll-request data-url-code="{{ path('admin_lilian_labs_request_code') }}">
                <div class="sm-panel-head"><h2>Token erneuern</h2></div>
                <div class="sm-panel-body sm-stack">
                    <ol class="sm-prose mb-0">
                        <li>E-Mail und Passwort links speichern.</li>
                        <li>Code anfordern. Lilian schickt ihn an diese E-Mail.</li>
                        <li>Code links eintragen und noch einmal speichern. Das Token gilt danach etwa 30 Tage.</li>
                    </ol>
                    <button type="button" class="btn btn-secondary" data-ll-request-code {{ config.hasStoredPassword ? '' : 'disabled' }}>Code anfordern</button>
                    <div id="codeStatus" class="alert mb-0" role="status" hidden></div>
                </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 %}