{% extends "base.html" %}
{% block title %}Session Overview{% endblock %}

{% block content_title %}Session Overview{% endblock %}
{% block content_description %}An overview of the chat session.{% endblock %}

{% block content %}
<div class="container mt-5">
    <h4>Chat Session Details</h4>
    <div class="card mb-4">
        <div class="card-header">
            <h5>Session Information</h5>
        </div>
        <div class="card-body">
            <p><strong>Session ID:</strong> {{ chat_session.session_id }}</p>
            <p><strong>User:</strong> {{ chat_session.user.user_name if chat_session.user else 'Anonymous' }}</p>
            <p><strong>Start:</strong> {{ chat_session.session_start | to_local_time(chat_session.timezone) }}</p>
            <p><strong>End:</strong> {{ chat_session.session_end | to_local_time(chat_session.timezone) if chat_session.session_end else 'Ongoing' }}</p>
        </div>
    </div>

    <h5>Interactions</h5>
    <div class="accordion" id="interactionsAccordion">
        {% for interaction, id, question_at, specialist_arguments, specialist_results, specialist_name, specialist_type in interactions %}
        <div class="accordion-item">
            <p class="accordion-header" id="heading{{ loop.index }}">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                        data-bs-target="#collapse{{ loop.index }}" aria-expanded="false"
                        aria-controls="collapse{{ loop.index }}">
                    <div class="interaction-header">
                        <div class="interaction-metadata">
                            <div class="interaction-time text-muted">
                                {{ question_at | to_local_time(chat_session.timezone) }}
                            </div>
                            <div class="specialist-info">
                                <span class="badge bg-primary">{{ specialist_name if specialist_name else 'No Specialist' }}</span>
                                <span class="badge bg-secondary">{{ specialist_type if specialist_type else '' }}</span>
                            </div>
                        </div>
                        <div class="interaction-question">
                            {{ specialist_results.detailed_question if specialist_results and specialist_results.detailed_question else specialist_arguments.question }}
                        </div>
                    </div>
                </button>
            </p>
            <div id="collapse{{ loop.index }}" class="accordion-collapse collapse" aria-labelledby="heading{{ loop.index }}"
                 data-bs-parent="#interactionsAccordion">
                <div class="accordion-body">
                    <!-- Arguments Section -->
                    {% if specialist_arguments %}
                    <div class="mb-4">
                        <h6 class="mb-3">Specialist Arguments:</h6>
                        <div id="args-viewer-{{ loop.index }}" class="json-viewer" style="height: 300px; width: 100%;"></div>
                        <div id="args-viewer-{{ loop.index }}-data" class="d-none">{{ specialist_arguments | tojson(indent=2) }}</div>
                    </div>
                    {% endif %}


                    <!-- Results Section -->
                    {% if specialist_results %}
                    <div class="mb-4">
                        <h6 class="mb-3">Specialist Results:</h6>
                        <div id="results-viewer-{{ loop.index }}" class="json-viewer" style="height: 300px; width: 100%;"></div>
                        <div id="results-viewer-{{ loop.index }}-data" class="d-none">{{ specialist_results | tojson(indent=2) }}</div>
                    </div>
                    {% endif %}

                    <!-- Related Documents Section -->
                    {% if embeddings_dict.get(id) %}
                    <div class="mt-4">
                        <h6>Related Documents:</h6>
                        <ul class="list-group">
                            {% for embedding in embeddings_dict[id] %}
                            <li class="list-group-item">
                                {% if embedding.url %}
                                <a href="{{ embedding.url }}" target="_blank" class="text-decoration-none">
                                    <i class="material-icons align-middle me-2">link</i>
                                    {{ embedding.url }}
                                </a>
                                {% else %}
                                <i class="material-icons align-middle me-2">description</i>
                                {{ embedding.object_name }}
                                {% endif %}
                            </li>
                            {% endfor %}
                        </ul>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
</div>
{% endblock %}