{# Jinja-Makros für UI-Komponenten zur JavaScript-Ersetzung #}

{# Status-Indikator mit CSS-Animation #}
{% macro status_indicator(status, text="") %}
{% set status_classes = {
    'online': 'mb-status-online',
    'offline': 'mb-status-offline', 
    'busy': 'mb-status-busy',
    'idle': 'mb-status-idle',
    'running': 'mb-status-busy',
    'completed': 'mb-status-online',
    'failed': 'mb-status-offline',
    'paused': 'mb-status-idle',
    'queued': 'mb-status-idle'
} %}
<div class="flex items-center">
    <div class="mb-status-indicator {{ status_classes.get(status, 'mb-status-idle') }}"></div>
    {% if text %}
    <span class="ml-2 text-sm font-medium text-slate-700 dark:text-slate-300">{{ text }}</span>
    {% endif %}
</div>
{% endmacro %}

{# Fortschrittsbalken mit CSS-Animation #}
{% macro progress_bar(progress, show_text=True) %}
<div class="mb-progress-container">
    <div class="mb-progress-bar" style="width: {{ progress }}%"></div>
</div>
{% if show_text %}
<div class="text-xs text-right mt-1 text-slate-500 dark:text-slate-400">{{ progress }}%</div>
{% endif %}
{% endmacro %}

{# Klickbare Karte #}
{% macro clickable_card(url, class="dashboard-card p-6") %}
<a href="{{ url }}" class="{{ class }} block hover:transform hover:-translate-y-1 transition-transform">
    {{ caller() }}
</a>
{% endmacro %}

{# Tab-Navigation mit serverseitiger Logik #}
{% macro tab_navigation(tabs, active_tab) %}
<div class="border-b border-gray-200 dark:border-slate-700">
    <nav class="-mb-px flex space-x-8" aria-label="Tabs">
        {% for tab in tabs %}
        <a href="{{ tab.url }}" 
           class="{% if active_tab == tab.id %}border-blue-500 text-blue-600 dark:text-blue-400{% else %}border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-slate-400 dark:hover:text-slate-300{% endif %} 
                  whitespace-nowrap py-2 px-1 border-b-2 font-medium text-sm">
            {% if tab.icon %}
            <i class="{{ tab.icon }} mr-2"></i>
            {% endif %}
            {{ tab.name }}
        </a>
        {% endfor %}
    </nav>
</div>
{% endmacro %}

{# Drucker-Status-Karte ohne JavaScript #}
{% macro printer_card(printer, show_link=True) %}
{% if show_link %}
<a href="{{ url_for('printers_page') }}#printer-{{ printer.id }}" class="block">
{% endif %}
<div class="flex items-center justify-between p-4 rounded-xl bg-gray-50 dark:bg-slate-700/30 {% if show_link %}hover:bg-gray-100 dark:hover:bg-slate-700/50 transition-colors{% endif %}">
    <div class="flex items-center">
        {{ status_indicator(printer.status, printer.status_text) }}
        <div class="ml-3">
            <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>
{% if show_link %}
</a>
{% endif %}
{% endmacro %}

{# Job-Zeile in Tabelle ohne JavaScript #}
{% macro job_row(job, show_link=True) %}
<tr class="hover:bg-gray-50 dark:hover:bg-slate-700/50 {% if show_link %}cursor-pointer{% endif %}">
    {% if show_link %}
    <td colspan="6" class="p-0">
        <a href="{{ url_for('jobs_page') }}#job-{{ job.id }}" class="block px-6 py-4">
            {{ job_row_content(job) }}
        </a>
    </td>
    {% else %}
    {{ job_row_content(job) }}
    {% endif %}
</tr>
{% endmacro %}

{# Job-Zeilen-Inhalt (für Wiederverwendung) #}
{% macro job_row_content(job) %}
<td class="px-6 py-4 whitespace-nowrap">
    {{ status_indicator(job.status, job.status_text) }}
</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">
    {{ progress_bar(job.progress) }}
</td>
<td class="px-6 py-4 whitespace-nowrap text-right">
    <span class="text-slate-900 dark:text-white hover:text-slate-700 dark:hover:text-slate-300 font-medium">Details</span>
</td>
{% endmacro %}

{# Benachrichtigungs-Toast mit Auto-Close via CSS #}
{% macro notification_toast(message, type="info", auto_close=True) %}
{% set type_classes = {
    'success': 'border-green-200 bg-green-50 text-green-800 dark:border-green-800 dark:bg-green-900/20 dark:text-green-300',
    'error': 'border-red-200 bg-red-50 text-red-800 dark:border-red-800 dark:bg-red-900/20 dark:text-red-300',
    'warning': 'border-yellow-200 bg-yellow-50 text-yellow-800 dark:border-yellow-800 dark:bg-yellow-900/20 dark:text-yellow-300',
    'info': 'border-blue-200 bg-blue-50 text-blue-800 dark:border-blue-800 dark:bg-blue-900/20 dark:text-blue-300'
} %}
<div class="glass rounded-lg p-4 border {{ type_classes.get(type, type_classes['info']) }} {% if auto_close %}animate-toast{% endif %}">
    <div class="flex items-start">
        <i class="fas {{ 'fa-check-circle' if type == 'success' else 'fa-exclamation-circle' if type == 'error' else 'fa-exclamation-triangle' if type == 'warning' else 'fa-info-circle' }} mt-0.5 mr-3"></i>
        <div class="flex-1">
            <p class="text-sm font-medium">{{ message }}</p>
        </div>
        <form method="POST" class="ml-3">
            {{ csrf_token() }}
            <button type="submit" name="dismiss_notification" class="hover:opacity-70">
                <i class="fas fa-times text-sm"></i>
            </button>
        </form>
    </div>
</div>
{% endmacro %}

{# Formular-Submit-Button mit CSS-basiertem Loading-State #}
{% macro submit_button(text, loading_text="Wird verarbeitet...", class="btn-primary") %}
<button type="submit" class="{{ class }} group relative overflow-hidden">
    <span class="group-disabled:opacity-0 transition-opacity">{{ text }}</span>
    <span class="absolute inset-0 flex items-center justify-center opacity-0 group-disabled:opacity-100 transition-opacity">
        <i class="fas fa-spinner fa-spin mr-2"></i>
        {{ loading_text }}
    </span>
</button>
<style>
button[type="submit"]:active {
    pointer-events: none;
}
button[type="submit"]:active,
form[data-submitting] button[type="submit"] {
    opacity: 0.7;
    cursor: not-allowed;
}
</style>
{% endmacro %}

{# Auto-Refresh Meta-Tag für periodische Seitenaktualisierung #}
{% macro auto_refresh(seconds) %}
<meta http-equiv="refresh" content="{{ seconds }}">
{% endmacro %}

{# CSS-only Dropdown-Menu #}
{% macro css_dropdown(button_text, items, button_class="btn-secondary") %}
<div class="relative group">
    <button class="{{ button_class }}">
        {{ button_text }}
        <i class="fas fa-chevron-down ml-2"></i>
    </button>
    <div class="absolute right-0 mt-2 w-48 glass rounded-xl overflow-hidden opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
        {% for item in items %}
        <a href="{{ item.url }}" class="block px-4 py-2 text-sm hover:bg-white/10 dark:hover:bg-black/10">
            {% if item.icon %}
            <i class="{{ item.icon }} w-4 mr-3"></i>
            {% endif %}
            {{ item.text }}
        </a>
        {% endfor %}
    </div>
</div>
{% endmacro %}

{# Dashboard-Statistik-Karte ohne JavaScript #}
{% macro dashboard_stat_card(title, value, icon, color="slate", trend=None) %}
<div class="dashboard-card p-6">
    <div class="flex justify-between">
        <div>
            <h3 class="stat-label">{{ title }}</h3>
            <div class="stat-value">{{ value }}</div>
            {% if trend %}
                <div class="flex items-center mt-2 text-sm">
                    {% if trend.direction == 'up' %}
                        <i class="fas fa-arrow-up text-green-500 mr-1"></i>
                        <span class="text-green-600 dark:text-green-400">+{{ trend.value }}%</span>
                    {% elif trend.direction == 'down' %}
                        <i class="fas fa-arrow-down text-red-500 mr-1"></i>
                        <span class="text-red-600 dark:text-red-400">-{{ trend.value }}%</span>
                    {% else %}
                        <i class="fas fa-minus text-gray-500 mr-1"></i>
                        <span class="text-gray-600 dark:text-gray-400">{{ trend.value }}%</span>
                    {% endif %}
                    <span class="text-gray-500 dark:text-gray-400 ml-1">{{ trend.period }}</span>
                </div>
            {% endif %}
        </div>
        <div class="mb-stat-icon text-{{ color }}-600 dark:text-{{ color }}-400">
            <i class="{{ icon }} w-6 h-6"></i>
        </div>
    </div>
</div>
{% endmacro %}

{# Drucker-Übersicht-Tabelle ohne JavaScript #}
{% macro printer_overview_table(printers) %}
<div class="overflow-x-auto">
    <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">Name</th>
                <th class="px-6 py-3">Modell</th>
                <th class="px-6 py-3">Standort</th>
                <th class="px-6 py-3">Aktueller Job</th>
                <th class="px-6 py-3">Letzte Aktivität</th>
            </tr>
        </thead>
        <tbody class="bg-white dark:bg-slate-800 divide-y divide-gray-200 dark:divide-slate-700">
            {% for printer in printers %}
            <tr class="hover:bg-gray-50 dark:hover:bg-slate-700/50">
                <td class="px-6 py-4 whitespace-nowrap">
                    {{ status_indicator(printer.status, printer.status_text) }}
                </td>
                <td class="px-6 py-4">
                    <div class="text-sm font-medium text-slate-900 dark:text-white">
                        <a href="{{ url_for('admin_printer_management', printer_id=printer.id) }}" class="hover:text-blue-600 dark:hover:text-blue-400">
                            {{ printer.name }}
                        </a>
                    </div>
                </td>
                <td class="px-6 py-4 whitespace-nowrap">
                    <div class="text-sm text-slate-700 dark:text-slate-300">{{ printer.model }}</div>
                </td>
                <td class="px-6 py-4 whitespace-nowrap">
                    <div class="text-sm text-slate-700 dark:text-slate-300">{{ printer.location }}</div>
                </td>
                <td class="px-6 py-4">
                    {% if printer.current_job %}
                        <div class="text-sm text-slate-900 dark:text-white">{{ printer.current_job.name }}</div>
                        {{ progress_bar(printer.current_job.progress, show_text=False) }}
                    {% else %}
                        <span class="text-sm text-slate-500 dark:text-slate-400">Kein aktiver Job</span>
                    {% endif %}
                </td>
                <td class="px-6 py-4 whitespace-nowrap">
                    <div class="text-sm text-slate-700 dark:text-slate-300">{{ printer.last_activity }}</div>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% endmacro %}

{# Formular mit CSRF und serverseitiger Validierung #}
{% macro form_field(field, label=None, help_text=None) %}
<div class="mb-4">
    {% if label %}
        <label for="{{ field.id }}" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">{{ label }}</label>
    {% endif %}
    
    {{ field(class="form-input" + (" border-red-500 dark:border-red-400" if field.errors else "")) }}
    
    {% if field.errors %}
        <div class="mt-1 text-sm text-red-600 dark:text-red-400">
            {% for error in field.errors %}
                <p>{{ error }}</p>
            {% endfor %}
        </div>
    {% endif %}
    
    {% if help_text %}
        <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">{{ help_text }}</p>
    {% endif %}
</div>
{% endmacro %}

{# Modal-Dialog ohne JavaScript #}
{% macro modal_dialog(id, title, form_action=None) %}
<div id="{{ id }}" class="fixed inset-0 z-50 hidden">
    <div class="absolute inset-0 bg-black/50 backdrop-blur-sm" onclick="this.parentElement.classList.add('hidden')"></div>
    <div class="flex items-center justify-center min-h-screen p-4">
        <div class="bg-white dark:bg-slate-800 rounded-2xl p-6 max-w-md w-full shadow-2xl">
            <div class="flex justify-between items-center mb-4">
                <h2 class="text-lg font-semibold text-slate-900 dark:text-white">{{ title }}</h2>
                <button onclick="document.getElementById('{{ id }}').classList.add('hidden')" class="text-slate-400 hover:text-slate-600 dark:hover:text-slate-300">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            
            {% if form_action %}
                <form method="POST" action="{{ form_action }}">
                    {{ csrf_token() }}
                    {{ caller() }}
                </form>
            {% else %}
                {{ caller() }}
            {% endif %}
        </div>
    </div>
</div>
{% endmacro %}

{# URL-basierte Tab-Navigation für Filter #}
{% macro filter_tabs(filters, current_filter, base_url) %}
<div class="flex space-x-4 mb-6">
    {% for filter in filters %}
        <a href="{{ base_url }}?filter={{ filter.key }}{{ '&' + request.query_string.decode() if request.query_string and 'filter=' not in request.query_string.decode() else '' }}" 
           class="px-4 py-2 rounded-lg font-medium transition-colors
                  {% if current_filter == filter.key %}
                      bg-blue-100 text-blue-700 dark:bg-blue-900/20 dark:text-blue-300
                  {% else %}
                      text-slate-600 hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-slate-700/50
                  {% endif %}">
            {% if filter.icon %}
                <i class="{{ filter.icon }} mr-2"></i>
            {% endif %}
            {{ filter.name }}
            {% if filter.count is defined %}
                <span class="ml-2 px-2 py-0.5 text-xs rounded-full bg-slate-200 dark:bg-slate-600">{{ filter.count }}</span>
            {% endif %}
        </a>
    {% endfor %}
</div>
{% endmacro %}