{% 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">Messages Inbox</h2>
            <div class="text-muted small">All accessible conversation threads across collections.</div>
        </div>
        <div class="card border-secondary summary-card">
            <div class="card-body py-2 px-3">
                <div class="small text-muted">Pending acknowledgements</div>
                <div class="fw-semibold {% if total_needs_your_ack %}text-danger{% endif %}">
                    {{ total_needs_your_ack }} need your acknowledgement
                </div>
                <div class="small mt-1 {% if total_waiting_on_other %}text-warning-emphasis{% else %}text-muted{% endif %}">
                    {{ total_waiting_on_other }} waiting on another user
                </div>
                <div class="small mt-1 text-muted">
                    {{ total_outstanding }} unacknowledged message{{ total_outstanding|pluralize }}
                </div>
                <div class="mt-2">
                    {% if show_all %}
                        <a class="btn btn-sm btn-outline-primary" href="?">Show outstanding first</a>
                    {% else %}
                        <a class="btn btn-sm btn-primary" href="?show=all">Load full history</a>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    {% if inbox_rows %}
        <div class="d-flex flex-column gap-3">
            {% for row in inbox_rows %}
                <section class="card {% if row.outstanding_count %}border-danger-subtle{% else %}border-secondary-subtle{% endif %}">
                    <div class="card-header d-flex flex-wrap justify-content-between align-items-center gap-2">
                        <div>
                            <strong>{{ row.collection.name }}</strong>
                            <span class="text-muted small ms-2">{{ row.target_label }}</span>
                            {% if row.viewer_role == 'moderator' %}
                                <span class="badge bg-dark ms-1">Supervisor</span>
                            {% else %}
                                <span class="badge bg-secondary ms-1">Learner</span>
                            {% endif %}
                        </div>
                        <div class="d-flex flex-wrap gap-2 align-items-center">
                            <span class="badge {% if row.needs_your_ack_count %}bg-danger{% else %}bg-secondary{% endif %}">
                                {{ row.needs_your_ack_count }} need your ack
                            </span>
                            {% if row.waiting_on_other_count %}
                                <span class="badge text-bg-warning">{{ row.waiting_on_other_count }} waiting on other</span>
                            {% endif %}
                            <span class="badge bg-dark-subtle text-dark-emphasis">{{ row.outstanding_count }} total unacknowledged</span>
                            <a class="btn btn-sm btn-outline-secondary" href="{{ row.detail_url }}">Open user message page</a>
                        </div>
                    </div>

                    <div class="card-body">
                        {% if row.outstanding_rows %}
                            <div class="mb-3">
                                <div class="small fw-semibold mb-2">Outstanding</div>
                                <div class="d-flex flex-column gap-2">
                                    {% for case_row in row.outstanding_rows %}
                                        <details open>
                                            <summary class="small fw-semibold d-flex flex-wrap align-items-center gap-2">
                                                <span>Case {{ case_row.casedetail.sort_order|add:1 }}</span>
                                                {% if row.collection.show_title_post %}
                                                    <span class="text-muted">{{ case_row.casedetail.case.title|default:case_row.casedetail.case.pk|truncatechars:90 }}</span>
                                                {% endif %}
                                                <span class="badge {% if case_row.stats.needs_your_ack_count %}bg-danger{% else %}bg-secondary{% endif %}">
                                                    {{ case_row.stats.needs_your_ack_count }} need your ack
                                                </span>
                                                {% if case_row.stats.waiting_on_other_count %}
                                                    <span class="badge text-bg-warning">{{ case_row.stats.waiting_on_other_count }} waiting on other</span>
                                                {% endif %}
                                                <span class="badge bg-dark-subtle text-dark-emphasis">{{ case_row.stats.outstanding_total_count }} total</span>
                                            </summary>
                                            {% if row.viewer_role == 'moderator' %}
                                                <div class="d-flex flex-wrap gap-2 mt-2">
                                                    <a class="btn btn-sm btn-outline-secondary"
                                                       href="{% url 'atlas:collection_detail' row.collection.id %}">
                                                        Collection
                                                    </a>
                                                    <a class="btn btn-sm btn-outline-secondary"
                                                       href="{% url 'atlas:collection_case_view' pk=row.collection.id case_number=case_row.casedetail.sort_order %}">
                                                        Case In Collection
                                                    </a>
                                                    <a class="btn btn-sm btn-outline-primary"
                                                       href="{% if row.attempt.user_user_id %}{% url 'atlas:collection_history_user' row.collection.id row.attempt.user_user_id %}{% else %}{% url 'atlas:collection_history_ciduser' row.collection.id row.attempt.cid_user.cid %}{% endif %}#case-history-{{ case_row.casedetail.case.id }}">
                                                        User Answer In Context
                                                    </a>
                                                </div>
                                            {% elif row.attempt.user_user_id %}
                                                <div class="d-flex flex-wrap gap-2 mt-2">
                                                    <a class="btn btn-sm btn-outline-secondary"
                                                       href="{% url 'atlas:collection_take_overview_user' pk=row.collection.id %}">
                                                        Collection Overview
                                                    </a>
                                                    <a class="btn btn-sm btn-outline-primary"
                                                       href="{% url 'atlas:collection_case_view_take_user_answers' pk=row.collection.id case_number=case_row.casedetail.sort_order %}">
                                                        View My Answer
                                                    </a>
                                                </div>
                                            {% endif %}
                                            <div class="mt-2"
                                                 hx-get="{{ case_row.thread_url }}{% if case_row.cid %}?cid={{ case_row.cid }}{% endif %}"
                                                 hx-trigger="load"
                                                 hx-target="this"
                                                 hx-swap="innerHTML">
                                                <div class="small text-muted">Loading conversation...</div>
                                            </div>
                                        </details>
                                    {% endfor %}
                                </div>
                            </div>
                        {% endif %}

                        {% if show_all and row.history_rows %}
                            <div>
                                <div class="small fw-semibold mb-2">History</div>
                                <div class="accordion" id="history-{{ row.attempt.id }}">
                                    {% for case_row in row.history_rows %}
                                        <div class="accordion-item">
                                            <h2 class="accordion-header" id="history-heading-{{ row.attempt.id }}-{{ case_row.casedetail.case.id }}">
                                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#history-collapse-{{ row.attempt.id }}-{{ case_row.casedetail.case.id }}" aria-expanded="false" aria-controls="history-collapse-{{ row.attempt.id }}-{{ case_row.casedetail.case.id }}">
                                                    Case {{ case_row.casedetail.sort_order|add:1 }}
                                                    {% if row.collection.show_title_post %}
                                                        : {{ case_row.casedetail.case.title|default:case_row.casedetail.case.pk|truncatechars:90 }}
                                                    {% endif %}
                                                    <span class="badge bg-secondary ms-2">{{ case_row.stats.message_count }} messages</span>
                                                    {% if case_row.stats.outstanding_total_count %}
                                                        <span class="badge bg-dark-subtle text-dark-emphasis ms-1">{{ case_row.stats.outstanding_total_count }} unacknowledged</span>
                                                    {% endif %}
                                                </button>
                                            </h2>
                                            <div id="history-collapse-{{ row.attempt.id }}-{{ case_row.casedetail.case.id }}" class="accordion-collapse collapse" aria-labelledby="history-heading-{{ row.attempt.id }}-{{ case_row.casedetail.case.id }}" data-bs-parent="#history-{{ row.attempt.id }}">
                                                <div class="accordion-body pt-0">
                                                    {% if row.viewer_role == 'moderator' %}
                                                        <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' row.collection.id %}">
                                                                Collection
                                                            </a>
                                                            <a class="btn btn-sm btn-outline-secondary"
                                                               href="{% url 'atlas:collection_case_view' pk=row.collection.id case_number=case_row.casedetail.sort_order %}">
                                                                Case In Collection
                                                            </a>
                                                            <a class="btn btn-sm btn-outline-primary"
                                                               href="{% if row.attempt.user_user_id %}{% url 'atlas:collection_history_user' row.collection.id row.attempt.user_user_id %}{% else %}{% url 'atlas:collection_history_ciduser' row.collection.id row.attempt.cid_user.cid %}{% endif %}#case-history-{{ case_row.casedetail.case.id }}">
                                                                User Answer In Context
                                                            </a>
                                                        </div>
                                                    {% elif row.attempt.user_user_id %}
                                                        <div class="d-flex flex-wrap gap-2 mt-2 mb-2">
                                                            <a class="btn btn-sm btn-outline-secondary"
                                                               href="{% url 'atlas:collection_take_overview_user' pk=row.collection.id %}">
                                                                Collection Overview
                                                            </a>
                                                            <a class="btn btn-sm btn-outline-primary"
                                                               href="{% url 'atlas:collection_case_view_take_user_answers' pk=row.collection.id case_number=case_row.casedetail.sort_order %}">
                                                                View My Answer
                                                            </a>
                                                        </div>
                                                    {% endif %}
                                                    <div hx-get="{{ case_row.thread_url }}{% if case_row.cid %}?cid={{ case_row.cid }}{% endif %}"
                                                         hx-trigger="revealed once"
                                                         hx-target="this"
                                                         hx-swap="innerHTML">
                                                        <div class="small text-muted">Open section to load conversation history...</div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    {% endfor %}
                                </div>
                            </div>
                        {% endif %}
                    </div>
                </section>
            {% endfor %}
        </div>
    {% else %}
        <div class="card border-secondary">
            <div class="card-body text-muted small">No message threads available for your account.</div>
        </div>
    {% endif %}
{% endblock %}