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

{% block title %}Tags – {{ document.title }}{% 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>

    <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>Dokument-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>Dokument-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> Dokument-Tag-Rebuild erfolgreich abgeschlossen
                    </div>
                `;
            } else if (data.status === '{{ statusFailed }}') {
                html = `
                    <div class="alert alert-danger shadow-sm mb-0">
                        <strong>Dokument-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="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-1">
                Tags für Dokument
                <span class="text-info">{{ document.title }}</span>
            </h1>
            <div class="small text-muted">
                Weise nur Tags zu, die den fachlichen Kern des Dokuments wirklich beschreiben.
            </div>
        </div>

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

    <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">Hinweis für gutes Tagging</h5>

                <ul class="small mb-0">
                    <li><strong>Präzise statt breit:</strong> lieber produkt- oder themenscharfe Tags als allgemeine Oberbegriffe.</li>
                    <li><strong>Catalog Entity</strong> nur bei echten Produktfamilien, Katalogbegriffen oder klaren Entitäten.</li>
                    <li><strong>Generic</strong> nur als unterstützende Zusatzsemantik.</li>
                    <li><strong>Sales Signal</strong> sparsam und bewusst einsetzen, nicht als Ersatz für Fach-Tags.</li>
                </ul>
            </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: {{ document.tags|length }}
                    </span>
                    <span class="badge text-bg-dark border border-secondary">
                        Verfügbar: {{ allTags|length }}
                    </span>
                    <span class="badge text-bg-dark border border-secondary">
                        Nicht zugewiesen: {{ allTags|length - document.tags|length }}
                    </span>
                </div>
            </div>
        </div>
    </div>

    <div class="card bg-dark border-secondary mb-4 shadow-sm">
        <div class="card-body">
            <h5 class="mb-3">Bereits zugewiesene Tags</h5>

            {% if document.tags is empty %}
                <div class="alert alert-secondary mb-0">
                    Dieses Dokument hat noch keine Tags.
                </div>
            {% else %}
                <div class="d-flex flex-wrap gap-2">
                    {% for tag in allTags %}
                        {% if tag in document.tags %}
                            <span class="badge px-3 py-2
                                {% if tag.type == 'catalog_entity' %}
                                    text-bg-info
                                {% elseif tag.type == 'sales_signal' %}
                                    text-bg-warning
                                {% else %}
                                    text-bg-secondary
                                {% endif %}">
                                {{ tag.label }}
                            </span>
                        {% endif %}
                    {% endfor %}
                </div>
            {% endif %}
        </div>
    </div>

    <div class="card bg-black border-secondary shadow-sm">
        <div class="card-body">

            <h5 class="text-info mb-3">Tags zuweisen</h5>

            <form method="post"
                  action="{{ path('admin_document_tags_save', {id: document.id}) }}">

                <input type="hidden"
                       name="_token"
                       value="{{ csrf_token('admin_document_tags_save_' ~ document.id) }}">

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

                            <div class="card-body">
                                <div class="row">
                                    {% set hasAssigned = false %}
                                    {% for tag in allTags %}
                                        {% if tag in document.tags %}
                                            {% set hasAssigned = true %}
                                            <div class="col-md-6 mb-3">
                                                <div class="form-check">
                                                    <input
                                                            class="form-check-input"
                                                            type="checkbox"
                                                            name="tag_ids[]"
                                                            value="{{ tag.id }}"
                                                            id="tag_{{ tag.id }}"
                                                            checked
                                                    >
                                                    <label class="form-check-label w-100" for="tag_{{ tag.id }}">
                                                        <span class="badge
                                                            {% if tag.type == 'catalog_entity' %}
                                                                text-bg-info
                                                            {% elseif tag.type == 'sales_signal' %}
                                                                text-bg-warning
                                                            {% else %}
                                                                text-bg-secondary
                                                            {% endif %}">
                                                            {{ tag.type }}
                                                        </span>
                                                        <span class="ms-2 fw-semibold">{{ tag.label }}</span>
                                                        {% if tag.description %}
                                                            <div class="small text-muted mt-1">{{ tag.description }}</div>
                                                        {% endif %}
                                                    </label>
                                                </div>
                                            </div>
                                        {% endif %}
                                    {% endfor %}

                                    {% if not hasAssigned %}
                                        <div class="col-12">
                                            <div class="text-muted">
                                                Noch keine Tags zugewiesen.
                                            </div>
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>

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

                            <div class="card-body">
                                <div class="row">
                                    {% set hasAvailable = false %}
                                    {% for tag in allTags %}
                                        {% if tag not in document.tags %}
                                            {% set hasAvailable = true %}
                                            <div class="col-md-6 mb-3">
                                                <div class="form-check">
                                                    <input
                                                            class="form-check-input"
                                                            type="checkbox"
                                                            name="tag_ids[]"
                                                            value="{{ tag.id }}"
                                                            id="tag_{{ tag.id }}"
                                                    >
                                                    <label class="form-check-label w-100" for="tag_{{ tag.id }}">
                                                        <span class="badge
                                                            {% if tag.type == 'catalog_entity' %}
                                                                text-bg-info
                                                            {% elseif tag.type == 'sales_signal' %}
                                                                text-bg-warning
                                                            {% else %}
                                                                text-bg-secondary
                                                            {% endif %}">
                                                            {{ tag.type }}
                                                        </span>
                                                        <span class="ms-2">{{ tag.label }}</span>
                                                        {% if tag.description %}
                                                            <div class="small text-muted mt-1">{{ tag.description }}</div>
                                                        {% endif %}
                                                    </label>
                                                </div>
                                            </div>
                                        {% endif %}
                                    {% endfor %}

                                    {% if not hasAvailable %}
                                        <div class="col-12">
                                            <div class="text-muted">
                                                Keine weiteren Tags verfügbar.
                                            </div>
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <hr class="border-secondary">

                <div class="d-flex justify-content-end">
                    <button type="submit"
                            class="btn btn-sm btn-outline-info">
                        Speichern
                    </button>
                </div>

            </form>

        </div>
    </div>

{% endblock %}