// Datum auf heute und vor 7 Tagen setzen
function initializeDates() {
    const today = new Date();
    const weekAgo = new Date();
    weekAgo.setDate(today.getDate() - 7);

    document.getElementById('endDate').valueAsDate = today;
    document.getElementById('startDate').valueAsDate = weekAgo;
}

// Datum formatieren
function formatDate(dateString) {
    const date = new Date(dateString);
    return date.toLocaleString('de-DE', {
        day: '2-digit',
        month: '2-digit',
        year: 'numeric',
        hour: '2-digit',
        minute: '2-digit'
    });
}

// Zahl formatieren
function formatNumber(num) {
    return new Intl.NumberFormat('de-DE', {
        minimumFractionDigits: 2,
        maximumFractionDigits: 2
    }).format(num);
}

// Formular absenden
document.getElementById('verbrauchForm').addEventListener('submit', async (e) => {
    e.preventDefault();
    
    // Ausgewählte Collections sammeln
    const checkboxes = document.querySelectorAll('.checkbox-group input[type="checkbox"]:checked');
    const selectedCollections = Array.from(checkboxes).map(cb => cb.value);
    
    if (selectedCollections.length === 0) {
        alert('Bitte wählen Sie mindestens eine Collection aus.');
        return;
    }
    
    const startDate = document.getElementById('startDate').value;
    const endDate = document.getElementById('endDate').value;
    
    const resultsDiv = document.getElementById('results');
    resultsDiv.innerHTML = '<div class="loading">Lade Daten...</div>';
    
    try {
        const collectionsParam = selectedCollections.join(',');
        const response = await fetch(
            `/api/verbrauch?collections=${collectionsParam}&startDate=${startDate}&endDate=${endDate}`
        );
        
        if (!response.ok) {
            throw new Error('Fehler beim Abrufen der Daten');
        }
        
        const data = await response.json();
        displayResults(data);
        
    } catch (error) {
        resultsDiv.innerHTML = `
            <div class="error-box">
                <strong>Fehler:</strong> ${error.message}
            </div>
        `;
    }
});

// Ergebnisse anzeigen
function displayResults(data) {
    const resultsDiv = document.getElementById('results');
    
    if (data.verbraucher.length === 0) {
        resultsDiv.innerHTML = `
            <div class="info-box">
                Keine Daten für den gewählten Zeitraum gefunden.
            </div>
        `;
        return;
    }

    // Gesamtverbrauch berechnen
    const gesamtVerbrauch = data.verbraucher.reduce((sum, v) => sum + v.verbrauch, 0);

    let html = `
        <div class="info-box">
            <strong>Zeitraum:</strong> ${formatDate(data.zeitraum.von)} - ${formatDate(data.zeitraum.bis)}<br>
            <strong>Collections:</strong> ${data.collections.join(', ')}<br>
            <strong>Anzahl Verbraucher:</strong> ${data.verbraucher.length}
        </div>
        
        <table>
            <thead>
                <tr>
                    <th>Collection</th>
                    <th>Verbraucher</th>
                    <th class="number">Anfangswert (Wh)</th>
                    <th>Anfangszeit</th>
                    <th class="number">Endwert (Wh)</th>
                    <th>Endzeit</th>
                    <th class="number">Verbrauch (Wh)</th>
                    <th class="number">Verbrauch (kWh)</th>
                </tr>
            </thead>
            <tbody>
    `;

    data.verbraucher.forEach(v => {
        html += `
            <tr>
                <td><strong>${v.collection}</strong></td>
                <td><strong>${v.verbraucher}</strong></td>
                <td class="number">${formatNumber(v.anfangsWert)}</td>
                <td>${formatDate(v.anfangsZeit)}</td>
                <td class="number">${formatNumber(v.endWert)}</td>
                <td>${formatDate(v.endZeit)}</td>
                <td class="number">${formatNumber(v.verbrauch)}</td>
                <td class="number">${formatNumber(v.verbrauch / 1000)}</td>
            </tr>
        `;
    });

    html += `
            </tbody>
        </table>
        
        <div class="summary">
            <span class="summary-label">Gesamtverbrauch:</span>
            <span class="summary-value">${formatNumber(gesamtVerbrauch / 1000)} kWh</span>
        </div>
    `;

    resultsDiv.innerHTML = html;
}

// Beim Laden initialisieren
window.addEventListener('DOMContentLoaded', () => {
    initializeDates();
});