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

{% block content %}
    <div class="d-flex flex-wrap justify-content-between align-items-start gap-3 mb-3">
        <div>
            <h2 class="h4 mb-1">{{ collection.name }}</h2>
            <div class="text-muted small">Learner: <strong>{{ user }}</strong></div>
        </div>
        <div class="card border-secondary summary-card">
            <div class="card-body py-2 px-3">
                <div class="small text-muted">Attempt Progress</div>
                <div class="fw-semibold">{{ answer_count }} / {{ collection_length }} answered</div>
                <div class="progress progress-compact mt-2">
                    <div class="progress-bar" role="progressbar" style="width: {% widthratio answer_count collection_length 100 %}%"></div>
                </div>
                <div class="mt-2 small">Started: {{ cid_user_exam.start_time }}</div>
            </div>
        </div>
    </div>

    <div class="list-group mb-4">
        {% for row in history_rows %}
            <div id="case-history-{{ row.casedetail.case.id }}" class="list-group-item {% if not row.user_answer %}bg-danger-subtle border-danger-subtle{% endif %}">
                <div class="d-flex flex-wrap justify-content-between align-items-start gap-2 mb-2">
                    <div>
                        <div class="fw-semibold">
                            Case {{ forloop.counter }}: {{ row.casedetail.case.title|default:row.casedetail.case.pk|truncatechars:80 }}
                            {% if row.user_answer and row.user_answer.completed %}
                                <span class="badge bg-success-subtle text-success-emphasis ms-2">Completed</span>
                            {% elif row.user_answer %}
                                <span class="badge bg-warning-subtle text-warning-emphasis ms-2">Saved</span>
                            {% else %}
                                <span class="badge bg-danger-subtle text-danger-emphasis ms-2">Not answered</span>
                            {% endif %}
                            {% if row.self_reviews %}
                                <span class="badge bg-info-subtle text-info-emphasis ms-1">{{ row.self_reviews|length }} self review{{ row.self_reviews|length|pluralize }}</span>
                            {% endif %}
                        </div>
                        <div class="small text-muted">
                            Started: {{ row.user_answer.started_at|default:'-' }}
                            {% if row.user_answer %}
                                · Submitted: {{ row.user_answer.submitted_at|default:'-' }}
                            {% endif %}
                        </div>
                    </div>
                    <div class="d-flex flex-wrap gap-2">
                        <a class="btn btn-sm btn-primary"
                           href="{% url 'atlas:collection_case_view_take_review_user' pk=collection.id case_number=forloop.counter0 user_pk=user.pk %}">
                            Open Case
                        </a>
                        {% if request.user.is_superuser and row.user_answer %}
                            {% if row.user_answer.user_id %}
                                <a class="btn btn-sm btn-outline-secondary"
                                   href="{% url 'admin:atlas_userreportanswer_change' row.user_answer.pk %}"
                                   target="_blank">
                                    Edit in admin
                                </a>
                            {% else %}
                                <a class="btn btn-sm btn-outline-secondary"
                                   href="{% url 'admin:atlas_cidreportanswer_change' row.user_answer.pk %}"
                                   target="_blank">
                                    Edit in admin
                                </a>
                            {% endif %}
                        {% endif %}
                        {% if row.self_reviews %}
                            {% for review in row.self_reviews %}
                                <a class="btn btn-sm btn-outline-info"
                                   href="{% url 'atlas:self_review_detail' cid_user_exam.id row.casedetail.case.id review.id %}">
                                    View Self Review {{ forloop.counter }}
                                </a>
                            {% endfor %}
                        {% endif %}
                    </div>
                </div>

                {% if not row.user_answer %}
                    <div class="small text-muted">This case has not been answered yet.</div>
                {% else %}
                    <details class="mb-3" open>
                        <summary class="small fw-semibold">Answer / Report</summary>
                        <div class="small mt-2 p-3 rounded bg-body-tertiary border">
                            {% if row.user_answer.answer %}
                                {{ row.user_answer.answer|linebreaksbr }}
                            {% else %}
                                <div class="mb-2">{{ row.user_answer.json_answer }}</div>
                                {% for value, single_answer, correct_answer, answer_is_correct, automark in row.user_answer.get_correct_json_answers %}
                                    <div class="mb-2 p-2 border rounded {% if answer_is_correct %}border-success-subtle{% else %}border-danger-subtle{% endif %}">
                                        <div class="fw-semibold">
                                            {{ value.title }}
                                            {% if answer_is_correct %}
                                                <span class="text-success">✓</span>
                                            {% elif automark %}
                                                <span class="text-danger">✗</span>
                                            {% else %}
                                                <span class="text-warning">✗</span>
                                            {% endif %}
                                        </div>
                                        <div class="small text-muted">{{ value.description }}</div>
                                        <div class="small mt-1">Answer: {{ single_answer|default:'Not answered' }}</div>
                                        {% if not answer_is_correct and correct_answer %}
                                            <div class="small text-muted">Correct answer: {{ correct_answer }}</div>
                                        {% endif %}
                                    </div>
                                {% endfor %}
                            {% endif %}

                        </div>
                    </details>
                {% endif %}

                {% if row.self_reviews %}
                    <details class="mb-3">
                        <summary class="small fw-semibold">Self Reviews</summary>
                        <div class="d-flex flex-column gap-2 mt-2">
                            {% for review in row.self_reviews %}
                                <div class="border rounded p-3 bg-body-tertiary">
                                    <div class="d-flex justify-content-between align-items-start gap-2 mb-2">
                                        <div class="small text-muted">Updated: {{ review.review_update_date|date:"Y-m-d H:i" }}</div>
                                        <div class="d-flex gap-2">
                                            <a class="btn btn-sm btn-outline-info"
                                               href="{% url 'atlas:self_review_detail' cid_user_exam.id row.casedetail.case.id review.id %}">
                                                View
                                            </a>
                                            <a class="btn btn-sm btn-outline-warning"
                                               href="{% url 'atlas:self_review_update' cid_user_exam.id row.casedetail.case.id review.id %}">
                                                Edit
                                            </a>
                                        </div>
                                    </div>
                                    <div class="small mb-1"><strong>Findings:</strong> {{ review.findings|default:'-' }}/5</div>
                                    <div class="small mb-2"><strong>Interpretation:</strong> {{ review.interpretation|default:'-' }}/5</div>
                                    <div class="small text-body-secondary">{{ review.comments|default:'No comments added.'|linebreaksbr }}</div>
                                </div>
                            {% endfor %}
                        </div>
                    </details>
                {% endif %}

                {% if collection.case_query_messaging_enabled %}
                    <details class="mt-3" {% if row.case_review_stats.has_outstanding_any %}open{% endif %}>
                        <summary class="small fw-semibold d-flex flex-wrap align-items-center gap-2">
                            <span>Case conversation</span>
                            {% if row.case_review_stats.has_outstanding_any %}
                                <span class="badge bg-danger">{{ row.case_review_stats.outstanding_total_count }} unacknowledged message{{ row.case_review_stats.outstanding_total_count|pluralize }}</span>
                            {% elif row.case_review_stats.has_messages %}
                                <span class="badge bg-secondary">{{ row.case_review_stats.message_count }} message{{ row.case_review_stats.message_count|pluralize }}</span>
                            {% else %}
                                <span class="text-muted">No messages yet</span>
                            {% endif %}
                        </summary>

                        <div class="mt-2"
                             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">Loading case conversation...</div>
                        </div>
                    </details>
                {% endif %}
            </div>
        {% endfor %}
    </div>
{% endblock %}