{# 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 Loading-State #}
{% macro submit_button(text, loading_text="Wird verarbeitet...", class="btn-primary") %}
<button type="submit" class="{{ class }} relative" id="submit-btn">
    <span class="submit-text">{{ text }}</span>
    <span class="loading-text hidden">{{ loading_text }}</span>
</button>
<script>
document.getElementById('submit-btn').form.addEventListener('submit', function() {
    const btn = document.getElementById('submit-btn');
    btn.disabled = true;
    btn.querySelector('.submit-text').classList.add('hidden');
    btn.querySelector('.loading-text').classList.remove('hidden');
});
</script>
{% 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 %}