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

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

{% block stylesheets %}
{{ parent() }}
<style>
    .stats-card {
        border: none;
        border-radius: 12px;
        box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.1);
        transition: transform 0.2s, box-shadow 0.2s;
        overflow: hidden;
    }
    
    .stats-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 0.5rem 2rem 0 rgba(58, 59, 69, 0.2);
    }
    
    .stats-icon {
        width: 60px;
        height: 60px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.75rem;
        color: #fff;
        margin-bottom: 1rem;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
    
    .stats-value {
        font-size: 2rem;
        font-weight: 700;
        color: #5a5c69;
        margin: 0;
    }
    
    .stats-label {
        color: #858796;
        font-size: 0.875rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        font-weight: 600;
        margin-bottom: 0.5rem;
    }

    .token-status {
        padding: 0.75rem 1.25rem;
        border-radius: 8px;
        margin-bottom: 1rem;
    }

    .token-status.valid {
        background: #d4edda;
        border: 1px solid #c3e6cb;
        color: #155724;
    }

    .token-status.warning {
        background: #fff3cd;
        border: 1px solid #ffeaa7;
        color: #856404;
    }

    .token-status.expired {
        background: #f8d7da;
        border: 1px solid #f5c6cb;
        color: #721c24;
    }

    .action-btn {
        border-radius: 8px;
        padding: 0.75rem 1.5rem;
        font-weight: 600;
        transition: all 0.2s;
    }

    .location-badge {
        display: inline-block;
        padding: 0.5rem 1rem;
        background: linear-gradient(135deg, #0099cc 0%, #007399 100%);
        color: white;
        border-radius: 8px;
        margin: 0.25rem;
        font-weight: 500;
    }
</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-tint me-2"></i>Lilian Labs</h1>
            <p class="text-muted mb-0">Wassermessungen & Synchronisation</p>
        </div>
        <div class="d-flex gap-2">
            <a href="{{ path('admin_lilian_labs_config') }}" class="btn btn-warning">
                <i class="fas fa-cog me-2"></i>Konfiguration
            </a>
            <a href="{{ path('admin_lilian_labs_measurements') }}" class="btn btn-success">
                <i class="fas fa-table me-2"></i>Messungen
            </a>
        </div>
    </div>
    <!-- Token Status -->
    {% if config %}
        {% if config.tokenExpired %}
            <div class="token-status expired">
                <i class="fas fa-exclamation-circle"></i>
                <strong>Token abgelaufen!</strong> Bitte erneuern Sie das Access Token.
                <a href="{{ path('admin_lilian_labs_config') }}" class="btn btn-sm btn-danger float-right">Token erneuern</a>
            </div>
        {% elseif config.tokenExpiringSoon %}
            <div class="token-status warning">
                <i class="fas fa-exclamation-triangle"></i>
                <strong>Token läuft bald ab!</strong> Noch {{ stats.days_until_expiry }} Tage gültig.
                <a href="{{ path('admin_lilian_labs_config') }}" class="btn btn-sm btn-warning float-right">Token erneuern</a>
            </div>
        {% else %}
            <div class="token-status valid">
                <i class="fas fa-check-circle"></i>
                <strong>Token aktiv</strong> - Noch {{ stats.days_until_expiry }} Tage gültig.
            </div>
        {% endif %}
    {% else %}
        <div class="alert alert-info">
            <i class="fas fa-info-circle"></i>
            Noch keine Konfiguration vorhanden. <a href="{{ path('admin_lilian_labs_config') }}">Jetzt einrichten</a>
        </div>
    {% endif %}

    <!-- Statistik Cards -->
    <div class="row mb-4">
            <div class="col-xl-3 col-md-6 mb-4">
                <div class="card stats-card">
                    <div class="card-body">
                        <div class="stats-icon" style="background: linear-gradient(135deg, #0099cc, #007399);">
                            <i class="fas fa-database"></i>
                        </div>
                        <div class="stats-label">Gesamt Messungen</div>
                        <h2 class="stats-value">{{ stats.total_measurements|number_format(0, ',', '.') }}</h2>
                    </div>
                </div>
            </div>

            <div class="col-xl-3 col-md-6 mb-4">
                <div class="card stats-card">
                    <div class="card-body">
                        <div class="stats-icon" style="background: linear-gradient(135deg, #28a745, #20c997);">
                            <i class="fas fa-map-marker-alt"></i>
                        </div>
                        <div class="stats-label">Standorte</div>
                        <h2 class="stats-value">{{ stats.locations|length }}</h2>
                    </div>
                </div>
            </div>

            <div class="col-xl-3 col-md-6 mb-4">
                <div class="card stats-card">
                    <div class="card-body">
                        <div class="stats-icon" style="background: linear-gradient(135deg, #17a2b8, #138496);">
                            <i class="fas fa-sync"></i>
                        </div>
                        <div class="stats-label">Letzte Synchronisation</div>
                        <h2 class="stats-value" style="font-size: 1.2rem;">
                            {% if config and config.lastSync %}
                                {{ config.lastSync|date('d.m.Y H:i') }}
                            {% else %}
                                Nie
                            {% endif %}
                        </h2>
                    </div>
                </div>
            </div>

            <div class="col-xl-3 col-md-6 mb-4">
                <div class="card stats-card">
                    <div class="card-body">
                        <div class="stats-icon" style="background: linear-gradient(135deg, #ffc107, #ff9800);">
                            <i class="fas fa-clock"></i>
                        </div>
                        <div class="stats-label">Token Status</div>
                        <h2 class="stats-value" style="font-size: 1.2rem;">
                            {% if config %}
                                {% if stats.days_until_expiry > 7 %}
                                    <span class="text-success">Aktiv</span>
                                {% elseif stats.days_until_expiry > 0 %}
                                    <span class="text-warning">Läuft ab</span>
                                {% else %}
                                    <span class="text-danger">Abgelaufen</span>
                                {% endif %}
                            {% else %}
                                <span class="text-muted">Nicht konfiguriert</span>
                            {% endif %}
                        </h2>
                    </div>
                </div>
            </div>
    </div>

    <!-- Aktionen -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card stats-card">
                <div class="card-header bg-white py-3">
                    <h5 class="m-0 font-weight-bold text-primary">
                        <i class="fas fa-tasks"></i> Aktionen
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-3 mb-3">
                            <button class="btn btn-primary btn-block action-btn" onclick="syncData()" title="{% if config %}Synchronisiert Daten der letzten {{ config.syncDaysBack }} Tage{% endif %}">
                                <i class="fas fa-sync"></i> Daten synchronisieren
                            </button>
                            {% if config %}
                                <small class="text-muted d-block text-center mt-1">
                                    Letzte {{ config.syncDaysBack }} Tage
                                </small>
                            {% endif %}
                        </div>
                        <div class="col-md-3 mb-3">
                            <button class="btn btn-info btn-block action-btn" onclick="checkToken()">
                                <i class="fas fa-check-circle"></i> Token prüfen
                            </button>
                        </div>
                        <div class="col-md-3 mb-3">
                            <a href="{{ path('admin_lilian_labs_config') }}" class="btn btn-warning btn-block action-btn">
                                <i class="fas fa-cog"></i> Konfiguration
                            </a>
                        </div>
                        <div class="col-md-3 mb-3">
                            <a href="{{ path('admin_lilian_labs_measurements') }}" class="btn btn-success btn-block action-btn">
                                <i class="fas fa-table"></i> Messungen anzeigen
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Standorte -->
    {% if stats.locations|length > 0 %}
    <div class="row">
        <div class="col-12">
            <div class="card stats-card">
                <div class="card-header bg-white py-3">
                    <h5 class="m-0 font-weight-bold text-primary">
                        <i class="fas fa-map-marked-alt"></i> Verfügbare Standorte
                    </h5>
                </div>
                <div class="card-body">
                    {% for location in stats.locations %}
                        <span class="location-badge">{{ location }}</span>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
    {% endif %}

    <!-- Sync Status -->
    <div id="syncStatus" class="mt-3" style="display: none;"></div>
</div>
{% endblock %}

{% block javascripts %}
{{ parent() }}
<script>
function syncData() {
    const btn = event.target.closest('button');
    const originalHtml = btn.innerHTML;
    btn.disabled = true;
    btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Synchronisiere...';

    fetch('{{ path('admin_lilian_labs_sync') }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: 'days=30'
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showAlert('success', data.message);
            setTimeout(() => location.reload(), 2000);
        } else {
            showAlert('danger', 'Fehler: ' + data.error);
        }
    })
    .catch(error => {
        showAlert('danger', 'Netzwerkfehler: ' + error.message);
    })
    .finally(() => {
        btn.disabled = false;
        btn.innerHTML = originalHtml;
    });
}

function checkToken() {
    const btn = event.target.closest('button');
    const originalHtml = btn.innerHTML;
    btn.disabled = true;
    btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Prüfe...';

    fetch('{{ path('admin_lilian_labs_check_token') }}', {
        method: 'POST'
    })
    .then(response => response.json())
    .then(data => {
        if (data.valid) {
            showAlert('success', `Token gültig! Läuft ab am ${data.expiresAt} (${data.daysLeft} Tage)`);
        } else {
            showAlert('danger', 'Token ungültig: ' + data.error);
        }
    })
    .catch(error => {
        showAlert('danger', 'Fehler: ' + error.message);
    })
    .finally(() => {
        btn.disabled = false;
        btn.innerHTML = originalHtml;
    });
}

function showAlert(type, message) {
    const statusDiv = document.getElementById('syncStatus');
    statusDiv.style.display = 'block';
    statusDiv.className = `alert alert-${type}`;
    statusDiv.innerHTML = `<i class="fas fa-${type === 'success' ? 'check-circle' : 'exclamation-circle'}"></i> ${message}`;
    
    if (type === 'success') {
        setTimeout(() => {
            statusDiv.style.display = 'none';
        }, 5000);
    }
}
</script>
{% endblock %}