{% extends 'admin/base.html.twig' %}

{% block title %}Tag zuweisen{% endblock %}

{% block body %}

    <div id="rebuild-status" class="mb-4">
        {% if latestJob %}
            <div class="alert alert-secondary shadow-sm mb-0">
                Status wird geladen…
            </div>
        {% endif %}
    </div>

    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-1">
                <i class="bi bi-tag-fill"></i> Tag: {{ tag.label }}
            </h1>

            <div class="small text-muted">
                Slug: <code>{{ tag.slug }}</code>
            </div>
        </div>

        <a href="{{ path('admin_tags_index') }}"
           class="btn btn-sm btn-outline-secondary">
            Zurück
        </a>
    </div>

    <script>
        const statusBox = document.getElementById('rebuild-status');
        const source = new EventSource("{{ path('admin_tags_rebuild_stream') }}");

        source.onmessage = function (event) {
            const data = JSON.parse(event.data);
            let html = '';

            if (data.status === '{{ statusRunning }}') {
                html = `
                    <div class="alert alert-info shadow-sm d-flex justify-content-between align-items-center mb-0">
                        <div>
                            <strong>Tag-Rebuild läuft</strong><br>
                            ${data.startedAt ? 'Gestartet: ' + new Date(data.startedAt).toLocaleString() : ''}
                        </div>
                        <div class="spinner-border spinner-border-sm"></div>
                    </div>
                `;
            } else if (data.status === '{{ statusQueued }}') {
                html = `
                    <div class="alert alert-secondary shadow-sm mb-0">
                        <strong>Tag-Rebuild in Warteschlange</strong>
                    </div>
                `;
            } else if (data.status === '{{ statusCompleted }}') {
                html = `
                    <div class="alert alert-success shadow-sm mb-0">
                        <i class="bi bi-check-lg"></i> Tag-Rebuild erfolgreich abgeschlossen
                    </div>
                `;
            } else if (data.status === '{{ statusFailed }}') {
                html = `
                    <div class="alert alert-danger shadow-sm mb-0">
                        <strong>Tag-Rebuild fehlgeschlagen</strong><br>
                        ${data.error ? '<code>' + data.error + '</code>' : ''}
                    </div>
                `;
            }

            statusBox.innerHTML = html;
        };

        source.onerror = function () {
            console.warn('SSE Verbindung verloren');
        };

        window.addEventListener('beforeunload', function () {
            source.close();
        });
    </script>

    {% for message in app.flashes('success') %}
        <div class="alert alert-success shadow-sm">
            {{ message }}
        </div>
    {% endfor %}

    {% for message in app.flashes('danger') %}
        <div class="alert alert-danger shadow-sm">
            {{ message }}
        </div>
    {% endfor %}

    <div class="card bg-dark border-secondary text-light mb-4 shadow-sm">
        <div class="card-body row g-4">
            <div class="col-lg-7">
                <h5 class="text-info mb-3">Einordnung des Tags</h5>

                <div class="mb-2">
                    {% if tag.type == 'catalog_entity' %}
                        <span class="badge text-bg-info">Catalog Entity</span>
                    {% elseif tag.type == 'sales_signal' %}
                        <span class="badge text-bg-warning">Sales Signal</span>
                    {% else %}
                        <span class="badge text-bg-secondary">Generic</span>
                    {% endif %}
                </div>

                <p class="small mb-2">
                    {{ tag.description ?: 'Keine Beschreibung hinterlegt.' }}
                </p>

                <p class="small text-muted mb-0">
                    Weise diesen Tag nur Dokumenten zu, die fachlich wirklich denselben Gegenstand,
                    dieselbe Produktfamilie oder denselben Anwendungsfall abbilden.
                    Zu breite Zuweisungen machen das Routing weicher.
                </p>
            </div>

            <div class="col-lg-5">
                <h5 class="text-info mb-3">Aktueller Stand</h5>

                <div class="d-flex flex-wrap gap-2">
                    <span class="badge text-bg-dark border border-secondary">
                        Zugewiesen: {{ assignedDocIds|length }}
                    </span>
                    <span class="badge text-bg-dark border border-secondary">
                        Verfügbar: {{ documents|length }}
                    </span>
                    <span class="badge text-bg-dark border border-secondary">
                        Nicht zugewiesen: {{ documents|length - assignedDocIds|length }}
                    </span>
                </div>
            </div>
        </div>
    </div>

    <form method="post">
        <input type="hidden"
               name="_token"
               value="{{ csrf_token('assign_tag_' ~ tag.id) }}">

        <div class="row g-4">
            <div class="col-lg-6">
                <div class="card bg-black border-secondary shadow-sm h-100">
                    <div class="card-header bg-secondary-subtle text-dark fw-semibold">
                        Zugewiesene Dokumente
                    </div>

                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table class="table table-dark table-striped table-hover mb-0 align-middle">
                                <thead class="table-secondary text-dark">
                                <tr>
                                    <th style="width: 60px;">
                                        <i class="bi bi-check2-square"></i>
                                    </th>
                                    <th>Dokument</th>
                                </tr>
                                </thead>
                                <tbody>
                                {% set hasAssigned = false %}
                                {% for doc in documents %}
                                    {% if doc.id in assignedDocIds %}
                                        {% set hasAssigned = true %}
                                        <tr>
                                            <td>
                                                <input type="checkbox"
                                                       name="documents[]"
                                                       value="{{ doc.id }}"
                                                       checked>
                                            </td>
                                            <td class="fw-semibold">
                                                {{ doc.title }}
                                            </td>
                                        </tr>
                                    {% endif %}
                                {% endfor %}

                                {% if not hasAssigned %}
                                    <tr>
                                        <td colspan="2" class="text-center text-muted p-4">
                                            Noch keine Dokumente zugewiesen.
                                        </td>
                                    </tr>
                                {% endif %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-6">
                <div class="card bg-black border-secondary shadow-sm h-100">
                    <div class="card-header bg-secondary-subtle text-dark fw-semibold">
                        Verfügbare Dokumente
                    </div>

                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table class="table table-dark table-striped table-hover mb-0 align-middle">
                                <thead class="table-secondary text-dark">
                                <tr>
                                    <th style="width: 60px;">
                                        <i class="bi bi-square"></i>
                                    </th>
                                    <th>Dokument</th>
                                </tr>
                                </thead>
                                <tbody>
                                {% set hasUnassigned = false %}
                                {% for doc in documents %}
                                    {% if doc.id not in assignedDocIds %}
                                        {% set hasUnassigned = true %}
                                        <tr>
                                            <td>
                                                <input type="checkbox"
                                                       name="documents[]"
                                                       value="{{ doc.id }}">
                                            </td>
                                            <td class="opacity-75">
                                                {{ doc.title }}
                                            </td>
                                        </tr>
                                    {% endif %}
                                {% endfor %}

                                {% if not hasUnassigned %}
                                    <tr>
                                        <td colspan="2" class="text-center text-muted p-4">
                                            Keine weiteren aktiven Dokumente verfügbar.
                                        </td>
                                    </tr>
                                {% endif %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="d-flex justify-content-end mt-4">
            <button class="btn btn-primary">
                Zuweisungen speichern
            </button>
        </div>
    </form>

{% endblock %}