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

{% block title %}Tags{% 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">
        <h1 class="h3 mb-0">
            <i class="bi bi-tag-fill"></i> Tag-Management
        </h1>
    </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-6">
                <h5 class="text-info mb-3">Was machen Tags im System?</h5>

                <p class="small text-light mb-2">
                    Tags sind die semantische Routing-Ebene innerhalb des Systems.
                    Sie helfen dabei, thematisch passende Dokumenträume schneller zu erkennen
                    und gute Retrieval-Kandidaten zu priorisieren.
                </p>

                <ul class="small text-light mb-0">
                    <li>Tags werden Dokumenten manuell zugewiesen.</li>
                    <li>Beim Rebuild wird aus den aktiven Tag-Zuordnungen eine <code>tags.ndjson</code> erzeugt.</li>
                    <li>Zusätzlich wird ein eigener Tag-Vektorindex (<code>vector_tags.index</code>) gebaut.</li>
                    <li>Bei Anfragen erfolgt zunächst ein semantisches Tag-Matching, danach das eigentliche Chunk-Retrieval.</li>
                </ul>
            </div>

            <div class="col-lg-6">
                <h5 class="text-info mb-3">Was ist gutes Tagging?</h5>

                <ul class="small text-light mb-3">
                    <li><strong>Präzise statt generisch:</strong> lieber <code>Produktnamen</code> als <code>Gerät</code>.</li>
                    <li><strong>Fachlich sauber:</strong> Tags sollen echte Produktfamilien, Anwendungsfälle oder Entitäten abbilden.</li>
                    <li><strong>Wenig Überschneidung:</strong> keine unnötig breiten oder doppeldeutigen Tags.</li>
                    <li><strong>Bewusst typisieren:</strong> <code>catalog_entity</code> für echte Katalog-/Entity-Tags, <code>generic</code> nur für allgemeine Zusatzsemantik.</li>
                </ul>

                <p class="small text-warning mb-0">
                    Zu breite Tags wie „Produkt“, „System“ oder „Gerät“ machen das Routing weicher
                    und bringen meist weniger Nutzen als präzise fachliche Tags.
                </p>
            </div>
        </div>
    </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>

    <div class="card bg-black border-secondary text-light mb-4 shadow-sm">
        <div class="card-body">
            <h5 class="text-info mb-3">Neuen Tag hinzufügen</h5>

            <form method="post" action="{{ path('admin_tags_create') }}" class="row g-3">
                <input type="hidden" name="_token" value="{{ csrf_token('admin_tag_create') }}"/>

                <div class="col-md-3">
                    <label class="form-label small text-muted">Label</label>
                    <input class="form-control form-control-sm"
                           name="label"
                           placeholder="z. B. Testomat 808"
                           required/>
                </div>

                <div class="col-md-3">
                    <label class="form-label small text-muted">Slug</label>
                    <input class="form-control form-control-sm"
                           name="slug"
                           placeholder="z. B. testomat-808"
                           required/>
                </div>

                <div class="col-md-3">
                    <label class="form-label small text-muted">Typ</label>
                    <select name="type" class="form-select form-select-sm">
                        {% for choiceLabel, choiceValue in tagTypeChoices %}
                            <option value="{{ choiceValue }}"
                                    {% if choiceValue == 'generic' %}selected{% endif %}>
                                {{ choiceLabel }}
                            </option>
                        {% endfor %}
                    </select>
                </div>

                <div class="col-md-3">
                    <label class="form-label small text-muted">Beschreibung</label>
                    <input class="form-control form-control-sm"
                           name="description"
                           placeholder="Optional: fachlicher Kontext des Tags"/>
                </div>

                <div class="col-12 d-grid d-md-flex justify-content-md-end">
                    <button class="btn btn-sm btn-outline-info">
                        Anlegen
                    </button>
                </div>
            </form>
        </div>
    </div>

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

            <div class="mb-3 d-flex justify-content-between align-items-center flex-wrap gap-2">
                <div>
                    <strong class="text-info">Vorhandene Tags:</strong>
                    <span class="text-muted small ms-2">
                        {{ tags|length }} Einträge
                    </span>
                </div>

                <div class="small text-muted">
                    Dokumentanzahl bezieht sich auf aktive Dokumente.
                </div>
            </div>

            <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: 18%">Label</th>
                        <th style="width: 18%">Slug</th>
                        <th style="width: 14%">Typ</th>
                        <th style="width: 10%">Aktive Dokumente</th>
                        <th style="width: 25%">Beschreibung</th>
                        <th class="text-end" style="width: 15%">Aktion</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for tag in tags %}
                        {% set activeDocumentCount = documentCountByTagId[tag.id.toRfc4122] ?? 0 %}
                        <tr>
                            <td class="fw-semibold">{{ tag.label }}</td>
                            <td><code>{{ tag.slug }}</code></td>
                            <td>
                                {% 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 %}
                            </td>
                            <td>
            <span class="badge text-bg-dark border border-secondary">
                {{ activeDocumentCount }}
            </span>
                            </td>
                            <td>{{ tag.description ?: '-' }}</td>
                            <td class="text-end">
                                <a href="{{ path('admin_tags_assign', { id: tag.id }) }}"
                                   class="btn btn-sm btn-outline-info me-2">
                                    Zuweisen
                                </a>

                                <form method="post"
                                      action="{{ path('admin_tags_delete', {id: tag.id}) }}"
                                      style="display:inline-block;">
                                    <input type="hidden"
                                           name="_token"
                                           value="{{ csrf_token('admin_tag_delete_' ~ tag.id) }}"/>

                                    <button class="btn btn-sm btn-outline-danger"
                                            onclick="return confirm('Tag wirklich löschen? Zuweisungen werden entfernt.')">
                                        Löschen
                                    </button>
                                </form>
                            </td>
                        </tr>
                    {% else %}
                        <tr>
                            <td colspan="6" class="p-4 text-center text-muted">
                                Noch keine Tags vorhanden.
                            </td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>

        </div>
    </div>

{% endblock %}