// Theme Toggle
const themeToggle = document.getElementById('theme-toggle');
themeToggle.addEventListener('click', () => {
    document.body.classList.toggle('light');
});

// Query Submission
document.getElementById('submit-query').addEventListener('click', () => {
    const query = document.getElementById('query-input').value.trim();
    if (!query) {
        showFeedback('Please enter a query.', 'error');
        return;
    }

    // Show loading state
    const responseOutput = document.getElementById('response-output');
    const contextOutput = document.getElementById('context-output');
    responseOutput.innerHTML = '<p class="loading">Processing...</p>';
    contextOutput.innerHTML = '<p class="loading">Retrieving...</p>';

    // Simulate API call (replace with actual backend integration)
    setTimeout(() => {
        responseOutput.innerHTML = `<p>Response for: ${query}</p>`;
        contextOutput.innerHTML = `<p>Context for: ${query}</p>`;
    }, 1200);
});

// Apply Settings
document.getElementById('apply-settings').addEventListener('click', () => {
    const model = document.getElementById('model-select').value;
    const topK = document.getElementById('top-k').value;
    const temperature = document.getElementById('temperature').value;
    const contextLength = document.getElementById('context-length').value;

    const settings = `Model: ${model}, Top-K: ${topK}, Temperature: ${temperature}, Context Length: ${contextLength}`;
    showFeedback(`Settings updated: ${settings}`, 'success');
});

// Feedback Function
function showFeedback(message, type) {
    const feedback = document.createElement('div');
    feedback.className = `feedback feedback-${type}`;
    feedback.textContent = message;
    document.body.appendChild(feedback);
    setTimeout(() => {
        feedback.style.opacity = '0';
        setTimeout(() => feedback.remove(), 300);
    }, 2000);
}

// Dynamic Loading Styles
const style = document.createElement('style');
style.textContent = `
    .loading {
        opacity: 0.7;
        font-style: italic;
    }
    .feedback {
        position: fixed;
        bottom: 20px;
        right: 20px;
        padding: 12px 24px;
        border-radius: 8px;
        color: #fff;
        font-size: 0.9em;
        transition: opacity 0.3s;
        z-index: 1000;
    }
    .feedback-success {
        background: #00c4ff;
    }
    .feedback-error {
        background: #ff4d4d;
    }
`;
document.head.appendChild(style);