{% extends "base.html" %}

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

{% block content %}
<div class="mercedes-section">
    <!-- Dashboard Header -->
    <div class="glass-card-hero mercedes-text-center">
        <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-6">
            <div class="flex items-center gap-6 md:justify-start justify-center">
                <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 class="mercedes-text-left">
                    <h1 class="mercedes-title">Dashboard</h1>
                    <p class="mercedes-subtitle">Übersicht über Ihre 3D-Druck Aktivitäten</p>
                </div>
            </div>
            <div class="flex flex-wrap gap-3 justify-center md:justify-end">
                <button id="refreshDashboard" 
                        class="mercedes-btn mercedes-btn-secondary">
                    <svg class="w-5 h-5 mr-2" 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="mercedes-btn mercedes-btn-primary">
                    <svg class="w-5 h-5 mr-2" 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="mercedes-btn mercedes-btn-secondary">
                    <svg class="w-5 h-5 mr-2" 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="mercedes-grid mercedes-grid-4 mercedes-fade-in">
        <!-- Active Jobs Card -->
        <div class="glass-card mercedes-text-center">
            <div class="flex justify-between items-start mercedes-mb-md">
                <div class="mercedes-text-left">
                    <h3 class="mercedes-text-muted">Aktive Aufträge</h3>
                    <div class="text-3xl font-bold mercedes-text mercedes-mt-sm">{{ active_jobs_count }}</div>
                </div>
                <div class="w-12 h-12 bg-gradient-to-br from-blue-500 to-blue-600 rounded-full flex items-center justify-center 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="glass-card mercedes-text-center">
            <div class="flex justify-between items-start mercedes-mb-md">
                <div class="mercedes-text-left">
                    <h3 class="mercedes-text-muted">Verfügbare Drucker</h3>
                    <div class="text-3xl font-bold mercedes-text mercedes-mt-sm">{{ available_printers_count }}</div>
                </div>
                <div class="w-12 h-12 bg-gradient-to-br from-green-500 to-green-600 rounded-full flex items-center justify-center 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="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="glass-card mercedes-text-center">
            <div class="flex justify-between items-start mercedes-mb-md">
                <div class="mercedes-text-left">
                    <h3 class="mercedes-text-muted">Aufträge (gesamt)</h3>
                    <div class="text-3xl font-bold mercedes-text mercedes-mt-sm">{{ total_jobs_count }}</div>
                </div>
                <div class="w-12 h-12 bg-gradient-to-br from-purple-500 to-purple-600 rounded-full flex items-center justify-center 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 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="glass-card mercedes-text-center">
            <div class="flex justify-between items-start mercedes-mb-md">
                <div class="mercedes-text-left">
                    <h3 class="mercedes-text-muted">Erfolgsrate</h3>
                    <div class="text-3xl font-bold mercedes-text mercedes-mt-sm">{{ success_rate }}%</div>
                </div>
                <div class="w-12 h-12 bg-gradient-to-br from-amber-500 to-amber-600 rounded-full flex items-center justify-center 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="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="glass-card mercedes-slide-in">
        <h2 class="text-2xl font-bold mercedes-text mercedes-mb-lg">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 mercedes-text-muted 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="mercedes-status {{ 'mercedes-status-online' if job.status_class == 'mb-status-online' else 'mercedes-status-warning' if job.status_class == 'mb-status-busy' else 'mercedes-status-offline' }}">
                                        {{ job.status_text }}
                                    </div>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm font-medium mercedes-text">{{ job.name }}</div>
                                <div class="text-xs mercedes-text-muted">{{ job.file_name }}</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm mercedes-text">{{ job.printer }}</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm mercedes-text">{{ job.start_time }}</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2 mb-1">
                                    <div class="bg-gradient-to-r from-black to-gray-700 dark:from-white dark:to-gray-300 h-2 rounded-full transition-all duration-500" style="width: {{ job.progress }}%"></div>
                                </div>
                                <div class="text-xs text-right mercedes-text-muted">{{ 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="mercedes-btn mercedes-btn-secondary text-sm">Details</a>
                            </td>
                        </tr>
                        {% endfor %}
                    {% else %}
                        <tr>
                            <td colspan="6" class="px-6 py-8 text-center">
                                <div class="mercedes-text-muted">
                                    <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="mercedes-text font-medium mb-1">Keine aktiven Druckaufträge</p>
                                    <p class="mercedes-text-muted">Starten Sie einen neuen Druckauftrag, um ihn hier zu sehen.</p>
                                </div>
                            </td>
                        </tr>
                    {% endif %}
                </tbody>
            </table>
        </div>
        <div class="mercedes-mt-lg mercedes-text-right">
            <a href="{{ url_for('jobs_page') }}" class="mercedes-btn mercedes-btn-secondary">
                Alle Druckaufträge anzeigen →
            </a>
        </div>
    </div>

    <!-- Printer Status and Recent Activity -->
    <div class="mercedes-grid mercedes-grid-2 mercedes-fade-in">
        <!-- Available Printers -->
        <div class="glass-card">
            <h2 class="text-2xl font-bold mercedes-text mercedes-mb-lg">Druckerstatus</h2>
            <div class="space-y-4">
                {% if printers and printers|length > 0 %}
                    {% for printer in printers %}
                    <div class="glass-card !margin-0 flex items-center justify-between">
                        <div class="flex items-center">
                            <div class="mercedes-status {{ 'mercedes-status-online' if printer.status_class == 'mb-status-online' else 'mercedes-status-warning' if printer.status_class == 'mb-status-busy' else 'mercedes-status-offline' }} mr-3">
                                {{ printer.status_text }}
                            </div>
                            <div>
                                <div class="text-sm font-medium mercedes-text">{{ printer.name }}</div>
                                <div class="text-xs mercedes-text-muted">{{ printer.model }}</div>
                            </div>
                        </div>
                        <div class="mercedes-text-right">
                            <div class="text-xs mercedes-text-muted">{{ printer.location }}</div>
                        </div>
                    </div>
                    {% endfor %}
                {% else %}
                    <div class="mercedes-text-center mercedes-p-xl">
                        <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="mercedes-text font-medium mb-1">Keine Drucker gefunden</p>
                        <p class="mercedes-text-muted">Prüfen Sie die Verbindung oder fügen Sie Drucker hinzu.</p>
                    </div>
                {% endif %}
            </div>
            <div class="mercedes-mt-lg mercedes-text-right">
                <a href="{{ url_for('printers_page') }}" class="mercedes-btn mercedes-btn-secondary">
                    Alle Drucker anzeigen →
                </a>
            </div>
        </div>

        <!-- Recent Activity -->
        <div class="glass-card">
            <h2 class="text-2xl font-bold mercedes-text mercedes-mb-lg">Letzte Aktivitäten</h2>
            <div class="space-y-3">
                {% if activities and activities|length > 0 %}
                    {% for activity in activities %}
                    <div class="border-l-4 border-black dark:border-white pl-4 py-3 bg-black/5 dark:bg-white/5 rounded-r-lg">
                        <div class="flex items-center justify-between">
                            <div class="flex-1">
                                <p class="text-sm mercedes-text">{{ activity.description }}</p>
                                <p class="text-xs mercedes-text-muted">{{ activity.time }}</p>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                {% else %}
                    <div class="mercedes-text-center mercedes-p-xl">
                        <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="mercedes-text font-medium mb-1">Keine Aktivitäten</p>
                        <p class="mercedes-text-muted">Ihre Aktivitäten werden hier angezeigt.</p>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Refresh Button
        const refreshBtn = document.getElementById('refreshDashboard');
        if (refreshBtn) {
            refreshBtn.addEventListener('click', function() {
                window.location.reload();
            });
        }

        // Dashboard Theme Switch Updates
        window.addEventListener('darkModeChanged', function(e) {
            console.log('Theme changed to:', e.detail.isDark ? 'dark' : 'light');
        });
    });
</script>
{% endblock %}