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

{% block title %}Datenexport - {{ container.name }}{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h3>Datenexport: {{ container.name }}</h3>
                    <p class="text-muted">Zeitraum: {{ start|date('d.m.Y H:i') }} bis {{ end|date('d.m.Y H:i') }}</p>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-12">
                            <div class="chart-container" style="position: relative; height: 600px; width: 100%;">
                                <canvas id="dataChart"></canvas>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row mt-4">
                        <div class="col-12">
                            <h5>Datenübersicht</h5>
                            <div class="table-responsive">
                                <table class="table table-striped table-sm">
                                    <thead>
                                        <tr>
                                            <th>Parameter</th>
                                            <th>Min</th>
                                            <th>Max</th>
                                            <th>Durchschnitt</th>
                                            <th>Anzahl Messungen</th>
                                        </tr>
                                    </thead>
                                    <tbody id="statsTable">
                                        <!-- Statistiken werden hier eingefügt -->
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row mt-4">
                        <div class="col-12">
                            <h5>Rohdaten</h5>
                            <div class="table-responsive" style="max-height: 400px; overflow-y: auto;">
                                <table class="table table-striped table-sm table-hover">
                                    <thead class="sticky-top bg-light">
                                        <tr>
                                            <th>Zeitstempel</th>
                                            <th>Chlor (mg/l)</th>
                                            <th>Redox (mV)</th>
                                            <th>pH-Wert</th>
                                            <th>Temperatur (°C)</th>
                                        </tr>
                                    </thead>
                                    <tbody id="dataTable">
                                        <!-- Rohdaten werden hier eingefügt -->
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row mt-3 mb-5">
                        <div class="col-12">
                            <a href="{{ path('container_show', {'id': container.id}) }}" class="btn btn-secondary">
                                <i class="fas fa-arrow-left me-2"></i>Zurück zur Container-Ansicht
                            </a>
                            <button onclick="preparePrint()" class="btn btn-primary">
                                <i class="fas fa-print me-2"></i>Drucken
                            </button>
                            <button onclick="downloadChartAsImage()" class="btn btn-success">
                                <i class="fas fa-download me-2"></i>Als Bild herunterladen
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns@3.0.0/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
<script>
 document.addEventListener('DOMContentLoaded', function() {
     const data = {{ data|json_encode|raw }};
     
     // Automatischen CSV-Download starten falls gewünscht
     {% if app.request.get('autoDownloadCsv') %}
     setTimeout(() => {
         downloadCsv();
     }, 1000); // 1 Sekunde Verzögerung
     {% endif %}
     
    if (data.length === 0) {
        document.getElementById('dataChart').parentElement.innerHTML = 
            '<div class="alert alert-warning">Keine Daten für den gewählten Zeitraum verfügbar.</div>';
        return;
    }
    
    // Daten für Chart.js vorbereiten - Verwende echte Zeitstempel
    const timestamps = data.map(row => new Date(row.time));
    
    // Debug: Zeige die ersten und letzten Zeitstempel
    console.log('Erste 5 Zeitstempel:', timestamps.slice(0, 5));
    console.log('Letzte 5 Zeitstempel:', timestamps.slice(-5));
    console.log('Gesamte Datenpunkte:', data.length);
    
    // Debug: Zeige die Datenstruktur
    console.log('Erste Datenzeile:', data[0]);
    console.log('Verfügbare Spalten:', Object.keys(data[0]));
    console.log('Datenbeispiel (erste 3 Zeilen):', data.slice(0, 3));
    
    const datasets = [];
    const colors = ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0'];
    const parameters = ['chlor', 'redox', 'ph', 'temp'];  // 't1' → 'temp' korrigiert
    const labels = ['Chlor (mg/l)', 'Redox (mV)', 'pH-Wert', 'Temperatur (°C)'];
    
    parameters.forEach((param, index) => {
        console.log(`Prüfe Parameter: ${param}`);
        console.log(`Hat data[0].${param}:`, data[0].hasOwnProperty(param));
        console.log(`Wert von data[0].${param}:`, data[0][param]);
        
        if (data[0].hasOwnProperty(param)) {
            const values = data.map(row => row[param]).filter(val => val !== null && val !== undefined);
            console.log(`Gefilterte Werte für ${param}:`, values.length, 'von', data.length);
            console.log(`Erste 5 Werte für ${param}:`, values.slice(0, 5));
            
            if (values.length > 0) {
                // Bestimme die Y-Achse basierend auf dem Parameter
                let yAxisID = 'y'; // Standard: linke Y-Achse
                if (param === 'redox') {
                    yAxisID = 'y1'; // Rechte Y-Achse für Redox
                }
                
                console.log(`Dataset ${param}:`, {
                    label: labels[index],
                    dataPoints: values.length,
                    firstValue: values[0],
                    lastValue: values[values.length - 1],
                    yAxisID: yAxisID
                });
                
                // Erstelle Datenpunkte mit Zeitstempel
                const dataPoints = data.map((row, i) => ({
                    x: new Date(row.time),
                    y: row[param]
                })).filter(point => point.y !== null && point.y !== undefined);
                
                datasets.push({
                    label: labels[index],
                    data: dataPoints,
                    borderColor: colors[index],
                    backgroundColor: colors[index] + '20',
                    borderWidth: 2,
                    fill: false,
                    tension: 0.1,
                    yAxisID: yAxisID,
                    pointRadius: 0,
                    pointHoverRadius: 4
                });
            }
        }
    });
    
    // Chart erstellen mit separaten Y-Achsen
    const ctx = document.getElementById('dataChart').getContext('2d');
    const chart = new Chart(ctx, {
        type: 'line',
        data: {
            datasets: datasets
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                title: {
                    display: true,
                    text: 'Messwerte über Zeit'
                },
                legend: {
                    display: true,
                    position: 'top'
                }
            },
            scales: {
                x: {
                    type: 'time',
                    display: true,
                    title: {
                        display: true,
                        text: 'Zeit'
                    },
                    time: {
                        displayFormats: {
                            hour: 'dd.MM.yyyy, HH:mm',
                            minute: 'dd.MM.yyyy, HH:mm'
                        }
                    },
                    ticks: {
                        maxRotation: 45,
                        minRotation: 45,
                        maxTicksLimit: 20
                    }
                },
                y: {
                    type: 'linear',
                    display: true,
                    position: 'left',
                    title: {
                        display: true,
                        text: 'Chlor (mg/l) / pH-Wert'
                    }
                },
                y1: {
                    type: 'linear',
                    display: true,
                    position: 'right',
                    title: {
                        display: true,
                        text: 'Redox (mV)'
                    },
                    grid: {
                        drawOnChartArea: false,
                    },
                }
            }
        }
    });
    
    // Statistiken berechnen und anzeigen
    const statsTable = document.getElementById('statsTable');
    parameters.forEach((param, index) => {
        if (data[0].hasOwnProperty(param)) {
            const values = data.map(row => parseFloat(row[param])).filter(val => !isNaN(val));
            if (values.length > 0) {
                const min = Math.min(...values);
                const max = Math.max(...values);
                const avg = values.reduce((a, b) => a + b, 0) / values.length;
                
                const row = document.createElement('tr');
                row.innerHTML = `
                    <td>${labels[index]}</td>
                    <td>${min.toFixed(2)}</td>
                    <td>${max.toFixed(2)}</td>
                    <td>${avg.toFixed(2)}</td>
                    <td>${values.length}</td>
                `;
                statsTable.appendChild(row);
            }
        }
    });
    
    // Rohdaten-Tabelle befüllen
    const dataTable = document.getElementById('dataTable');
    data.forEach(row => {
        const tableRow = document.createElement('tr');
        const timestamp = new Date(row.time).toLocaleString('de-DE', {
            day: '2-digit',
            month: '2-digit',
            year: 'numeric',
            hour: '2-digit',
            minute: '2-digit',
            second: '2-digit'
        });
        
        tableRow.innerHTML = `
            <td>${timestamp}</td>
            <td>${row.chlor !== null && row.chlor !== undefined ? parseFloat(row.chlor).toFixed(2) : '-'}</td>
            <td>${row.redox !== null && row.redox !== undefined ? parseFloat(row.redox).toFixed(2) : '-'}</td>
            <td>${row.ph !== null && row.ph !== undefined ? parseFloat(row.ph).toFixed(2) : '-'}</td>
            <td>${row.temp !== null && row.temp !== undefined ? parseFloat(row.temp).toFixed(2) : '-'}</td>
        `;
                 dataTable.appendChild(tableRow);
     });
 });
 
 // Druckvorbereitung
 function preparePrint() {
     // Graph für Druck optimieren
     const chart = Chart.getChart('dataChart');
     if (chart) {
         chart.resize();
     }
     
     // Kurze Verzögerung für Graph-Resize
     setTimeout(() => {
         window.print();
     }, 500);
 }
 
 // CSV-Download
 function downloadCsv() {
     // Formular-Daten sammeln
     const formData = new FormData();
     formData.append('startDate', '{{ start|date("Y-m-d") }}');
     formData.append('startTime', '{{ start|date("H:i") }}');
     formData.append('endDate', '{{ end|date("Y-m-d") }}');
     formData.append('endTime', '{{ end|date("H:i") }}');
     formData.append('exportFormat', 'csv');
     
     // Alle Parameter hinzufügen
     const parameters = ['chlor', 'redox', 'ph', 'temp'];
     parameters.forEach(param => {
         formData.append('parameters[]', param);
     });
     
     // CSV-Download starten
     fetch('{{ path("container_export_data", {"id": container.id}) }}', {
         method: 'POST',
         body: formData
     })
     .then(response => response.blob())
     .then(blob => {
         const url = window.URL.createObjectURL(blob);
         const a = document.createElement('a');
         a.href = url;
         a.download = '{{ container.name }}_export_{{ start|date("Y-m-d_H-i") }}_bis_{{ end|date("Y-m-d_H-i") }}.csv';
         document.body.appendChild(a);
         a.click();
         window.URL.revokeObjectURL(url);
         document.body.removeChild(a);
     })
     .catch(error => {
         console.error('CSV-Download fehlgeschlagen:', error);
     });
 }
 
 // Chart als Bild herunterladen
 function downloadChartAsImage() {
     const chart = Chart.getChart('dataChart');
     if (!chart) {
         alert('Kein Chart gefunden!');
         return;
     }
     
     try {
         // Chart als Base64-String exportieren (Chart.js eingebaute Funktion)
         const base64Image = chart.toBase64Image('image/png', 1.0);
         
         // Download starten
         const link = document.createElement('a');
         link.download = '{{ container.name }}_chart_{{ start|date("Y-m-d_H-i") }}_bis_{{ end|date("Y-m-d_H-i") }}.png';
         link.href = base64Image;
         document.body.appendChild(link);
         link.click();
         document.body.removeChild(link);
         
         console.log('Chart erfolgreich als Bild exportiert!');
     } catch (error) {
         console.error('Fehler beim Chart-Export:', error);
         alert('Fehler beim Exportieren des Charts als Bild. Bitte versuchen Sie es erneut.');
     }
 }
</script>

<style>
@media print {
    /* Buttons ausblenden */
    .btn {
        display: none !important;
    }
    
    /* Card-Styling für Druck */
    .card {
        border: none !important;
        box-shadow: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .card-header {
        background: none !important;
        border-bottom: 2px solid #000 !important;
        padding: 10px 0 !important;
    }
    
    .card-body {
        padding: 10px 0 !important;
    }
    
    /* Graph für Druck optimieren */
    .chart-container {
        height: 400px !important;
        page-break-inside: avoid;
        margin-bottom: 20px !important;
    }
    
    /* Tabellen für Druck optimieren */
    .table-responsive {
        max-height: none !important;
        overflow: visible !important;
    }
    
    .table {
        font-size: 10px !important;
        page-break-inside: auto;
    }
    
    .table thead {
        display: table-header-group !important;
    }
    
    .table tbody {
        display: table-row-group !important;
    }
    
    /* Rohdaten-Tabelle auf mehrere Seiten verteilen */
    #dataTable {
        page-break-inside: auto;
    }
    
    #dataTable tr {
        page-break-inside: avoid;
        page-break-after: auto;
    }
    
    /* Allgemeine Druck-Optimierungen */
    body {
        font-size: 12px !important;
        line-height: 1.2 !important;
    }
    
    h3, h5 {
        page-break-after: avoid;
        margin-bottom: 10px !important;
    }
    
    /* Container-Abstände für Druck */
    .container-fluid {
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .row {
        margin: 0 !important;
    }
    
    .col-12 {
        padding: 0 !important;
    }
}

.chart-container {
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 10px;
}

.sticky-top {
    position: sticky;
    top: 0;
    z-index: 1020;
}

.table-hover tbody tr:hover {
    background-color: rgba(0,0,0,.075);
}

/* Footer-Abstand für Buttons */
.container-fluid {
    padding-bottom: 80px;
}

.card {
    margin-bottom: 20px;
}

/* Print-spezifische Anpassungen */
@media print {
    .container-fluid {
        padding-bottom: 0;
    }
    
    .card {
        margin-bottom: 0;
    }
}
</style>
{% endblock %}