{% extends "base.html" %}

{% block content %}
<div class="container mt-5">
    <h2>Chat Session Details</h2>
    <!-- Session Information -->
    <div class="card mb-4">
        <div class="card-header">
            <h5>Session Information</h5>
            <!-- Timezone Toggle Buttons -->
            <div class="btn-group" role="group">
                <button type="button" class="btn btn-primary" id="toggle-interaction-timezone">Interaction Timezone</button>
                <button type="button" class="btn btn-secondary" id="toggle-admin-timezone">Admin Timezone</button>
            </div>
        </div>
        <div class="card-body">
            <dl class="row">
                <dt class="col-sm-3">Session ID:</dt>
                <dd class="col-sm-9">{{ chat_session.session_id }}</dd>

                <dt class="col-sm-3">Session Start:</dt>
                <dd class="col-sm-9">
                    <span class="timezone interaction-timezone">{{ chat_session.session_start | to_local_time(chat_session.timezone) }}</span>
                    <span class="timezone admin-timezone d-none">{{ chat_session.session_start | to_local_time(session['admin_user_timezone']) }}</span>
                </dd>

                <dt class="col-sm-3">Session End:</dt>
                <dd class="col-sm-9">
                    {% if chat_session.session_end %}
                        <span class="timezone interaction-timezone">{{ chat_session.session_end | to_local_time(chat_session.timezone) }}</span>
                        <span class="timezone admin-timezone d-none">{{ chat_session.session_end | to_local_time(session['admin_user_timezone']) }}</span>
                    {% else %}
                        Ongoing
                    {% endif %}
                </dd>
            </dl>
        </div>
    </div>

    <!-- Interactions List -->
    <div class="card mb-4">
        <div class="card-header">
            <h5>Interactions</h5>
        </div>
        <div class="card-body">
            {% for interaction in interactions %}
                <div class="interaction mb-3">
                    <div class="card">
                        <div class="card-header d-flex justify-content-between">
                            <span>Question:</span>
                            <span class="text-muted">
                                <span class="timezone interaction-timezone">{{ interaction.question_at | to_local_time(interaction.timezone) }}</span>
                                <span class="timezone admin-timezone d-none">{{ interaction.question_at | to_local_time(session['admin_user_timezone']) }}</span>
                                -
                                <span class="timezone interaction-timezone">{{ interaction.answer_at | to_local_time(interaction.timezone) }}</span>
                                <span class="timezone admin-timezone d-none">{{ interaction.answer_at | to_local_time(session['admin_user_timezone']) }}</span>
                                ({{ interaction.question_at | time_difference(interaction.answer_at) }})
                            </span>
                        </div>
                        <div class="card-body">
                            <p><strong>Question:</strong> {{ interaction.question }}</p>
                            <p><strong>Answer:</strong> {{ interaction.answer }}</p>
                            <p>
                                <strong>Algorithm Used:</strong>
                                <i class="material-icons {{ 'fingerprint-rag-' ~ interaction.algorithm_used.lower() }}">
                                    fingerprint
                                </i> {{ interaction.algorithm_used }}
                            </p>
                            <p>
                                <strong>Appreciation:</strong>
                                <i class="material-icons thumb-icon {{ 'thumb_up' if interaction.appreciation == 1 else 'thumb_down' }}">
                                    {{ 'thumb_up' if interaction.appreciation == 1 else 'thumb_down' }}
                                </i>
                            </p>
                            <p><strong>Embeddings:</strong>
                                {% if interaction.embeddings %}
                                    {% for embedding in interaction.embeddings %}
                                        <a href="{{ url_for('interaction_bp.view_embedding', embedding_id=embedding.embedding_id) }}" class="badge badge-info">
                                            {{ embedding.embedding_id }}
                                        </a>
                                    {% endfor %}
                                {% else %}
                                    None
                                {% endif %}
                            </p>
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Elements to toggle
        const interactionTimes = document.querySelectorAll('.interaction-timezone');
        const adminTimes = document.querySelectorAll('.admin-timezone');

        // Buttons
        const interactionButton = document.getElementById('toggle-interaction-timezone');
        const adminButton = document.getElementById('toggle-admin-timezone');

        // Toggle to Interaction Timezone
        interactionButton.addEventListener('click', function() {
            interactionTimes.forEach(el => el.classList.remove('d-none'));
            adminTimes.forEach(el => el.classList.add('d-none'));
            interactionButton.classList.add('btn-primary');
            interactionButton.classList.remove('btn-secondary');
            adminButton.classList.add('btn-secondary');
            adminButton.classList.remove('btn-primary');
        });

        // Toggle to Admin Timezone
        adminButton.addEventListener('click', function() {
            interactionTimes.forEach(el => el.classList.add('d-none'));
            adminTimes.forEach(el => el.classList.remove('d-none'));
            interactionButton.classList.add('btn-secondary');
            interactionButton.classList.remove('btn-primary');
            adminButton.classList.add('btn-primary');
            adminButton.classList.remove('btn-secondary');
        });
    });
</script>
{% endblock %}