// Dubai DLD Analytics Dashboard JavaScript
// No inline scripts or handlers to satisfy CSP

const API_BASE = '/api';

// Helper functions
function showLoading(show) {
    document.getElementById('loading').style.display = show ? 'block' : 'none';
}

function showError(message) {
    const errorDiv = document.getElementById('error');
    errorDiv.textContent = message;
    errorDiv.style.display = 'block';
}

function hideError() {
    document.getElementById('error').style.display = 'none';
}

// Clear results
function clearResults() {
    document.getElementById('cardsContainer').innerHTML = '';
    document.getElementById('chartsContainer').innerHTML = '';
    document.getElementById('queryInput').value = '';
    hideError();
}

// Render cards
function renderCards(cards) {
    const container = document.getElementById('cardsContainer');
    container.innerHTML = cards.map(card => `
        <div class="card">
            <div class="card-title">${card.title}</div>
            <div class="card-value">${card.value}</div>
            <div class="card-subtitle">${card.subtitle}</div>
        </div>
    `).join('');
}

// Render charts
function renderCharts(visualizations) {
    const container = document.getElementById('chartsContainer');
    container.innerHTML = '';
    
    visualizations.forEach((viz, index) => {
        const chartDiv = document.createElement('div');
        chartDiv.className = 'chart-container';
        chartDiv.innerHTML = `
            <div class="chart-title">${viz.title}</div>
            <canvas id="chart${index}"></canvas>
        `;
        container.appendChild(chartDiv);
        
        const canvas = document.getElementById(`chart${index}`);
        const ctx = canvas.getContext('2d');
        
        new Chart(ctx, {
            type: viz.type,
            data: viz.data,
            options: viz.options || {}
        });
    });
}

// Process query
async function processQuery(query) {
    if (!query || query.trim() === '') {
        showError('Please enter a query');
        return;
    }
    
    showLoading(true);
    hideError();
    
    try {
        const response = await fetch(`${API_BASE}/query`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ query })
        });
        
        const data = await response.json();
        
        if (data.success && data.data) {
            // Render cards and charts
            if (data.data.cards && data.data.cards.length > 0) {
                renderCards(data.data.cards);
            }
            if (data.data.visualizations && data.data.visualizations.length > 0) {
                renderCharts(data.data.visualizations);
            }
        } else {
            showError(data.message || 'Failed to process query');
        }
    } catch (error) {
        showError('Network error: ' + error.message);
    } finally {
        showLoading(false);
    }
}

// Event listeners setup
document.addEventListener('DOMContentLoaded', () => {
    // Analyze button
    const btnAnalyze = document.getElementById('btn-analyze');
    btnAnalyze.addEventListener('click', async () => {
        const query = document.getElementById('queryInput').value;
        await processQuery(query);
    });
    
    // Clear button
    const btnClear = document.getElementById('btn-clear');
    btnClear.addEventListener('click', clearResults);
    
    // Predefined query buttons
    document.getElementById('btn-rental-trend').addEventListener('click', async () => {
        const query = 'Give me the last 6 months rental price trend for Business Bay';
        document.getElementById('queryInput').value = query;
        await processQuery(query);
    });
    
    document.getElementById('btn-top-areas').addEventListener('click', async () => {
        const query = 'Which area is having more rental transactions?';
        document.getElementById('queryInput').value = query;
        await processQuery(query);
    });
    
    document.getElementById('btn-project-summary').addEventListener('click', async () => {
        const query = 'Brief about the Project';
        document.getElementById('queryInput').value = query;
        await processQuery(query);
    });
    
    document.getElementById('btn-commercial-leasing').addEventListener('click', async () => {
        const query = 'Top 5 areas for Commercial leasing and why?';
        document.getElementById('queryInput').value = query;
        await processQuery(query);
    });
    
    document.getElementById('btn-residential-leasing').addEventListener('click', async () => {
        const query = 'Top 5 areas for Residential leasing and why?';
        document.getElementById('queryInput').value = query;
        await processQuery(query);
    });
    
    document.getElementById('btn-example-marina').addEventListener('click', async () => {
        const query = 'Give me the last 6 months rental price trend for Dubai Marina';
        document.getElementById('queryInput').value = query;
        await processQuery(query);
    });
    
    document.getElementById('btn-example-top-areas').addEventListener('click', async () => {
        const query = 'Which area is having more rental transactions?';
        document.getElementById('queryInput').value = query;
        await processQuery(query);
    });
    
    document.getElementById('btn-example-villas').addEventListener('click', async () => {
        const query = 'Show me villa transactions in Dubai Marina';
        document.getElementById('queryInput').value = query;
        await processQuery(query);
    });
    
    document.getElementById('btn-example-3bhk').addEventListener('click', async () => {
        const query = 'Avg price of 3 BHK apartment by area in last 6 months';
        document.getElementById('queryInput').value = query;
        await processQuery(query);
    });
    
    // Enter key support
    document.getElementById('queryInput').addEventListener('keypress', async (e) => {
        if (e.key === 'Enter') {
            const query = e.target.value;
            await processQuery(query);
        }
    });
});