{% 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_query if specialist_results and specialist_results.detailed_query else specialist_arguments.query }}
                        </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 class="code-wrapper">
                            <pre><code class="language-json" style="width: 100%;">{{ specialist_arguments | tojson(indent=2) }}</code></pre>
                        </div>
                    </div>
                    {% endif %}

                    <!-- Results Section -->
                    {% if specialist_results %}
                    <div class="mb-4">
                        <h6 class="mb-3">Specialist Results:</h6>
                        <div class="code-wrapper">
                            <pre><code class="language-json" style="width: 100%;">{{ specialist_results | tojson(indent=2) }}</code></pre>
                        </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 %}

{% block styles %}
{{ super() }}
<style>
    .interaction-header {
        font-size: 0.9rem;
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: 0.5rem 0;
    }

    .interaction-metadata {
        display: flex;
        gap: 1rem;
        align-items: center;
        margin-bottom: 0.5rem;
    }

    .interaction-time {
        font-size: 0.9rem;
    }

    .specialist-info {
        display: flex;
        gap: 0.5rem;
        align-items: center;
    }

    .interaction-question {
        font-size: 0.9rem;
        font-weight: bold;
        line-height: 1.4;
    }

    .badge {
        font-size: 0.9rem;
        padding: 0.35em 0.65em;
        white-space: nowrap;
    }

    .accordion-button {
        padding: 0.5rem 1rem;
    }

    .accordion-button::after {
        margin-left: 1rem;
    }

    .json-display {
        background-color: #f8f9fa;
        border-radius: 4px;
        padding: 15px;
        margin: 0;
        white-space: pre-wrap;
        word-wrap: break-word;
        font-family: monospace;
        font-size: 0.85rem;
        line-height: 1.5;
        max-width: 100%;
        overflow-x: auto;
    }

    .list-group-item {
        font-size: 0.9rem;
    }

    .material-icons {
        font-size: 1.1rem;
    }

    pre {
        margin: 0;
        padding: 0;
        white-space: pre-wrap !important;       /* Force wrapping */
        word-wrap: break-word !important;       /* Break long words if necessary */
        max-width: 100%;                        /* Ensure container doesn't overflow */
    }

    pre, code {
        margin: 0;
        padding: 0;
        white-space: pre-wrap !important;       /* Force wrapping */
        word-wrap: break-word !important;       /* Break long words if necessary */
        max-width: 100%;                        /* Ensure container doesn't overflow */
    }

    pre code {
        padding: 1rem !important;
        border-radius: 4px;
        font-size: 0.75rem;
        line-height: 1.5;
        white-space: pre-wrap !important;       /* Force wrapping in code block */
    }

    .code-wrapper {
        position: relative;
        width: 100%;
    }

    /* Override all possible highlight.js white-space settings */
    .code-wrapper pre,
    .code-wrapper pre code,
    .code-wrapper pre code.hljs,
    .code-wrapper .hljs {
        white-space: pre-wrap !important;
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
        word-break: break-word !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    .code-wrapper pre {
        margin: 0;
        background: #f8f9fa;
        border-radius: 4px;
    }

    .code-wrapper pre code {
        padding: 1rem !important;
        font-family: monospace;
        font-size: 0.9rem;
        line-height: 1.5;
        display: block;
    }

    /* Override highlight.js default nowrap behavior */
    .hljs {
        background: #f8f9fa !important;
        white-space: pre-wrap !important;
        word-wrap: break-word !important;
    }

    /* Color theme */
    .hljs-string {
        color: #0a3069 !important;
    }

    .hljs-attr {
        color: #953800 !important;
    }

    .hljs-number {
        color: #116329 !important;
    }

    .hljs-boolean {
        color: #0550ae !important;
    }
</style>
{% endblock %}

{% block scripts %}
{{ super() }}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Initialize syntax highlighting
    document.querySelectorAll('pre code').forEach((block) => {
        hljs.highlightElement(block);
    });
});
</script>
{% endblock %}