{% extends "base.html" %}

{% block title %}Chat{% endblock %}

{% block content %}
<div class="chat-container">
    <!-- Left sidebar with customizable content -->
    <div class="sidebar">
        {% if customisation.logo_url %}
            <div class="logo">
                <img src="{{ customisation.logo_url }}" alt="{{ tenant.name }} Logo">
            </div>
        {% endif %}
        
        <div class="sidebar-content">
            {% if customisation.sidebar_text %}
                <div class="sidebar-text">
                    {{ customisation.sidebar_text|safe }}
                </div>
            {% endif %}
            
            {% if customisation.team_info %}
                <div class="team-info">
                    <h3>Team</h3>
                    <div class="team-members">
                        {% for member in customisation.team_info %}
                            <div class="team-member">
                                {% if member.avatar %}
                                    <img src="{{ member.avatar }}" alt="{{ member.name }}">
                                {% endif %}
                                <div class="member-info">
                                    <h4>{{ member.name }}</h4>
                                    <p>{{ member.role }}</p>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            {% endif %}
        </div>
    </div>
    
    <!-- Main chat area -->
    <div class="chat-main">
        <div class="chat-header">
            <h1>{{ specialist.name }}</h1>
        </div>
        
        <div class="chat-messages" id="chat-messages">
            <!-- Messages will be added here dynamically -->
            {% if customisation.welcome_message %}
                <div class="message bot-message">
                    <div class="message-content">{{ customisation.welcome_message|safe }}</div>
                </div>
            {% else %}
                <div class="message bot-message">
                    <div class="message-content">Hello! How can I help you today?</div>
                </div>
            {% endif %}
        </div>
        
        <div class="chat-input-container">
            <textarea id="chat-input" placeholder="Type your message here..."></textarea>
            <button id="send-button">Send</button>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    // Store session information
    const sessionInfo = {
        tenantId: {{ tenant.id }},
        specialistId: {{ specialist.id }},
        chatSessionId: "{{ session.chat_session_id }}"
    };
    
    // Chat functionality
    document.addEventListener('DOMContentLoaded', function() {
        const chatInput = document.getElementById('chat-input');
        const sendButton = document.getElementById('send-button');
        const chatMessages = document.getElementById('chat-messages');
        
        let currentTaskId = null;
        let pollingInterval = null;
        
        // Function to add a message to the chat
        function addMessage(message, isUser = false) {
            const messageDiv = document.createElement('div');
            messageDiv.className = isUser ? 'message user-message' : 'message bot-message';
            
            const contentDiv = document.createElement('div');
            contentDiv.className = 'message-content';
            contentDiv.innerHTML = message;
            
            messageDiv.appendChild(contentDiv);
            chatMessages.appendChild(messageDiv);
            
            // Scroll to bottom
            chatMessages.scrollTop = chatMessages.scrollHeight;
        }
        
        // Function to send a message
        function sendMessage() {
            const message = chatInput.value.trim();
            if (!message) return;
            
            // Add user message to chat
            addMessage(message, true);
            
            // Clear input
            chatInput.value = '';
            
            // Add loading indicator
            const loadingDiv = document.createElement('div');
            loadingDiv.className = 'message bot-message loading';
            loadingDiv.innerHTML = '<div class="message-content"><div class="typing-indicator"><span></span><span></span><span></span></div></div>';
            chatMessages.appendChild(loadingDiv);
            chatMessages.scrollTop = chatMessages.scrollHeight;
            
            // Send message to server
            fetch('/api/send_message', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    message: message,
                    timezone: Intl.DateTimeFormat().resolvedOptions().timeZone
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.status === 'processing') {
                    currentTaskId = data.task_id;
                    
                    // Start polling for results
                    if (pollingInterval) clearInterval(pollingInterval);
                    pollingInterval = setInterval(checkTaskStatus, 1000);
                } else {
                    // Remove loading indicator
                    chatMessages.removeChild(loadingDiv);
                    
                    // Show error if any
                    if (data.error) {
                        addMessage(`Error: ${data.error}`);
                    }
                }
            })
            .catch(error => {
                // Remove loading indicator
                chatMessages.removeChild(loadingDiv);
                addMessage(`Error: ${error.message}`);
            });
        }
        
        // Function to check task status
        function checkTaskStatus() {
            if (!currentTaskId) return;
            
            fetch(`/api/check_status?task_id=${currentTaskId}`)
            .then(response => response.json())
            .then(data => {
                if (data.status === 'success') {
                    // Remove loading indicator
                    const loadingDiv = document.querySelector('.loading');
                    if (loadingDiv) chatMessages.removeChild(loadingDiv);
                    
                    // Add bot response
                    addMessage(data.answer);
                    
                    // Clear polling
                    clearInterval(pollingInterval);
                    currentTaskId = null;
                } else if (data.status === 'error') {
                    // Remove loading indicator
                    const loadingDiv = document.querySelector('.loading');
                    if (loadingDiv) chatMessages.removeChild(loadingDiv);
                    
                    // Show error
                    addMessage(`Error: ${data.message}`);
                    
                    // Clear polling
                    clearInterval(pollingInterval);
                    currentTaskId = null;
                }
                // If status is 'pending', continue polling
            })
            .catch(error => {
                // Remove loading indicator
                const loadingDiv = document.querySelector('.loading');
                if (loadingDiv) chatMessages.removeChild(loadingDiv);
                
                addMessage(`Error checking status: ${error.message}`);
                
                // Clear polling
                clearInterval(pollingInterval);
                currentTaskId = null;
            });
        }
        
        // Event listeners
        sendButton.addEventListener('click', sendMessage);
        
        chatInput.addEventListener('keydown', function(e) {
            if (e.key === 'Enter' && !e.shiftKey) {
                e.preventDefault();
                sendMessage();
            }
        });
    });
</script>
{% endblock %}