script.js

// Global state
let availableModels = [];
let selectedModels = new Set();

// Load models on page load
window.addEventListener('DOMContentLoaded', loadModels);

async function loadModels() {
    try {
        const response = await fetch('/api/models');
        const data = await response.json();
        availableModels = data.models;
        renderModelList();
    } catch (error) {
        console.error('Error loading models:', error);
        document.getElementById('modelList').innerHTML =
            '<div class="loading" style="color: red;">Error loading models</div>';
    }
}

function renderModelList() {
    const modelList = document.getElementById('modelList');
    modelList.innerHTML = availableModels.map((model, index) => `
        <div class="model-checkbox" id="model-${index}" onclick="toggleModel('${model}', ${index})">
            <input type="checkbox" id="checkbox-${index}" onclick="event.stopPropagation(); toggleModel('${model}', ${index})">
            <label for="checkbox-${index}">${model}</label>
        </div>
    `).join('');
    updateSelectedCount();
}

function toggleModel(model, index) {
    const checkbox = document.getElementById(`checkbox-${index}`);
    const container = document.getElementById(`model-${index}`);

    checkbox.checked = !checkbox.checked;

    if (checkbox.checked) {
        selectedModels.add(model);
        container.classList.add('selected');
    } else {
        selectedModels.delete(model);
        container.classList.remove('selected');
    }

    updateSelectedCount();
}

function selectAll() {
    availableModels.forEach((model, index) => {
        selectedModels.add(model);
        document.getElementById(`checkbox-${index}`).checked = true;
        document.getElementById(`model-${index}`).classList.add('selected');
    });
    updateSelectedCount();
}

function deselectAll() {
    selectedModels.clear();
    availableModels.forEach((model, index) => {
        document.getElementById(`checkbox-${index}`).checked = false;
        document.getElementById(`model-${index}`).classList.remove('selected');
    });
    updateSelectedCount();
}

function updateSelectedCount() {
    document.getElementById('selectedCount').textContent = selectedModels.size;
}

function setQuery(text) {
    document.getElementById('queryInput').value = text;
    document.getElementById('queryInput').focus();
}

async function sendQuery() {
    const queryInput = document.getElementById('queryInput');
    const query = queryInput.value.trim();

    if (!query) {
        alert('Please enter a question');
        return;
    }

    if (selectedModels.size === 0) {
        alert('Please select at least one model');
        return;
    }

    // Disable send button and show loading
    const sendBtn = document.getElementById('sendBtn');
    const sendBtnText = document.getElementById('sendBtnText');
    const sendBtnLoader = document.getElementById('sendBtnLoader');

    sendBtn.disabled = true;
    sendBtnText.style.display = 'none';
    sendBtnLoader.style.display = 'inline-block';

    // Hide welcome message if it exists
    const welcomeMsg = document.querySelector('.welcome-message');
    if (welcomeMsg) {
        welcomeMsg.remove();
    }

    // Add query message to chat
    addQueryMessage(query);

    // Clear input
    queryInput.value = '';

    try {
        const response = await fetch('/api/query', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                query: query,
                models: Array.from(selectedModels)
            })
        });

        const data = await response.json();

        if (response.ok) {
            addResponseCards(data.results);
            // Show comparison modal automatically if multiple models
            if (data.results.length > 1) {
                showComparisonModal(data.results);
            }
        } else {
            addErrorMessage(data.error || 'An error occurred');
        }

    } catch (error) {
        console.error('Error:', error);
        addErrorMessage('Failed to connect to server');
    } finally {
        // Re-enable send button
        sendBtn.disabled = false;
        sendBtnText.style.display = 'inline';
        sendBtnLoader.style.display = 'none';
    }
}

function addQueryMessage(query) {
    const chatContainer = document.getElementById('chatContainer');
    const queryDiv = document.createElement('div');
    queryDiv.className = 'query-message';
    queryDiv.innerHTML = `
        <div class="query-message-header">📝 Your Question:</div>
        <div class="query-message-text">${escapeHtml(query)}</div>
    `;
    chatContainer.appendChild(queryDiv);
    chatContainer.scrollTop = chatContainer.scrollHeight;
}

function addResponseCards(results) {
    const chatContainer = document.getElementById('chatContainer');
    const cardsContainer = document.createElement('div');
    cardsContainer.className = 'response-cards';

    results.forEach(result => {
        const card = document.createElement('div');
        card.className = result.metrics.error ? 'response-card error-card' : 'response-card';

        if (result.metrics.error) {
            card.innerHTML = `
                <div class="response-card-header">
                    <div class="model-name">❌ ${escapeHtml(result.model)}</div>
                </div>
                <div class="response-text">${escapeHtml(result.response)}</div>
            `;
        } else {
            card.innerHTML = `
                <div class="response-card-header">
                    <div class="model-name">🤖 ${escapeHtml(result.model)}</div>
                    <div class="response-time">⚡ ${result.metrics.total_time}s</div>
                </div>
                <div class="response-text">${escapeHtml(result.response)}</div>
                <div class="metrics">
                    <div class="metrics-title">📊 Performance Metrics</div>
                    <div class="metric-row">
                        <span class="metric-label">Query Embedding</span>
                        <span class="metric-value">${result.metrics.query_embed_time}s</span>
                    </div>
                    <div class="metric-row">
                        <span class="metric-label">Retrieval & Rerank</span>
                        <span class="metric-value">${result.metrics.retrieval_time}s</span>
                    </div>
                    <div class="metric-row">
                        <span class="metric-label">Response Generation</span>
                        <span class="metric-value">${result.metrics.generation_time}s</span>
                    </div>
                    <div class="metric-row">
                        <span class="metric-label">Relevance Score</span>
                        <span class="metric-value highlight">${result.metrics.relevance_score}</span>
                    </div>
                    <div class="metric-row">
                        <span class="metric-label">Documents Retrieved</span>
                        <span class="metric-value">${result.metrics.documents_retrieved}</span>
                    </div>
                </div>
            `;
        }

        cardsContainer.appendChild(card);
    });

    chatContainer.appendChild(cardsContainer);
    chatContainer.scrollTop = chatContainer.scrollHeight;
}

function addErrorMessage(error) {
    const chatContainer = document.getElementById('chatContainer');
    const errorDiv = document.createElement('div');
    errorDiv.className = 'response-card error-card';
    errorDiv.innerHTML = `
        <div class="response-card-header">
            <div class="model-name">❌ Error</div>
        </div>
        <div class="response-text">${escapeHtml(error)}</div>
    `;
    chatContainer.appendChild(errorDiv);
    chatContainer.scrollTop = chatContainer.scrollHeight;
}

function escapeHtml(text) {
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}

// Comparison Modal Functions
let responseTimeChart = null;
let timeBreakdownChart = null;

function showComparisonModal(results) {
    // Filter out error results
    const validResults = results.filter(r => !r.metrics.error);

    if (validResults.length < 2) {
        return; // Need at least 2 valid results to compare
    }

    // Show modal
    document.getElementById('comparisonModal').style.display = 'block';

    // Generate charts
    generateResponseTimeChart(validResults);
    generateTimeBreakdownChart(validResults);
    generateSummaryStats(validResults);
}

function closeComparisonModal() {
    document.getElementById('comparisonModal').style.display = 'none';

    // Destroy charts to prevent memory leaks
    if (responseTimeChart) {
        responseTimeChart.destroy();
        responseTimeChart = null;
    }
    if (timeBreakdownChart) {
        timeBreakdownChart.destroy();
        timeBreakdownChart = null;
    }
}

// Close modal when clicking outside
window.onclick = function(event) {
    const modal = document.getElementById('comparisonModal');
    if (event.target === modal) {
        closeComparisonModal();
    }
}

function generateResponseTimeChart(results) {
    const ctx = document.getElementById('responseTimeChart').getContext('2d');

    // Destroy existing chart
    if (responseTimeChart) {
        responseTimeChart.destroy();
    }

    const labels = results.map(r => r.model);
    const data = results.map(r => r.metrics.total_time);

    responseTimeChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: labels,
            datasets: [{
                label: 'Total Response Time (seconds)',
                data: data,
                backgroundColor: 'rgba(102, 126, 234, 0.6)',
                borderColor: 'rgba(102, 126, 234, 1)',
                borderWidth: 2
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: true,
            plugins: {
                legend: {
                    display: false
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    title: {
                        display: true,
                        text: 'Time (seconds)'
                    }
                }
            }
        }
    });
}

function generateTimeBreakdownChart(results) {
    const ctx = document.getElementById('timeBreakdownChart').getContext('2d');

    // Destroy existing chart
    if (timeBreakdownChart) {
        timeBreakdownChart.destroy();
    }

    const labels = results.map(r => r.model);

    timeBreakdownChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: labels,
            datasets: [
                {
                    label: 'Query Embedding',
                    data: results.map(r => r.metrics.query_embed_time),
                    backgroundColor: 'rgba(102, 126, 234, 0.8)',
                },
                {
                    label: 'Retrieval & Rerank',
                    data: results.map(r => r.metrics.retrieval_time),
                    backgroundColor: 'rgba(118, 75, 162, 0.8)',
                },
                {
                    label: 'Response Generation',
                    data: results.map(r => r.metrics.generation_time),
                    backgroundColor: 'rgba(237, 100, 166, 0.8)',
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: true,
            plugins: {
                legend: {
                    display: true,
                    position: 'top'
                }
            },
            scales: {
                x: {
                    stacked: true,
                },
                y: {
                    stacked: true,
                    beginAtZero: true,
                    title: {
                        display: true,
                        text: 'Time (seconds)'
                    }
                }
            }
        }
    });
}

function generateSummaryStats(results) {
    const statsDiv = document.getElementById('summaryStats');

    // Find fastest and slowest
    const sortedByTime = [...results].sort((a, b) => a.metrics.total_time - b.metrics.total_time);
    const fastest = sortedByTime[0];
    const slowest = sortedByTime[sortedByTime.length - 1];

    // Calculate average
    const avgTime = (results.reduce((sum, r) => sum + r.metrics.total_time, 0) / results.length).toFixed(3);

    statsDiv.innerHTML = `
        <div class="stat-item">
            <span class="stat-label">⚡ Fastest Model</span>
            <span class="stat-value">${fastest.model} (${fastest.metrics.total_time}s)</span>
        </div>
        <div class="stat-item">
            <span class="stat-label">🐌 Slowest Model</span>
            <span class="stat-value">${slowest.model} (${slowest.metrics.total_time}s)</span>
        </div>
        <div class="stat-item">
            <span class="stat-label">📊 Average Response Time</span>
            <span class="stat-value">${avgTime}s</span>
        </div>
        <div class="stat-item">
            <span class="stat-label">🎯 Relevance Score</span>
            <span class="stat-value">${results[0].metrics.relevance_score} (same for all)</span>
        </div>
        <div class="stat-item">
            <span class="stat-label">📚 Documents Retrieved</span>
            <span class="stat-value">${results[0].metrics.documents_retrieved}</span>
        </div>
        <div class="stat-item">
            <span class="stat-label">🔢 Models Compared</span>
            <span class="stat-value">${results.length}</span>
        </div>
    `;
}