// Theme Toggle
const themeSwitch = document.getElementById('theme-switch');
themeSwitch.addEventListener('click', () => {
    document.body.classList.toggle('light');
    themeSwitch.textContent = document.body.classList.contains('light') ? '☀️' : '🌙';
});

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

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

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

// 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;

    // Simulate settings application
    const settingsOutput = `Settings applied: Model=${model}, Top-K=${topK}, Temperature=${temperature}, Context Length=${contextLength}`;
    console.log(settingsOutput);
    alert(settingsOutput);
});

// Smooth scroll for better UX
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', (e) => {
        e.preventDefault();
        document.querySelector(anchor.getAttribute('href')).scrollIntoView({
            behavior: 'smooth'
        });
    });
});