Update script.js

script.js

@@ -0,0 +1,463 @@
+// script.js
+
+// Set the base URL for your deployed Cloudflare Worker API
+// *** IMPORTANT: REPLACE THIS WITH THE ACTUAL URL OF YOUR DEPLOYED CLOUDFLARE WORKER ***
+const CLOUDFLARE_WORKER_API_BASE_URL = 'https://dmim-worker-backend.<your-subdomain>.workers.dev'; 
+
+// Global state, will be populated by fetch calls
+let allTrends = []; 
+let userData = {
+    dmimBalance: 0, 
+    savedTrends: [] 
+};
+let currentSentimentTrend = null;
+
+// Static metadata for categories (icons, colors) - these are frontend-only display properties
+const performanceCategoriesMeta = {
+    music: { name: "Music", icon: '<i class="fas fa-music text-purple-500"></i>', color: 'bg-purple-500' },
+    theater: { name: "Theater", icon: '<i class="fas fa-theater-masks text-yellow-500"></i>', color: 'bg-yellow-500' },
+    dance: { name: "Dance", icon: '<i class="fas fa-child text-pink-500"></i>', color: 'bg-pink-500' },
+    comedy: { name: "Comedy", icon: '<i class="fas fa-laugh-squint text-blue-500"></i>', color: 'bg-blue-500' },
+    emerging: { name: "Emerging", icon: '<i class="fas fa-star text-green-500"></i>', color: 'bg-green-500' }
+};
+
+// Helper to get category metadata
+function getCategoryMeta(categoryKey) {
+    return performanceCategoriesMeta[categoryKey] || { name: categoryKey, icon: '<i class="fas fa-hashtag"></i>', color: 'bg-gray-500' };
+}
+
+// Function to calculate market share percentage with sentiment adjustment
+function calculateMarketShare(trend) {
+    const totalAllSearches = allTrends.reduce((sum, t) => sum + t.current_searches, 0);
+
+    const globalPercentage = totalAllSearches > 0 ? (trend.current_searches / totalAllSearches) * 100 : 0;
+    
+    const rawChange = trend.previous_searches > 0 
+        ? ((trend.current_searches - trend.previous_searches) / trend.previous_searches) * 100
+        : trend.current_searches > 0 ? 100 : 0;
+    
+    const sentimentToUse = trend.sentiment || 0; 
+    const sentimentMultiplier = 1 + (sentimentToUse / 200); 
+    const adjustedChange = rawChange * sentimentMultiplier;
+    
+    return {
+        percentage: adjustedChange > 0 ? globalPercentage.toFixed(2) : (globalPercentage * sentimentMultiplier).toFixed(2), // Apply sentiment to displayed percentage too
+        change: adjustedChange.toFixed(2),
+        rawChange: rawChange.toFixed(2),
+        category: trend.category,
+        sentiment: sentimentToUse,
+        sentimentHeadline: trend.sentiment_headline || ""
+    };
+}
+
+// Helper functions for CSS classes and labels
+function getPercentageClass(change) {
+    const numChange = parseFloat(change);
+    if (numChange > 0) return 'percentage-up';
+    if (numChange < 0) return 'percentage-down';
+    return 'percentage-neutral';
+}
+
+function getSentimentClass(sentiment) {
+    const numSentiment = parseInt(sentiment);
+    if (numSentiment > 20) return 'sentiment-positive';
+    if (numSentiment < -20) return 'sentiment-negative';
+    return 'sentiment-neutral';
+}
+
+function getSentimentLabel(sentiment) {
+    const numSentiment = parseInt(sentiment);
+    if (numSentiment > 20) return 'Positive';
+    if (numSentiment < -20) return 'Negative';
+    return 'Neutral';
+}
+
+function getPlatformIcon(platform) {
+    return getCategoryMeta(platform).icon;
+}
+
+// Function to render trending cards
+function renderTrendingCards() {
+    const container = document.getElementById('trendingCardsContainer');
+    container.innerHTML = '';
+    
+    const topTrends = [...allTrends].sort((a, b) => b.current_searches - a.current_searches).slice(0, 8);
+    
+    topTrends.forEach(item => {
+        const marketShare = calculateMarketShare(item); 
+        const percentageClass = getPercentageClass(marketShare.change);
+        const sentimentClass = getSentimentClass(item.sentiment); 
+        const categoryMeta = getCategoryMeta(item.category);
+
+        const card = document.createElement('div');
+        card.className = `trend-card bg-white rounded-lg shadow-sm p-4 h-40 flex flex-col justify-between transition cursor-pointer ${sentimentClass}`;
+        card.innerHTML = `
+            <div class="flex items-start justify-between mb-2">
+                <div>
+                    <span class="inline-flex items-center bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded-full">
+                        ${getPlatformIcon(item.category)}
+                        <span class="ml-1">${item.hashtag}</span>
+                    </span>
+                </div>
+                <span class="inline-flex items-center bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded-full">
+                    <i class="fas fa-chart-line ${percentageClass} mr-1"></i> 
+                    ${marketShare.percentage}%
+                    <span class="ml-1 ${percentageClass}">(${marketShare.change > 0 ? '+' : ''}${marketShare.change}%)</span>
+                </span>
+            </div>
+            <div class="flex justify-between items-center mb-3">
+                <span class="text-xs text-gray-500">${item.current_searches.toLocaleString()} searches</span>
+                <span class="text-xs px-2 py-1 rounded-full ${categoryMeta.color} text-white">
+                    ${categoryMeta.name}
+                </span>
+            </div>
+            <div class="flex justify-between items-center text-xs text-gray-500">
+                <span>
+                    <span class="${getSentimentClass(item.sentiment).replace('sentiment-', 'text-')}">
+                        <i class="fas ${item.sentiment > 20 ? 'fa-smile' : item.sentiment < -20 ? 'fa-frown' : 'fa-meh'}"></i>
+                        ${getSentimentLabel(item.sentiment)}
+                    </span>
+                </span>
+                <button class="save-trend-btn text-gray-400 hover:text-dmim-bg" data-hashtag="${item.hashtag}">
+                    <i class="fas fa-bookmark"></i> Save
+                </button>
+            </div>
+        `;
+        container.appendChild(card);
+        
+        card.addEventListener('click', function() {
+            openSentimentModal(item.hashtag); 
+        });
+    });
+    
+    document.querySelectorAll('.save-trend-btn').forEach(btn => {
+        btn.addEventListener('click', function(e) {
+            e.stopPropagation(); 
+            const hashtag = this.getAttribute('data-hashtag');
+            saveTrend(hashtag); 
+        });
+    });
+}
+
+// Function to render saved trends
+function renderSavedTrends() {
+    const container = document.getElementById('savedTrendsContainer');
+    container.innerHTML = '';
+    
+    const trendSelect = document.getElementById('trendSelect');
+    trendSelect.innerHTML = '<option value="">-- Select a saved trend --</option>';
+    
+    userData.savedTrends.forEach(trend => {
+        const marketShare = calculateMarketShare(trend); 
+        const sentimentClass = getSentimentClass(trend.user_sentiment !== null ? trend.user_sentiment : trend.sentiment); 
+        const categoryMeta = getCategoryMeta(trend.category);
+        
+        const element = document.createElement('div');
+        element.className = `flex items-center p-3 rounded-lg bg-white shadow-sm cursor-pointer hover:bg-gray-50 ${sentimentClass}`;
+        element.innerHTML = `
+            <div class="flex-shrink-0 mr-3">
+                <div class="w-8 h-8 rounded-full flex items-center justify-center text-white ${categoryMeta.color}">
+                    ${getPlatformIcon(trend.category)}
+                </div>
+            </div>
+            <div class="flex-1">
+                <div class="flex items-center">
+                    <h4 class="font-medium text-sm">${trend.hashtag}</h4>
+                    ${trend.staked_amount > 0 ? '<span class="ml-1 text-green-500"><i class="fas fa-check-circle"></i></span>' : ''}
+                </div>
+                <div class="flex items-center">
+                    <p class="text-gray-500 text-xs mr-2">${categoryMeta.name}</p>
+                    <span class="text-xs ${percentageClass}">
+                        ${marketShare.percentage}% (${marketShare.change > 0 ? '+' : ''}${marketShare.change}%)
+                    </span>
+                </div>
+            </div>
+            <button class="text-gray-500 hover:text-dmim-bg sentiment-btn" data-hashtag="${trend.hashtag}">
+                <i class="fas fa-ellipsis-v"></i>
+            </button>
+        `;
+        container.appendChild(element);
+
+        const option = document.createElement('option');
+        option.value = trend.hashtag;
+        option.textContent = trend.hashtag;
+        trendSelect.appendChild(option);
+        
+        element.addEventListener('click', function() {
+            openSentimentModal(trend.hashtag);
+        });
+    });
+    
+    document.getElementById('dmimBalance').textContent = userData.dmimBalance + ' DMIM';
+    document.getElementById('dmimBalanceDisplay').textContent = userData.dmimBalance + ' DMIM';
+}
+
+// Function to open sentiment modal
+async function openSentimentModal(hashtag) {
+    currentSentimentTrend = hashtag;
+    
+    const trendData = allTrends.find(t => t.hashtag === hashtag);
+    
+    if (!trendData) {
+        showToast('Trend data not found for sentiment adjustment.');
+        return;
+    }
+
+    document.getElementById('sentimentTrendName').textContent = hashtag;
+    document.getElementById('sentimentSlider').value = trendData.user_sentiment !== null ? trendData.user_sentiment : trendData.sentiment;
+    document.getElementById('sentimentHeadline').value = trendData.user_sentiment_headline || trendData.sentiment_headline || "";
+    
+    updateSentimentSlider(document.getElementById('sentimentSlider').value);
+    
+    document.getElementById('sentimentModal').classList.remove('hidden');
+}
+
+// Function to update sentiment slider appearance
+function updateSentimentSlider(value) {
+    const slider = document.getElementById('sentimentSlider');
+    slider.value = value;
+    slider.classList.remove('positive', 'negative', 'neutral');
+    if (value > 20) {
+        slider.classList.add('positive');
+    } else if (value < -20) {
+        slider.classList.add('negative');
+    } else {
+        slider.classList.add('neutral');
+    }
+    
+    const impactText = document.getElementById('sentimentImpactText');
+    if (value > 20) {
+        impactText.textContent = `Positive sentiment will boost growth by ${Math.round(value/2)}%.`;
+        impactText.className = "text-sm text-green-600";
+    } else if (value < -20) {
+        impactText.textContent = `Negative sentiment will reduce growth by ${Math.round(Math.abs(value)/2)}%.`;
+        impactText.className = "text-sm text-red-600";
+    } else {
+        impactText.textContent = "Neutral sentiment will not affect trend growth.";
+        impactText.className = "text-sm text-gray-600";
+    }
+}
+
+// Function to show search results
+async function showSearchResults(query) {
+    const container = document.getElementById('searchResultsContainer');
+    container.innerHTML = '<p class="text-center text-gray-500 mt-8">Searching...</p>'; 
+    
+    if (!query) {
+        container.innerHTML = '';
+        return;
+    }
+    
+    try {
+        const response = await fetch(`${CLOUDFLARE_WORKER_API_BASE_URL}/search?query=${encodeURIComponent(query)}`);
+        if (!response.ok) {
+            const errorData = await response.json();
+            throw new Error(errorData.error || `HTTP error! status: ${response.status}`);
+        }
+        const results = await response.json();
+
+        container.innerHTML = ''; 
+        if (results.length === 0) {
+            container.innerHTML = '<p class="text-center text-gray-500 mt-8">No results found. Consider adding it as a new trend!</p>';
+            showToast(`No results found for ${query}`);
+            return;
+        }
+        
+        results.forEach(item => {
+            const marketShare = calculateMarketShare(item);
+            const percentageClass = getPercentageClass(marketShare.change);
+            const sentimentClass = getSentimentClass(item.sentiment);
+            const categoryMeta = getCategoryMeta(item.category);
+            
+            const card = document.createElement('div');
+            card.className = `trend-card bg-white rounded-lg shadow-sm p-4 h-40 flex flex-col justify-between transition cursor-pointer ${sentimentClass}`;
+            card.innerHTML = `
+                <div class="flex items-start justify-between mb-2">
+                    <div>
+                        <span class="inline-flex items-center bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded-full">
+                            ${getPlatformIcon(item.category)}
+                            <span class="ml-1">${item.hashtag}</span>
+                        </span>
+                    </div>
+                    <span class="inline-flex items-center bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded-full">
+                        <i class="fas fa-chart-line ${percentageClass} mr-1"></i> 
+                        ${marketShare.percentage}%
+                        <span class="ml-1 ${percentageClass}">(${marketShare.change > 0 ? '+' : ''}${marketShare.change}%)</span>
+                    </span>
+                </div>
+                <div class="flex justify-between items-center mb-3">
+                    <span class="text-xs text-gray-500">${item.current_searches.toLocaleString()} searches</span>
+                    <span class="text-xs px-2 py-1 rounded-full ${categoryMeta.color} text-white">
+                        ${categoryMeta.name}
+                    </span>
+                </div>
+                <div class="flex justify-between items-center text-xs text-gray-500">
+                    <span>
+                        <span class="${getSentimentClass(item.sentiment).replace('sentiment-', 'text-')}">
+                            <i class="fas ${item.sentiment > 20 ? 'fa-smile' : item.sentiment < -20 ? 'fa-frown' : 'fa-meh'}"></i>
+                            ${getSentimentLabel(item.sentiment)}
+                        </span>
+                    </span>
+                    <button class="save-trend-btn text-gray-400 hover:text-dmim-bg" data-hashtag="${item.hashtag}">
+                        <i class="fas fa-bookmark"></i> Save
+                    </button>
+                </div>
+            `;
+            container.appendChild(card);
+            
+            card.addEventListener('click', function() {
+                openSentimentModal(item.hashtag);
+            });
+        });
+        
+        document.querySelectorAll('.save-trend-btn').forEach(btn => {
+            btn.addEventListener('click', function(e) {
+            e.stopPropagation();
+            const hashtag = this.getAttribute('data-hashtag');
+            saveTrend(hashtag);
+        });
+    });
+    
+    showToast(`Found ${results.length} results for ${query}`);
+
+    } catch (error) {
+        console.error("Error searching trends:", error);
+        showToast(`Error searching for ${query}: ${error.message}`);
+        container.innerHTML = '<p class="text-center text-red-500 mt-8">Failed to fetch search results.</p>';
+    }
+}
+
+// Function to save a trend (calls backend API)
+async function saveTrend(hashtag) {
+    if (userData.savedTrends.some(t => t.hashtag === hashtag)) {
+        showToast('This trend is already saved');
+        return;
+    }
+    
+    try {
+        const response = await fetch(`${CLOUDFLARE_WORKER_API_BASE_URL}/trends/${encodeURIComponent(hashtag)}/save`, {
+            method: 'PUT',
+            headers: { 'Content-Type': 'application/json' },
+        });
+        if (!response.ok) {
+            const errorData = await response.json();
+            throw new Error(errorData.error || `HTTP error! status: ${response.status}`);
+        }
+        
+        await initApp(); 
+        showToast(`${hashtag} saved to your library`);
+    } catch (error) {
+        console.error("Error saving trend:", error);
+        showToast(`Error saving ${hashtag}: ${error.message}`);
+    }
+}
+
+// Function to stake DMIM to a trend (calls backend API)
+async function stakeDmim(hashtag, amount) {
+    if (!hashtag || !amount || amount <= 0) {
+        showToast('Please select a trend and enter a valid amount');
+        return;
+    }
+    
+    if (amount > userData.dmimBalance) {
+        showToast('Insufficient DMIM balance');
+        return;
+    }
+
+    try {
+        const response = await fetch(`${CLOUDFLARE_WORKER_API_BASE_URL}/trends/${encodeURIComponent(hashtag)}/stake`, {
+            method: 'PUT',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ amount: amount })
+        });
+        if (!response.ok) {
+            const errorData = await response.json();
+            throw new Error(errorData.error || `HTTP error! status: ${response.status}`);
+        }
+        
+        userData.dmimBalance -= amount; // Optimistic update
+        await initApp(); 
+        showToast(`Staked ${amount} DMIM to ${hashtag}`);
+    } catch (error) {
+        console.error("Error staking DMIM:", error);
+        showToast(`Error staking DMIM to ${hashtag}: ${error.message}`);
+    }
+}
+
+// Function to add DMIM tokens (client-side simulation for demo)
+async function addDmim(amount) {
+    userData.dmimBalance += amount; 
+    renderSavedTrends(); 
+    showToast(`Added ${amount} DMIM to your balance`);
+}
+
+// Function to save sentiment for a trend (calls backend API)
+async function saveSentiment(hashtag, sentiment, headline) {
+    try {
+        const response = await fetch(`${CLOUDFLARE_WORKER_API_BASE_URL}/trends/${encodeURIComponent(hashtag)}/sentiment`, {
+            method: 'PUT',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ sentiment: sentiment, headline: headline })
+        });
+        if (!response.ok) {
+            const errorData = await response.json();
+            throw new Error(errorData.error || `HTTP error! status: ${response.status}`);
+        }
+        
+        await initApp(); 
+        showToast(`Sentiment updated for ${hashtag}`);
+    } catch (error) {
+        console.error("Error saving sentiment:", error);
+        showToast(`Error updating sentiment for ${hashtag}: ${error.message}`);
+    } finally {
+        document.getElementById('sentimentModal').classList.add('hidden');
+    }
+}
+
+// Initialize the app - fetches all data from backend
+async function initApp() {
+    try {
+        // Fetch all trends
+        const trendsResponse = await fetch(`${CLOUDFLARE_WORKER_API_BASE_URL}/trends`);
+        if (!trendsResponse.ok) {
+            const errorData = await trendsResponse.json();
+            throw new Error(errorData.error || `Failed to fetch trends with status: ${trendsResponse.status}`);
+        }
+        allTrends = await trendsResponse.json();
+        
+        // Filter saved trends for the local userData object
+        userData.savedTrends = allTrends.filter(t => t.is_saved_by_user);
+        
+        // Fetch DMIM balance 
+        const dmimResponse = await fetch(`${CLOUDFLARE_WORKER_API_BASE_URL}/dmim_balance`);
+        if (dmimResponse.ok) {
+            const dmimData = await dmimResponse.json();
+            userData.dmimBalance = dmimData.balance;
+        } else {
+            console.warn("Could not fetch DMIM balance, using default for demo.");
+            userData.dmimBalance = 1000; 
+        }
+
+        renderTrendingCards();
+        renderSavedTrends();
+
+    } catch (error) {
+        console.error("Failed to initialize app from backend:", error);
+        showToast(`Failed to load data: ${error.message}. Please try again.`);
+    }
+}
+
+// --- Event Listeners ---
+
+// Tab switching functionality
+document.querySelectorAll('.tab-button').forEach(button => {
+    button.addEventListener('click', function() {
+        document.querySelectorAll('.tab-button').forEach(btn => {
+            btn.classList.remove('active', 'text-dmim-bg');
+            btn.classList.add('text-gray-500');
+        });
+        this.classList.add('active', 'text-dmim-bg');
+        this.classList.remove('text-gray-500');
+        document.querySelectorAll('#mainContent > div').forEach(tab => {
+            tab.classList.add('hidden');
+