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

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

{% block stylesheets %}
{{ parent() }}
<style>
    .config-card {
        border: none;
        border-radius: 12px;
        box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.1);
    }

    .form-label {
        font-weight: 600;
        color: #5a5c69;
        margin-bottom: 0.5rem;
    }

    .form-control, .form-select {
        border-radius: 8px;
        border: 1px solid #d1d3e2;
        padding: 0.75rem;
    }

    .form-control:focus, .form-select:focus {
        border-color: #4e73df;
        box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.25);
    }

    .btn-save {
        background: linear-gradient(135deg, #0099cc 0%, #007399 100%);
        border: none;
        color: white;
        padding: 0.75rem 2rem;
        border-radius: 8px;
        font-weight: 600;
        transition: all 0.2s;
    }

    .btn-save:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 153, 204, 0.4);
    }

    .info-box {
        background: #e7f9fd;
        border-left: 4px solid #0099cc;
        padding: 1rem;
        border-radius: 8px;
        margin-bottom: 1.5rem;
    }

    .token-input {
        font-family: 'Courier New', monospace;
        font-size: 0.9rem;
    }

    .point-ids-textarea {
        font-family: 'Courier New', monospace;
        font-size: 0.85rem;
        min-height: 300px;
    }

    .help-text {
        font-size: 0.875rem;
        color: #858796;
        margin-top: 0.25rem;
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-0"><i class="fas fa-cog me-2"></i>Lilian Labs Konfiguration</h1>
            <p class="text-muted mb-0">Token, Points und Mapping</p>
        </div>
        <div class="d-flex gap-2">
            <a href="{{ path('admin_lilian_labs_index') }}" class="btn btn-outline-secondary">
                <i class="fas fa-arrow-left me-2"></i>Zur Übersicht
            </a>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-10 mx-auto">
            <!-- Info Box -->
            <div class="info-box">
                <h5><i class="fas fa-info-circle"></i> Token erneuern</h5>
                <p class="mb-2"><strong>So holen Sie ein neues Access Token:</strong></p>
                <ol class="mb-0">
                    <li>Auf <a href="https://app.lilianlabs.com" target="_blank">app.lilianlabs.com</a> einloggen (mit 2FA)</li>
                    <li>Browser-Konsole öffnen (F12 → Console)</li>
                    <li>Folgenden Code ausführen: <code>localStorage.getItem('accessToken')</code></li>
                    <li>Token kopieren und unten einfügen</li>
                </ol>
            </div>

            <!-- Config Form -->
            <div class="card config-card">
                <div class="card-header bg-white py-3">
                    <h5 class="m-0 font-weight-bold text-primary">
                        <i class="fas fa-cog"></i> API-Konfiguration
                    </h5>
                </div>
                <div class="card-body">
                    <form method="post" action="{{ path('admin_lilian_labs_config') }}">
                        <!-- Access Token -->
                        <div class="mb-4">
                            <label for="access_token" class="form-label">
                                <i class="fas fa-key"></i> Access Token
                            </label>
                            <input 
                                type="text" 
                                class="form-control token-input" 
                                id="access_token" 
                                name="access_token" 
                                value="{{ config.accessToken }}"
                                placeholder="Ihr Lilian Labs Access Token"
                                required
                            >
                            <div class="help-text">
                                {% if config.tokenExpiry %}
                                    <i class="fas fa-clock"></i> Läuft ab am: {{ config.tokenExpiry|date('d.m.Y H:i') }} 
                                    ({{ config.daysUntilExpiry }} Tage)
                                {% else %}
                                    Token-Ablaufdatum wird beim Speichern automatisch ermittelt
                                {% endif %}
                            </div>
                        </div>

                        <!-- Point IDs -->
                        <div class="mb-4">
                            <label for="point_ids" class="form-label">
                                <i class="fas fa-map-pin"></i> Point IDs (JSON)
                            </label>
                            <textarea 
                                class="form-control point-ids-textarea" 
                                id="point_ids" 
                                name="point_ids"
                                required
                            >{{ config.pointIds|json_encode(constant('JSON_PRETTY_PRINT') b-or constant('JSON_UNESCAPED_UNICODE'))|raw }}</textarea>
                            <div class="help-text">
                                <i class="fas fa-info-circle"></i> JSON-Format: <code>{"Name": "point_id", ...}</code>
                            </div>
                        </div>

                        <!-- InfluxDB Mappings -->
                        <div class="mb-4">
                            <label for="influx_mappings" class="form-label">
                                <i class="fas fa-exchange-alt"></i> InfluxDB Standort-Mapping (JSON)
                            </label>
                            <textarea 
                                class="form-control point-ids-textarea" 
                                id="influx_mappings" 
                                name="influx_mappings"
                                style="min-height: 200px;"
                            >{{ config.influxMappings|json_encode(constant('JSON_PRETTY_PRINT') b-or constant('JSON_UNESCAPED_UNICODE'))|raw }}</textarea>
                            <div class="help-text">
                                <i class="fas fa-info-circle"></i> Mappt InfluxDB-Measurement-Präfixe zu Lilian Labs Standorten
                                <br>
                                <strong>Format:</strong> <code>{"prefix": "Lilian Labs Standort", ...}</code>
                                <br>
                                <strong>Beispiel:</strong> <code>{"bayrol": "Blankenheim", "narwali2": "Köln Mengenicher Strasse", "mobi": "Mobiler Sensor"}</code>
                                <br>
                                <strong>Funktionsweise:</strong> Alle Measurements die mit "bayrol" beginnen (z.B. bayrol_chlor, bayrol_ph, bayrol_temp) werden automatisch zu "Blankenheim" gemappt!
                            </div>
                        </div>

                        <!-- Zeitbereich -->
                        <div class="mb-4">
                            <label for="sync_days_back" class="form-label">
                                <i class="fas fa-calendar-alt"></i> Synchronisations-Zeitbereich
                            </label>
                            <select class="form-select" id="sync_days_back" name="sync_days_back">
                                <option value="7" {{ config.syncDaysBack == 7 ? 'selected' : '' }}>Letzte 7 Tage</option>
                                <option value="14" {{ config.syncDaysBack == 14 ? 'selected' : '' }}>Letzte 14 Tage</option>
                                <option value="30" {{ config.syncDaysBack == 30 ? 'selected' : '' }}>Letzte 30 Tage</option>
                                <option value="60" {{ config.syncDaysBack == 60 ? 'selected' : '' }}>Letzte 60 Tage</option>
                                <option value="90" {{ config.syncDaysBack == 90 ? 'selected' : '' }}>Letzte 90 Tage</option>
                                <option value="180" {{ config.syncDaysBack == 180 ? 'selected' : '' }}>Letzte 180 Tage</option>
                                <option value="365" {{ config.syncDaysBack == 365 ? 'selected' : '' }}>Letzte 365 Tage</option>
                            </select>
                            <div class="help-text">
                                <i class="fas fa-info-circle"></i> Wie weit zurück sollen Messungen bei jeder Synchronisation abgerufen werden?
                            </div>
                        </div>

                        <!-- Duplikat-Schutz -->
                        <div class="mb-4">
                            <div class="form-check form-switch">
                                <input 
                                    class="form-check-input" 
                                    type="checkbox" 
                                    id="prevent_duplicates" 
                                    name="prevent_duplicates" 
                                    value="1"
                                    {{ config.preventDuplicates ? 'checked' : '' }}
                                >
                                <label class="form-check-label" for="prevent_duplicates">
                                    <strong>Duplikat-Schutz aktiviert</strong>
                                </label>
                            </div>
                            <div class="help-text">
                                Verhindert das doppelte Speichern bereits vorhandener Messungen (empfohlen)
                            </div>
                        </div>

                        <!-- Active Toggle -->
                        <div class="mb-4">
                            <div class="form-check form-switch">
                                <input 
                                    class="form-check-input" 
                                    type="checkbox" 
                                    id="active" 
                                    name="active" 
                                    value="1"
                                    {{ config.active ? 'checked' : '' }}
                                >
                                <label class="form-check-label" for="active">
                                    <strong>Integration aktiviert</strong>
                                </label>
                            </div>
                            <div class="help-text">
                                Wenn deaktiviert, werden keine automatischen Synchronisationen durchgeführt
                            </div>
                        </div>

                        <!-- Buttons -->
                        <div class="d-flex justify-content-between align-items-center">
                            <a href="{{ path('admin_lilian_labs_index') }}" class="btn btn-secondary">
                                <i class="fas fa-arrow-left"></i> Zurück
                            </a>
                            <button type="submit" class="btn btn-save">
                                <i class="fas fa-save"></i> Konfiguration speichern
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Current Config Info -->
            {% if config.id %}
            <div class="card config-card mt-4">
                <div class="card-header bg-white py-3">
                    <h5 class="m-0 font-weight-bold text-primary">
                        <i class="fas fa-info"></i> Aktuelle Konfiguration
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <p><strong>Erstellt am:</strong> {{ config.createdAt|date('d.m.Y H:i') }}</p>
                            <p><strong>Letzte Änderung:</strong> {{ config.updatedAt|date('d.m.Y H:i') }}</p>
                        </div>
                        <div class="col-md-6">
                            <p><strong>Letzte Synchronisation:</strong> {{ config.lastSync|date('d.m.Y H:i') }}</p>
                            <p><strong>Anzahl Points:</strong> {{ config.pointIds|length }}</p>
                            <p><strong>Zeitbereich:</strong> Letzte {{ config.syncDaysBack }} Tage</p>
                            <p><strong>Duplikat-Schutz:</strong> {{ config.preventDuplicates ? '✅ Aktiviert' : '❌ Deaktiviert' }}</p>
                            <p><strong>InfluxDB Mappings:</strong> {{ config.influxMappings ? config.influxMappings|length : 0 }} konfiguriert</p>
                        </div>
                    </div>
                    {% if config.lastError %}
                        <div class="alert alert-danger mt-3">
                            <strong>Letzter Fehler:</strong> {{ config.lastError }}
                        </div>
                    {% endif %}
                </div>
            </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}

{% block javascripts %}
{{ parent() }}
<script>
// JSON-Validierung beim Absenden
document.querySelector('form').addEventListener('submit', function(e) {
    const pointIdsInput = document.getElementById('point_ids');
    const influxMappingsInput = document.getElementById('influx_mappings');
    
    try {
        JSON.parse(pointIdsInput.value);
    } catch (error) {
        e.preventDefault();
        alert('Ungültiges JSON-Format für Point IDs!\n\n' + error.message);
        pointIdsInput.focus();
        return;
    }
    
    try {
        if (influxMappingsInput.value.trim()) {
            JSON.parse(influxMappingsInput.value);
        }
    } catch (error) {
        e.preventDefault();
        alert('Ungültiges JSON-Format für InfluxDB Mappings!\n\n' + error.message);
        influxMappingsInput.focus();
        return;
    }
});

// JSON formatieren für Point IDs
document.getElementById('point_ids').addEventListener('blur', function() {
    try {
        const parsed = JSON.parse(this.value);
        this.value = JSON.stringify(parsed, null, 2);
    } catch (error) {
        // Ignorieren wenn ungültiges JSON
    }
});

// JSON formatieren für InfluxDB Mappings
document.getElementById('influx_mappings').addEventListener('blur', function() {
    try {
        if (this.value.trim()) {
            const parsed = JSON.parse(this.value);
            this.value = JSON.stringify(parsed, null, 2);
        }
    } catch (error) {
        // Ignorieren wenn ungültiges JSON
    }
});
</script>
{% endblock %}