{% extends 'atlas/exams.html' %}

{% block content %}
    <div class="d-flex flex-wrap justify-content-between align-items-start gap-3 mb-4">
        <div>
            <h2 class="h4 mb-1">{{ collection.name }}</h2>
            <div class="text-muted small">Message hub for <strong>{{ target_label }}</strong></div>
        </div>
        <div class="card border-secondary summary-card">
            <div class="card-body py-2 px-3">
                <div class="small text-muted">Outstanding messages</div>
                <div class="fw-semibold {% if total_outstanding_messages %}text-danger{% endif %}">
                    {{ total_outstanding_messages }} awaiting acknowledgement
                </div>
                <div class="mt-2 d-flex flex-wrap gap-2">
                    <a class="btn btn-sm btn-outline-secondary" href="{% url 'atlas:collection_history' collection.pk %}">Back to Collection History</a>
                    <a class="btn btn-sm btn-outline-secondary" href="{% if target_user %}{% url 'atlas:collection_history_user' collection.pk target_user.pk %}{% else %}{% url 'atlas:collection_history_ciduser' collection.pk target_cid %}{% endif %}">
                        Open Full Attempt Page
                    </a>
                </div>
                <div class="mt-2">
                    {% if show_all %}
                        <a class="btn btn-sm btn-outline-primary" href="?">Show outstanding only</a>
                    {% else %}
                        <a class="btn btn-sm btn-primary" href="?show=all">Load all conversation history</a>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    {% if outstanding_rows %}
        <div class="mb-4">
            <h3 class="h5 mb-3">Outstanding Messages</h3>
            <div class="d-flex flex-column gap-3">
                {% for row in outstanding_rows %}
                    <section id="case-feedback-{{ row.casedetail.case.id }}" class="card border-danger-subtle">
                        <div class="card-header d-flex flex-wrap justify-content-between align-items-center gap-2">
                            <div>
                                <strong>Case {{ row.casedetail.sort_order|add:1 }}</strong>
                                {% if collection.show_title_post %}
                                    <span class="ms-1">{{ row.casedetail.case.title|default:row.casedetail.case.pk|truncatechars:90 }}</span>
                                {% endif %}
                            </div>
                            <span class="badge bg-danger">{{ row.stats.outstanding_total_count }} outstanding</span>
                        </div>
                        <div class="card-body pt-0">
                            <div class="d-flex flex-wrap gap-2 mt-2 mb-2">
                                <a class="btn btn-sm btn-outline-secondary" href="{% url 'atlas:collection_detail' collection.id %}">
                                    Collection
                                </a>
                                <a class="btn btn-sm btn-outline-secondary" href="{% url 'atlas:collection_case_view' pk=collection.id case_number=row.casedetail.sort_order %}">
                                    Case In Collection
                                </a>
                                <a class="btn btn-sm btn-outline-primary" href="{% if target_user %}{% url 'atlas:collection_history_user' collection.id target_user.id %}{% else %}{% url 'atlas:collection_history_ciduser' collection.id target_cid %}{% endif %}#case-history-{{ row.casedetail.case.id }}">
                                    User Answer In Context
                                </a>
                            </div>
                            <div hx-get="{{ row.thread_url }}{% if row.cid %}?cid={{ row.cid }}{% endif %}"
                                 hx-trigger="load"
                                 hx-target="this"
                                 hx-swap="innerHTML">
                                <div class="small text-muted p-3">Loading conversation...</div>
                            </div>
                        </div>
                    </section>
                {% endfor %}
            </div>
        </div>
    {% else %}
        <div class="alert alert-success">No outstanding messages for this user.</div>
    {% endif %}

    {% if show_all %}
        {% if history_rows %}
            <div>
                <h3 class="h5 mb-3">Conversation History</h3>
                <div class="accordion" id="userMessageHistoryAccordion">
                    {% for row in history_rows %}
                        <div class="accordion-item" id="history-case-{{ row.casedetail.case.id }}">
                            <h2 class="accordion-header" id="history-heading-{{ row.casedetail.case.id }}">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#history-collapse-{{ row.casedetail.case.id }}" aria-expanded="false" aria-controls="history-collapse-{{ row.casedetail.case.id }}">
                                    Case {{ row.casedetail.sort_order|add:1 }}
                                    {% if collection.show_title_post %}
                                        : {{ row.casedetail.case.title|default:row.casedetail.case.pk|truncatechars:90 }}
                                    {% endif %}
                                    <span class="badge bg-secondary ms-2">{{ row.stats.message_count }} messages</span>
                                </button>
                            </h2>
                            <div id="history-collapse-{{ row.casedetail.case.id }}" class="accordion-collapse collapse" aria-labelledby="history-heading-{{ row.casedetail.case.id }}" data-bs-parent="#userMessageHistoryAccordion">
                                <div class="accordion-body pt-0">
                                    <div class="d-flex flex-wrap gap-2 mt-2 mb-2">
                                        <a class="btn btn-sm btn-outline-secondary" href="{% url 'atlas:collection_detail' collection.id %}">
                                            Collection
                                        </a>
                                        <a class="btn btn-sm btn-outline-secondary" href="{% url 'atlas:collection_case_view' pk=collection.id case_number=row.casedetail.sort_order %}">
                                            Case In Collection
                                        </a>
                                        <a class="btn btn-sm btn-outline-primary" href="{% if target_user %}{% url 'atlas:collection_history_user' collection.id target_user.id %}{% else %}{% url 'atlas:collection_history_ciduser' collection.id target_cid %}{% endif %}#case-history-{{ row.casedetail.case.id }}">
                                            User Answer In Context
                                        </a>
                                    </div>
                                    <div hx-get="{{ row.thread_url }}{% if row.cid %}?cid={{ row.cid }}{% endif %}"
                                         hx-trigger="revealed once"
                                         hx-target="this"
                                         hx-swap="innerHTML">
                                        <div class="small text-muted p-3">Open section to load history...</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            </div>
        {% elif not outstanding_rows %}
            <div class="card border-secondary">
                <div class="card-body text-muted small">No conversation history for this user yet.</div>
            </div>
        {% endif %}
    {% endif %}
{% endblock %}