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

{% block title %}Chatbot: {{ chatbot.name }}{% endblock %}
{% block content %}
    <div class="container mt-4">
        <h1>Chatbot: {{ chatbot.name }}</h1>
        <p>Created: {{ chatbot.created_at|date:"F d, Y" }}</p>
        <p>Updated: {{ chatbot.updated_at|date:"F d, Y" }}</p>

        <h2>Uploaded Files</h2>
        {% if chatbot.files.all %}
            <ul class="list-group mb-4">
                {% for file in chatbot.files.all %}
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        <div>
                            {{ file.file.name }} (Uploaded: {{ file.uploaded_at|date:"F d, Y" }})
                            {% if file.rag_metadata %}
                                - Status: {{ file.rag_metadata.status }} (Chunks: {{ file.rag_metadata.chunk_count }})
                            {% else %}
                                - RAG Not Processed
                            {% endif %}
                        </div>
                        <button class="btn btn-sm btn-danger delete-file-btn" 
                                data-file-id="{{ file.id }}" 
                                data-chatbot-id="{{ chatbot.id }}"
                                data-url="{% url 'delete_file' chatbot.id file.id %}">Delete</button>
                    </li>
                {% endfor %}
            </ul>
        {% else %}
            <p>No files uploaded yet.</p>
        {% endif %}

        <div class="mb-4">
            <a href="{% url 'process_rag_data' chatbot.id %}" class="btn btn-success">Process RAG Data</a>
            <a href="{% url 'chatbot_preview' chatbot.id %}" class="btn btn-primary">Preview Chatbot</a>
            <a href="{% url 'chatbot_test' chatbot.id %}" class="btn btn-info">Test Chatbot Embed</a>
        </div>

        <h2>Upload a File</h2>
        {% if messages %}
            {% for message in messages %}
                <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
                    {{ message }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            {% endfor %}
        {% endif %}
        <div class="card p-4 mb-4" id="drop-area">
            <form method="post" enctype="multipart/form-data" id="upload-form">
                {% csrf_token %}
                {{ form.as_p }}
                <button type="submit" class="btn btn-primary">Upload</button>
            </form>
            <p class="text-muted mt-2">Drag and drop files here or click to select.</p>
        </div>

        <h2>Search RAG Database</h2>
        <div class="card p-4 mb-4">
            <form id="rag-search-form" class="mb-3">
                <div class="input-group">
                    <input type="text" id="search-query" class="form-control" placeholder="Enter search term (e.g., leave policy)" required>
                    <button type="submit" class="btn btn-primary">Search</button>
                </div>
            </form>
            <div id="search-results" class="mt-3"></div>
        </div>
    </div>

    <script>
        // Drag-and-drop file upload functionality
        const dropArea = document.getElementById('drop-area');
        const fileInput = document.querySelector('input[type="file"]');

        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
            dropArea.addEventListener(eventName, preventDefaults, false);
        });

        function preventDefaults(e) {
            e.preventDefault();
            e.stopPropagation();
        }

        ['dragenter', 'dragover'].forEach(eventName => {
            dropArea.addEventListener(eventName, () => dropArea.classList.add('highlight'), false);
        });

        ['dragleave', 'drop'].forEach(eventName => {
            dropArea.addEventListener(eventName, () => dropArea.classList.remove('highlight'), false);
        });

        dropArea.addEventListener('drop', handleDrop, false);

        function handleDrop(e) {
            const dt = e.dataTransfer;
            const files = dt.files;
            fileInput.files = files;
        }

        // Delete file functionality
        let activeDeleteButton = null;

        document.querySelectorAll('.delete-file-btn').forEach(button => {
            button.addEventListener('click', function(e) {
                e.preventDefault();
                if (this.textContent === 'Delete') {
                    if (activeDeleteButton && activeDeleteButton !== this) {
                        resetButton(activeDeleteButton);
                    }
                    this.textContent = 'Are you sure?';
                    this.classList.add('btn-confirm');
                    activeDeleteButton = this;
                } else {
                    const url = this.getAttribute('data-url');
                    fetch(url, {
                        method: 'POST',
                        headers: {
                            'X-CSRFToken': '{{ csrf_token }}',
                            'X-Requested-With': 'XMLHttpRequest'
                        }
                    }).then(response => {
                        window.location.reload();
                    }).catch(error => {
                        console.error('Error deleting file:', error);
                        alert('Failed to delete file.');
                    });
                }
            });
        });

        document.addEventListener('click', function(e) {
            if (activeDeleteButton && !e.target.classList.contains('delete-file-btn')) {
                resetButton(activeDeleteButton);
                activeDeleteButton = null;
            }
        });

        function resetButton(button) {
            button.textContent = 'Delete';
            button.classList.remove('btn-confirm');
        }

        // RAG search functionality with keyword highlighting
        document.getElementById('rag-search-form').addEventListener('submit', function(e) {
            e.preventDefault();
            const query = document.getElementById('search-query').value.trim();
            if (!query) {
                document.getElementById('search-results').innerHTML = '<p class="text-danger">Please enter a search term.</p>';
                return;
            }

            document.getElementById('search-results').innerHTML = '<p>Loading...</p>';

            fetch('{% url 'search_rag' chatbot.id %}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                    'X-Requested-With': 'XMLHttpRequest',
                    'X-CSRFToken': '{{ csrf_token }}'
                },
                body: new URLSearchParams({ 'query': query })
            })
            .then(response => response.json())
            .then(data => {
                const resultsDiv = document.getElementById('search-results');
                if (data.error) {
                    resultsDiv.innerHTML = `<p class="text-danger">Error: ${data.error}</p>`;
                    return;
                }

                if (data.results.length === 0) {
                    resultsDiv.innerHTML = '<p>No results found.</p>';
                    return;
                }

                function escapeHtml(unsafe) {
                    return unsafe
                        .replace(/&/g, "&amp;")
                        .replace(/</g, "&lt;")
                        .replace(/>/g, "&gt;")
                        .replace(/"/g, "&quot;")
                        .replace(/'/g, "&#039;");
                }

                function highlightQuery(text, query) {
                    const regex = new RegExp(`(${query})`, 'gi');
                    return escapeHtml(text).replace(regex, '<mark>$1</mark>');
                }

                let html = '<h4>Search Results</h4><ul class="list-group">';
                data.results.forEach(result => {
                    html += `
                        <li class="list-group-item">
                            <strong>File:</strong> ${escapeHtml(result.file_name)}<br>
                            <strong>Text:</strong> ${highlightQuery(result.text, query)}<br>
                            <small>Similarity Distance: ${result.distance.toFixed(4)}</small>
                        </li>
                    `;
                });
                if (data.warnings && data.warnings.length > 0) {
                    html += `<div class="alert alert-warning mt-3">${data.warnings.join('<br>')}</div>`;
                }
                html += '</ul>';
                resultsDiv.innerHTML = html;
            })
            .catch(error => {
                document.getElementById('search-results').innerHTML = '<p class="text-danger">An error occurred while searching.</p>';
            });
        });
    </script>

    <style>
        #drop-area {
            border: 2px dashed #ccc;
            transition: all 0.3s;
        }
        #drop-area.highlight {
            border-color: #007bff;
            background-color: #f8f9fa;
        }
        .delete-file-btn {
            transition: background-color 0.3s;
        }
        .btn-confirm {
            background-color: #dc3545 !important;
            border-color: #dc3545 !important;
        }
        mark {
            background-color: #fff3cd;
            padding: 0.1em 0.2em;
            border-radius: 3px;
        }
    </style>
{% endblock %}