popup.js

// Popup script for handling recommendations and UI

// Constants
const WIKIPEDIA_API_ENDPOINT = 'https://en.wikipedia.org/w/api.php';
const MAX_RECOMMENDATIONS = 10;
const MAX_HISTORY_ITEMS = 20;

// Cache for API responses
const apiCache = new Map();

// UI Elements
let activeTab = 'recommendations';

// Initialize popup
document.addEventListener('DOMContentLoaded', () => {
    initializeTabs();
    loadUserStats();
    loadRecommendations();
    loadHistory();
});

// Tab handling
function initializeTabs() {
    const tabs = document.querySelectorAll('.tab');
    tabs.forEach(tab => {
        tab.addEventListener('click', () => {
            const tabName = tab.dataset.tab;
            switchTab(tabName);
        });
    });
}

function switchTab(tabName) {
    // Update active tab
    document.querySelectorAll('.tab').forEach(tab => {
        tab.classList.toggle('active', tab.dataset.tab === tabName);
    });

    // Update visible content
    document.querySelectorAll('.tab-content').forEach(content => {
        content.classList.toggle('active', content.id === `${tabName}-tab`);
    });

    activeTab = tabName;
}

// Load user statistics
function loadUserStats() {
    chrome.storage.local.get({ visits: [] }, (result) => {
        const visits = result.visits;
        const stats = calculateStats(visits);
        updateStatsDisplay(stats);
    });
}

function calculateStats(visits) {
    return {
        totalArticles: visits.length,
        totalReadingTime: visits.reduce((sum, visit) => sum + (visit.timeSpent || 0), 0),
        averageEngagement: visits.reduce((sum, visit) => sum + (visit.engagementScore || 0), 0) / visits.length || 0
    };
}

function updateStatsDisplay(stats) {
    const statsElement = document.getElementById('stats');
    const readingTime = formatReadingTime(stats.totalReadingTime);
    const engagement = Math.round(stats.averageEngagement * 100);
    
    statsElement.textContent = 
        `${stats.totalArticles} articles read • ${readingTime} total reading time • ${engagement}% engagement`;
}

// Load and display recommendations
async function loadRecommendations() {
    try {
        const recommendations = await generateRecommendations();
        displayRecommendations(recommendations);
    } catch (error) {
        showError('Failed to load recommendations');
        console.error('Error loading recommendations:', error);
    }
}

async function generateRecommendations() {
    const { visits = [] } = await chrome.storage.local.get({ visits: [] });
    
    if (visits.length === 0) {
        return { recent: [], popular: [] };
    }

    // Sort visits by engagement score and recency
    const sortedVisits = [...visits].sort((a, b) => b.engagementScore - a.engagementScore);
    const recentVisits = [...visits].sort((a, b) => b.timestamp - a.timestamp);

    // Get recommendations based on most engaged and recent articles
    const [engagementBased, recentBased] = await Promise.all([
        getRelatedArticles(sortedVisits[0].title),
        getRelatedArticles(recentVisits[0].title)
    ]);

    return {
        popular: engagementBased,
        recent: recentBased
    };
}

async function getRelatedArticles(title) {
    // Check cache first
    const cacheKey = `related_${title}`;
    if (apiCache.has(cacheKey)) {
        return apiCache.get(cacheKey);
    }

    // Fetch from Wikipedia API
    const params = new URLSearchParams({
        action: 'opensearch',
        search: title,
        limit: MAX_RECOMMENDATIONS,
        namespace: 0,
        format: 'json',
        origin: '*'
    });

    const response = await fetch(`${WIKIPEDIA_API_ENDPOINT}?${params}`);
    const [searchTerm, titles, descriptions, urls] = await response.json();

    // Format results
    const results = titles.map((title, index) => ({
        title,
        description: descriptions[index],
        url: urls[index]
    }));

    // Cache results
    apiCache.set(cacheKey, results);

    return results;
}

function displayRecommendations(recommendations) {
    const container = document.getElementById('recommendations');
    container.innerHTML = '';

    // Display popular recommendations
    if (recommendations.popular.length > 0) {
        const popularGroup = createRecommendationGroup('Based on Your Interests', recommendations.popular);
        container.appendChild(popularGroup);
    }

    // Display recent recommendations
    if (recommendations.recent.length > 0) {
        const recentGroup = createRecommendationGroup('Related to Recent Reading', recommendations.recent);
        container.appendChild(recentGroup);
    }

    if (recommendations.popular.length === 0 && recommendations.recent.length === 0) {
        showNoData(container, 'No recommendations available. Try reading some Wikipedia articles first!');
    }
}

// Load and display history
function loadHistory() {
    chrome.storage.local.get({ visits: [] }, (result) => {
        const visits = result.visits
            .sort((a, b) => b.timestamp - a.timestamp)
            .slice(0, MAX_HISTORY_ITEMS);
        
        displayHistory(visits);
    });
}

function displayHistory(visits) {
    const container = document.getElementById('history');
    container.innerHTML = '';

    if (visits.length === 0) {
        showNoData(container, 'No reading history available.');
        return;
    }

    visits.forEach(visit => {
        const articleCard = createArticleCard({
            title: visit.title,
            url: visit.url,
            meta: `Read ${formatTimeAgo(visit.timestamp)} • ${formatReadingTime(visit.timeSpent)}`
        });
        container.appendChild(articleCard);
    });
}

// UI Helper functions
function createRecommendationGroup(title, articles) {
    const group = document.createElement('div');
    group.className = 'recommendation-group';

    const groupTitle = document.createElement('div');
    groupTitle.className = 'group-title';
    groupTitle.textContent = title;
    group.appendChild(groupTitle);

    articles.forEach(article => {
        const articleCard = createArticleCard({
            title: article.title,
            url: article.url,
            meta: article.description || 'No description available'
        });
        group.appendChild(articleCard);
    });

    return group;
}

function createArticleCard({ title, url, meta }) {
    const card = document.createElement('div');
    card.className = 'article-card';

    const titleLink = document.createElement('a');
    titleLink.className = 'article-title';
    titleLink.href = url;
    titleLink.target = '_blank';
    titleLink.textContent = title;
    card.appendChild(titleLink);

    const metaDiv = document.createElement('div');
    metaDiv.className = 'article-meta';
    metaDiv.textContent = meta;
    card.appendChild(metaDiv);

    return card;
}

function showError(message) {
    const container = document.getElementById('recommendations');
    container.innerHTML = `<div class="error">${message}</div>`;
}

function showNoData(container, message) {
    container.innerHTML = `<div class="no-data">${message}</div>`;
}

// Utility functions
function formatReadingTime(seconds) {
    if (!seconds) return '0 min';
    const minutes = Math.round(seconds / 60);
    return minutes === 1 ? '1 min' : `${minutes} mins`;
}

function formatTimeAgo(timestamp) {
    const seconds = Math.floor((Date.now() - timestamp) / 1000);
    
    const intervals = {
        year: 31536000,
        month: 2592000,
        week: 604800,
        day: 86400,
        hour: 3600,
        minute: 60
    };

    for (const [unit, secondsInUnit] of Object.entries(intervals)) {
        const interval = Math.floor(seconds / secondsInUnit);
        if (interval >= 1) {
            return `${interval} ${unit}${interval === 1 ? '' : 's'} ago`;
        }
    }

    return 'just now';
}