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

{% block title %}Wasserdaten-Vergleich{% endblock %}

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

    .chart-container {
        position: relative;
        height: 400px;
        padding: 1rem;
    }

    .filter-section {
        background: #f8f9fc;
        padding: 1.5rem;
        border-radius: 8px;
        margin-bottom: 1.5rem;
    }

    .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1rem;
        margin-bottom: 2rem;
    }

    .stat-box {
        background: white;
        padding: 1.5rem;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        text-align: center;
    }

    .stat-value {
        font-size: 2rem;
        font-weight: 700;
        color: #0099cc;
        margin: 0.5rem 0;
    }

    .stat-label {
        color: #858796;
        font-size: 0.875rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        font-weight: 600;
    }

    .legend-item {
        display: inline-flex;
        align-items: center;
        margin-right: 1.5rem;
        margin-bottom: 0.5rem;
    }

    .legend-color {
        width: 20px;
        height: 20px;
        border-radius: 4px;
        margin-right: 0.5rem;
    }

    .loading-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(255, 255, 255, 0.9);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 10;
    }
</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-exchange-alt me-2"></i>Daten-Vergleich</h1>
            <p class="text-muted mb-0">Lilian Labs vs. InfluxDB</p>
        </div>
        <div class="d-flex gap-2">
            <a href="/ksbdueren/public/admin/lilian-labs/" class="btn btn-outline-secondary">
                <i class="fas fa-tint me-2"></i>Lilian Labs
            </a>
            <a href="{{ path('admin_water_comparison_details') }}?location={{ selected_location }}&days={{ days_back }}" class="btn btn-info">
                <i class="fas fa-table me-2"></i>Detailansicht
            </a>
        </div>
    </div>
    <!-- Filter Section -->
    <div class="filter-section">
        <form id="filterForm" method="get">
            <div class="row align-items-end">
                <div class="col-md-3">
                    <label for="location" class="form-label fw-bold">
                        <i class="fas fa-map-marker-alt"></i> Standort
                    </label>
                    <select class="form-select" id="location" name="location">
                        <option value="">Alle Standorte</option>
                        {% for location in locations %}
                            <option value="{{ location }}" {{ selected_location == location ? 'selected' : '' }}>
                                {{ location }}
                            </option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-md-3">
                    <label for="days" class="form-label fw-bold">
                        <i class="fas fa-calendar-alt"></i> Zeitbereich
                    </label>
                    <select class="form-select" id="days" name="days">
                        <option value="1" {{ days_back == 1 ? 'selected' : '' }}>Letzter Tag</option>
                        <option value="3" {{ days_back == 3 ? 'selected' : '' }}>Letzte 3 Tage</option>
                        <option value="7" {{ days_back == 7 ? 'selected' : '' }}>Letzte 7 Tage</option>
                        <option value="14" {{ days_back == 14 ? 'selected' : '' }}>Letzte 14 Tage</option>
                        <option value="30" {{ days_back == 30 ? 'selected' : '' }}>Letzte 30 Tage</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <button type="button" class="btn btn-primary" onclick="loadComparison()">
                        <i class="fas fa-sync"></i> Vergleich laden
                    </button>
                </div>
                <div class="col-md-3 text-end">
                    <a href="{{ path('admin_water_comparison_details') }}?location={{ selected_location }}&days={{ days_back }}" class="btn btn-info">
                        <i class="fas fa-table"></i> Detailansicht
                    </a>
                </div>
            </div>
        </form>
    </div>

    <!-- Statistics -->
    <div id="statisticsContainer" class="stats-grid" style="display: none;">
        <!-- Wird dynamisch gefüllt -->
    </div>

    <!-- Charts -->
    <div class="row">
        <div class="col-12">
            <div class="card comparison-card">
                <div class="card-header bg-white py-3">
                    <h5 class="m-0 font-weight-bold text-primary">
                        <i class="fas fa-chart-line"></i> pH-Wert Vergleich
                    </h5>
                    <div class="mt-2">
                        <span class="legend-item">
                            <span class="legend-color" style="background: #0099cc;"></span>
                            <span>Lilian Labs (Manuell)</span>
                        </span>
                        <span class="legend-item">
                            <span class="legend-color" style="background: #28a745;"></span>
                            <span>InfluxDB (Automatisch)</span>
                        </span>
                    </div>
                </div>
                <div class="card-body position-relative">
                    <div id="loadingPh" class="loading-overlay" style="display: none;">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">Lädt...</span>
                        </div>
                    </div>
                    <div class="chart-container">
                        <canvas id="phChart"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-12">
            <div class="card comparison-card">
                <div class="card-header bg-white py-3">
                    <h5 class="m-0 font-weight-bold text-primary">
                        <i class="fas fa-chart-line"></i> Freies Chlor Vergleich
                    </h5>
                </div>
                <div class="card-body position-relative">
                    <div id="loadingCl" class="loading-overlay" style="display: none;">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">Lädt...</span>
                        </div>
                    </div>
                    <div class="chart-container">
                        <canvas id="chlorineChart"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-12">
            <div class="card comparison-card">
                <div class="card-header bg-white py-3">
                    <h5 class="m-0 font-weight-bold text-primary">
                        <i class="fas fa-chart-line"></i> Gesamtchlor Vergleich
                    </h5>
                </div>
                <div class="card-body position-relative">
                    <div id="loadingClTotal" class="loading-overlay" style="display: none;">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">Lädt...</span>
                        </div>
                    </div>
                    <div class="chart-container">
                        <canvas id="chlorineTotalChart"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block javascripts %}
{{ parent() }}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script>
let phChart, chlorineChart, chlorineTotalChart;

function loadComparison() {
    const location = document.getElementById('location').value;
    const days = document.getElementById('days').value;
    
    // Zeige Loading
    document.getElementById('loadingPh').style.display = 'flex';
    document.getElementById('loadingCl').style.display = 'flex';
    document.getElementById('loadingClTotal').style.display = 'flex';
    
    fetch(`{{ path('admin_water_comparison_api') }}?location=${location}&days=${days}`)
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                updateStatistics(data.data.statistics);
                updateCharts(data.chartData);
            } else {
                alert('Fehler: ' + data.error);
            }
        })
        .catch(error => {
            alert('Fehler beim Laden: ' + error.message);
        })
        .finally(() => {
            document.getElementById('loadingPh').style.display = 'none';
            document.getElementById('loadingCl').style.display = 'none';
            document.getElementById('loadingClTotal').style.display = 'none';
        });
}

function updateStatistics(stats) {
    const container = document.getElementById('statisticsContainer');
    container.style.display = 'grid';
    
    let html = `
        <div class="stat-box">
            <div class="stat-label">Lilian Labs Messungen</div>
            <div class="stat-value">${stats.total_lilian_measurements}</div>
        </div>
        <div class="stat-box">
            <div class="stat-label">Mit InfluxDB Match</div>
            <div class="stat-value">${stats.measurements_with_influx}</div>
        </div>
        <div class="stat-box">
            <div class="stat-label">Ohne InfluxDB Match</div>
            <div class="stat-value">${stats.measurements_without_influx}</div>
        </div>
        <div class="stat-box">
            <div class="stat-label">Ø Zeitdifferenz</div>
            <div class="stat-value">${stats.average_time_diff}s</div>
        </div>
    `;
    
    if (stats.deviations_summary.ph) {
        html += `
            <div class="stat-box">
                <div class="stat-label">Ø pH Abweichung</div>
                <div class="stat-value">${stats.deviations_summary.ph.average.toFixed(2)}</div>
            </div>
        `;
    }
    
    if (stats.deviations_summary.chlorine_free) {
        html += `
            <div class="stat-box">
                <div class="stat-label">Ø Chlor Abweichung</div>
                <div class="stat-value">${stats.deviations_summary.chlorine_free.average.toFixed(2)}</div>
            </div>
        `;
    }
    
    container.innerHTML = html;
}

function updateCharts(chartData) {
    // pH Chart
    if (phChart) phChart.destroy();
    const phCtx = document.getElementById('phChart').getContext('2d');
    phChart = new Chart(phCtx, {
        type: 'line',
        data: {
            labels: chartData.labels,
            datasets: [
                {
                    label: 'Lilian Labs (Manuell)',
                    data: chartData.datasets.ph_lilian,
                    borderColor: '#0099cc',
                    backgroundColor: 'rgba(0, 153, 204, 0.1)',
                    tension: 0.4,
                    pointRadius: 5,
                    pointHoverRadius: 7
                },
                {
                    label: 'InfluxDB (Automatisch)',
                    data: chartData.datasets.ph_influx,
                    borderColor: '#28a745',
                    backgroundColor: 'rgba(40, 167, 69, 0.1)',
                    tension: 0.4,
                    pointRadius: 3,
                    pointHoverRadius: 5
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    display: true,
                    position: 'top'
                }
            },
            scales: {
                y: {
                    beginAtZero: false,
                    title: {
                        display: true,
                        text: 'pH-Wert'
                    }
                }
            }
        }
    });
    
    // Chlorine Free Chart
    if (chlorineChart) chlorineChart.destroy();
    const clCtx = document.getElementById('chlorineChart').getContext('2d');
    chlorineChart = new Chart(clCtx, {
        type: 'line',
        data: {
            labels: chartData.labels,
            datasets: [
                {
                    label: 'Lilian Labs (Manuell)',
                    data: chartData.datasets.chlorine_free_lilian,
                    borderColor: '#0099cc',
                    backgroundColor: 'rgba(0, 153, 204, 0.1)',
                    tension: 0.4,
                    pointRadius: 5,
                    pointHoverRadius: 7
                },
                {
                    label: 'InfluxDB (Automatisch)',
                    data: chartData.datasets.chlorine_free_influx,
                    borderColor: '#28a745',
                    backgroundColor: 'rgba(40, 167, 69, 0.1)',
                    tension: 0.4,
                    pointRadius: 3,
                    pointHoverRadius: 5
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    display: true,
                    position: 'top'
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    title: {
                        display: true,
                        text: 'Freies Chlor (mg/l)'
                    }
                }
            }
        }
    });
    
    // Chlorine Total Chart
    if (chlorineTotalChart) chlorineTotalChart.destroy();
    const clTotalCtx = document.getElementById('chlorineTotalChart').getContext('2d');
    chlorineTotalChart = new Chart(clTotalCtx, {
        type: 'line',
        data: {
            labels: chartData.labels,
            datasets: [
                {
                    label: 'Lilian Labs (Manuell)',
                    data: chartData.datasets.chlorine_total_lilian,
                    borderColor: '#0099cc',
                    backgroundColor: 'rgba(0, 153, 204, 0.1)',
                    tension: 0.4,
                    pointRadius: 5,
                    pointHoverRadius: 7
                },
                {
                    label: 'InfluxDB (Automatisch)',
                    data: chartData.datasets.chlorine_total_influx,
                    borderColor: '#28a745',
                    backgroundColor: 'rgba(40, 167, 69, 0.1)',
                    tension: 0.4,
                    pointRadius: 3,
                    pointHoverRadius: 5
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    display: true,
                    position: 'top'
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    title: {
                        display: true,
                        text: 'Gesamtchlor (mg/l)'
                    }
                }
            }
        }
    });
}

// Automatisch laden beim Seitenaufruf
document.addEventListener('DOMContentLoaded', function() {
    loadComparison();
});
</script>
{% endblock %}