final/static/js/aiAdvisorView.js

import apiClient from './apiClient.js';

class AIAdvisorView {
    constructor(section) {
        this.section = section;
        this.queryForm = section?.querySelector('[data-query-form]');
        this.sentimentForm = section?.querySelector('[data-sentiment-form]');
        this.queryOutput = section?.querySelector('[data-query-output]');
        this.sentimentOutput = section?.querySelector('[data-sentiment-output]');
    }

    init() {
        if (this.queryForm) {
            this.queryForm.addEventListener('submit', async (event) => {
                event.preventDefault();
                const formData = new FormData(this.queryForm);
                await this.handleQuery(formData);
            });
        }
        if (this.sentimentForm) {
            this.sentimentForm.addEventListener('submit', async (event) => {
                event.preventDefault();
                const formData = new FormData(this.sentimentForm);
                await this.handleSentiment(formData);
            });
        }
    }

    async handleQuery(formData) {
        const query = formData.get('query') || '';
        if (!query.trim()) return;
        
        if (this.queryOutput) {
            this.queryOutput.innerHTML = '<p>Processing query...</p>';
        }
        
        const result = await apiClient.runQuery({ query });
        if (!result.ok) {
            if (this.queryOutput) {
                this.queryOutput.innerHTML = `<div class="inline-message inline-error">${result.error}</div>`;
            }
            return;
        }
        
        // Backend returns {success: true, type: ..., message: ..., data: ...}
        const data = result.data || {};
        if (this.queryOutput) {
            this.queryOutput.innerHTML = `
                <div class="glass-card">
                    <h4>AI Response</h4>
                    <p><strong>Type:</strong> ${data.type || 'general'}</p>
                    <p>${data.message || 'Query processed'}</p>
                    ${data.data ? `<pre>${JSON.stringify(data.data, null, 2)}</pre>` : ''}
                </div>
            `;
        }
    }

    async handleSentiment(formData) {
        const text = formData.get('text') || '';
        if (!text.trim()) return;
        
        if (this.sentimentOutput) {
            this.sentimentOutput.innerHTML = '<p>Analyzing sentiment...</p>';
        }
        
        const result = await apiClient.analyzeSentiment({ text });
        if (!result.ok) {
            if (this.sentimentOutput) {
                this.sentimentOutput.innerHTML = `<div class="inline-message inline-error">${result.error}</div>`;
            }
            return;
        }
        
        // Backend returns {success: true, sentiment: ..., confidence: ..., details: ...}
        const data = result.data || {};
        const sentiment = data.sentiment || 'neutral';
        const confidence = data.confidence || 0;
        
        if (this.sentimentOutput) {
            this.sentimentOutput.innerHTML = `
                <div class="glass-card">
                    <h4>Sentiment Analysis</h4>
                    <p><strong>Label:</strong> <span class="chip">${sentiment}</span></p>
                    <p><strong>Confidence:</strong> ${(confidence * 100).toFixed(1)}%</p>
                    ${data.details ? `<pre style="font-size: 0.875rem;">${JSON.stringify(data.details, null, 2)}</pre>` : ''}
                </div>
            `;
        }
    }

}

export default AIAdvisorView;