{% extends 'allauth/layouts/base.html' %}

{% block title %}Process RAG Data: {{ chatbot.name }}{% endblock %}

{% block content %}
<div class="container mt-4">
    <h1>Process RAG Data: {{ chatbot.name }}</h1>
    <p>Click the button below to process RAG data for this chatbot. Logs will appear in real-time.</p>

    <div class="card p-4 mb-4">
        <form id="process-rag-form" method="post">
            {% csrf_token %}
            <button type="submit" class="btn btn-success" id="process-button">Process RAG Data</button>
        </form>

        <!-- Real-time log display -->
        <div id="log-area" class="border p-3 mt-3" style="height: 400px; overflow-y: auto; background-color: #f8f9fa; font-family: monospace;">
            <p>Waiting for processing to start...</p>
        </div>
    </div>

    <a href="{% url 'chatbot_detail' chatbot.id %}" class="btn btn-secondary">Back to Chatbot Details</a>
</div>

<script>
    document.getElementById('process-rag-form').addEventListener('submit', async function(e) {
        e.preventDefault();
        const processButton = document.getElementById('process-button');
        const logArea = document.getElementById('log-area');
        const csrfToken = document.querySelector('input[name="csrfmiddlewaretoken"]').value;

        // Disable button and gray it out
        processButton.disabled = true;
        processButton.classList.add('btn-disabled', 'opacity-50');

        // Clear log area
        logArea.innerHTML = '<p>Starting RAG processing...</p>';

        try {
            const response = await fetch('{% url 'process_rag_data' chatbot.id %}', {
                method: 'POST',
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'X-CSRFToken': csrfToken,
                    'Accept': 'text/event-stream'
                }
            });

            if (!response.ok) {
                const errorText = await response.text();
                console.error('Fetch error:', response.status, errorText);
                appendLog(`Error: Server returned status ${response.status}: ${errorText}`, 'text-danger');
                return;
            }

            const reader = response.body.getReader();
            const decoder = new TextDecoder();
            let buffer = '';

            while (true) {
                const { done, value } = await reader.read();
                if (done) {
                    console.log('SSE stream ended');
                    break;
                }

                buffer += decoder.decode(value, { stream: true });
                const lines = buffer.split('\n');
                buffer = lines.pop(); // Keep incomplete line in buffer

                for (const line of lines) {
                    if (line.startsWith('data: ')) {
                        const message = line.slice(6).trim();
                        console.log('Received SSE message:', message);
                        if (message === '[DONE]') {
                            appendLog('Processing completed.', 'text-success');
                            return;
                        } else if (message.startsWith('ERROR:')) {
                            appendLog(message, 'text-danger');
                            return;
                        } else {
                            appendLog(message);
                        }
                    }
                }
            }
        } catch (error) {
            console.error('SSE fetch error:', error);
            appendLog(`Error: Failed to connect to server: ${error.message}`, 'text-danger');
        } finally {
            processButton.disabled = false;
            processButton.classList.remove('btn-disabled', 'opacity-50');
        }

        function appendLog(message, className = '') {
            const logLine = document.createElement('p');
            logLine.className = className;
            logLine.textContent = message;
            logArea.appendChild(logLine);
            logArea.scrollTop = logArea.scrollHeight; // Auto-scroll to bottom
        }
    });
</script>

<style>
    #log-area p {
        margin: 0;
        padding: 2px 0;
    }
    #log-area .text-success {
        color: #28a745;
    }
    #log-area .text-danger {
        color: #dc3545;
    }
    .btn-disabled {
        cursor: not-allowed;
    }
</style>
{% endblock %}