{% extends "base.html" %}

{% block title %}Energiemonitoring - Mercedes-Benz TBA Marienfelde{% endblock %}

{% block head %}
{{ super() }}
<!-- Chart.js für Energiediagramme -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<!-- Enhanced CSS für Energiemonitoring mit Dark/Light Mode -->
<style>
.energy-card {
    background: var(--gradient-card);
    border: 1px solid var(--border-primary);
    border-radius: 16px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: var(--shadow-card);
}

.energy-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card-hover);
    border-color: var(--border-hover);
}

.energy-metric {
    background: var(--gradient-button);
    color: var(--text-on-primary);
    border-radius: 12px;
    padding: 1rem;
    text-align: center;
    box-shadow: var(--shadow-sm);
}

.dark .energy-metric {
    background: var(--gradient-button);
    color: var(--text-on-primary);
}

/* Hero Section Optimization */
.energy-hero {
    background: var(--gradient-primary);
    color: var(--text-primary);
}

.dark .energy-hero {
    background: var(--gradient-primary);
}

/* Status Indicator */
.status-indicator-online {
    background: var(--text-success);
}

.status-indicator-offline {
    background: var(--text-error);
}

/* Live Indicator */
.live-badge {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    color: var(--text-primary);
}

/* Chart Containers */
.chart-container {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: var(--shadow-card);
}

/* Table Styling */
.energy-table {
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    overflow: hidden;
}

.energy-table th {
    background: var(--bg-tertiary);
    color: var(--text-tertiary);
    border-bottom: 1px solid var(--border-primary);
}

.energy-table td {
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-primary);
}

.energy-table tbody tr:hover {
    background: var(--hover-card);
}

/* Status Badges */
.status-badge-online {
    background: rgba(16, 185, 129, 0.1);
    color: var(--text-success);
    border: 1px solid var(--border-success);
}

.status-badge-offline {
    background: rgba(239, 68, 68, 0.1);
    color: var(--text-error);
    border: 1px solid var(--border-error);
}

.dark .status-badge-online {
    background: rgba(16, 185, 129, 0.2);
}

.dark .status-badge-offline {
    background: rgba(239, 68, 68, 0.2);
}

/* Error State */
.error-card {
    background: rgba(239, 68, 68, 0.05);
    border: 1px solid var(--border-error);
    color: var(--text-error);
}

.dark .error-card {
    background: rgba(239, 68, 68, 0.1);
}

/* Loading States */
.loading-skeleton {
    background: linear-gradient(90deg, var(--bg-tertiary) 25%, var(--bg-secondary) 50%, var(--bg-tertiary) 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

@keyframes loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Responsive optimizations */
@media (max-width: 768px) {
    .energy-card {
        margin: 0.5rem;
        padding: 1rem;
        border-radius: 12px;
    }
    
    .energy-metric {
        padding: 0.75rem;
        border-radius: 8px;
    }
}
</style>
{% endblock %}

{% block content %}
<div class="min-h-screen" style="background: var(--gradient-primary);">
    
    <!-- Hero Header -->
    <div class="energy-hero relative overflow-hidden rounded-3xl mx-4 mt-4">
        <div class="absolute inset-0" style="background: var(--bg-overlay);"></div>
        <div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/5 to-transparent"></div>
        
        <!-- Live Status Indicator -->
        <div class="absolute top-4 right-4 flex items-center space-x-2">
            <div class="live-badge flex items-center space-x-2 rounded-full px-3 py-1">
                <div id="live-indicator" class="w-2 h-2 status-indicator-online rounded-full animate-pulse"></div>
                <span class="text-sm font-medium">Live</span>
            </div>
            <div class="live-badge rounded-full px-3 py-1">
                <span id="live-time" class="text-sm font-medium"></span>
            </div>
        </div>
        
        <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
            <div class="text-center">
                <!-- Mercedes-Benz Logo -->
                <div class="inline-flex items-center justify-center w-20 h-20 bg-white/10 backdrop-blur-sm rounded-full mb-6 border border-white/20">
                    <svg class="w-10 h-10 text-white" viewBox="0 0 24 24" fill="currentColor">
                        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.94-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/>
                    </svg>
                </div>
                
                <h1 class="text-5xl md:text-6xl font-bold mb-4 tracking-tight">
                    <span class="bg-gradient-to-r from-white to-blue-200 bg-clip-text text-transparent">
                        Energiemonitoring
                    </span>
                </h1>
                <p class="text-xl md:text-2xl text-blue-100 max-w-3xl mx-auto leading-relaxed">
                    Überwachung des Energieverbrauchs aller 3D-Drucker mit TP-Link Tapo Smart Plugs
                </p>
            </div>
        </div>
    </div>

    <!-- Main Content -->
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        
        {% if stats.error %}
        <!-- Error State -->
        <div class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-xl p-6 mb-8">
            <div class="flex items-center">
                <svg class="w-6 h-6 text-red-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.732-.833-2.464 0L4.35 16.5c-.77.833.192 2.5 1.732 2.5z"/>
                </svg>
                <div>
                    <h3 class="text-lg font-semibold text-red-800 dark:text-red-200">Energiemonitoring nicht verfügbar</h3>
                    <p class="text-red-600 dark:text-red-300 mt-1">{{ stats.error }}</p>
                </div>
            </div>
        </div>
        {% else %}
        
        <!-- Energy Overview Cards -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
            
            <!-- Total Power Consumption -->
            <div class="energy-card p-6">
                <div class="energy-metric">
                    <h3 class="text-sm font-semibold uppercase tracking-wider mb-2">Gesamtverbrauch</h3>
                    <p class="text-3xl font-bold" id="total-power">{{ stats.total_power_consumption or '0.0' }} kWh</p>
                </div>
            </div>
            
            <!-- Current Power -->
            <div class="energy-card p-6">
                <div class="energy-metric">
                    <h3 class="text-sm font-semibold uppercase tracking-wider mb-2">Aktuelle Leistung</h3>
                    <p class="text-3xl font-bold" id="current-power">{{ stats.current_power or '0.0' }} W</p>
                </div>
            </div>
            
            <!-- Active Devices -->
            <div class="energy-card p-6">
                <div class="energy-metric">
                    <h3 class="text-sm font-semibold uppercase tracking-wider mb-2">Aktive Geräte</h3>
                    <p class="text-3xl font-bold" id="active-devices">{{ stats.active_devices or '0' }}</p>
                </div>
            </div>
            
            <!-- Energy Cost -->
            <div class="energy-card p-6">
                <div class="energy-metric">
                    <h3 class="text-sm font-semibold uppercase tracking-wider mb-2">Kosten (€/kWh 0.30)</h3>
                    <p class="text-3xl font-bold" id="energy-cost">{{ "%.2f"|format((stats.total_power_consumption or 0) * 0.30) }} €</p>
                </div>
            </div>
        </div>
        
        <!-- Charts Section -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
            
            <!-- Power Consumption Over Time -->
            <div class="energy-card p-6">
                <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-4">Verbrauch der letzten 24 Stunden</h3>
                <div class="relative h-80">
                    <canvas id="powerChart"></canvas>
                </div>
            </div>
            
            <!-- Device Comparison -->
            <div class="energy-card p-6">
                <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-4">Verbrauch nach Gerät</h3>
                <div class="relative h-80">
                    <canvas id="deviceChart"></canvas>
                </div>
            </div>
        </div>
        
        <!-- Device List -->
        <div class="energy-card p-6">
            <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-6">Geräteübersicht</h3>
            
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                    <thead class="bg-gray-50 dark:bg-gray-800">
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Gerät</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Status</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Aktuelle Leistung</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Tagesverbrauch</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Aktionen</th>
                        </tr>
                    </thead>
                    <tbody id="device-table-body" class="bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-700">
                        <!-- Dynamisch geladen via JavaScript -->
                    </tbody>
                </table>
            </div>
        </div>
        {% endif %}
    </div>
</div>

<!-- JavaScript für Live-Updates und Charts -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Live-Zeit aktualisieren
    function updateLiveTime() {
        const timeElement = document.getElementById('live-time');
        if (timeElement) {
            timeElement.textContent = new Date().toLocaleTimeString('de-DE');
        }
    }
    
    // Alle Sekunde aktualisieren
    setInterval(updateLiveTime, 1000);
    updateLiveTime();
    
    // Charts initialisieren
    initializeCharts();
    
    // Geräteliste laden
    loadDeviceList();
    
    // Auto-Update alle 30 Sekunden
    setInterval(() => {
        loadEnergyData();
        loadDeviceList();
    }, 30000);
});

function initializeCharts() {
    // Power Chart
    const powerCtx = document.getElementById('powerChart');
    if (powerCtx) {
        new Chart(powerCtx, {
            type: 'line',
            data: {
                labels: [], // Wird dynamisch geladen
                datasets: [{
                    label: 'Leistung (W)',
                    data: [],
                    borderColor: '#0073ce',
                    backgroundColor: 'rgba(0, 115, 206, 0.1)',
                    fill: true,
                    tension: 0.4
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    y: {
                        beginAtZero: true,
                        title: {
                            display: true,
                            text: 'Leistung (W)'
                        }
                    },
                    x: {
                        title: {
                            display: true,
                            text: 'Zeit'
                        }
                    }
                }
            }
        });
    }
    
    // Device Chart
    const deviceCtx = document.getElementById('deviceChart');
    if (deviceCtx) {
        new Chart(deviceCtx, {
            type: 'doughnut',
            data: {
                labels: [], // Wird dynamisch geladen
                datasets: [{
                    data: [],
                    backgroundColor: [
                        '#0073ce',
                        '#005ba3',
                        '#aaa9ad',
                        '#5e5e5e',
                        '#f59e0b',
                        '#10b981'
                    ]
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'bottom'
                    }
                }
            }
        });
    }
}

async function loadEnergyData() {
    try {
        const response = await fetch('/api/energy/overview');
        if (response.ok) {
            const data = await response.json();
            updateEnergyMetrics(data);
        }
    } catch (error) {
        console.error('Fehler beim Laden der Energiedaten:', error);
    }
}

async function loadDeviceList() {
    try {
        const response = await fetch('/api/energy/devices');
        if (response.ok) {
            const data = await response.json();
            updateDeviceTable(data.devices || []);
        }
    } catch (error) {
        console.error('Fehler beim Laden der Geräteliste:', error);
    }
}

function updateEnergyMetrics(data) {
    if (data.total_power_consumption !== undefined) {
        document.getElementById('total-power').textContent = data.total_power_consumption.toFixed(1) + ' kWh';
    }
    if (data.current_power !== undefined) {
        document.getElementById('current-power').textContent = data.current_power.toFixed(1) + ' W';
    }
    if (data.active_devices !== undefined) {
        document.getElementById('active-devices').textContent = data.active_devices;
    }
    if (data.total_power_consumption !== undefined) {
        const cost = (data.total_power_consumption * 0.30).toFixed(2);
        document.getElementById('energy-cost').textContent = cost + ' €';
    }
}

function updateDeviceTable(devices) {
    const tbody = document.getElementById('device-table-body');
    if (!tbody) return;
    
    tbody.innerHTML = '';
    
    if (devices.length === 0) {
        tbody.innerHTML = `
            <tr>
                <td colspan="5" class="px-6 py-4 text-center text-gray-500 dark:text-gray-400">
                    Keine Geräte gefunden
                </td>
            </tr>
        `;
        return;
    }
    
    devices.forEach(device => {
        const row = document.createElement('tr');
        row.className = 'hover:bg-gray-50 dark:hover:bg-gray-800';
        
        const statusClass = device.status === 'online' ? 'text-green-600' : 'text-red-600';
        const statusText = device.status === 'online' ? 'Online' : 'Offline';
        
        row.innerHTML = `
            <td class="px-6 py-4 whitespace-nowrap">
                <div class="flex items-center">
                    <div class="text-sm font-medium text-gray-900 dark:text-white">${device.name}</div>
                    <div class="text-sm text-gray-500 dark:text-gray-400">${device.model || ''}</div>
                </div>
            </td>
            <td class="px-6 py-4 whitespace-nowrap">
                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${statusClass}">
                    ${statusText}
                </span>
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">
                ${device.current_power || '0.0'} W
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">
                ${device.daily_consumption || '0.0'} kWh
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                <a href="/energy/device/${device.id}" class="text-mercedes-blue hover:text-mercedes-blue/80">
                    Details anzeigen
                </a>
            </td>
        `;
        
        tbody.appendChild(row);
    });
}
</script>
{% endblock %}