{% extends "base.html" %}

{% block title %}Tapo-Steckdosen-Monitoring - Admin | MYP Platform{% endblock %}

{% block head %}
{{ super() }}
<!-- CSRF Token für AJAX-Anfragen -->
<meta name="csrf-token" content="{{ csrf_token() }}">

<!-- Auto-refresh für Live-Monitoring -->
<meta http-equiv="refresh" content="30">

<style>
/* Spezielle Styles für Monitoring */
.status-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 8px;
}

.status-online { background-color: #10b981; }
.status-offline { background-color: #6b7280; }
.status-error { background-color: #ef4444; }

.monitoring-card {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.monitoring-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.pulse-animation {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.health-excellent { border-left: 4px solid #10b981; }
.health-good { border-left: 4px solid #f59e0b; }
.health-poor { border-left: 4px solid #ef4444; }

/* Loading Overlay */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
}
</style>
{% endblock %}

{% block content %}
<!-- Loading Overlay -->
<div id="loading-overlay" class="loading-overlay">
    <div class="bg-white dark:bg-slate-800 rounded-2xl p-8 shadow-2xl">
        <div class="flex items-center space-x-4">
            <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500"></div>
            <span class="text-lg font-medium text-gray-900 dark:text-white">Tapo-Steckdosen werden überprüft...</span>
        </div>
    </div>
</div>

<!-- Hero Header -->
<div class="relative overflow-hidden bg-gradient-to-r from-orange-600 via-red-600 to-purple-600 text-white rounded-3xl mx-4 mb-8">
    <div class="absolute inset-0 bg-black/20"></div>
    <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <div class="text-center">
            <!-- Icon -->
            <div class="inline-flex items-center justify-center w-16 h-16 bg-white/10 backdrop-blur-sm rounded-full mb-6 border border-white/20">
                <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
                </svg>
            </div>
            
            <h1 class="text-4xl md:text-5xl font-bold mb-4 tracking-tight">
                <span class="bg-gradient-to-r from-white to-orange-200 bg-clip-text text-transparent">
                    Tapo-Steckdosen-Monitoring
                </span>
            </h1>
            <p class="text-xl text-orange-100 max-w-3xl mx-auto leading-relaxed">
                Real-Time-Überwachung und Verwaltung aller TP-Link Tapo Smart Plugs im TBA Mercedes-Benz System
            </p>
            
            <!-- Quick Stats -->
            <div class="flex flex-wrap justify-center gap-6 mt-8">
                <div class="bg-white/10 backdrop-blur-sm border border-white/20 rounded-xl px-4 py-2">
                    <div class="text-2xl font-bold">{{ stats.printers_with_tapo }}</div>
                    <div class="text-sm opacity-90">Konfigurierte Steckdosen</div>
                </div>
                <div class="bg-white/10 backdrop-blur-sm border border-white/20 rounded-xl px-4 py-2">
                    <div class="text-2xl font-bold text-green-300">{{ stats.online_count }}</div>
                    <div class="text-sm opacity-90">Online</div>
                </div>
                <div class="bg-white/10 backdrop-blur-sm border border-white/20 rounded-xl px-4 py-2">
                    <div class="text-2xl font-bold">{{ stats.coverage_percentage }}%</div>
                    <div class="text-sm opacity-90">Abdeckung</div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Status Overview Cards -->
<div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
    <!-- Gesamt-Status -->
    <div class="monitoring-card rounded-xl p-6 shadow-lg">
        <div class="flex items-center justify-between mb-4">
            <div class="p-3 bg-blue-100 dark:bg-blue-900 rounded-xl">
                <svg class="w-6 h-6 text-blue-600 dark:text-blue-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
                </svg>
            </div>
            <div class="text-right">
                <div class="text-2xl font-bold text-slate-900 dark:text-white">{{ stats.printers_with_tapo }}</div>
                <div class="text-sm text-slate-500 dark:text-slate-400">Smart Plugs</div>
            </div>
        </div>
        <div class="flex items-center space-x-2">
            <div class="status-indicator {{ 'status-online' if stats.tapo_available else 'status-error' }}"></div>
            <span class="text-sm font-medium {{ 'text-green-600' if stats.tapo_available else 'text-red-600' }}">
                {{ 'System verfügbar' if stats.tapo_available else 'System offline' }}
            </span>
        </div>
    </div>
    
    <!-- Online Steckdosen -->
    <div class="monitoring-card rounded-xl p-6 shadow-lg">
        <div class="flex items-center justify-between mb-4">
            <div class="p-3 bg-green-100 dark:bg-green-900 rounded-xl">
                <svg class="w-6 h-6 text-green-600 dark:text-green-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                </svg>
            </div>
            <div class="text-right">
                <div class="text-2xl font-bold text-green-600">{{ stats.online_count }}</div>
                <div class="text-sm text-slate-500 dark:text-slate-400">Eingeschaltet</div>
            </div>
        </div>
        <div class="w-full bg-slate-200 dark:bg-slate-700 rounded-full h-2">
            <div class="bg-green-500 h-2 rounded-full transition-all duration-500" 
                 style="width: {{ (stats.online_count / stats.printers_with_tapo * 100) if stats.printers_with_tapo else 0 }}%"></div>
        </div>
    </div>
    
    <!-- Offline Steckdosen -->
    <div class="monitoring-card rounded-xl p-6 shadow-lg">
        <div class="flex items-center justify-between mb-4">
            <div class="p-3 bg-gray-100 dark:bg-gray-700 rounded-xl">
                <svg class="w-6 h-6 text-gray-600 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728L5.636 5.636m12.728 12.728L5.636 5.636"/>
                </svg>
            </div>
            <div class="text-right">
                <div class="text-2xl font-bold text-gray-600">{{ stats.offline_count }}</div>
                <div class="text-sm text-slate-500 dark:text-slate-400">Ausgeschaltet</div>
            </div>
        </div>
        <div class="w-full bg-slate-200 dark:bg-slate-700 rounded-full h-2">
            <div class="bg-gray-500 h-2 rounded-full transition-all duration-500" 
                 style="width: {{ (stats.offline_count / stats.printers_with_tapo * 100) if stats.printers_with_tapo else 0 }}%"></div>
        </div>
    </div>
    
    <!-- Fehlerhafte Steckdosen -->
    <div class="monitoring-card rounded-xl p-6 shadow-lg">
        <div class="flex items-center justify-between mb-4">
            <div class="p-3 bg-red-100 dark:bg-red-900 rounded-xl">
                <svg class="w-6 h-6 text-red-600 dark:text-red-300" 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>
            <div class="text-right">
                <div class="text-2xl font-bold text-red-600">{{ stats.error_count }}</div>
                <div class="text-sm text-slate-500 dark:text-slate-400">Nicht erreichbar</div>
            </div>
        </div>
        <div class="w-full bg-slate-200 dark:bg-slate-700 rounded-full h-2">
            <div class="bg-red-500 h-2 rounded-full transition-all duration-500" 
                 style="width: {{ (stats.error_count / stats.printers_with_tapo * 100) if stats.printers_with_tapo else 0 }}%"></div>
        </div>
    </div>
</div>

<!-- Control Panel -->
<div class="monitoring-card rounded-xl p-6 shadow-lg mb-8">
    <div class="flex flex-wrap items-center justify-between gap-4 mb-6">
        <h2 class="text-xl font-semibold text-slate-900 dark:text-white">
            <svg class="w-6 h-6 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 100-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 100-4m0 4v2m0-6V4"/>
            </svg>
            Massensteuerung
        </h2>
        
        <div class="flex flex-wrap gap-3">
            <button id="refresh-status-btn" class="btn-secondary flex items-center space-x-2">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
                </svg>
                <span>Status aktualisieren</span>
            </button>
            
            <button id="health-check-btn" class="btn-primary flex items-center space-x-2">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                </svg>
                <span>Gesundheitscheck</span>
            </button>
            
            <button id="bulk-on-btn" class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg flex items-center space-x-2 transition-colors">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
                </svg>
                <span>Alle einschalten</span>
            </button>
            
            <button id="bulk-off-btn" class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-lg flex items-center space-x-2 transition-colors">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728L5.636 5.636m12.728 12.728L5.636 5.636"/>
                </svg>
                <span>Alle ausschalten</span>
            </button>
        </div>
    </div>
    
    <!-- Bulk Selection -->
    <div class="flex items-center space-x-4 mb-4">
        <label class="flex items-center">
            <input type="checkbox" id="select-all" class="mr-2">
            <span class="text-sm font-medium">Alle auswählen</span>
        </label>
        <span id="selected-count" class="text-sm text-slate-600 dark:text-slate-400">0 Steckdosen ausgewählt</span>
    </div>
</div>

<!-- Drucker-Steckdosen-Status -->
<div class="monitoring-card rounded-xl shadow-lg overflow-hidden">
    <div class="p-6 border-b border-slate-200 dark:border-slate-700">
        <h2 class="text-xl font-semibold text-slate-900 dark:text-white">
            <svg class="w-6 h-6 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"/>
            </svg>
            Drucker-Steckdosen-Status
        </h2>
        <p class="text-sm text-slate-600 dark:text-slate-400 mt-1">
            Live-Status aller konfigurierten Tapo-Steckdosen (automatische Aktualisierung alle 30 Sekunden)
        </p>
    </div>
    
    <div class="p-6">
        {% if printer_status %}
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {% for printer in printer_status %}
            <div class="printer-card border border-slate-200 dark:border-slate-600 rounded-xl p-4 hover:shadow-lg transition-all duration-300 
                        {{ 'health-excellent' if printer.plug_reachable and printer.plug_status == 'on' else 'health-good' if printer.plug_reachable else 'health-poor' }}">
                
                <!-- Header mit Checkbox -->
                <div class="flex items-start justify-between mb-3">
                    <div class="flex items-center space-x-3">
                        <input type="checkbox" class="printer-checkbox" value="{{ printer.id }}" data-printer-name="{{ printer.name }}">
                        <div>
                            <h3 class="font-semibold text-slate-900 dark:text-white">{{ printer.name }}</h3>
                            <p class="text-sm text-slate-600 dark:text-slate-400">{{ printer.model }}</p>
                        </div>
                    </div>
                    
                    <!-- Status Indicator -->
                    <div class="flex flex-col items-end">
                        <div class="flex items-center space-x-2 mb-1">
                            <div class="status-indicator {{ 'status-online' if printer.plug_status == 'on' else 'status-offline' if printer.plug_status == 'off' else 'status-error' }}
                                        {{ 'pulse-animation' if printer.plug_status == 'on' else '' }}"></div>
                            <span class="text-sm font-medium 
                                         {{ 'text-green-600' if printer.plug_status == 'on' else 'text-gray-600' if printer.plug_status == 'off' else 'text-red-600' }}">
                                {% if printer.plug_status == 'on' %}
                                    Eingeschaltet
                                {% elif printer.plug_status == 'off' %}
                                    Ausgeschaltet
                                {% else %}
                                    Nicht erreichbar
                                {% endif %}
                            </span>
                        </div>
                        <span class="text-xs text-slate-500">{{ printer.plug_ip }}</span>
                    </div>
                </div>
                
                <!-- Details -->
                <div class="space-y-2 mb-4">
                    <div class="flex justify-between text-sm">
                        <span class="text-slate-600 dark:text-slate-400">Standort:</span>
                        <span class="text-slate-900 dark:text-white font-medium">{{ printer.location or 'Nicht angegeben' }}</span>
                    </div>
                    <div class="flex justify-between text-sm">
                        <span class="text-slate-600 dark:text-slate-400">Aktive Jobs:</span>
                        <span class="text-slate-900 dark:text-white font-medium">{{ printer.active_jobs }}</span>
                    </div>
                    <div class="flex justify-between text-sm">
                        <span class="text-slate-600 dark:text-slate-400">Letzte Prüfung:</span>
                        <span class="text-slate-900 dark:text-white font-medium">{{ printer.last_checked.strftime('%H:%M:%S') }}</span>
                    </div>
                </div>
                
                <!-- Warnungen -->
                {% if printer.has_issues %}
                <div class="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-3 mb-4">
                    <div class="flex items-start space-x-2">
                        <svg class="w-5 h-5 text-yellow-600 flex-shrink-0 mt-0.5" 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>
                            <p class="text-sm font-medium text-yellow-800 dark:text-yellow-200">Achtung:</p>
                            <ul class="text-sm text-yellow-700 dark:text-yellow-300 mt-1 list-disc list-inside">
                                {% if not printer.plug_reachable %}
                                <li>Steckdose nicht erreichbar</li>
                                {% endif %}
                                {% if printer.active_jobs > 0 %}
                                <li>{{ printer.active_jobs }} aktive Job(s) - Vorsicht beim Ausschalten</li>
                                {% endif %}
                                {% if printer.error %}
                                <li>{{ printer.error }}</li>
                                {% endif %}
                            </ul>
                        </div>
                    </div>
                </div>
                {% endif %}
                
                <!-- Aktionen -->
                <div class="flex space-x-2">
                    {% if printer.plug_reachable %}
                    <button class="toggle-single-btn flex-1 px-3 py-2 
                                   {{ 'bg-red-500 hover:bg-red-600' if printer.plug_status == 'on' else 'bg-green-500 hover:bg-green-600' }} 
                                   text-white rounded-lg text-sm font-medium transition-colors"
                            data-printer-id="{{ printer.id }}" 
                            data-action="{{ 'off' if printer.plug_status == 'on' else 'on' }}">
                        {% if printer.plug_status == 'on' %}
                            <svg class="w-4 h-4 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728L5.636 5.636m12.728 12.728L5.636 5.636"/>
                            </svg>
                            Ausschalten
                        {% else %}
                            <svg class="w-4 h-4 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
                            </svg>
                            Einschalten
                        {% endif %}
                    </button>
                    {% else %}
                    <button class="flex-1 px-3 py-2 bg-gray-400 text-white rounded-lg text-sm font-medium cursor-not-allowed" disabled>
                        Nicht verfügbar
                    </button>
                    {% endif %}
                    
                    <button class="configure-btn px-3 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg text-sm transition-colors"
                            data-printer-id="{{ printer.id }}" title="Konfiguration">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                        </svg>
                    </button>
                </div>
            </div>
            {% endfor %}
        </div>
        {% else %}
        <div class="text-center py-12">
            <svg class="w-16 h-16 text-slate-400 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
            </svg>
            <h3 class="text-lg font-medium text-slate-900 dark:text-white mb-2">Keine Tapo-Steckdosen konfiguriert</h3>
            <p class="text-slate-600 dark:text-slate-400 mb-4">
                Es wurden noch keine Drucker mit Tapo-Steckdosen eingerichtet.
            </p>
            <a href="{{ url_for('admin.printers_overview') }}" class="btn-primary inline-flex items-center">
                <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
                </svg>
                Drucker konfigurieren
            </a>
        </div>
        {% endif %}
    </div>
</div>

<!-- JavaScript für Live-Funktionalität -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    // CSRF Token abrufen
    const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
    
    // Utility Funktionen
    function showLoading() {
        document.getElementById('loading-overlay').style.display = 'flex';
    }
    
    function hideLoading() {
        document.getElementById('loading-overlay').style.display = 'none';
    }
    
    function showNotification(message, type = 'info') {
        // Notification System (könnte erweitert werden)
        alert(message); // Temporäre Lösung
    }
    
    // Checkbox Management
    const selectAllCheckbox = document.getElementById('select-all');
    const printerCheckboxes = document.querySelectorAll('.printer-checkbox');
    const selectedCountSpan = document.getElementById('selected-count');
    
    function updateSelectedCount() {
        const selectedCount = document.querySelectorAll('.printer-checkbox:checked').length;
        selectedCountSpan.textContent = `${selectedCount} Steckdosen ausgewählt`;
    }
    
    selectAllCheckbox.addEventListener('change', function() {
        printerCheckboxes.forEach(checkbox => {
            checkbox.checked = this.checked;
        });
        updateSelectedCount();
    });
    
    printerCheckboxes.forEach(checkbox => {
        checkbox.addEventListener('change', updateSelectedCount);
    });
    
    // Refresh Status
    document.getElementById('refresh-status-btn').addEventListener('click', function() {
        location.reload(); // Einfache Seiten-Aktualisierung
    });
    
    // Health Check
    document.getElementById('health-check-btn').addEventListener('click', async function() {
        showLoading();
        
        try {
            const response = await fetch('/api/admin/tapo/health-check', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRFToken': csrfToken
                }
            });
            
            const data = await response.json();
            
            if (data.success !== false) {
                const healthStatus = data.overall_status;
                let message = `Gesundheitscheck abgeschlossen:\n`;
                message += `Gesamtstatus: ${healthStatus}\n`;
                message += `Gesunde Steckdosen: ${data.summary.healthy}\n`;
                message += `Warnungen: ${data.summary.warning}\n`;
                message += `Kritische Probleme: ${data.summary.critical}\n`;
                
                if (data.recommendations.length > 0) {
                    message += `\nEmpfehlungen:\n${data.recommendations.join('\n')}`;
                }
                
                showNotification(message, healthStatus === 'healthy' ? 'success' : 'warning');
            } else {
                showNotification('Fehler beim Gesundheitscheck: ' + data.error, 'error');
            }
        } catch (error) {
            showNotification('Netzwerkfehler beim Gesundheitscheck: ' + error.message, 'error');
        } finally {
            hideLoading();
        }
    });
    
    // Bulk Actions
    async function performBulkAction(action) {
        const selectedCheckboxes = document.querySelectorAll('.printer-checkbox:checked');
        
        if (selectedCheckboxes.length === 0) {
            showNotification('Bitte wählen Sie mindestens eine Steckdose aus.', 'warning');
            return;
        }
        
        const printerIds = Array.from(selectedCheckboxes).map(cb => parseInt(cb.value));
        const printerNames = Array.from(selectedCheckboxes).map(cb => cb.dataset.printerName);
        
        if (!confirm(`Möchten Sie ${printerIds.length} Steckdosen wirklich ${action === 'on' ? 'einschalten' : 'ausschalten'}?\n\nBetroffene Drucker:\n${printerNames.join('\n')}`)) {
            return;
        }
        
        showLoading();
        
        try {
            const response = await fetch('/api/admin/tapo/bulk-control', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRFToken': csrfToken
                },
                body: JSON.stringify({
                    action: action,
                    printer_ids: printerIds
                })
            });
            
            const data = await response.json();
            
            if (data.success) {
                const summary = data.summary;
                showNotification(`Bulk-Aktion abgeschlossen:\n${summary.success} erfolgreich, ${summary.errors} Fehler`, 
                               summary.errors === 0 ? 'success' : 'warning');
                
                // Seite nach kurzer Verzögerung neu laden
                setTimeout(() => location.reload(), 2000);
            } else {
                showNotification('Fehler bei Bulk-Aktion: ' + data.error, 'error');
            }
        } catch (error) {
            showNotification('Netzwerkfehler bei Bulk-Aktion: ' + error.message, 'error');
        } finally {
            hideLoading();
        }
    }
    
    document.getElementById('bulk-on-btn').addEventListener('click', () => performBulkAction('on'));
    document.getElementById('bulk-off-btn').addEventListener('click', () => performBulkAction('off'));
    
    // Individual Toggle
    document.querySelectorAll('.toggle-single-btn').forEach(button => {
        button.addEventListener('click', async function() {
            const printerId = this.dataset.printerId;
            const action = this.dataset.action;
            
            showLoading();
            
            try {
                const response = await fetch('/api/admin/tapo/bulk-control', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRFToken': csrfToken
                    },
                    body: JSON.stringify({
                        action: action,
                        printer_ids: [parseInt(printerId)]
                    })
                });
                
                const data = await response.json();
                
                if (data.success && data.results[0].success) {
                    showNotification(data.results[0].message, 'success');
                    setTimeout(() => location.reload(), 1000);
                } else {
                    showNotification('Fehler: ' + (data.results[0].error || data.error), 'error');
                }
            } catch (error) {
                showNotification('Netzwerkfehler: ' + error.message, 'error');
            } finally {
                hideLoading();
            }
        });
    });
    
    // Configuration Buttons (placeholder)
    document.querySelectorAll('.configure-btn').forEach(button => {
        button.addEventListener('click', function() {
            const printerId = this.dataset.printerId;
            showNotification(`Konfiguration für Drucker ${printerId} wird geöffnet...`, 'info');
            // Hier könnte ein Modal oder eine neue Seite geöffnet werden
        });
    });
});
</script>
{% endblock %}