{% extends "layouts.html" %}

{% block content %}
<div class="container mt-5" id="chat-container" data-eval-id="{{ eval_id }}">
    <h4>Chat Playground for Eval ID: {{ eval_id }}</h4>
    <div class="chat-messages" style="height: 400px; overflow-y: auto; border: 1px solid #ccc; padding: 10px; margin-bottom: 20px;">
        <!-- Chat messages will be dynamically added here -->
    </div>
    <form id="chatForm" class="mt-3">
        <div class="input-group mb-3">
            <input type="text" id="userMessage" class="form-control" placeholder="Type your message..." required>
            <button class="btn btn-primary" type="submit" id="sendMessage" disabled>Send</button>
        </div>
    </form>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script>

<script>
    let currentSessionId = null;
    var evalId = document.getElementById('chat-container').getAttribute('data-eval-id');

    $(document).ready(function() {
        // const evalId = $('.container').data('eval-id');
        $('.chat-messages').append('<div class="text-center"><div class="spinner-border" role="status"><span class="visually-hidden">Loading...</span></div><p>Initializing chat session...</p></div>');
        console.log(evalId)
        $.ajax({
            url: `/create_chat_session`,
            method: 'POST',
            contentType: 'application/json',
            data: JSON.stringify({ eval_id: evalId }),
            success: function(response) {
                currentSessionId = response.session_id;
                console.log(currentSessionId)
                $('.chat-messages').empty();
                $('#sendMessage').prop('disabled', false);
            },
            error: function(error) {
                console.error('Error creating chat session:', error);
                $('.chat-messages').append('<div class="text-center text-danger"><p>Failed to create chat session. Please try again.</p></div>');
            }
        });
    });

    $('#chatForm').submit(function(e) {
        e.preventDefault();
        const message = $('#userMessage').val();
        if (!message.trim() || !currentSessionId) return;

        // Add user message to chat
        $('.chat-messages').append(`
            <div class="d-flex justify-content-end mb-4">
                <div class="msg_cotainer_send">
                    ${message}
                </div>
                <div class="img_cont_send">
                    &ensp;<img src="/static/user-avatar.png" class="rounded-circle user_img_send">
                </div>
            </div>
        `);

        $('#userMessage').val('');
        $('#sendMessage').prop('disabled', true);

        // Add AI response placeholder
        $('.chat-messages').append(`
            <div class="d-flex justify-content-start mb-4 ai-response-spinner">
                <div class="img_cont_msg">
                    <img src="/static/ai-avatar.png" class="rounded-circle user_img_msg">&ensp;
                </div>
                <div class="msg_cotainer">
                    <div class="spinner-border spinner-border-sm" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                    Generating response...
                </div>
            </div>
        `);

        $('.chat-messages').scrollTop($('.chat-messages')[0].scrollHeight);

        // Send message to backend
        $.ajax({
            url: `/chat/${currentSessionId}`,
            method: 'POST',
            contentType: 'application/json',
            data: JSON.stringify({ message: message }),
            success: function(response) {
                $('.ai-response-spinner').remove();
                // Add AI response to chat
                $('.chat-messages').append(`
                    <div class="d-flex justify-content-start mb-4">
                        <div class="img_cont_msg">
                            <img src="/static/ai-avatar.png" class="rounded-circle user_img_msg">&ensp;
                        </div>
                        <div class="msg_cotainer">
                            ${response.answer}
                        </div>
                    </div>
                `);
                $('.chat-messages').scrollTop($('.chat-messages')[0].scrollHeight);
            },
            error: function(error) {
                $('.ai-response-spinner').remove();
                console.error('Error sending message:', error);
                $('.chat-messages').append(`<div class="text-danger">Error: Failed to get response</div>`);
            },
            complete: function() {
                $('#sendMessage').prop('disabled', false);
            }
        });
    });

    $('#userMessage').on('input', function() {
        $('#sendMessage').prop('disabled', $(this).val().trim() === '');
    });
    
</script>
{% endblock content %}