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

{% block title %}InfluxDB Debug - Verfügbare Messungen{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h3>InfluxDB Debug - Verfügbare Messungen und Felder</h3>
                    <p class="text-muted">Datenbank: grafana | Host: 192.168.1.4:8086</p>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-12">
                                                         <button id="refreshBtn" class="btn btn-primary mb-3 me-2">
                                 <i class="fas fa-sync-alt me-2"></i>Daten aktualisieren
                             </button>
                             <button id="connectionTestBtn" class="btn btn-warning mb-3">
                                 <i class="fas fa-network-wired me-2"></i>Verbindungstest
                             </button>
                            
                            <div id="loadingIndicator" class="text-center" style="display: none;">
                                <i class="fas fa-spinner fa-spin fa-2x"></i>
                                <p>Lade InfluxDB-Daten...</p>
                            </div>
                            
                            <div id="errorMessage" class="alert alert-danger" style="display: none;">
                                <i class="fas fa-exclamation-triangle me-2"></i>
                                <span id="errorText"></span>
                            </div>
                            
                                                         <div id="contentArea">
                                 <h5>Aktuelle Konfiguration:</h5>
                                 <div id="debugInfo" class="mb-4">
                                     <!-- Debug-Info wird hier angezeigt -->
                                 </div>
                                 
                                 <h5>Verbindungstest-Ergebnisse:</h5>
                                 <div id="connectionTestResults" class="mb-4">
                                     <!-- Verbindungstest-Ergebnisse werden hier angezeigt -->
                                 </div>
                                 
                                 <h5>Verfügbare Messungen:</h5>
                                 <div id="measurementsList" class="mb-4">
                                     <!-- Messungen werden hier angezeigt -->
                                 </div>
                                 
                                 <h5>Messung-Details:</h5>
                                 <div id="measurementDetails">
                                     <!-- Details werden hier angezeigt -->
                                 </div>
                             </div>
                        </div>
                    </div>
                    
                    <div class="row mt-4">
                        <div class="col-12">
                            <h5>Container-Konfiguration anpassen:</h5>
                            <div class="alert alert-info">
                                <i class="fas fa-info-circle me-2"></i>
                                Basierend auf den verfügbaren Messungen können Sie die Container-Konfiguration in der Datei <code>src/Controller/ContainerController.php</code> anpassen.
                            </div>
                            
                            <div class="card">
                                <div class="card-body">
                                    <h6>Aktuelle Konfiguration:</h6>
                                    <pre><code>Container ID 1: measurement = 'bayrol'
Container ID 2: measurement = 'narwali2'

Feld-Mapping:
- chlor → chlor
- redox → redox  
- ph → ph
- temp → t1</code></pre>
                                 </div>
                             </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const refreshBtn = document.getElementById('refreshBtn');
    const loadingIndicator = document.getElementById('loadingIndicator');
    const errorMessage = document.getElementById('errorMessage');
    const errorText = document.getElementById('errorText');
    const contentArea = document.getElementById('contentArea');
    const debugInfo = document.getElementById('debugInfo');
    const connectionTestResults = document.getElementById('connectionTestResults');
    const measurementsList = document.getElementById('measurementsList');
    const measurementDetails = document.getElementById('measurementDetails');

    function loadInfluxData() {
        loadingIndicator.style.display = 'block';
        errorMessage.style.display = 'none';
        contentArea.style.display = 'none';

        fetch('{{ path('container_debug_influx') }}')
            .then(response => response.json())
            .then(data => {
                loadingIndicator.style.display = 'none';
                contentArea.style.display = 'block';

                if (data.error) {
                    errorText.textContent = data.error;
                    errorMessage.style.display = 'block';
                    
                    // Debug-Info auch bei Fehler anzeigen
                    if (data.debug_info) {
                        debugInfo.innerHTML = `
                            <div class="alert alert-warning">
                                <h6>Debug-Informationen:</h6>
                                <ul>
                                    <li><strong>Host:</strong> ${data.debug_info.host}</li>
                                    <li><strong>Port:</strong> ${data.debug_info.port}</li>
                                    <li><strong>Datenbank:</strong> ${data.debug_info.database}</li>
                                    <li><strong>Username:</strong> ${data.debug_info.username}</li>
                                    <li><strong>Password gesetzt:</strong> ${data.debug_info.password_set ? 'Ja' : 'Nein'}</li>
                                </ul>
                            </div>
                        `;
                    }
                    return;
                }

                // Debug-Info anzeigen
                if (data.debug_info) {
                    debugInfo.innerHTML = `
                        <div class="alert alert-info">
                            <h6>Verbindungsinformationen:</h6>
                            <ul>
                                <li><strong>Host:</strong> ${data.debug_info.host}</li>
                                <li><strong>Port:</strong> ${data.debug_info.port}</li>
                                <li><strong>Datenbank:</strong> ${data.debug_info.database}</li>
                                <li><strong>Username:</strong> ${data.debug_info.username}</li>
                                <li><strong>Password gesetzt:</strong> ${data.debug_info.password_set ? 'Ja' : 'Nein'}</li>
                                <li><strong>URL:</strong> ${data.debug_info.url}</li>
                            </ul>
                        </div>
                    `;
                }

                // Messungen anzeigen
                if (data.measurements && data.measurements.length > 0) {
                    const measurementsHtml = data.measurements.map(measurement => 
                        `<span class="badge bg-primary me-2 mb-2">${measurement}</span>`
                    ).join('');
                    measurementsList.innerHTML = measurementsHtml;
                } else {
                    measurementsList.innerHTML = '<p class="text-muted">Keine Messungen gefunden.</p>';
                }

                // Messung-Details anzeigen
                if (data.measurementDetails) {
                    let detailsHtml = '';
                    for (const [measurement, fields] of Object.entries(data.measurementDetails)) {
                        detailsHtml += `
                            <div class="card mb-3">
                                <div class="card-header">
                                    <h6 class="mb-0">Messung: <strong>${measurement}</strong></h6>
                                </div>
                                <div class="card-body">
                                    <p class="text-muted mb-2">Verfügbare Felder:</p>
                                    <div class="row">
                                        ${fields.map(field => `
                                            <div class="col-md-3 mb-2">
                                                <span class="badge bg-secondary">${field}</span>
                                            </div>
                                        `).join('')}
                                    </div>
                                </div>
                            </div>
                        `;
                    }
                    measurementDetails.innerHTML = detailsHtml;
                } else {
                    measurementDetails.innerHTML = '<p class="text-muted">Keine Details verfügbar.</p>';
                }
            })
            .catch(error => {
                loadingIndicator.style.display = 'none';
                errorText.textContent = 'Fehler beim Laden der Daten: ' + error.message;
                errorMessage.style.display = 'block';
            });
    }

    refreshBtn.addEventListener('click', loadInfluxData);
    connectionTestBtn.addEventListener('click', runConnectionTest);
    
    // Initial laden
    loadInfluxData();
    
    function runConnectionTest() {
        loadingIndicator.style.display = 'block';
        connectionTestResults.innerHTML = '';
        
        fetch('{{ path('container_debug_connection_test') }}')
            .then(response => response.json())
            .then(data => {
                loadingIndicator.style.display = 'none';
                
                if (data.success) {
                    let resultsHtml = '';
                    
                    // Ping-Test
                    const pingTest = data.test_results.ping;
                    resultsHtml += `
                        <div class="card mb-3">
                            <div class="card-header">
                                <h6 class="mb-0">
                                    <i class="fas fa-wifi me-2"></i>Ping-Test: ${pingTest.success ? '✅ Erfolgreich' : '❌ Fehlgeschlagen'}
                                </h6>
                            </div>
                            <div class="card-body">
                                <p>${pingTest.message}</p>
                                ${pingTest.details.length > 0 ? `<pre class="small">${pingTest.details.join('\n')}</pre>` : ''}
                            </div>
                        </div>
                    `;
                    
                    // Port-Test
                    const portTest = data.test_results.port;
                    resultsHtml += `
                        <div class="card mb-3">
                            <div class="card-header">
                                <h6 class="mb-0">
                                    <i class="fas fa-plug me-2"></i>Port-Test: ${portTest.success ? '✅ Erfolgreich' : '❌ Fehlgeschlagen'}
                                </h6>
                            </div>
                            <div class="card-body">
                                <p>${portTest.message}</p>
                            </div>
                        </div>
                    `;
                    
                    // HTTP-Test ohne Auth
                    const httpNoAuth = data.test_results.http_no_auth;
                    resultsHtml += `
                        <div class="card mb-3">
                            <div class="card-header">
                                <h6 class="mb-0">
                                    <i class="fas fa-globe me-2"></i>HTTP-Test (ohne Auth): ${httpNoAuth.success ? '✅ Erfolgreich' : '❌ Fehlgeschlagen'}
                                </h6>
                            </div>
                            <div class="card-body">
                                <p>${httpNoAuth.message}</p>
                                ${httpNoAuth.status_code ? `<p><strong>Status Code:</strong> ${httpNoAuth.status_code}</p>` : ''}
                                ${httpNoAuth.response ? `<pre class="small">${httpNoAuth.response}</pre>` : ''}
                            </div>
                        </div>
                    `;
                    
                    // HTTP-Test mit Auth
                    const httpWithAuth = data.test_results.http_with_auth;
                    resultsHtml += `
                        <div class="card mb-3">
                            <div class="card-header">
                                <h6 class="mb-0">
                                    <i class="fas fa-lock me-2"></i>HTTP-Test (mit Auth): ${httpWithAuth.success ? '✅ Erfolgreich' : '❌ Fehlgeschlagen'}
                                </h6>
                            </div>
                            <div class="card-body">
                                <p>${httpWithAuth.message}</p>
                                ${httpWithAuth.status_code ? `<p><strong>Status Code:</strong> ${httpWithAuth.status_code}</p>` : ''}
                                ${httpWithAuth.response ? `<pre class="small">${httpWithAuth.response}</pre>` : ''}
                            </div>
                        </div>
                    `;
                    
                    connectionTestResults.innerHTML = resultsHtml;
                } else {
                    connectionTestResults.innerHTML = '<div class="alert alert-danger">Fehler beim Verbindungstest</div>';
                }
            })
            .catch(error => {
                loadingIndicator.style.display = 'none';
                connectionTestResults.innerHTML = `<div class="alert alert-danger">Fehler beim Verbindungstest: ${error.message}</div>`;
            });
    }
});
</script>

<style>
.badge {
    font-size: 0.9em;
    padding: 0.5em 0.8em;
}

pre {
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 0.25rem;
    padding: 1rem;
    font-size: 0.875em;
}

code {
    color: #e83e8c;
    background-color: #f8f9fa;
    padding: 0.2em 0.4em;
    border-radius: 0.25rem;
}
</style>
{% endblock %}