class TextAnalysisDisplay {
    constructor() {
        // Hugging Face token
        this.API_TOKEN =  "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";
        
        // Different sentiment analysis models
        this.models = {
            model1: "cardiffnlp/twitter-roberta-base-sentiment-latest",
            model2: "finiteautomata/bertweet-base-sentiment-analysis",
            model3: "nlptown/bert-base-multilingual-uncased-sentiment"
        };

        this.setupUI();
    }

    setupUI() {
        document.body.style.fontFamily = 'Arial, sans-serif';
        document.body.style.padding = '20px';
        document.body.style.backgroundColor = '#f0f2f5';

        const container = document.createElement('div');
        container.style.maxWidth = '1200px';
        container.style.margin = '0 auto';
        container.style.backgroundColor = 'white';
        container.style.padding = '30px';
        container.style.borderRadius = '15px';
        container.style.boxShadow = '0 2px 8px rgba(0,0,0,0.1)';

        // Title
        const title = document.createElement('h1');
        title.textContent = 'Multi-Model Sentiment Analysis';
        title.style.textAlign = 'center';
        title.style.marginBottom = '30px';

        // Input section
        const inputSection = document.createElement('div');
        inputSection.style.marginBottom = '30px';

        const textArea = document.createElement('textarea');
        textArea.placeholder = 'Enter your text here for analysis...';
        textArea.style.width = '100%';
        textArea.style.minHeight = '150px';
        textArea.style.padding = '15px';
        textArea.style.marginBottom = '20px';
        textArea.style.borderRadius = '10px';
        textArea.style.border = '2px solid #dee2e6';
        textArea.style.fontSize = '16px';
        textArea.style.resize = 'vertical';

        const analyzeButton = document.createElement('button');
        analyzeButton.textContent = 'Analyze Text';
        analyzeButton.style.padding = '12px 30px';
        analyzeButton.style.backgroundColor = '#007bff';
        analyzeButton.style.color = 'white';
        analyzeButton.style.border = 'none';
        analyzeButton.style.borderRadius = '8px';
        analyzeButton.style.fontSize = '16px';
        analyzeButton.style.cursor = 'pointer';

        // Results section
        const resultsGrid = document.createElement('div');
        resultsGrid.style.display = 'grid';
        resultsGrid.style.gridTemplateColumns = 'repeat(3, 1fr)';
        resultsGrid.style.gap = '20px';
        resultsGrid.style.marginTop = '30px';

        // Create result boxes for each model
        const models = ['RoBERTa Analysis', 'BERTweet Analysis', 'Multilingual BERT'];
        models.forEach((model, index) => {
            resultsGrid.appendChild(this.createResultBox(model, `model${index + 1}-result`));
        });

        inputSection.appendChild(textArea);
        inputSection.appendChild(analyzeButton);
        container.appendChild(title);
        container.appendChild(inputSection);
        container.appendChild(resultsGrid);
        document.body.appendChild(container);

        // Event listener for the analyze button
        analyzeButton.addEventListener('click', () => {
            const text = textArea.value.trim();
            if (text) {
                this.startAnalysis(text);
            } else {
                alert('Please enter some text to analyze');
            }
        });
    }

    createResultBox(modelName, id) {
        const box = document.createElement('div');
        box.style.padding = '20px';
        box.style.backgroundColor = '#f8f9fa';
        box.style.borderRadius = '10px';
        box.style.border = '1px solid #dee2e6';

        const heading = document.createElement('h3');
        heading.textContent = modelName;
        heading.style.marginBottom = '15px';
        heading.style.color = '#2c3e50';

        const content = document.createElement('div');
        content.id = id;
        content.textContent = 'Waiting for text...';
        content.style.minHeight = '100px';

        box.appendChild(heading);
        box.appendChild(content);
        return box;
    }

    async analyzeText(model, text) {
        try {
            const response = await fetch(
                `https://api-inference.huggingface.co/models/${model}`,
                {
                    method: "POST",
                    headers: {
                        "Authorization": `Bearer ${this.API_TOKEN}`,
                        "Content-Type": "application/json"
                    },
                    body: JSON.stringify({ inputs: text })
                }
            );
            
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            
            return await response.json();
        } catch (error) {
            console.error(`Error with ${model}:`, error);
            return null;
        }
    }

    formatResults(data) {
        if (!data || data.error) {
            return 'Analysis failed';
        }

        let result = data[0];
        if (Array.isArray(result)) {
            result = result.reduce((prev, current) => 
                prev.score > current.score ? prev : current
            );
        }

        return `
            <div style="padding: 10px">
                <p><strong>Sentiment:</strong> ${result.label}</p>
                <p><strong>Confidence:</strong> ${(result.score * 100).toFixed(1)}%</p>
            </div>
        `;
    }

    async startAnalysis(text) {
        // Update UI to show analysis in progress
        Object.keys(this.models).forEach(key => {
            document.getElementById(`${key}-result`).textContent = 'Analyzing...';
        });

        // Analyze text with each model
        for (const [key, model] of Object.entries(this.models)) {
            const resultId = `${key}-result`;
            const result = await this.analyzeText(model, text);
            document.getElementById(resultId).innerHTML = this.formatResults(result);
        }
    }
}

// Initialize the application
new TextAnalysisDisplay();