/**
 * Trending Page JavaScript
 * GitHub-inspired trending components page for Claude Code Templates
 */

class TrendingPage {
    constructor() {
        this.currentType = 'agents';
        this.currentRange = 'month'; // Changed from 'today' to 'month' to show real data
        this.data = null;

        this.init();
    }

    async init() {
        try {
            await this.loadData();
            this.setupEventListeners();
            this.renderHeroStats();
            this.renderPopularItems();
            this.renderTopCountries();
            this.renderChart();
            this.renderTrendingItems();
        } catch (error) {
            console.error('Failed to initialize trending page:', error);
            this.showError('Failed to load trending data');
        }
    }

    async loadData() {
        try {
            const response = await fetch('trending-data.json');
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            this.data = await response.json();
        } catch (error) {
            console.error('Error loading trending data:', error);
            throw error;
        }
    }

    setupEventListeners() {
        // Component tabs
        document.querySelectorAll('.component-tab').forEach(tab => {
            tab.addEventListener('click', (e) => {
                // Remove active class from all tabs
                document.querySelectorAll('.component-tab').forEach(t => t.classList.remove('active'));

                // Add active class to clicked tab
                e.target.classList.add('active');

                // Update current type
                this.currentType = e.target.dataset.type;
                this.renderTrendingItems();
            });
        });

        // Date range filter
        const dateRange = document.getElementById('date-range');
        if (dateRange) {
            dateRange.addEventListener('change', (e) => {
                this.currentRange = e.target.value;
                this.renderTrendingItems();
            });
        }
    }

    renderHeroStats() {
        const container = document.getElementById('hero-stats');
        if (!container || !this.data || !this.data.globalStats) {
            return;
        }

        // Use real global statistics from the JSON
        const globalStats = this.data.globalStats;

        const stats = [
            {
                number: globalStats.totalComponents.toLocaleString(),
                label: 'Unique Components',
                change: 'Across 7 categories',
                positive: true
            },
            {
                number: globalStats.totalDownloads.toLocaleString(),
                label: 'Total Downloads',
                change: 'All time downloads',
                positive: true
            },
            {
                number: globalStats.totalCountries.toLocaleString(),
                label: 'Countries',
                change: 'Global reach',
                positive: true
            }
        ];

        container.innerHTML = stats.map(stat => `
            <div class="hero-stat-item">
                <div class="hero-stat-number">${stat.number}</div>
                <div class="hero-stat-label">${stat.label}</div>
                <div class="hero-stat-change ${stat.positive ? '' : 'negative'}">
                    <svg width="10" height="10" viewBox="0 0 16 16" fill="currentColor">
                        <path d="${stat.positive ? 'M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0zm7-3.25a.75.75 0 0 0-1.5 0v2.5h-2.5a.75.75 0 0 0 0 1.5h2.5v2.5a.75.75 0 0 0 1.5 0v-2.5h2.5a.75.75 0 0 0 0-1.5h-2.5v-2.5Z' : 'M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zM3.25 8a.75.75 0 0 1 .75-.75h8a.75.75 0 0 1 0 1.5h-8A.75.75 0 0 1 3.25 8z'}"/>
                    </svg>
                    ${stat.change}
                </div>
            </div>
        `).join('');
    }

    renderPopularItems() {
        const container = document.getElementById('popular-categories');
        if (!container || !this.data || !this.data.trending) {
            return;
        }

        // Define categories to show and their display info (excluding templates)
        const categories = [
            { key: 'agents', title: 'Agents', icon: 'M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Zm7-3.25a.75.75 0 0 0-1.5 0v2.5h-2.5a.75.75 0 0 0 0 1.5h2.5v2.5a.75.75 0 0 0 1.5 0v-2.5h2.5a.75.75 0 0 0 0-1.5h-2.5v-2.5Z' },
            { key: 'commands', title: 'Commands', icon: 'M8 4a4 4 0 1 1 0 8 4 4 0 0 1 0-8zM2.5 8a5.5 5.5 0 1 0 11 0 5.5 5.5 0 0 0-11 0z' },
            { key: 'mcps', title: 'MCPs', icon: 'M2.5 3A1.5 1.5 0 0 0 1 4.5v.793c0 .026.009.051.025.072L2.5 7a.5.5 0 0 1 0 .708L1.025 9.133a.149.149 0 0 0-.025.072V10.5A1.5 1.5 0 0 0 2.5 12h2.793a.149.149 0 0 0 .072-.025L7 10.5a.5.5 0 0 1 .708 0l1.625 1.475c.021.016.046.025.072.025H12.5A1.5 1.5 0 0 0 14 10.5v-.793a.149.149 0 0 0-.025-.072L12.5 8a.5.5 0 0 1 0-.708l1.475-1.625a.149.149 0 0 0 .025-.072V4.5A1.5 1.5 0 0 0 12.5 3H9.707a.149.149 0 0 0-.072.025L8 4.5a.5.5 0 0 1-.708 0L5.867 3.025A.149.149 0 0 0 5.793 3H2.5z' },
            { key: 'settings', title: 'Settings', icon: 'M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492zM5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0z' },
            { key: 'hooks', title: 'Hooks', icon: 'M1.5 1.5A.5.5 0 0 0 1 2v4.8a2.5 2.5 0 0 0 2.5 2.5h9.793l-3.347 3.346a.5.5 0 0 0 .708.708l4.2-4.2a.5.5 0 0 0 0-.708l-4.2-4.2a.5.5 0 0 0-.708.708L13.293 8.3H3.5A1.5 1.5 0 0 1 2 6.8V2a.5.5 0 0 0-.5-.5z' },
            { key: 'skills', title: 'Skills', icon: 'M6.5 1A1.5 1.5 0 0 0 5 2.5V3H1.5A1.5 1.5 0 0 0 0 4.5v8A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-8A1.5 1.5 0 0 0 14.5 3H11v-.5A1.5 1.5 0 0 0 9.5 1h-3zm0 1h3a.5.5 0 0 1 .5.5V3H6v-.5a.5.5 0 0 1 .5-.5zm1.886 6.914L15 7.151V12.5a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5V7.15l6.614 1.764a1.5 1.5 0 0 0 .772 0zM1.5 4h13a.5.5 0 0 1 .5.5v1.616L8.129 7.948a.5.5 0 0 1-.258 0L1 6.116V4.5a.5.5 0 0 1 .5-.5z' }
        ];

        container.innerHTML = '';

        categories.forEach(category => {
            const categoryData = this.data.trending[category.key];
            if (!categoryData || !Array.isArray(categoryData) || categoryData.length === 0) {
                return;
            }

            // Sort by monthly downloads and take only the top 1
            const topItem = categoryData
                .sort((a, b) => (b.downloadsMonth || 0) - (a.downloadsMonth || 0))[0];

            const itemElement = this.createPopularItemCard(category, topItem);
            container.appendChild(itemElement);
        });
    }

    renderTopCountries() {
        const container = document.getElementById('top-countries-list');
        if (!container || !this.data || !this.data.topCountries) {
            return;
        }

        const topCountries = this.data.topCountries;

        container.innerHTML = topCountries.map(country => `
            <div class="country-item">
                <div class="country-flag">${country.flag}</div>
                <div class="country-info">
                    <div class="country-name">${country.name}</div>
                    <div class="country-stats">
                        <span class="country-downloads">${country.downloads.toLocaleString()}</span>
                        <span class="country-percentage">(${country.percentage}%)</span>
                    </div>
                    <div class="country-bar-container">
                        <div class="country-bar" style="width: ${country.percentage}%"></div>
                    </div>
                </div>
            </div>
        `).join('');
    }

    createPopularItemCard(category, item) {
        const itemElement = document.createElement('div');
        itemElement.className = 'popular-item';

        const totalDownloads = item.downloadsTotal || 0;

        itemElement.innerHTML = `
            <div class="popular-item-header">
                <div class="popular-item-info">
                    <div class="popular-item-type">${category.title}</div>
                    <h4 class="popular-item-name">${item.name}</h4>
                </div>
            </div>

            <div class="popular-total-downloads">
                <span class="total-number">${totalDownloads.toLocaleString()}</span>
                <span class="total-label">downloads</span>
            </div>

            <div class="popular-stats">
                <button class="popular-install-btn" onclick="showInstallModal('${item.id || item.name}')">
                    <svg class="popular-install-icon" fill="currentColor" viewBox="0 0 16 16">
                        <path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/>
                        <path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/>
                    </svg>
                    Get
                </button>
            </div>
        `;

        return itemElement;
    }

    renderChart() {
        if (!this.data || !this.data.chartData) {
            console.warn('No chart data available');
            return;
        }

        const ctx = document.getElementById('downloadsChart');
        if (!ctx) {
            console.warn('Chart canvas not found');
            return;
        }

        // Chart colors matching terminal theme (excluding templates)
        const colors = {
            commands: '#10b981',    // emerald (green)
            agents: '#f59e0b',      // amber (yellow)
            mcps: '#3b82f6',        // blue
            settings: '#8b5cf6',    // violet
            hooks: '#f97316',       // orange
            skills: '#ec4899'       // pink
        };

        // Define the desired order for the legend (agents first - most popular, excluding templates)
        const categoryOrder = ['agents', 'commands', 'mcps', 'settings', 'hooks', 'skills'];

        // Prepare datasets in the specified order
        const datasets = categoryOrder
            .filter(category => this.data.chartData.series[category]) // Only include categories that exist
            .map(category => ({
                label: category.charAt(0).toUpperCase() + category.slice(1),
                data: this.data.chartData.series[category],
                borderColor: colors[category] || '#6b7280',
                backgroundColor: (colors[category] || '#6b7280') + '20',
                borderWidth: 2,
                fill: false,
                tension: 0.1,
                pointRadius: 0,
                pointHoverRadius: 4,
                pointBackgroundColor: colors[category] || '#6b7280',
                pointBorderColor: '#1f2937',
                pointBorderWidth: 2
            }));

        // Create chart
        new Chart(ctx, {
            type: 'line',
            data: {
                labels: this.data.chartData.dates.map(date => {
                    return new Date(date).toLocaleDateString('en-US', {
                        month: 'short',
                        day: 'numeric'
                    });
                }),
                datasets: datasets
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'bottom',
                        labels: {
                            color: '#d1d5db',
                            usePointStyle: true,
                            pointStyle: 'circle',
                            padding: 20,
                            font: {
                                family: "'Monaco', 'Menlo', 'Ubuntu Mono', monospace",
                                size: 11
                            }
                        }
                    },
                    tooltip: {
                        backgroundColor: '#1f2937',
                        titleColor: '#f3f4f6',
                        bodyColor: '#d1d5db',
                        borderColor: '#374151',
                        borderWidth: 1,
                        titleFont: {
                            family: "'Monaco', 'Menlo', 'Ubuntu Mono', monospace"
                        },
                        bodyFont: {
                            family: "'Monaco', 'Menlo', 'Ubuntu Mono', monospace"
                        },
                        filter: function(tooltipItem, data) {
                            return true; // Show all items
                        },
                        itemSort: function(a, b) {
                            // Sort tooltip items by download count (highest to lowest)
                            return b.parsed.y - a.parsed.y;
                        },
                        callbacks: {
                            title: function(context) {
                                return `Date: ${context[0].label}`;
                            },
                            label: function(context) {
                                return `${context.dataset.label}: ${context.parsed.y.toLocaleString()} downloads`;
                            },
                            labelColor: function(context) {
                                // Use the same colors as defined for the chart lines
                                const category = context.dataset.label.toLowerCase();
                                const color = colors[category] || '#6b7280';
                                return {
                                    borderColor: color,
                                    backgroundColor: color
                                };
                            }
                        }
                    }
                },
                scales: {
                    x: {
                        grid: {
                            color: '#374151',
                            borderColor: '#4b5563'
                        },
                        ticks: {
                            color: '#9ca3af',
                            font: {
                                family: "'Monaco', 'Menlo', 'Ubuntu Mono', monospace",
                                size: 10
                            }
                        }
                    },
                    y: {
                        grid: {
                            color: '#374151',
                            borderColor: '#4b5563'
                        },
                        ticks: {
                            color: '#9ca3af',
                            font: {
                                family: "'Monaco', 'Menlo', 'Ubuntu Mono', monospace",
                                size: 10
                            },
                            callback: function(value) {
                                return value.toLocaleString();
                            }
                        }
                    }
                },
                interaction: {
                    intersect: false,
                    mode: 'index'
                }
            }
        });
    }

    renderTrendingItems() {
        const container = document.getElementById('trending-list');
        const items = this.getFilteredItems();

        if (items.length === 0) {
            container.innerHTML = this.getEmptyState();
            return;
        }

        container.innerHTML = '';
        items.forEach((item, index) => {
            const itemElement = this.createTrendingItem(item, index + 1);
            container.appendChild(itemElement);
        });
    }

    getFilteredItems() {
        let allItems = [];
        
        if (this.currentType === '') {
            // If no filter, get items from "all" category if it exists, 
            // otherwise combine all categories
            if (this.data.trending.all) {
                allItems = this.data.trending.all;
            } else {
                Object.values(this.data.trending).forEach(categoryItems => {
                    if (Array.isArray(categoryItems)) {
                        allItems = allItems.concat(categoryItems);
                    }
                });
            }
        } else {
            // Get items from selected category
            allItems = this.data.trending[this.currentType] || [];
        }
        
        // Sort by the current date range downloads (highest to lowest)
        allItems.sort((a, b) => {
            const aDownloads = this.getDownloadsForRange(a);
            const bDownloads = this.getDownloadsForRange(b);
            return bDownloads - aDownloads;
        });
        
        // For "all" categories, limit to top 10
        if (this.currentType === '') {
            allItems = allItems.slice(0, 10);
        }
        
        return allItems;
    }

    createTrendingItem(item, rank) {
        const itemElement = document.createElement('div');
        itemElement.className = 'trending-item';
        
        const category = item.category || 'general';
        const itemType = this.getItemType(item);
        const componentType = this.getComponentTypeLabel(item);
        const downloads = this.getDownloadsForRange(item);
        
        itemElement.innerHTML = `
            <div class="trending-rank">
                <span class="rank-number">#${rank}</span>
            </div>
            
            <div class="trending-content">
                <div class="trending-header">
                    <div class="trending-title">
                        <svg class="trending-icon" fill="currentColor" viewBox="0 0 16 16">
                            <path d="${this.getIconPath(itemType)}"/>
                        </svg>
                        <h3 class="trending-name">${item.name}</h3>
                        <span class="trending-category">${category}</span>
                    </div>
                    <button class="install-button" onclick="showInstallModal('${item.id || item.name}')">
                        <svg class="install-icon" fill="currentColor" viewBox="0 0 16 16">
                            <path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/>
                            <path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/>
                        </svg>
                        Install
                    </button>
                </div>
                
                <div class="trending-metadata">
                    <div class="trending-downloads">
                        <svg class="meta-icon" fill="currentColor" viewBox="0 0 16 16">
                            <path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/>
                            <path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/>
                        </svg>
                        <span>${downloads.toLocaleString()} downloads ${this.getRangeLabel()}</span>
                    </div>
                    <div class="trending-type-badge">${componentType}</div>
                </div>
            </div>
        `;

        return itemElement;
    }

    getDownloadsForRange(item) {
        switch(this.currentRange) {
            case 'today':
                return item.downloadsToday || 0;
            case 'week':
                return item.downloadsWeek || 0;
            case 'month':
                return item.downloadsMonth || 0;
            default:
                return item.downloadsToday || 0;
        }
    }

    getRangeLabel() {
        switch(this.currentRange) {
            case 'today':
                return 'today';
            case 'week':
                return 'this week';
            case 'month':
                return 'this month';
            default:
                return 'today';
        }
    }

    getComponentTypeLabel(item) {
        // Determine the component type from the item ID or context
        const id = item.id || '';

        if (id.includes('agent-') || id.startsWith('agent') || this.currentType === 'agents') {
            return 'Agent';
        } else if (id.includes('command-') || id.startsWith('command') || this.currentType === 'commands') {
            return 'Command';
        } else if (id.includes('setting-') || id.startsWith('setting') || this.currentType === 'settings') {
            return 'Settings';
        } else if (id.includes('hook-') || id.startsWith('hook') || this.currentType === 'hooks') {
            return 'Hooks';
        } else if (id.includes('mcp-') || id.startsWith('mcp') || this.currentType === 'mcps') {
            return 'MCP';
        } else if (id.includes('skill-') || id.startsWith('skill') || this.currentType === 'skills') {
            return 'Skill';
        } else if (id.includes('template-') || id.startsWith('template') || this.currentType === 'templates') {
            return 'Template';
        }

        // Fallback: try to determine from data structure
        if (item.expertise) return 'Agent';
        if (item.command) return 'Command';

        return 'Component';
    }

    renderContributors(contributors) {
        if (!contributors || contributors.length === 0) {
            return '';
        }

        const contributorElements = contributors.slice(0, 3).map(contributor => 
            `<img class="contributor-avatar" src="${contributor.avatar}" alt="${contributor.name}" title="${contributor.name}">`
        ).join('');

        return `
            <div class="meta-item">
                <span>Built by</span>
                <div class="contributors">
                    ${contributorElements}
                </div>
            </div>
        `;
    }

    renderTags(tags) {
        if (!tags || tags.length === 0) {
            return '';
        }

        const tagElements = tags.map(tag => 
            `<span class="tag">${tag}</span>`
        ).join('');

        return `<div class="tags">${tagElements}</div>`;
    }

    getLanguageClass(language) {
        const languageMap = {
            'JavaScript/TypeScript': 'typescript',
            'JavaScript': 'javascript',
            'TypeScript': 'typescript',
            'Node.js/Express': 'nodejs',
            'Python': 'python',
            'SQL/Node.js': 'sql',
            'Docker': 'docker',
            'C#/Unity': 'csharp',
            'Unity/Game Development': 'unity',
            'Git/Bash': 'git',
            'Multi-language': 'javascript',
            'Universal': 'javascript'
        };

        return languageMap[language] || 'javascript';
    }

    getItemType(item) {
        // Determine item type based on data structure or properties
        if (item.expertise) return 'agents';
        if (item.command) return 'commands';
        if (item.type === 'settings') return 'settings';
        if (item.type === 'hooks') return 'hooks';
        if (item.type === 'mcps') return 'mcps';
        if (item.type === 'skills') return 'skills';
        if (item.type === 'templates') return 'templates';
        return 'commands'; // default
    }

    getIconPath(type) {
        const icons = {
            commands: 'M8 4a4 4 0 1 1 0 8 4 4 0 0 1 0-8zM2.5 8a5.5 5.5 0 1 0 11 0 5.5 5.5 0 0 0-11 0z',
            agents: 'M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Zm7-3.25a.75.75 0 0 0-1.5 0v2.5h-2.5a.75.75 0 0 0 0 1.5h2.5v2.5a.75.75 0 0 0 1.5 0v-2.5h2.5a.75.75 0 0 0 0-1.5h-2.5v-2.5Z',
            settings: 'M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492zM5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0z',
            hooks: 'M1.5 1.5A.5.5 0 0 0 1 2v4.8a2.5 2.5 0 0 0 2.5 2.5h9.793l-3.347 3.346a.5.5 0 0 0 .708.708l4.2-4.2a.5.5 0 0 0 0-.708l-4.2-4.2a.5.5 0 0 0-.708.708L13.293 8.3H3.5A1.5 1.5 0 0 1 2 6.8V2a.5.5 0 0 0-.5-.5z',
            mcps: 'M2.5 3A1.5 1.5 0 0 0 1 4.5v.793c0 .026.009.051.025.072L2.5 7a.5.5 0 0 1 0 .708L1.025 9.133a.149.149 0 0 0-.025.072V10.5A1.5 1.5 0 0 0 2.5 12h2.793a.149.149 0 0 0 .072-.025L7 10.5a.5.5 0 0 1 .708 0l1.625 1.475c.021.016.046.025.072.025H12.5A1.5 1.5 0 0 0 14 10.5v-.793a.149.149 0 0 0-.025-.072L12.5 8a.5.5 0 0 1 0-.708l1.475-1.625a.149.149 0 0 0 .025-.072V4.5A1.5 1.5 0 0 0 12.5 3H9.707a.149.149 0 0 0-.072.025L8 4.5a.5.5 0 0 1-.708 0L5.867 3.025A.149.149 0 0 0 5.793 3H2.5z',
            skills: 'M6.5 1A1.5 1.5 0 0 0 5 2.5V3H1.5A1.5 1.5 0 0 0 0 4.5v8A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-8A1.5 1.5 0 0 0 14.5 3H11v-.5A1.5 1.5 0 0 0 9.5 1h-3zm0 1h3a.5.5 0 0 1 .5.5V3H6v-.5a.5.5 0 0 1 .5-.5zm1.886 6.914L15 7.151V12.5a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5V7.15l6.614 1.764a1.5 1.5 0 0 0 .772 0zM1.5 4h13a.5.5 0 0 1 .5.5v1.616L8.129 7.948a.5.5 0 0 1-.258 0L1 6.116V4.5a.5.5 0 0 1 .5-.5z',
            templates: 'M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v12.5A1.75 1.75 0 0 1 14.25 16H1.75A1.75 1.75 0 0 1 0 14.25V1.75zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25V1.75a.25.25 0 0 0-.25-.25H1.75zM7.25 4a.75.75 0 0 1 1.5 0v4.25H12a.75.75 0 0 1 0 1.5H8.75V12a.75.75 0 0 1-1.5 0V9.75H4a.75.75 0 0 1 0-1.5h3.25V4z'
        };

        return icons[type] || icons.commands;
    }

    getEmptyState() {
        return `
            <div class="empty-state">
                <svg class="empty-state-icon" fill="currentColor" viewBox="0 0 16 16">
                    <path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Zm4.879-2.773l4.264 2.559a.25.25 0 0 1 0 .428l-4.264 2.559A.25.25 0 0 1 6 10.559V5.442a.25.25 0 0 1 .379-.215Z"/>
                </svg>
                <h3>No trending items found</h3>
                <p>Try adjusting your filters or check back later for new trending content.</p>
            </div>
        `;
    }

    showError(message) {
        const container = document.getElementById('trending-list');
        container.innerHTML = `
            <div class="empty-state">
                <svg class="empty-state-icon" fill="currentColor" viewBox="0 0 16 16">
                    <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
                    <path d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z"/>
                </svg>
                <h3>Error Loading Data</h3>
                <p>${message}</p>
            </div>
        `;
    }

    showLoading() {
        const container = document.getElementById('trending-list');
        container.innerHTML = `
            <div class="loading">
                <div class="loading-spinner"></div>
                <p>Loading trending components...</p>
            </div>
        `;
    }
}

// Initialize the trending page when DOM is loaded
document.addEventListener('DOMContentLoaded', () => {
    window.trendingPageInstance = new TrendingPage();
});

// Modal functionality
function showInstallModal(componentName) {
    const modal = document.getElementById('installModal');
    const commandText = document.getElementById('commandText');

    // Determine the component type from the current filter or component name
    let componentType = 'command'; // default
    let componentCategory = '';

    // Get the current trending page instance to check the type
    if (window.trendingPageInstance) {
        componentType = window.trendingPageInstance.currentType || 'commands';

        // Find the component in the data to get its category
        const items = window.trendingPageInstance.data.trending[componentType] || [];
        const item = items.find(i => (i.id || i.name) === componentName);
        if (item && item.category) {
            componentCategory = item.category;
        }
    }

    // Convert plural to singular for the command flag
    const typeMap = {
        'agents': 'agent',
        'commands': 'command',
        'settings': 'setting',
        'hooks': 'hook',
        'mcps': 'mcp',
        'skills': 'skill',
        'templates': 'template'
    };

    const flagType = typeMap[componentType] || 'command';

    // Clean the component name by removing prefixes
    let cleanName = componentName;
    const prefixesToRemove = ['agent-', 'command-', 'setting-', 'hook-', 'mcp-', 'skill-', 'template-'];

    for (const prefix of prefixesToRemove) {
        if (cleanName.startsWith(prefix)) {
            cleanName = cleanName.substring(prefix.length);
            break;
        }
    }

    // Build the full component path: category/name
    const componentPath = componentCategory ? `${componentCategory}/${cleanName}` : cleanName;

    // Update the command with the correct flag and full component path
    const command = `npx claude-code-templates@latest --${flagType} ${componentPath} --yes`;
    commandText.textContent = command;

    // Show the modal
    modal.classList.add('show');

    // Prevent body scrolling
    document.body.style.overflow = 'hidden';
}

function closeInstallModal() {
    const modal = document.getElementById('installModal');
    modal.classList.remove('show');
    
    // Restore body scrolling
    document.body.style.overflow = '';
    
    // Hide copy feedback
    const feedback = document.getElementById('copyFeedback');
    feedback.classList.remove('show');
}

function copyInstallCommand() {
    const commandText = document.getElementById('commandText');
    const copyFeedback = document.getElementById('copyFeedback');
    const copyButton = document.querySelector('.copy-button');
    
    // Copy to clipboard
    navigator.clipboard.writeText(commandText.textContent).then(() => {
        // Show success feedback
        copyFeedback.classList.add('show');
        
        // Temporarily change button text
        const originalText = copyButton.innerHTML;
        copyButton.innerHTML = `
            <svg class="copy-icon" width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
                <path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/>
            </svg>
            Copied!
        `;
        
        // Reset after 2 seconds
        setTimeout(() => {
            copyButton.innerHTML = originalText;
            copyFeedback.classList.remove('show');
        }, 2000);
    }).catch(err => {
        console.error('Failed to copy: ', err);
        // Fallback for older browsers
        fallbackCopyTextToClipboard(commandText.textContent);
    });
}

function fallbackCopyTextToClipboard(text) {
    const textArea = document.createElement("textarea");
    textArea.value = text;
    textArea.style.position = "fixed";
    textArea.style.top = "0";
    textArea.style.left = "0";
    textArea.style.width = "2em";
    textArea.style.height = "2em";
    textArea.style.padding = "0";
    textArea.style.border = "none";
    textArea.style.outline = "none";
    textArea.style.boxShadow = "none";
    textArea.style.background = "transparent";
    document.body.appendChild(textArea);
    textArea.focus();
    textArea.select();
    
    try {
        document.execCommand('copy');
        const copyFeedback = document.getElementById('copyFeedback');
        copyFeedback.classList.add('show');
        setTimeout(() => {
            copyFeedback.classList.remove('show');
        }, 2000);
    } catch (err) {
        console.error('Fallback: Could not copy text: ', err);
    }
    
    document.body.removeChild(textArea);
}

// Close modal on Escape key
document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape') {
        closeInstallModal();
    }
});

// Add some utility functions for future enhancements
window.TrendingUtils = {
    formatDate(dateString) {
        return new Date(dateString).toLocaleDateString('en-US', {
            year: 'numeric',
            month: 'short',
            day: 'numeric'
        });
    },

    formatNumber(num) {
        if (num >= 1000000) {
            return (num / 1000000).toFixed(1) + 'M';
        }
        if (num >= 1000) {
            return (num / 1000).toFixed(1) + 'k';
        }
        return num.toString();
    },

    debounce(func, wait) {
        let timeout;
        return function executedFunction(...args) {
            const later = () => {
                clearTimeout(timeout);
                func(...args);
            };
            clearTimeout(timeout);
            timeout = setTimeout(later, wait);
        };
    }
};