{% extends "base.html" %}

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

{% block head %}
{{ super() }}
<!-- KEIN JavaScript für Steuerung - nur CSS für Styling! -->
<style>
.drucker-card {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border: 2px solid #f1f5f9;
    border-radius: 16px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}
.drucker-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    border-color: #0073ce;
}
.status-online {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
}
.status-offline {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
}
.steuerung-button {
    transition: all 0.3s ease;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    cursor: pointer;
}
.steuerung-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.btn-einschalten {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
}
.btn-ausschalten {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
}
.btn-toggle {
    background: linear-gradient(135deg, #0073ce 0%, #005ba3 100%);
    color: white;
}
.btn-notfall {
    background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
    color: white;
}
.stats-card {
    background: linear-gradient(135deg, #0073ce 0%, #005ba3 100%);
    color: white;
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
}
</style>
{% endblock %}

{% block content %}
<div class="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50 dark:from-slate-900 dark:to-slate-800">
    
    <!-- Hero Header -->
    <div class="relative overflow-hidden bg-gradient-to-r from-slate-900 via-blue-900 to-indigo-900 text-white rounded-3xl mx-4 mt-4">
        <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">
                <div class="inline-flex items-center justify-center w-16 h-16 bg-white/10 backdrop-blur-sm rounded-full mb-4">
                    <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="M17 14v6m-3-3h6M6 10h2a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v2a2 2 0 002 2zm10 0h2a2 2 0 002-2V6a2 2 0 00-2-2h-2a2 2 0 00-2 2v2a2 2 0 002 2zM6 20h2a2 2 0 002-2v-2a2 2 0 00-2-2H6a2 2 0 00-2 2v2a2 2 0 002 2z"/>
                    </svg>
                </div>
                <h1 class="text-4xl md:text-5xl font-bold mb-4">{{ seiten_titel }}</h1>
                <p class="text-xl text-blue-100 mb-6">Backend-gesteuerte Drucker-Verwaltung über Tapo-Steckdosen</p>
                
                <!-- System-Status -->
                <div class="inline-flex items-center space-x-2 bg-white/10 backdrop-blur-sm border border-white/20 rounded-full px-4 py-2">
                    {% if system_status == 'healthy' %}
                        <div class="w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
                        <span class="text-sm font-medium">System Gesund</span>
                    {% elif system_status == 'warning' %}
                        <div class="w-2 h-2 bg-yellow-400 rounded-full animate-pulse"></div>
                        <span class="text-sm font-medium">System Warnung</span>
                    {% else %}
                        <div class="w-2 h-2 bg-red-400 rounded-full animate-pulse"></div>
                        <span class="text-sm font-medium">System Fehler</span>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    <!-- Hauptinhalt -->
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        
        <!-- Statistiken-Übersicht -->
        <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
            <div class="stats-card">
                <h3 class="text-sm font-semibold uppercase tracking-wider mb-2">Gesamt</h3>
                <p class="text-3xl font-bold">{{ stats.gesamt_drucker or 0 }}</p>
                <p class="text-sm opacity-80">Drucker registriert</p>
            </div>
            <div class="stats-card">
                <h3 class="text-sm font-semibold uppercase tracking-wider mb-2">Online</h3>
                <p class="text-3xl font-bold text-green-200">{{ stats.online_drucker or 0 }}</p>
                <p class="text-sm opacity-80">Aktuell eingeschaltet</p>
            </div>
            <div class="stats-card">
                <h3 class="text-sm font-semibold uppercase tracking-wider mb-2">Offline</h3>
                <p class="text-3xl font-bold text-red-200">{{ stats.offline_drucker or 0 }}</p>
                <p class="text-sm opacity-80">Aktuell ausgeschaltet</p>
            </div>
            <div class="stats-card">
                <h3 class="text-sm font-semibold uppercase tracking-wider mb-2">Verfügbarkeit</h3>
                <p class="text-3xl font-bold">{{ stats.verfügbarkeits_rate or 0 }}%</p>
                <p class="text-sm opacity-80">Durchschnittlich</p>
            </div>
        </div>
        
        <!-- Steuerungs-Aktionen -->
        {% if benutzer_kann_steuern %}
        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6 mb-8">
            <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-4">🎮 System-Steuerung</h3>
            <div class="flex flex-wrap gap-4">
                
                <!-- Status aktualisieren -->
                <a href="{{ url_for('drucker.status_refresh') }}" class="steuerung-button btn-toggle">
                    🔄 Status aktualisieren
                </a>
                
                <!-- Notfall-Shutdown (nur für Admins) -->
                {% if current_user.is_admin %}
                <form method="POST" action="{{ url_for('drucker.alle_drucker_ausschalten') }}" style="display: inline;">
                    <button type="submit" class="steuerung-button btn-notfall" 
                            onclick="return confirm('🚨 ACHTUNG: Alle Drucker werden ausgeschaltet! Fortfahren?')">
                        🚨 ALLE AUSSCHALTEN
                    </button>
                </form>
                {% endif %}
                
                <!-- Letzte Aktualisierung -->
                <div class="flex items-center text-gray-600 dark:text-gray-400 ml-4">
                    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                    <span class="text-sm">Letztes Update: {{ letztes_update }}</span>
                </div>
            </div>
        </div>
        {% endif %}
        
        <!-- Drucker-Liste -->
        {% if drucker %}
        <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-6">
            {% for drucker_item in drucker %}
            <div class="drucker-card p-6">
                
                <!-- Drucker-Header -->
                <div class="flex items-center justify-between mb-4">
                    <div>
                        <h3 class="text-xl font-bold text-gray-900 dark:text-white">{{ drucker_item.name }}</h3>
                        <p class="text-sm text-gray-600 dark:text-gray-400">{{ drucker_item.model }}</p>
                    </div>
                    <div class="text-right">
                        <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium 
                                     {% if drucker_item.status == 'online' %}status-online{% else %}status-offline{% endif %}">
                            {{ drucker_item.status_icon }} {{ drucker_item.status_text }}
                        </span>
                    </div>
                </div>
                
                <!-- Drucker-Informationen -->
                <div class="space-y-2 mb-4">
                    <div class="flex justify-between text-sm">
                        <span class="text-gray-600 dark:text-gray-400">Standort:</span>
                        <span class="font-medium">{{ drucker_item.location }}</span>
                    </div>
                    {% if drucker_item.plug_ip %}
                    <div class="flex justify-between text-sm">
                        <span class="text-gray-600 dark:text-gray-400">Steckdose:</span>
                        <span class="font-medium">{{ drucker_item.plug_ip }}</span>
                    </div>
                    {% endif %}
                    <div class="flex justify-between text-sm">
                        <span class="text-gray-600 dark:text-gray-400">Aktuelle Leistung:</span>
                        <span class="font-medium">{{ drucker_item.current_power }} W</span>
                    </div>
                    <div class="flex justify-between text-sm">
                        <span class="text-gray-600 dark:text-gray-400">Verbrauch heute:</span>
                        <span class="font-medium">{{ drucker_item.daily_consumption }} kWh</span>
                    </div>
                </div>
                
                <!-- Steuerungs-Buttons -->
                {% if benutzer_kann_steuern and drucker_item.kann_gesteuert_werden %}
                <div class="flex flex-wrap gap-2">
                    
                    <!-- Toggle-Button (Ein/Aus) -->
                    <form method="POST" action="{{ url_for('drucker.drucker_toggle', drucker_id=drucker_item.id) }}" style="display: inline;">
                        <button type="submit" class="steuerung-button btn-toggle flex-1">
                            {{ drucker_item.toggle_text }}
                        </button>
                    </form>
                    
                    <!-- Separate Ein/Aus-Buttons -->
                    <div class="flex gap-2 w-full mt-2">
                        <form method="POST" action="{{ url_for('drucker.drucker_einschalten', drucker_id=drucker_item.id) }}" class="flex-1">
                            <button type="submit" class="steuerung-button btn-einschalten w-full text-sm"
                                    {% if drucker_item.status == 'online' %}disabled{% endif %}>
                                🟢 Ein
                            </button>
                        </form>
                        
                        <form method="POST" action="{{ url_for('drucker.drucker_ausschalten', drucker_id=drucker_item.id) }}" class="flex-1">
                            <button type="submit" class="steuerung-button btn-ausschalten w-full text-sm"
                                    {% if drucker_item.status == 'offline' %}disabled{% endif %}>
                                🔴 Aus
                            </button>
                        </form>
                    </div>
                    
                    <!-- Details-Link -->
                    <a href="{{ url_for('drucker.drucker_details', drucker_id=drucker_item.id) }}" 
                       class="text-blue-600 hover:text-blue-800 text-sm font-medium mt-2 block text-center">
                        📊 Details anzeigen
                    </a>
                </div>
                {% else %}
                <div class="text-center py-4">
                    {% if not drucker_item.kann_gesteuert_werden %}
                        <p class="text-gray-500 text-sm">⚠️ Keine Steckdose konfiguriert</p>
                    {% else %}
                        <p class="text-gray-500 text-sm">🔒 Keine Berechtigung</p>
                    {% endif %}
                </div>
                {% endif %}
            </div>
            {% endfor %}
        </div>
        {% else %}
        <!-- Keine Drucker -->
        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-12 text-center">
            <svg class="w-16 h-16 text-gray-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="M17 14v6m-3-3h6M6 10h2a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v2a2 2 0 002 2zm10 0h2a2 2 0 002-2V6a2 2 0 00-2-2h-2a2 2 0 00-2 2v2a2 2 0 002 2zM6 20h2a2 2 0 002-2v-2a2 2 0 00-2-2H6a2 2 0 00-2 2v2a2 2 0 002 2z"/>
            </svg>
            <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">Keine Drucker gefunden</h3>
            <p class="text-gray-600 dark:text-gray-400">Es sind noch keine Drucker im System registriert.</p>
            {% if error %}
            <div class="mt-4 p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
                <p class="text-red-600 dark:text-red-400 text-sm">Fehler: {{ error }}</p>
            </div>
            {% endif %}
        </div>
        {% endif %}
        
        <!-- Energie-Übersicht -->
        {% if stats and stats.gesamt_verbrauch %}
        <div class="mt-8 bg-white dark:bg-gray-800 rounded-xl shadow-md p-6">
            <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-4">⚡ Energie-Übersicht</h3>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <div class="text-center">
                    <p class="text-2xl font-bold text-blue-600">{{ stats.gesamt_verbrauch }} kWh</p>
                    <p class="text-sm text-gray-600 dark:text-gray-400">Gesamtverbrauch heute</p>
                </div>
                <div class="text-center">
                    <p class="text-2xl font-bold text-green-600">{{ stats.aktuelle_leistung }} W</p>
                    <p class="text-sm text-gray-600 dark:text-gray-400">Aktuelle Gesamtleistung</p>
                </div>
                <div class="text-center">
                    <p class="text-2xl font-bold text-yellow-600">{{ stats.geschätzte_kosten }} €</p>
                    <p class="text-sm text-gray-600 dark:text-gray-400">Geschätzte Kosten heute</p>
                </div>
            </div>
        </div>
        {% endif %}
        
        <!-- System-Info -->
        <div class="mt-8 bg-gray-50 dark:bg-gray-900 rounded-xl p-6">
            <div class="flex items-center justify-between text-sm text-gray-600 dark:text-gray-400">
                <div class="flex items-center space-x-4">
                    <span>🔌 Tapo-Integration: {{ "✅ Verfügbar" if tapo_verfügbar else "❌ Nicht verfügbar" }}</span>
                    <span>📡 Backend-Kontrolle: ✅ Aktiv</span>
                    <span>🚫 JavaScript: ❌ Deaktiviert</span>
                </div>
                <div class="text-right">
                    <span>Zeitstempel: {{ timestamp }}</span>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- KEIN JavaScript - nur reines HTML/CSS/Flask! -->
{% endblock %}