{% load django_htmx %}
<div id="series-tag-consistency-panel">
    <div class="modal-header">
        <h5 class="modal-title">Series Tag Consistency</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
    </div>

    <div class="modal-body d-flex flex-column gap-3">
        <div class="d-flex flex-wrap gap-2 align-items-center">
            <button type="button"
                    class="btn btn-outline-info btn-sm"
                    hx-get="{% url 'atlas:series_tag_consistency' pk=series.pk %}?analyze=1"
                    hx-target="#series-tag-consistency-panel"
                    hx-swap="outerHTML"
                    hx-indicator="#series-tag-consistency-indicator">
                Re-run analysis
            </button>
            <span id="series-tag-consistency-indicator" class="spinner-border spinner-border-sm text-info htmx-indicator" role="status" aria-hidden="true"></span>
            {% if analyze_requested %}
                <span class="small text-muted">Scanned {{ image_count }} image{{ image_count|pluralize }}</span>
            {% endif %}
        </div>

        <div id="tag-consistency-split-result"></div>

        {% if analyze_requested %}
            <div class="small d-flex flex-wrap gap-2">
                <span class="badge text-bg-success">Same: {{ same_tags|length }}</span>
                <span class="badge text-bg-warning">Different: {{ different_tags|length }}</span>
                <span class="badge text-bg-secondary">Missing in some: {{ partial_tags|length }}</span>
            </div>

            <div>
                <label for="tag-consistency-filter-{{ series.pk }}" class="form-label form-label-sm mb-1">Filter tags</label>
                <input id="tag-consistency-filter-{{ series.pk }}" type="text" class="form-control form-control-sm" placeholder="Type to filter by tag name or value">
            </div>

            <details class="styled-detail" open>
                <summary>Different tags (highlighted)</summary>
                <div class="table-responsive mt-2">
                    <table class="table table-sm table-striped align-middle mb-0">
                        <thead>
                            <tr>
                                <th>Tag</th>
                                <th>Unique values</th>
                                <th>Sample values</th>
                                <th>Split</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for row in different_tags %}
                                <tr class="table-warning" data-filter-row="1">
                                    <td>{{ row.tag_name }}</td>
                                    <td>{{ row.unique_count }}</td>
                                    <td>{{ row.sample_values|join:", " }}</td>
                                    <td>
                                        {% if can_split %}
                                            <form method="post"
                                                  action="{% url 'atlas:series_split_by_tag' pk=series.pk %}"
                                                  hx-post="{% url 'atlas:series_split_by_tag' pk=series.pk %}"
                                                  hx-target="#tag-consistency-split-result"
                                                  hx-swap="innerHTML"
                                                  hx-indicator="#tag-consistency-split-indicator">
                                                {% csrf_token %}
                                                <input type="hidden" name="dicom_tag" value="{{ row.tag_name }}">
                                                <button type="submit" class="btn btn-outline-warning btn-sm">Split</button>
                                            </form>
                                        {% else %}
                                            <span class="text-muted small">No split access</span>
                                        {% endif %}
                                    </td>
                                </tr>
                            {% empty %}
                                <tr>
                                    <td colspan="4" class="text-muted">No tags vary across all images.</td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </details>

            <details class="styled-detail">
                <summary>Same tags</summary>
                <div class="table-responsive mt-2">
                    <table class="table table-sm table-striped align-middle mb-0">
                        <thead>
                            <tr>
                                <th>Tag</th>
                                <th>Value</th>
                                <th>Split</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for row in same_tags %}
                                <tr class="table-success" data-filter-row="1">
                                    <td>{{ row.tag_name }}</td>
                                    <td>{{ row.sample_values.0 }}</td>
                                    <td>
                                        {% if can_split %}
                                            <form method="post"
                                                  action="{% url 'atlas:series_split_by_tag' pk=series.pk %}"
                                                  hx-post="{% url 'atlas:series_split_by_tag' pk=series.pk %}"
                                                  hx-target="#tag-consistency-split-result"
                                                  hx-swap="innerHTML"
                                                  hx-indicator="#tag-consistency-split-indicator">
                                                {% csrf_token %}
                                                <input type="hidden" name="dicom_tag" value="{{ row.tag_name }}">
                                                <button type="submit" class="btn btn-outline-warning btn-sm">Split</button>
                                            </form>
                                        {% else %}
                                            <span class="text-muted small">No split access</span>
                                        {% endif %}
                                    </td>
                                </tr>
                            {% empty %}
                                <tr>
                                    <td colspan="3" class="text-muted">No uniform tags found across all images.</td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </details>

            <details class="styled-detail">
                <summary>Missing in some images</summary>
                <div class="table-responsive mt-2">
                    <table class="table table-sm table-striped align-middle mb-0">
                        <thead>
                            <tr>
                                <th>Tag</th>
                                <th>Present in</th>
                                <th>Unique values</th>
                                <th>Split</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for row in partial_tags %}
                                <tr class="table-secondary" data-filter-row="1">
                                    <td>{{ row.tag_name }}</td>
                                    <td>{{ row.present_count }}/{{ image_count }}</td>
                                    <td>{{ row.unique_count }}</td>
                                    <td>
                                        {% if can_split %}
                                            <form method="post"
                                                  action="{% url 'atlas:series_split_by_tag' pk=series.pk %}"
                                                  hx-post="{% url 'atlas:series_split_by_tag' pk=series.pk %}"
                                                  hx-target="#tag-consistency-split-result"
                                                  hx-swap="innerHTML"
                                                  hx-indicator="#tag-consistency-split-indicator">
                                                {% csrf_token %}
                                                <input type="hidden" name="dicom_tag" value="{{ row.tag_name }}">
                                                <button type="submit" class="btn btn-outline-warning btn-sm">Split</button>
                                            </form>
                                        {% else %}
                                            <span class="text-muted small">No split access</span>
                                        {% endif %}
                                    </td>
                                </tr>
                            {% empty %}
                                <tr>
                                    <td colspan="4" class="text-muted">All scanned tags were present in every image.</td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </details>
        {% else %}
            <p class="small text-muted mb-0">Run analysis to quickly highlight tags that are the same or different across the series.</p>
        {% endif %}
    </div>

    <div class="modal-footer">
        <span id="tag-consistency-split-indicator" class="spinner-border spinner-border-sm text-warning htmx-indicator me-auto" role="status" aria-hidden="true"></span>
        <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Close</button>
    </div>
</div>

<script>
    (function() {
        const filterInput = document.getElementById("tag-consistency-filter-{{ series.pk }}");
        if (!filterInput) {
            return;
        }

        const rows = document.querySelectorAll("#series-tag-consistency-panel tr[data-filter-row='1']");

        function applyFilter() {
            const query = filterInput.value.trim().toLowerCase();
            rows.forEach((row) => {
                const text = row.textContent.toLowerCase();
                row.style.display = text.includes(query) ? "" : "none";
            });
        }

        filterInput.addEventListener("input", applyFilter);
    })();
</script>