{% extends "base.html" %}

{% block title %}Dashboard - Mercedes-Benz MYP Platform{% endblock %}

{% block extra_css %}
<style>
    /* Professional Mercedes-Benz Dashboard Styles */
    .mb-dashboard-card {
        background: white;
        border: 1px solid #e5e7eb;
        border-radius: 16px;
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        overflow: hidden;
    }
    
    .dark .mb-dashboard-card {
        background: var(--mb-black, #000000); /* Schwarzer Hintergrund im Dark Mode */
        border-color: var(--border-primary, #334155);
    }
    
    .mb-dashboard-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    }
    
    .dark .mb-dashboard-card:hover {
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
    }
    
    .mb-stat-card {
        background: linear-gradient(135deg, #f0f9ff 0%, #e6f2ff 100%);
        color: #0f172a;
        position: relative;
        overflow: hidden;
        border: none;
    }
    
    .dark .mb-stat-card {
        background: linear-gradient(135deg, #000000 0%, #111827 100%); /* Mercedes Schwarz */
        color: var(--text-primary, #f8fafc);
    }
    
    .mb-stat-card::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(0, 114, 206, 0.1) 0%, transparent 70%);
        animation: pulse-glow 4s ease-in-out infinite;
    }
    
    .dark .mb-stat-card::before {
        background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, transparent 70%); /* Subtle glow for dark */
    }
    
    @keyframes pulse-glow {
        0%, 100% { opacity: 0.5; transform: scale(1); }
        50% { opacity: 0.8; transform: scale(1.05); }
    }
    
    .mb-stat-icon {
        background: rgba(0, 0, 0, 0.1); /* Schwarz statt Blau */
        backdrop-filter: blur(10px);
        border-radius: 16px;
        padding: 16px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: relative;
        z-index: 10;
        transition: all 0.3s ease;
    }
    
    .dark .mb-stat-icon {
        background: rgba(255, 255, 255, 0.1); /* Lighter icon background for contrast */
    }
    
    .mb-stat-card:hover .mb-stat-icon {
        transform: scale(1.1);
        background: rgba(0, 0, 0, 0.2); /* Schwarz statt Blau */
    }
    
    .dark .mb-stat-card:hover .mb-stat-icon {
        background: rgba(255, 255, 255, 0.15);
    }
    
    .mb-status-indicator {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        position: relative;
        display: inline-block;
    }
    
    .mb-status-indicator::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        animation: status-pulse 2s infinite;
    }
    
    .mb-status-online {
        background: #10b981;
    }
    
    .mb-status-online::after {
        background: #10b981;
    }
    
    .mb-status-busy {
        background: #f59e0b;
    }
    
    .mb-status-busy::after {
        background: #f59e0b;
    }
    
    .mb-status-offline {
        background: #ef4444;
    }
    
    .mb-status-offline::after {
        background: #ef4444;
    }
    
    .mb-status-idle {
        background: #6b7280;
    }
    
    .mb-status-idle::after {
        background: #6b7280;
    }
    
    @keyframes status-pulse {
        0% { transform: scale(1); opacity: 1; }
        50% { transform: scale(1.5); opacity: 0.5; }
        100% { transform: scale(2); opacity: 0; }
    }
    
    .mb-progress-container {
        background: #f3f4f6;
        height: 8px;
        border-radius: 4px;
        overflow: hidden;
        position: relative;
    }
    
    .dark .mb-progress-container {
        background: #374151;
    }
    
    .mb-progress-bar {
        background: linear-gradient(90deg, #000000 0%, #333333 100%); /* Schwarz statt Blau */
        height: 100%;
        border-radius: 4px;
        transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        overflow: hidden;
    }
    
    .dark .mb-progress-bar {
        background: linear-gradient(90deg, #f3f4f6 0%, #e5e7eb 100%);
    }
    
    .mb-progress-bar::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
        animation: progress-shine 2s infinite;
    }
    
    @keyframes progress-shine {
        0% { transform: translateX(-100%); }
        100% { transform: translateX(100%); }
    }
    
    .mb-activity-item {
        border-left: 4px solid #000000; /* Schwarz statt Blau */
        background: linear-gradient(90deg, rgba(0, 0, 0, 0.05) 0%, transparent 100%); /* Schwarz statt Blau */
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        border-radius: 0 8px 8px 0;
    }
    
    .dark .mb-activity-item {
        border-left-color: #f3f4f6;
        background: linear-gradient(90deg, rgba(255, 255, 255, 0.02) 0%, transparent 100%);
    }
    
    /* Light/Dark Mode compatible cards */
    .glass-card-light {
        background: rgba(255, 255, 255, 0.7);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1px solid rgba(229, 231, 235, 0.8);
        border-radius: 12px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        transition: all 0.3s ease;
    }

    .dark .glass-card-light {
        background: rgba(0, 0, 0, 0.8);
        border-color: rgba(100, 116, 139, 0.3);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    }
    
    .section-title {
        color: #1e293b;
        font-size: 1.25rem;
        font-weight: 600;
        margin-bottom: 1rem;
    }
    
    .dark .section-title {
        color: #ffffff;
    }
    
    .stat-value {
        color: #0f172a;
        font-weight: 700;
        font-size: 1.5rem;
    }
    
    .dark .stat-value {
        color: #ffffff;
    }
    
    .stat-label {
        color: #64748b;
        font-size: 0.875rem;
    }
    
    .dark .stat-label {
        color: #94a3b8;
    }
</style>
{% endblock %}

{% block content %}
<div class="space-y-8">
    <!-- Dashboard Header Card -->
    <div class="dashboard-card p-6">
        <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-6">
            <div class="flex items-center gap-6">
                <div class="w-16 h-16 flex-shrink-0">
                    <svg class="w-full h-full text-slate-900 dark:text-white" fill="currentColor" viewBox="0 0 80 80" aria-hidden="true">
                        <path d="M58.6,4.5C53,1.6,46.7,0,40,0c-6.7,0-13,1.6-18.6,4.5v0C8.7,11.2,0,24.6,0,40c0,15.4,8.7,28.8,21.5,35.5
                        C27,78.3,33.3,80,40,80c6.7,0,12.9-1.7,18.5-4.6C71.3,68.8,80,55.4,80,40C80,24.6,71.3,11.2,58.6,4.5z M4,40
                        c0-13.1,7-24.5,17.5-30.9v0C26.6,6,32.5,4.2,39,4l-4.5,32.7L21.5,46.8v0L8.3,57.1C5.6,52,4,46.2,4,40z M58.6,70.8
                        C53.1,74.1,46.8,76,40,76c-6.8,0-13.2-1.9-18.6-5.2c-4.9-2.9-8.9-6.9-11.9-11.7l11.9-4.9v0L40,46.6l18.6,7.5v0l12,4.9
                        C67.6,63.9,63.4,67.9,58.6,70.8z M58.6,46.8L58.6,46.8l-12.9-10L41.1,4c6.3,0.2,12.3,2,17.4,5.1v0C69,15.4,76,26.9,76,40
                        c0,6.2-1.5,12-4.3,17.1L58.6,46.8z"/>
                    </svg>
                </div>
                <div>
                    <h1 class="text-3xl font-bold text-slate-900 dark:text-white tracking-tight">Dashboard</h1>
                    <p class="text-slate-500 dark:text-slate-400 mt-1">Übersicht über Ihre 3D-Druck Aktivitäten</p>
                </div>
            </div>
            <div class="flex flex-wrap gap-3">
                <button id="refreshDashboard" 
                        class="btn-secondary flex items-center gap-2">
                    <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <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>Aktualisieren</span>
                </button>
                <a href="{{ url_for('jobs_page') }}" 
                   class="btn-primary flex items-center gap-2">
                    <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
                    </svg>
                    <span>Neuer Auftrag</span>
                </a>
                <a href="{{ url_for('guest.guest_requests_overview') }}" 
                   class="btn-secondary flex items-center gap-2">
                    <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                    </svg>
                    <span>Anträge Übersicht</span>
                </a>
            </div>
        </div>
    </div>

    <!-- Stats Overview Cards -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        <!-- Active Jobs Card -->
        <div class="dashboard-card p-6">
            <div class="flex justify-between">
                <div>
                    <h3 class="stat-label">Aktive Aufträge</h3>
                    <div class="stat-value">{{ active_jobs_count }}</div>
                </div>
                <div class="mb-stat-icon text-slate-900 dark:text-white">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
                    </svg>
                </div>
            </div>
        </div>

        <!-- Available Printers Card -->
        <div class="dashboard-card p-6">
            <div class="flex justify-between">
                <div>
                    <h3 class="stat-label">Verfügbare Drucker</h3>
                    <div class="stat-value">{{ available_printers_count }}</div>
                </div>
                <div class="mb-stat-icon text-green-600 dark:text-green-400">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01" />
                    </svg>
                </div>
            </div>
        </div>

        <!-- Total Jobs Card -->
        <div class="dashboard-card p-6">
            <div class="flex justify-between">
                <div>
                    <h3 class="stat-label">Aufträge (gesamt)</h3>
                    <div class="stat-value">{{ total_jobs_count }}</div>
                </div>
                <div class="mb-stat-icon text-purple-600 dark:text-purple-400">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                    </svg>
                </div>
            </div>
        </div>

        <!-- Success Rate Card -->
        <div class="dashboard-card p-6">
            <div class="flex justify-between">
                <div>
                    <h3 class="stat-label">Erfolgsrate</h3>
                    <div class="stat-value">{{ success_rate }}%</div>
                </div>
                <div class="mb-stat-icon text-amber-600 dark:text-amber-400">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
                    </svg>
                </div>
            </div>
        </div>
    </div>

    <!-- Active Jobs Section -->
    <div class="dashboard-card p-6">
        <h2 class="section-title">Aktuelle Druckaufträge</h2>
        <div class="overflow-hidden">
            <table class="min-w-full divide-y divide-gray-200 dark:divide-slate-700">
                <thead>
                    <tr class="text-left text-xs font-medium text-slate-500 dark:text-slate-400 uppercase tracking-wider">
                        <th class="px-6 py-3">Status</th>
                        <th class="px-6 py-3">Auftrag</th>
                        <th class="px-6 py-3">Drucker</th>
                        <th class="px-6 py-3">Startzeit</th>
                        <th class="px-6 py-3">Fortschritt</th>
                        <th class="px-6 py-3">Aktionen</th>
                    </tr>
                </thead>
                <tbody class="bg-white dark:bg-slate-800 divide-y divide-gray-200 dark:divide-slate-700">
                    {% if active_jobs and active_jobs|length > 0 %}
                        {% for job in active_jobs %}
                        <tr class="hover:bg-gray-50 dark:hover:bg-slate-700/50">
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="flex items-center">
                                    <div class="mb-status-indicator {{ job.status_class }}"></div>
                                    <span class="ml-2 text-sm font-medium text-slate-700 dark:text-slate-300">
                                        {{ job.status_text }}
                                    </span>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm font-medium text-slate-900 dark:text-white">{{ job.name }}</div>
                                <div class="text-xs text-slate-500 dark:text-slate-400">{{ job.file_name }}</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm text-slate-700 dark:text-slate-300">{{ job.printer }}</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm text-slate-700 dark:text-slate-300">{{ job.start_time }}</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="mb-progress-container">
                                    <div class="mb-progress-bar" style="width: {{ job.progress }}%"></div>
                                </div>
                                <div class="text-xs text-right mt-1 text-slate-500 dark:text-slate-400">{{ job.progress }}%</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-right">
                                <a href="{{ url_for('job_detail', job_id=job.id) }}" class="text-slate-900 dark:text-white hover:text-slate-700 dark:hover:text-slate-300 font-medium">Details</a>
                            </td>
                        </tr>
                        {% endfor %}
                    {% else %}
                        <tr>
                            <td colspan="6" class="px-6 py-8 text-center">
                                <div class="text-slate-500 dark:text-slate-400">
                                    <svg class="w-12 h-12 mx-auto mb-3 text-slate-400 dark:text-slate-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
                                    </svg>
                                    <p class="text-slate-700 dark:text-slate-300 font-medium mb-1">Keine aktiven Druckaufträge</p>
                                    <p class="text-slate-500 dark:text-slate-400 text-sm">Starten Sie einen neuen Druckauftrag, um ihn hier zu sehen.</p>
                                </div>
                            </td>
                        </tr>
                    {% endif %}
                </tbody>
            </table>
        </div>
        <div class="mt-4 text-right">
            <a href="{{ url_for('jobs_page') }}" class="text-slate-900 dark:text-white hover:text-slate-700 dark:hover:text-slate-300 text-sm font-medium">
                Alle Druckaufträge anzeigen →
            </a>
        </div>
    </div>

    <!-- Last Row: Printer Status and Recent Activity -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
        <!-- Available Printers -->
        <div class="dashboard-card p-6">
            <h2 class="section-title">Druckerstatus</h2>
            <div class="space-y-4">
                {% if printers and printers|length > 0 %}
                    {% for printer in printers %}
                    <div class="flex items-center justify-between p-4 rounded-xl bg-gray-50 dark:bg-slate-700/30">
                        <div class="flex items-center">
                            <div class="mb-status-indicator {{ printer.status_class }} mr-3"></div>
                            <div>
                                <div class="text-sm font-medium text-slate-900 dark:text-white">{{ printer.name }}</div>
                                <div class="text-xs text-slate-500 dark:text-slate-400">{{ printer.model }}</div>
                            </div>
                        </div>
                        <div class="text-right">
                            <div class="text-sm font-medium text-slate-700 dark:text-slate-300">{{ printer.status_text }}</div>
                            <div class="text-xs text-slate-500 dark:text-slate-400">{{ printer.location }}</div>
                        </div>
                    </div>
                    {% endfor %}
                {% else %}
                    <div class="text-center py-8">
                        <svg class="w-12 h-12 mx-auto mb-3 text-slate-400 dark:text-slate-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01" />
                        </svg>
                        <p class="text-slate-700 dark:text-slate-300 font-medium mb-1">Keine Drucker gefunden</p>
                        <p class="text-slate-500 dark:text-slate-400 text-sm">Prüfen Sie die Verbindung oder fügen Sie Drucker hinzu.</p>
                    </div>
                {% endif %}
            </div>
            <div class="mt-4 text-right">
                <a href="{{ url_for('printers_page') }}" class="text-slate-900 dark:text-white hover:text-slate-700 dark:hover:text-slate-300 text-sm font-medium">
                    Alle Drucker anzeigen →
                </a>
            </div>
        </div>

        <!-- Recent Activity -->
        <div class="dashboard-card p-6">
            <h2 class="section-title">Letzte Aktivitäten</h2>
            <div class="space-y-3">
                {% if activities and activities|length > 0 %}
                    {% for activity in activities %}
                    <div class="mb-activity-item pl-4 py-3">
                        <div class="flex items-center justify-between">
                            <div class="flex-1">
                                <p class="text-sm text-slate-700 dark:text-slate-300">{{ activity.description }}</p>
                                <p class="text-xs text-slate-500 dark:text-slate-400">{{ activity.time }}</p>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                {% else %}
                    <div class="text-center py-8">
                        <svg class="w-12 h-12 mx-auto mb-3 text-slate-400 dark:text-slate-500" 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>
                        <p class="text-slate-700 dark:text-slate-300 font-medium mb-1">Keine Aktivitäten</p>
                        <p class="text-slate-500 dark:text-slate-400 text-sm">Ihre Aktivitäten werden hier angezeigt.</p>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    class DashboardManager {
        constructor() {
            this.updateInterval = 30000; // 30 Sekunden
            this.autoUpdateTimer = null;
            this.isUpdating = false;
            this.wsConnection = null;
            
            this.init();
        }
        
        init() {
            this.setupEventListeners();
            this.setupAutoUpdate();
            this.setupWebSocket();
            this.animateCounters();
            console.log('🚀 Dashboard Manager initialisiert');
        }
        
        setupEventListeners() {
        // Refresh Button
        const refreshBtn = document.getElementById('refreshDashboard');
        if (refreshBtn) {
                refreshBtn.addEventListener('click', () => {
                    this.refreshDashboard();
                });
            }
            
            // Job-Zeilen klickbar machen für Details
            this.setupJobRowClicks();
            
            // Drucker-Karten klickbar machen
            this.setupPrinterClicks();
            
            // Dark Mode Updates
            window.addEventListener('darkModeChanged', (e) => {
                this.updateThemeElements(e.detail.isDark);
            });
            
            // Visibility Change Detection für intelligente Updates
            document.addEventListener('visibilitychange', () => {
                if (document.hidden) {
                    this.pauseAutoUpdate();
                } else {
                    this.resumeAutoUpdate();
                    this.refreshDashboard(); // Einmalige Aktualisierung bei Rückkehr
                }
            });
        }
        
        setupJobRowClicks() {
            const jobRows = document.querySelectorAll('tbody tr[data-job-id]');
            jobRows.forEach(row => {
                row.style.cursor = 'pointer';
                row.addEventListener('click', () => {
                    const jobId = row.dataset.jobId;
                    if (jobId) {
                        window.location.href = `/jobs/${jobId}`;
                    }
                });
                
                // Hover-Effekt verstärken
                row.addEventListener('mouseenter', () => {
                    row.style.transform = 'scale(1.01)';
                    row.style.transition = 'transform 0.2s ease';
                });
                
                row.addEventListener('mouseleave', () => {
                    row.style.transform = 'scale(1)';
                });
            });
        }
        
        setupPrinterClicks() {
            const printerCards = document.querySelectorAll('[data-printer-id]');
            printerCards.forEach(card => {
                card.style.cursor = 'pointer';
                card.addEventListener('click', () => {
                    const printerId = card.dataset.printerId;
                    if (printerId) {
                        window.location.href = `/printers/${printerId}`;
                    }
                });
            });
        }
        
        setupAutoUpdate() {
            this.autoUpdateTimer = setInterval(() => {
                if (!document.hidden && !this.isUpdating) {
                    this.updateDashboardData();
                }
            }, this.updateInterval);
        }
        
        pauseAutoUpdate() {
            if (this.autoUpdateTimer) {
                clearInterval(this.autoUpdateTimer);
                this.autoUpdateTimer = null;
            }
        }
        
        resumeAutoUpdate() {
            if (!this.autoUpdateTimer) {
                this.setupAutoUpdate();
            }
        }
        
        setupWebSocket() {
            // WebSocket für Real-time Updates
            try {
                const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
                const wsUrl = `${protocol}//${window.location.host}/ws/dashboard`;
                
                this.wsConnection = new WebSocket(wsUrl);
                
                this.wsConnection.onopen = () => {
                    console.log('📡 WebSocket Verbindung zu Dashboard hergestellt');
                };
                
                this.wsConnection.onmessage = (event) => {
                    try {
                        const data = JSON.parse(event.data);
                        this.handleWebSocketUpdate(data);
                    } catch (error) {
                        console.error('Fehler beim Verarbeiten der WebSocket-Nachricht:', error);
                    }
                };
                
                this.wsConnection.onclose = () => {
                    console.log('📡 WebSocket Verbindung geschlossen - versuche Wiederverbindung in 5s');
                    setTimeout(() => {
                        this.setupWebSocket();
                    }, 5000);
                };
                
                this.wsConnection.onerror = (error) => {
                    console.error('WebSocket Fehler:', error);
                };
                
            } catch (error) {
                console.log('WebSocket nicht verfügbar, verwende Polling-Updates');
            }
        }
        
        handleWebSocketUpdate(data) {
            console.log('📡 Erhaltenes WebSocket-Update:', data);
            
            switch (data.type) {
                case 'job_status_update':
                    this.updateJobStatus(data.job_id, data.status, data.progress);
                    break;
                case 'printer_status_update':
                    this.updatePrinterStatus(data.printer_id, data.status);
                    break;
                case 'new_activity':
                    this.addNewActivity(data.activity);
                    break;
                case 'stats_update':
                    this.updateStats(data.stats);
                    break;
                default:
                    console.log('Unbekannter WebSocket-Update-Typ:', data.type);
            }
        }
        
        async refreshDashboard() {
            if (this.isUpdating) return;
            
            this.isUpdating = true;
            const refreshBtn = document.getElementById('refreshDashboard');
            
            try {
                // Button-Status aktualisieren
                if (refreshBtn) {
                    refreshBtn.disabled = true;
                    refreshBtn.innerHTML = `
                        <svg class="w-5 h-5 animate-spin" fill="none" viewBox="0 0 24 24">
                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                        </svg>
                        <span>Aktualisiert...</span>
                    `;
                }
                
                // Vollständige Seitenaktualisierung
                window.location.reload();
                
            } catch (error) {
                console.error('Fehler beim Aktualisieren:', error);
                this.showToast('Fehler beim Aktualisieren des Dashboards', 'error');
            } finally {
                this.isUpdating = false;
                
                // Button zurücksetzen
                if (refreshBtn) {
                    refreshBtn.disabled = false;
                    refreshBtn.innerHTML = `
                        <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <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>Aktualisieren</span>
                    `;
                }
            }
        }
        
        async updateDashboardData() {
            if (this.isUpdating) return;
            
            this.isUpdating = true;
            
            try {
                // Stille Hintergrund-Updates ohne vollständige Neuladen
                const responses = await Promise.all([
                    fetch('/api/dashboard/stats'),
                    fetch('/api/dashboard/active-jobs'),
                    fetch('/api/dashboard/printers'),
                    fetch('/api/dashboard/activities')
                ]);
                
                const [statsData, jobsData, printersData, activitiesData] = await Promise.all(
                    responses.map(r => r.json())
                );
                
                // UI-Updates
                this.updateStats(statsData);
                this.updateActiveJobs(jobsData);
                this.updatePrinters(printersData);
                this.updateActivities(activitiesData);
                
                console.log('🔄 Dashboard-Daten erfolgreich aktualisiert');
                
            } catch (error) {
                console.error('Fehler beim Laden der Dashboard-Daten:', error);
                // Fehlschlag stumm - verwende WebSocket oder warte auf nächste Aktualisierung
            } finally {
                this.isUpdating = false;
            }
        }
        
        updateJobStatus(jobId, status, progress) {
            const jobRow = document.querySelector(`tr[data-job-id="${jobId}"]`);
            if (jobRow) {
                // Status-Indikator aktualisieren
                const statusIndicator = jobRow.querySelector('.mb-status-indicator');
                const statusText = jobRow.querySelector('.text-sm.font-medium');
                const progressBar = jobRow.querySelector('.mb-progress-bar');
                const progressText = jobRow.querySelector('.text-xs.text-right');
                
                if (statusIndicator) {
                    statusIndicator.className = `mb-status-indicator ${this.getStatusClass(status)}`;
                }
                
                if (statusText) {
                    statusText.textContent = this.getStatusText(status);
                }
                
                if (progressBar && progress !== undefined) {
                    progressBar.style.width = `${progress}%`;
                }
                
                if (progressText && progress !== undefined) {
                    progressText.textContent = `${progress}%`;
                }
                
                // Animation für Updates
                jobRow.style.backgroundColor = 'rgba(59, 130, 246, 0.1)';
                setTimeout(() => {
                    jobRow.style.backgroundColor = '';
                }, 1000);
            }
        }
        
        updatePrinterStatus(printerId, status) {
            const printerCard = document.querySelector(`[data-printer-id="${printerId}"]`);
            if (printerCard) {
                const statusIndicator = printerCard.querySelector('.mb-status-indicator');
                const statusText = printerCard.querySelector('.text-sm.font-medium:last-child');
                
                if (statusIndicator) {
                    statusIndicator.className = `mb-status-indicator ${this.getStatusClass(status)}`;
                }
                
                if (statusText) {
                    statusText.textContent = this.getStatusText(status);
                }
                
                // Animation für Updates
                printerCard.style.transform = 'scale(1.02)';
                setTimeout(() => {
                    printerCard.style.transform = 'scale(1)';
                }, 300);
            }
        }
        
        addNewActivity(activity) {
            const activitiesContainer = document.querySelector('.space-y-3');
            if (activitiesContainer) {
                const newActivity = document.createElement('div');
                newActivity.className = 'mb-activity-item pl-4 py-3 opacity-0';
                newActivity.innerHTML = `
                    <div class="flex items-center justify-between">
                        <div class="flex-1">
                            <p class="text-sm text-slate-700 dark:text-slate-300">${activity.description}</p>
                            <p class="text-xs text-slate-500 dark:text-slate-400">${activity.time}</p>
                        </div>
                    </div>
                `;
                
                // Am Anfang einfügen
                activitiesContainer.insertBefore(newActivity, activitiesContainer.firstChild);
                
                // Animation
                setTimeout(() => {
                    newActivity.style.opacity = '1';
                    newActivity.style.transition = 'opacity 0.5s ease';
                }, 100);
                
                // Alte Aktivitäten entfernen (max 10)
                const activities = activitiesContainer.querySelectorAll('.mb-activity-item');
                if (activities.length > 10) {
                    activities[activities.length - 1].remove();
                }
            }
        }
        
        updateStats(stats) {
            // Statistik-Karten aktualisieren mit Animation
            const statValues = document.querySelectorAll('.stat-value');
            
            const statsMapping = [
                { element: statValues[0], value: stats.active_jobs_count },
                { element: statValues[1], value: stats.available_printers_count },
                { element: statValues[2], value: stats.total_jobs_count },
                { element: statValues[3], value: `${stats.success_rate}%` }
            ];
            
            statsMapping.forEach(({ element, value }) => {
                if (element && element.textContent !== value.toString()) {
                    this.animateValueChange(element, value);
                }
            });
        }
        
        animateValueChange(element, newValue) {
            element.style.transform = 'scale(1.1)';
            element.style.transition = 'transform 0.3s ease';
            
            setTimeout(() => {
                element.textContent = newValue;
                element.style.transform = 'scale(1)';
            }, 150);
        }
        
        animateCounters() {
            // Initialanimation für Counter
            const counters = document.querySelectorAll('.stat-value');
            counters.forEach((counter, index) => {
                const finalValue = parseInt(counter.textContent) || 0;
                if (finalValue > 0) {
                    let currentValue = 0;
                    const increment = finalValue / 30; // 30 Schritte
                    
                    const timer = setInterval(() => {
                        currentValue += increment;
                        if (currentValue >= finalValue) {
                            counter.textContent = finalValue + (counter.textContent.includes('%') ? '%' : '');
                            clearInterval(timer);
                        } else {
                            counter.textContent = Math.floor(currentValue) + (counter.textContent.includes('%') ? '%' : '');
                        }
                    }, 50 + (index * 100)); // Verzögerung zwischen Countern
                }
            });
        }
        
        getStatusClass(status) {
            const statusClasses = {
                'running': 'mb-status-busy',
                'completed': 'mb-status-online',
                'failed': 'mb-status-offline',
                'paused': 'mb-status-idle',
                'queued': 'mb-status-idle',
                'online': 'mb-status-online',
                'offline': 'mb-status-offline',
                'busy': 'mb-status-busy',
                'idle': 'mb-status-idle'
            };
            return statusClasses[status] || 'mb-status-idle';
        }
        
        getStatusText(status) {
            const statusTexts = {
                'running': 'Druckt',
                'completed': 'Abgeschlossen',
                'failed': 'Fehlgeschlagen',
                'paused': 'Pausiert',
                'queued': 'Warteschlange',
                'online': 'Online',
                'offline': 'Offline',
                'busy': 'Beschäftigt',
                'idle': 'Bereit'
            };
            return statusTexts[status] || 'Unbekannt';
        }
        
        updateThemeElements(isDark) {
            // Theme-spezifische Updates
            console.log(`🎨 Dashboard Theme aktualisiert: ${isDark ? 'Dark' : 'Light'} Mode`);
            
            // Spezielle Animationen für Theme-Wechsel
            const cards = document.querySelectorAll('.dashboard-card');
            cards.forEach(card => {
                card.style.transition = 'all 0.3s ease';
            });
        }
        
        showToast(message, type = 'info') {
            // Toast-Benachrichtigung anzeigen
            if (window.MYP && window.MYP.UI && window.MYP.UI.ToastManager) {
                const toast = new window.MYP.UI.ToastManager();
                toast.show(message, type, 5000);
            } else {
                console.log(`Toast: ${message}`);
            }
        }
        
        // Cleanup beim Verlassen der Seite
        cleanup() {
            if (this.autoUpdateTimer) {
                clearInterval(this.autoUpdateTimer);
            }
            
            if (this.wsConnection) {
                this.wsConnection.close();
            }
        }
    }
    
    // Dashboard Manager initialisieren
    document.addEventListener('DOMContentLoaded', function() {
        window.dashboardManager = new DashboardManager();
        
        // Cleanup beim Verlassen
        window.addEventListener('beforeunload', () => {
            if (window.dashboardManager) {
                window.dashboardManager.cleanup();
            }
        });
    });
</script>
{% endblock %}