// Index Events - Handles events specific to index.html

// Global function to focus search input when clicking wrapper
function focusSearchInput() {
    const searchInput = document.getElementById('searchInput');
    if (searchInput) {
        searchInput.focus();
    }
}

class IndexPageManager {
    constructor() {
        this.currentFilter = 'skills';
        this.currentCategoryFilter = 'all';
        this.currentSort = 'downloads'; // Default sort by downloads
        this.templatesData = null;
        this.componentsData = null;
        this.availableCategories = {
            agents: new Set(),
            commands: new Set(),
            mcps: new Set(),
            settings: new Set(),
            hooks: new Set(),
            skills: new Set(),
            templates: new Set(),
            plugins: new Set()
        };
        
        // Pagination settings
        this.currentPage = 1;
        this.itemsPerPage = 24; // 3x3 grid
        this.totalPages = 1;
        
        // Framework icons mapping (from script.js)
        this.FRAMEWORK_ICONS = {
            // Languages
            'common': 'devicon-gear-plain',
            'javascript-typescript': 'devicon-javascript-plain',
            'python': 'devicon-python-plain',
            'ruby': 'devicon-ruby-plain',
            'rust': 'devicon-rust-plain',
            'go': 'devicon-go-plain',
            
            // JavaScript/TypeScript frameworks
            'react': 'devicon-react-original',
            'vue': 'devicon-vuejs-plain',
            'angular': 'devicon-angularjs-plain',
            'node': 'devicon-nodejs-plain',
            
            // Python frameworks
            'django': 'devicon-django-plain',
            'flask': 'devicon-flask-original',
            'fastapi': 'devicon-fastapi-plain',
            
            // Ruby frameworks
            'rails': 'devicon-rails-plain',
            'sinatra': 'devicon-ruby-plain',
            
            // Default fallback
            'default': 'devicon-devicon-plain'
        };
    }

    async init() {
        try {
            // Setup event listeners first (they don't depend on data)
            this.setupEventListeners();

            // Show loading state
            this.showLoadingState(true);

            // Load all components and templates at once
            await this.loadComponentsData();
            await this.loadTemplatesData();

            // Check if URL has a specific filter and update accordingly
            const filterFromURL = this.getFilterFromURL();
            if (filterFromURL && filterFromURL !== this.currentFilter) {
                this.currentFilter = filterFromURL;

                // Update active filter chip
                document.querySelectorAll('.component-type-filters .filter-chip').forEach(btn => {
                    btn.classList.remove('active');
                });
                const activeBtn = document.querySelector(`.component-type-filters [data-filter="${filterFromURL}"]`);
                if (activeBtn) {
                    activeBtn.classList.add('active');
                }
            }

            // Update sort selector for initial filter
            this.updateSortSelector();

            // Display components
            this.displayCurrentFilter();

            // Show category filters for the current filter
            if (typeof showCategoryFilters === 'function') {
                showCategoryFilters(this.currentFilter);
            }

        } catch (error) {
            console.error('Error initializing index page:', error);
            this.showError('Failed to load data. Please refresh the page.');
        } finally {
            this.showLoadingState(false);
        }
    }

    // Get filter from URL path
    getFilterFromURL() {
        const path = window.location.pathname;
        const segments = path.split('/').filter(segment => segment);

        // Check if first segment is a valid filter
        const validFilters = ['agents', 'commands', 'settings', 'hooks', 'mcps', 'skills', 'templates', 'plugins'];
        const firstSegment = segments[0];

        if (firstSegment && validFilters.includes(firstSegment)) {
            return firstSegment;
        }

        // Default to skills
        return 'skills';
    }

    async loadTemplatesData() {
        try {
            // Templates are now loaded from components.json, not GitHub
            this.templatesData = await window.dataLoader.loadTemplates();
            
            // Update display if templates were found
            if (this.templatesData && Object.keys(this.templatesData).length > 0) {
                this.displayCurrentFilter();
            }
        } catch (error) {
            console.warn('Templates not available in components.json:', error);
            // Continue without templates - this is not critical
        }
    }

    async loadComponentsData() {
        try {
            // Load all components at once - the performance issue was mostly due to GitHub fetching
            // Now that we only use components.json, we can load all data safely
            this.componentsData = await window.dataLoader.loadAllComponents();
            this.collectAvailableCategories();
        } catch (error) {
            console.error('Error loading components:', error);
            // Use fallback data
            this.componentsData = window.dataLoader.getFallbackComponentData();
            this.collectAvailableCategories();
        }
    }
    
    // This method is no longer needed since we load all components at once
    // Kept for backward compatibility but does nothing
    async loadMoreComponentsInBackground() {
        // No-op: All components are now loaded in the initial request
    }
    
    // Check if data object is empty
    isDataEmpty(data) {
        return !data || ((!data.agents || data.agents.length === 0) &&
                         (!data.commands || data.commands.length === 0) &&
                         (!data.mcps || data.mcps.length === 0) &&
                         (!data.settings || data.settings.length === 0) &&
                         (!data.hooks || data.hooks.length === 0));
    }
    
    // Show/hide loading state
    showLoadingState(isLoading) {
        const loadingElements = document.querySelectorAll('.loading-indicator, .loading-spinner');
        const contentElements = document.querySelectorAll('#unifiedGrid, .filter-controls');
        
        loadingElements.forEach(el => {
            el.style.display = isLoading ? 'flex' : 'none';
        });
        
        contentElements.forEach(el => {
            el.style.opacity = isLoading ? '0.7' : '1';
        });
    }

    setupEventListeners() {
        // Filter buttons
        document.querySelectorAll('.filter-btn').forEach(btn => {
            btn.addEventListener('click', (e) => {
                const filter = e.target.dataset.filter;
                this.setFilter(filter);
            });
        });

        // Copy buttons
        document.addEventListener('click', (e) => {
            if (e.target.classList.contains('copy-btn')) {
                const command = e.target.previousElementSibling.textContent;
                this.copyToClipboard(command);
            }
        });
        
        // Card flip functionality for template cards
        document.addEventListener('click', (e) => {
            const card = e.target.closest('.template-card');
            // Prevent flipping for "add new" cards or if a button is clicked
            if (card && !card.classList.contains('add-template-card') && !e.target.closest('button')) {
                card.classList.toggle('flipped');
            }
        });
        
        // ESC key to close all flipped cards
        document.addEventListener('keydown', (e) => {
            if (e.key === 'Escape') {
                document.querySelectorAll('.template-card.flipped').forEach(card => {
                    card.classList.remove('flipped');
                });
            }
        });
    }

    setFilter(filter) {
        this.currentFilter = filter;
        this.currentPage = 1; // Reset to first page when changing filter
        this.currentCategoryFilter = 'all'; // Reset category filter to show all items

        // Update active button
        document.querySelectorAll('.filter-btn').forEach(btn => {
            btn.classList.toggle('active', btn.dataset.filter === filter);
        });

        // Update sort selector options based on filter
        this.updateSortSelector();

        this.displayCurrentFilter();

        // Show category filters for the new filter
        if (typeof showCategoryFilters === 'function') {
            showCategoryFilters(filter);
        }
    }

    // Update sort selector based on current filter
    updateSortSelector() {
        const sortSelector = document.getElementById('sortSelector');
        if (!sortSelector) return;

        const currentValue = sortSelector.value;

        if (this.currentFilter === 'agents') {
            // Add "Verified" option for agents if it doesn't exist
            const verifiedOption = Array.from(sortSelector.options).find(opt => opt.value === 'verified');
            if (!verifiedOption) {
                const option = document.createElement('option');
                option.value = 'verified';
                option.textContent = 'Verified First';
                sortSelector.insertBefore(option, sortSelector.options[0]);
            }
        } else {
            // Remove "Verified" option for other filters
            const verifiedOption = Array.from(sortSelector.options).find(opt => opt.value === 'verified');
            if (verifiedOption) {
                verifiedOption.remove();
                // Reset to downloads if verified was selected
                if (currentValue === 'verified') {
                    sortSelector.value = 'downloads';
                    this.currentSort = 'downloads';
                }
            }
        }
    }

    // Set category filter
    setCategoryFilter(category) {
        this.currentCategoryFilter = category;
        this.currentPage = 1; // Reset to first page when changing category
        
        // Update category filter buttons
        document.querySelectorAll('.category-filter-btn').forEach(btn => {
            btn.classList.remove('active');
        });
        const targetBtn = document.querySelector(`[data-category="${category}"]`);
        if (targetBtn) {
            targetBtn.classList.add('active');
        }
        
        // Regenerate the component display
        this.displayCurrentFilter();
    }

    // Update category sub-filters in the unified-filter-bar
    updateCategorySubFilters() {
        const unifiedFilterBar = document.querySelector('.unified-filter-bar');
        if (!unifiedFilterBar) return;
        
        // Remove existing category filters
        const existingCategoryFilters = unifiedFilterBar.querySelector('.category-filter-row');
        if (existingCategoryFilters) {
            existingCategoryFilters.remove();
        }
        
        // Get categories for current filter type
        const currentCategories = Array.from(this.availableCategories[this.currentFilter] || []).sort();
        
        if (currentCategories.length <= 1) {
            // Don't show sub-filters if there's only one category or none
            return;
        }
        
        // Create category filter row
        const categoryFilterRow = document.createElement('div');
        categoryFilterRow.className = 'category-filter-row';
        categoryFilterRow.innerHTML = `
            <div class="category-filter-label">Categories:</div>
            <div class="category-filter-buttons">
                <button class="category-filter-btn ${this.currentCategoryFilter === 'all' ? 'active' : ''}" 
                        data-category="all">
                    All
                </button>
                ${currentCategories.map(category => `
                    <button class="category-filter-btn ${this.currentCategoryFilter === category ? 'active' : ''}" 
                            data-category="${category}">
                        ${this.formatComponentName(category)}
                    </button>
                `).join('')}
            </div>
        `;
        
        // Add click event listeners
        categoryFilterRow.querySelectorAll('.category-filter-btn').forEach(btn => {
            btn.addEventListener('click', () => {
                this.setCategoryFilter(btn.getAttribute('data-category'));
            });
        });
        
        // Append to unified filter bar
        unifiedFilterBar.appendChild(categoryFilterRow);
    }

    // Get filtered components based on current filter and category filter
    getFilteredComponents(type) {
        if (!type) type = this.currentFilter;
        if (type === 'templates') {
            return [];
        }
        
        let components = this.componentsData[type] || [];
        
        // Apply category filter if not 'all'
        if (this.currentCategoryFilter !== 'all') {
            components = components.filter(component => {
                const category = component.category || 'general';
                return category === this.currentCategoryFilter;
            });
        }
        
        // Apply sorting
        components = this.sortComponents(components);
        
        return components;
    }
    
    // Sort components based on current sort option
    sortComponents(components) {
        const sortedComponents = [...components]; // Create a copy to avoid mutating original

        if (this.currentSort === 'downloads') {
            // Sort by downloads (descending) - components with no downloads go to the end
            sortedComponents.sort((a, b) => {
                const downloadsA = a.downloads || 0;
                const downloadsB = b.downloads || 0;
                return downloadsB - downloadsA;
            });
        } else if (this.currentSort === 'alphabetical') {
            // Sort alphabetically by name
            sortedComponents.sort((a, b) => {
                const nameA = (a.name || '').toLowerCase();
                const nameB = (b.name || '').toLowerCase();
                return nameA.localeCompare(nameB);
            });
        } else if (this.currentSort === 'verified') {
            // Sort by verified status first (100% score), then by downloads
            sortedComponents.sort((a, b) => {
                // Check if component has 100% validation score
                const aVerified = a.security && a.security.validated && a.security.score === 100 && a.security.valid;
                const bVerified = b.security && b.security.validated && b.security.score === 100 && b.security.valid;

                // Verified components come first
                if (aVerified && !bVerified) return -1;
                if (!aVerified && bVerified) return 1;

                // If both verified or both not verified, sort by downloads
                const downloadsA = a.downloads || 0;
                const downloadsB = b.downloads || 0;
                return downloadsB - downloadsA;
            });
        }

        return sortedComponents;
    }
    
    // Handle sort change from the dropdown
    handleSortChange(sortValue) {
        this.currentSort = sortValue;
        this.currentPage = 1; // Reset to first page when changing sort
        this.displayCurrentFilter();
    }

    // Collect available categories from loaded components
    collectAvailableCategories() {
        // Reset categories
        this.availableCategories.agents.clear();
        this.availableCategories.commands.clear();
        this.availableCategories.mcps.clear();
        this.availableCategories.settings.clear();
        this.availableCategories.hooks.clear();
        this.availableCategories.skills.clear();
        this.availableCategories.templates.clear();
        
        // Collect categories from each component type
        if (this.componentsData.agents && Array.isArray(this.componentsData.agents)) {
            this.componentsData.agents.forEach(component => {
                const category = component.category || 'general';
                this.availableCategories.agents.add(category);
            });
        }
        
        if (this.componentsData.commands && Array.isArray(this.componentsData.commands)) {
            this.componentsData.commands.forEach(component => {
                const category = component.category || 'general';  
                this.availableCategories.commands.add(category);
            });
        }
        
        if (this.componentsData.mcps && Array.isArray(this.componentsData.mcps)) {
            this.componentsData.mcps.forEach(component => {
                const category = component.category || 'general';
                this.availableCategories.mcps.add(category);
            });
        }
        
        if (this.componentsData.settings && Array.isArray(this.componentsData.settings)) {
            this.componentsData.settings.forEach(component => {
                const category = component.category || 'general';
                this.availableCategories.settings.add(category);
            });
        }
        
        if (this.componentsData.hooks && Array.isArray(this.componentsData.hooks)) {
            this.componentsData.hooks.forEach(component => {
                const category = component.category || 'general';
                this.availableCategories.hooks.add(category);
            });
        }

        if (this.componentsData.skills && Array.isArray(this.componentsData.skills)) {
            this.componentsData.skills.forEach(component => {
                const category = component.category || 'general';
                this.availableCategories.skills.add(category);
            });
        }

        // Collect categories from templates (use language as category for language templates)
        if (this.componentsData.templates && Array.isArray(this.componentsData.templates)) {
            this.componentsData.templates.forEach(template => {
                if (template.subtype === 'language') {
                    this.availableCategories.templates.add(template.name);
                } else if (template.subtype === 'framework' && template.language) {
                    this.availableCategories.templates.add(template.language);
                }
            });
        }
    }

    displayCurrentFilter() {
        const grid = document.getElementById('unifiedGrid');
        if (!grid) return;

        // Set proper grid class based on current filter
        if (this.currentFilter === 'templates') {
            grid.className = 'unified-grid templates-mode';
        } else {
            grid.className = 'unified-grid components-mode';
        }

        // Update filter button counts
        this.updateFilterCounts();

        switch (this.currentFilter) {
            case 'templates':
                this.displayTemplates(grid);
                break;
            case 'plugins':
                this.displayPlugins(grid);
                break;
            case 'agents':
            case 'commands':
            case 'mcps':
            case 'settings':
            case 'hooks':
            case 'skills':
                this.displayComponents(grid, this.currentFilter);
                break;
            default:
                grid.innerHTML = '<div class="error">Unknown filter</div>';
        }
    }

    displayTemplates(grid) {
        if (!this.componentsData || !this.componentsData.templates) {
            grid.innerHTML = '<div class="loading">Loading templates...</div>';
            return;
        }

        // Update category sub-filters for templates
        this.updateCategorySubFilters();

        // Clear the grid
        grid.innerHTML = '';
        
        // Add the "Add New Template" card first
        const addTemplateCard = this.createAddTemplateCard();
        grid.appendChild(addTemplateCard);
        
        // Filter templates based on category selection
        let filteredTemplates = this.componentsData.templates;
        if (this.currentCategoryFilter !== 'all') {
            filteredTemplates = this.componentsData.templates.filter(template => {
                if (template.subtype === 'language') {
                    return template.name === this.currentCategoryFilter;
                } else if (template.subtype === 'framework') {
                    return template.language === this.currentCategoryFilter;
                }
                return false;
            });
        }
        
        // Apply sorting to templates
        filteredTemplates = this.sortComponents(filteredTemplates);
        
        // Create template cards from the filtered list
        filteredTemplates.forEach(template => {
            const templateCard = this.createTemplateCardFromJSON(template);
            grid.appendChild(templateCard);
        });
    }

    displayPlugins(grid) {
        if (!this.componentsData || !this.componentsData.plugins) {
            grid.innerHTML = '<div class="loading">Loading plugins...</div>';
            return;
        }

        // Clear the grid
        grid.innerHTML = '';

        // Get plugins from loaded components data
        const plugins = this.componentsData.plugins;

        if (plugins.length === 0) {
            grid.innerHTML = '<div class="no-data">No plugins available</div>';
            return;
        }

        // Add marketplace setup notice
        const marketplaceNotice = document.createElement('div');
        marketplaceNotice.className = 'plugin-marketplace-notice';
        marketplaceNotice.innerHTML = `
            <div class="notice-icon">ℹ️</div>
            <div class="notice-content">
                <h4>First Time Setup Required</h4>
                <p>Before installing any plugin, you need to add the marketplace to Claude Code:</p>
                <div class="notice-command">
                    <code>/plugin marketplace add https://github.com/davila7/claude-code-templates</code>
                    <button class="notice-copy-btn" onclick="copyToClipboard('/plugin marketplace add https://github.com/davila7/claude-code-templates'); event.stopPropagation();" title="Copy command">
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
                            <path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/>
                        </svg>
                    </button>
                </div>
                <p class="notice-footer">After adding the marketplace, you can install any plugin below.</p>
            </div>
        `;
        grid.appendChild(marketplaceNotice);

        // Create plugin cards
        plugins.forEach(plugin => {
            const pluginCard = this.createPluginCard(plugin);
            grid.appendChild(pluginCard);
        });
    }

    createPluginCard(plugin) {
        const card = document.createElement('div');
        card.className = 'template-card plugin-card';

        // Count components
        const totalComponents = (plugin.commands || 0) + (plugin.agents || 0) + (plugin.mcpServers || 0);

        card.innerHTML = `
            <div class="card-inner">
                <div class="card-front">
                    <div class="plugin-content-wrapper">
                        <div class="plugin-version">v${plugin.version}</div>
                        <div class="framework-logo" style="color: #a855f7">
                            <span class="component-icon">🧩</span>
                        </div>
                        <h3 class="template-title">${escapeHTML(this.formatComponentName(plugin.name))}</h3>
                        <p class="template-description">${escapeHTML(plugin.description)}</p>
                        <div class="plugin-stats">
                            ${plugin.commands > 0 ? `<span class="plugin-stat"><span class="stat-icon">⚡</span>${plugin.commands}</span>` : ''}
                            ${plugin.agents > 0 ? `<span class="plugin-stat"><span class="stat-icon">🤖</span>${plugin.agents}</span>` : ''}
                            ${plugin.mcpServers > 0 ? `<span class="plugin-stat"><span class="stat-icon">🔌</span>${plugin.mcpServers}</span>` : ''}
                        </div>
                    </div>
                    <button class="plugin-view-details-btn" onclick="window.location.href='/plugin/${plugin.name}'; event.stopPropagation();">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                            <path d="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z"/>
                        </svg>
                        View Details
                    </button>
                </div>
                <div class="card-back">
                    <div class="command-display">
                        <h3>Installation Command</h3>
                        <div class="command-code-container">
                            <div class="command-code">${plugin.installCommand}</div>
                            <button class="copy-overlay-btn" onclick="copyToClipboard('${plugin.installCommand.replace(/'/g, "\\'")}'); event.stopPropagation();" title="Copy command">
                                <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
                                    <path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/>
                                </svg>
                                Copy Command
                            </button>
                        </div>
                        <div class="plugin-components-list">
                            <h4>Included Components (${totalComponents})</h4>
                            ${plugin.commands > 0 ? `<div class="component-type-item">⚡ ${plugin.commands} Command${plugin.commands > 1 ? 's' : ''}</div>` : ''}
                            ${plugin.agents > 0 ? `<div class="component-type-item">🤖 ${plugin.agents} Agent${plugin.agents > 1 ? 's' : ''}</div>` : ''}
                            ${plugin.mcpServers > 0 ? `<div class="component-type-item">🔌 ${plugin.mcpServers} MCP${plugin.mcpServers > 1 ? 's' : ''}</div>` : ''}
                        </div>
                    </div>
                </div>
            </div>
        `;

        return card;
    }

    displayComponents(grid, type) {
        if (!this.componentsData) {
            grid.innerHTML = '<div class="loading">Loading components...</div>';
            return;
        }

        // Update category sub-filters in the unified-filter-bar
        this.updateCategorySubFilters();
        
        const allComponents = this.getFilteredComponents(type);
        
        // Calculate pagination
        const totalItems = allComponents.length + 1; // +1 for "Add New" card
        this.totalPages = Math.ceil(totalItems / this.itemsPerPage);
        
        // Get components for current page
        const startIndex = (this.currentPage - 1) * this.itemsPerPage;
        const endIndex = startIndex + this.itemsPerPage;
        
        let html = '';
        let itemsToShow = [];
        
        // Add "Add New" card to the beginning
        itemsToShow.push({ type: 'add-new', data: type });
        
        // Add components
        allComponents.forEach(component => {
            itemsToShow.push({ type: 'component', data: component });
        });
        
        // Get items for current page
        const pageItems = itemsToShow.slice(startIndex, endIndex);
        
        // Generate HTML for page items
        pageItems.forEach(item => {
            if (item.type === 'add-new') {
                html += this.createAddComponentCard(item.data);
            } else {
                html += this.generateComponentCard(item.data);
            }
        });
        
        // Create pagination controls
        const paginationHTML = this.createPaginationControls();
        
        grid.innerHTML = html || '<div class="no-data">No components available</div>';
        
        // Add pagination after the grid
        this.updatePagination(paginationHTML);
    }


    generateComponentCard(component) {
        // Generate install command - remove .md extension from path
        let componentPath = component.path || component.name;
        // Remove .md or .json extensions from path
        if (componentPath.endsWith('.md') || componentPath.endsWith('.json')) {
            componentPath = componentPath.replace(/\.(md|json)$/, '');
        }
        if (componentPath.endsWith('.json')) {
            componentPath = componentPath.replace(/\.json$/, '');
        }
        const installCommand = `npx claude-code-templates@latest --${component.type}=${componentPath} --yes`;
        
        const typeConfig = {
            agent: { icon: '🤖', color: '#ff6b6b' },
            command: { icon: '⚡', color: '#4ecdc4' },
            mcp: { icon: '🔌', color: '#45b7d1' },
            setting: { icon: '⚙️', color: '#9c88ff' },
            hook: { icon: '🪝', color: '#ff8c42' },
            skill: { icon: '🎨', color: '#f59e0b' }
        };
        
        const config = typeConfig[component.type];
        
        // Escape quotes and special characters for onclick attributes
        const escapedType = component.type.replace(/'/g, "\\'");
        const escapedName = (component.name || '').replace(/'/g, "\\'");
        const escapedPath = (component.path || component.name || '').replace(/'/g, "\\'");
        const escapedCategory = (component.category || 'general').replace(/'/g, "\\'");
        const escapedCommand = installCommand.replace(/'/g, "\\'");
        
        // Create category label (use "General" if no category)
        const categoryName = component.category || 'general';
        const categoryLabel = `<div class="category-label">${escapeHTML(this.formatComponentName(categoryName))}</div>`;
        
        // Create download badge if downloads data exists
        const downloadBadge = component.downloads && component.downloads > 0 ?
            `<div class="download-badge" title="${component.downloads} downloads">
                <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M5 20h14v-2H5v2zM19 9h-4V3H9v6H5l7 7 7-7z"/>
                </svg>
                ${this.formatNumber(component.downloads)}
            </div>` : '';

        // Create validation badge for agents with security data
        const validationBadge = this.createValidationBadge(component.security);

        return `
            <div class="template-card" data-type="${component.type}">
                <div class="card-inner">
                    <div class="card-front">
                        ${downloadBadge}
                        ${categoryLabel}
                        <div class="framework-logo" style="color: ${config.color}">
                            <span class="component-icon">${config.icon}</span>
                            ${validationBadge}
                        </div>
                        <h3 class="template-title">${escapeHTML(this.formatComponentName(component.name))}</h3>
                        ${component.type === 'mcp' ?
                            `<p class="template-description">${escapeHTML(this.truncateDescription(component.description || 'MCP integration for enhanced development workflow', 80))}</p>` :
                            `<p class="template-description">${escapeHTML(this.getComponentDescription(component))}</p>`
                        }
                    </div>
                    <div class="card-back">
                        <div class="command-display">
                            <h3>Installation Command</h3>
                            <div class="command-code-container">
                                <div class="command-code">${escapeHTML(installCommand)}</div>
                                <button class="copy-overlay-btn" onclick="copyToClipboard('${escapedCommand}'); event.stopPropagation();" title="Copy command">
                                    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
                                        <path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/>
                                    </svg>
                                    Copy Command
                                </button>
                            </div>
                            <div class="card-actions">
                                <button class="view-files-btn" onclick="showComponentDetails('${escapedType}', '${escapedName}', '${escapedPath}', '${escapedCategory}')">
                                    📁 View Details
                                </button>
                                <button class="add-to-cart-btn" 
                                        data-type="${component.type}s" 
                                        data-path="${componentPath}"
                                        onclick="handleAddToCart('${escapedName}', '${componentPath}', '${component.type}s', '${escapedCategory}', this)">
                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                                        <path d="M19,7H18V6A2,2 0 0,0 16,4H8A2,2 0 0,0 6,6V7H5A1,1 0 0,0 4,8A1,1 0 0,0 5,9H6V19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V9H19A1,1 0 0,0 20,8A1,1 0 0,0 19,7M8,6H16V7H8V6M16,19H8V9H16V19Z"/>
                                    </svg>
                                    Add to Stack
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        `;
    }

    copyToClipboard(text) {
        // Use the global function from utils.js
        if (typeof window.copyToClipboard === 'function') {
            window.copyToClipboard(text);
        } else {
            copyToClipboard(text);
        }
    }

    showNotification(message, type = 'info') {
        const notification = document.createElement('div');
        notification.textContent = message;
        notification.className = `notification notification-${type}`;
        notification.style.cssText = `
            position: fixed;
            top: 20px;
            right: 20px;
            background: ${type === 'success' ? '#10b981' : type === 'error' ? '#ef4444' : '#3b82f6'};
            color: white;
            padding: 12px 24px;
            border-radius: 6px;
            z-index: 10000;
            font-family: system-ui, -apple-system, sans-serif;
            animation: slideIn 0.3s ease;
        `;
        
        document.body.appendChild(notification);
        setTimeout(() => {
            if (notification.parentNode) {
                notification.parentNode.removeChild(notification);
            }
        }, 3000);
    }

    formatComponentName(name) {
        return name.split('-').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ');
    }

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

    truncateDescription(description, maxLength = 80) {
        if (!description) return '';
        if (description.length <= maxLength) return description;
        return description.substring(0, maxLength).trim() + '...';
    }

    getComponentDescription(component) {
        let description = '';

        if (component.description) {
            description = component.description;
        } else if (component.content) {
            // Try to extract description from frontmatter
            const descMatch = component.content.match(/description:\s*(.+?)(?:\n|$)/);
            if (descMatch) {
                description = descMatch[1].trim().replace(/^["']|["']$/g, '');
            } else {
                // Use first paragraph if no frontmatter description
                const lines = component.content.split('\n');
                const firstParagraph = lines.find(line => line.trim() && !line.startsWith('---') && !line.startsWith('#'));
                if (firstParagraph) {
                    description = firstParagraph.trim();
                }
            }
        }

        if (!description) {
            description = `A ${component.type} component for Claude Code.`;
        }

        // Truncate description to max 120 characters for proper card display
        if (description.length > 120) {
            description = description.substring(0, 117) + '...';
        }

        return description;
    }

    /**
     * Create validation badge HTML - Only for perfect 100% score
     */
    createValidationBadge(validation) {
        if (!validation || !validation.validated) return '';

        const score = validation.score || 0;
        const isValid = validation.valid;

        // ONLY show badge for perfect score (100%)
        if (score === 100 && isValid) {
            return `<div class="verified-checkmark" title="100% Validated - Perfect Security Score">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="#1DA1F2">
                    <path d="M22.5 12.5c0-1.58-.875-2.95-2.148-3.6.154-.435.238-.905.238-1.4 0-2.21-1.71-3.998-3.818-3.998-.47 0-.92.084-1.336.25C14.818 2.415 13.51 1.5 12 1.5s-2.816.917-3.437 2.25c-.415-.165-.866-.25-1.336-.25-2.11 0-3.818 1.79-3.818 4 0 .494.083.964.237 1.4-1.272.65-2.147 2.018-2.147 3.6 0 1.495.782 2.798 1.942 3.486-.02.17-.032.34-.032.514 0 2.21 1.708 4 3.818 4 .47 0 .92-.086 1.335-.25.62 1.334 1.926 2.25 3.437 2.25 1.512 0 2.818-.916 3.437-2.25.415.163.865.248 1.336.248 2.11 0 3.818-1.79 3.818-4 0-.174-.012-.344-.033-.513 1.158-.687 1.943-1.99 1.943-3.484zm-6.616-3.334l-4.334 6.5c-.145.217-.382.334-.625.334-.143 0-.288-.04-.416-.126l-.115-.094-2.415-2.415c-.293-.293-.293-.768 0-1.06s.768-.294 1.06 0l1.77 1.767 3.825-5.74c.23-.345.696-.436 1.04-.207.346.23.44.696.21 1.04z"/>
                </svg>
            </div>`;
        }

        // Don't show anything for scores below 100
        return '';
    }

    // Update filter button counts
    updateFilterCounts() {
        // Get accurate total counts from data loader (includes full data counts)
        const totalCounts = window.dataLoader.getTotalCounts();
        if (!totalCounts) return;

        // Update each filter button with accurate total count
        const agentsBtn = document.querySelector('[data-filter="agents"]');
        const commandsBtn = document.querySelector('[data-filter="commands"]');
        const mcpsBtn = document.querySelector('[data-filter="mcps"]');
        const settingsBtn = document.querySelector('[data-filter="settings"]');
        const hooksBtn = document.querySelector('[data-filter="hooks"]');
        const skillsBtn = document.querySelector('[data-filter="skills"]');
        const templatesBtn = document.querySelector('[data-filter="templates"]');

        if (agentsBtn) {
            agentsBtn.innerHTML = `<span class="chip-icon">🤖</span>agents (${totalCounts.agents})`;
        }
        if (commandsBtn) {
            commandsBtn.innerHTML = `<span class="chip-icon">⚡</span>commands (${totalCounts.commands})`;
        }
        if (mcpsBtn) {
            mcpsBtn.innerHTML = `<span class="chip-icon">🔌</span>mcps (${totalCounts.mcps})`;
        }
        if (settingsBtn) {
            settingsBtn.innerHTML = `<span class="chip-icon">⚙️</span>settings (${totalCounts.settings})`;
        }
        if (hooksBtn) {
            hooksBtn.innerHTML = `<span class="chip-icon">🪝</span>hooks (${totalCounts.hooks})`;
        }
        if (skillsBtn) {
            skillsBtn.innerHTML = `<span class="new-label">NEW</span><span class="chip-icon">🎨</span>skills (${totalCounts.skills})`;
        }
        if (templatesBtn) {
            templatesBtn.innerHTML = `<span class="chip-icon">📦</span>templates (${totalCounts.templates})`;
        }
    }

    // Create Add Component card
    createAddComponentCard(type) {
        const typeConfig = {
            agents: {
                icon: '🤖',
                name: 'Agent',
                description: 'Create a new AI specialist agent',
                color: '#ff6b6b'
            },
            commands: {
                icon: '⚡',
                name: 'Command',
                description: 'Add a custom slash command',
                color: '#4ecdc4'
            },
            mcps: {
                icon: '🔌',
                name: 'MCP',
                description: 'Build a Model Context Protocol integration',
                color: '#45b7d1'
            },
            settings: {
                icon: '⚙️',
                name: 'Setting',
                description: 'Configure Claude Code behavior',
                color: '#9c88ff'
            },
            hooks: {
                icon: '🪝',
                name: 'Hook',
                description: 'Automate tool execution workflows',
                color: '#ff8c42'
            },
            skills: {
                icon: '🎨',
                name: 'Skill',
                description: 'Add modular capabilities with progressive disclosure',
                color: '#f59e0b'
            }
        };
        
        const config = typeConfig[type];
        if (!config) return '';
        
        return `
            <div class="template-card add-template-card add-component-card" onclick="showComponentContributeModal('${type}')">
                <div class="card-inner">
                    <div class="card-front">
                        <div class="framework-logo" style="color: ${config.color}">
                            <svg width="32" height="32" viewBox="0 0 24 24" fill="currentColor">
                                <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"/>
                            </svg>
                        </div>
                        <h3 class="template-title">Add New ${config.name}</h3>
                        <p class="template-description">${config.description}</p>
                    </div>
                </div>
            </div>
        `;
    }

    showError(message) {
        const grid = document.getElementById('unifiedGrid');
        if (grid) {
            grid.innerHTML = `
                <div class="error-message">
                    <h3>Error</h3>
                    <p>${message}</p>
                    <button onclick="location.reload()" class="btn-primary">Retry</button>
                </div>
            `;
        }
    }

    // Get framework icon from mapping
    getFrameworkIcon(framework) {
        return this.FRAMEWORK_ICONS[framework] || this.FRAMEWORK_ICONS['default'];
    }

    // Create Add Template card
    createAddTemplateCard() {
        const card = document.createElement('div');
        card.className = 'template-card add-template-card';
        
        card.innerHTML = `
            <div class="card-inner">
                <div class="card-front">
                    <div class="framework-logo">
                        <svg width="32" height="32" viewBox="0 0 24 24" fill="currentColor">
                            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"/>
                        </svg>
                    </div>
                    <h3 class="template-title">Add New Template</h3>
                    <p class="template-description">Contribute a new language or framework to the community</p>
                </div>
            </div>
        `;
        
        // Add click handler
        card.addEventListener('click', () => {
            showComponentContributeModal('templates');
        });
        
        return card;
    }

    // Create template card from JSON structure
    createTemplateCardFromJSON(template) {
        const card = document.createElement('div');
        card.className = 'template-card';
        
        // Determine the icon based on template name/type
        const icon = this.getFrameworkIcon(template.name);
        
        // Create the display name
        const displayName = template.subtype === 'framework' 
            ? `${template.language}/${template.name}`
            : template.name;
            
        card.innerHTML = `
            <div class="card-inner">
                <div class="card-front">
                    <div class="framework-logo">
                        <i class="${icon} colored"></i>
                    </div>
                    <h3 class="template-title">${escapeHTML(displayName)}</h3>
                    <p class="template-description">${escapeHTML(template.description)}</p>
                </div>
                <div class="card-back">
                    <div class="command-display">
                        <h3>Installation Command</h3>
                        <div class="command-code">${escapeHTML(template.installCommand)}</div>
                        <div class="action-buttons">
                            <button class="view-files-btn" onclick="showTemplateDetails('${template.id}', '${template.name}', '${template.subtype}')">
                                📁 View Files
                            </button>
                            <button class="copy-command-btn" onclick="copyToClipboard('${template.installCommand}')">
                                📋 Copy Command
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        `;
        
        // Card flip is handled by global event listener in setupEventListeners
        
        return card;
    }

    // Create individual template card (legacy method, keep for compatibility)
    createTemplateCard(languageKey, languageData, frameworkKey, frameworkData) {
        const card = document.createElement('div');
        card.className = `template-card ${languageData.comingSoon ? 'coming-soon' : ''}`;
        
        const displayName = frameworkKey === 'none' ? 
            frameworkData.name : 
            `${languageData.name.split('/')[0]}/${frameworkData.name}`;
        
        card.innerHTML = `
            <div class="card-inner">
                <div class="card-front">
                    ${languageData.comingSoon ? '<div class="coming-soon-badge">Coming Soon</div>' : ''}
                    <div class="framework-logo">
                        <i class="${frameworkData.icon} colored"></i>
                    </div>
                    <h3 class="template-title">${escapeHTML(displayName)}</h3>
                    <p class="template-description">${escapeHTML((languageData.description || '').substring(0, 120))}${(languageData.description || '').length > 120 ? '...' : ''}</p>
                </div>
                <div class="card-back">
                    <div class="command-display">
                        <h3>Installation Options</h3>
                        <div class="command-code">${frameworkData.command}</div>
                        <div class="action-buttons">
                            <button class="view-files-btn" onclick="showInstallationFiles('${languageKey}', '${frameworkKey}', '${displayName}')">
                                📁 View Files
                            </button>
                            <button class="copy-command-btn" onclick="copyToClipboard('${frameworkData.command}')">
                                📋 Copy Command
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        `;
        
        // Add click handler for card flip (only if not coming soon)
        if (!languageData.comingSoon) {
            card.addEventListener('click', (e) => {
                // Don't flip if clicking on buttons
                if (!e.target.closest('button')) {
                    card.classList.toggle('flipped');
                }
            });
        }
        
        return card;
    }

    // Fetch templates configuration from GitHub
    async fetchTemplatesConfig() {
        const GITHUB_CONFIG = {
            owner: 'davila7',
            repo: 'claude-code-templates',
            branch: 'main',
            templatesPath: 'cli-tool/src/templates.js'
        };
        
        try {
            const url = `https://raw.githubusercontent.com/${GITHUB_CONFIG.owner}/${GITHUB_CONFIG.repo}/${GITHUB_CONFIG.branch}/${GITHUB_CONFIG.templatesPath}?t=${Date.now()}`;
            const response = await fetch(url);
            
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            
            const templateFileContent = await response.text();
            this.templatesData = this.parseTemplatesConfig(templateFileContent);
            
            return this.templatesData;
        } catch (error) {
            console.error('Error fetching templates:', error);
            throw error;
        }
    }

    // Parse templates configuration
    parseTemplatesConfig(fileContent) {
        try {
            const configMatch = fileContent.match(/const TEMPLATES_CONFIG = ({[\s\S]*?});/);
            if (!configMatch) {
                throw new Error('TEMPLATES_CONFIG not found in file');
            }
            
            let configString = configMatch[1];
            configString = configString.replace(/'/g, '"');
            configString = configString.replace(/(\w+):/g, '"$1":');
            configString = configString.replace(/,(\s*[}\]])/g, '$1');
            
            return JSON.parse(configString);
        } catch (error) {
            console.error('Error parsing templates config:', error);
            return null;
        }
    }

    // Show contribute modal
    showContributeModal() {
        alert('Contribute modal would open here - this needs to be implemented with the full modal HTML from script.js');
    }
    
    // Create pagination controls
    createPaginationControls() {
        if (this.totalPages <= 1) return '';
        
        let paginationHTML = '<div class="pagination-container">';
        paginationHTML += '<div class="pagination">';
        
        // Previous button
        const prevDisabled = this.currentPage === 1 ? 'disabled' : '';
        paginationHTML += `<button class="pagination-btn prev-btn ${prevDisabled}" onclick="goToPage(${this.currentPage - 1})" ${prevDisabled ? 'disabled' : ''}>`;
        paginationHTML += '<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>';
        paginationHTML += '</button>';
        
        // Page numbers
        const startPage = Math.max(1, this.currentPage - 2);
        const endPage = Math.min(this.totalPages, this.currentPage + 2);
        
        if (startPage > 1) {
            paginationHTML += `<button class="pagination-btn page-btn" onclick="goToPage(1)">1</button>`;
            if (startPage > 2) {
                paginationHTML += '<span class="pagination-dots">...</span>';
            }
        }
        
        for (let i = startPage; i <= endPage; i++) {
            const activeClass = i === this.currentPage ? 'active' : '';
            paginationHTML += `<button class="pagination-btn page-btn ${activeClass}" onclick="goToPage(${i})">${i}</button>`;
        }
        
        if (endPage < this.totalPages) {
            if (endPage < this.totalPages - 1) {
                paginationHTML += '<span class="pagination-dots">...</span>';
            }
            paginationHTML += `<button class="pagination-btn page-btn" onclick="goToPage(${this.totalPages})">${this.totalPages}</button>`;
        }
        
        // Next button
        const nextDisabled = this.currentPage === this.totalPages ? 'disabled' : '';
        paginationHTML += `<button class="pagination-btn next-btn ${nextDisabled}" onclick="goToPage(${this.currentPage + 1})" ${nextDisabled ? 'disabled' : ''}>`;
        paginationHTML += '<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M10.02 6L8.61 7.41 13.19 12l-4.58 4.59L10.02 18l6-6z"/></svg>';
        paginationHTML += '</button>';
        
        paginationHTML += '</div>';
        paginationHTML += `<div class="pagination-info">Page ${this.currentPage} of ${this.totalPages}</div>`;
        paginationHTML += '</div>';
        
        return paginationHTML;
    }
    
    // Navigate to specific page
    goToPage(page) {
        if (page < 1 || page > this.totalPages || page === this.currentPage) return;
        
        this.currentPage = page;
        this.displayCurrentFilter();
        
        // Scroll to top of content grid
        const contentGrid = document.getElementById('contentGrid');
        if (contentGrid) {
            contentGrid.scrollIntoView({ behavior: 'smooth', block: 'start' });
        }
    }
    
    // Update pagination controls
    updatePagination(paginationHTML) {
        // Remove any existing pagination containers from the entire document
        const existingPaginations = document.querySelectorAll('.pagination-container');
        existingPaginations.forEach(pagination => pagination.remove());
        
        // Add new pagination if needed
        if (this.totalPages > 1 && paginationHTML) {
            const contentGrid = document.getElementById('contentGrid');
            if (contentGrid) {
                contentGrid.insertAdjacentHTML('afterend', paginationHTML);
            }
        }
    }
}

// Global function for component details is now handled by modal-helpers.js

// Global function for copying is now handled by utils.js

// Global function for handling sort change (called from onchange)
function handleSortChange(sortValue) {
    if (window.indexManager) {
        window.indexManager.handleSortChange(sortValue);
    }
}

// Global function for handling filter click with navigation
function handleFilterClick(event, filter) {
    event.preventDefault(); // Prevent default link navigation

    // If plugins filter, scroll to plugins section
    if (filter === 'plugins') {
        const contentGrid = document.getElementById('contentGrid');
        if (contentGrid) {
            contentGrid.scrollIntoView({ behavior: 'smooth', block: 'start' });
        }
    }

    setUnifiedFilter(filter);
}

// Global function for setting filter (called from onclick)
function setUnifiedFilter(filter) {
    if (window.indexManager) {
        window.indexManager.setFilter(filter);
    }
    
    // Update filter buttons - remove active from ALL filter buttons
    document.querySelectorAll('.component-type-filters .filter-chip').forEach(btn => {
        btn.classList.remove('active');
    });
    
    // Add active class only to the clicked filter button
    const activeBtn = document.querySelector(`.component-type-filters [data-filter="${filter}"]`);
    if (activeBtn) {
        activeBtn.classList.add('active');
    }
    
    // Update URL with filter parameter
    if (typeof updateURLWithFilter === 'function') {
        updateURLWithFilter(filter);
    }
    
    // Show category filters for the selected component type
    showCategoryFilters(filter);
}

// Function to show category filters based on component type
function showCategoryFilters(componentType) {
    const categoryContainer = document.getElementById('componentCategories');
    const categoryChips = document.getElementById('categoryChips');
    
    if (!categoryContainer || !categoryChips) return;
    
    // Get categories from actual component data
    let categories = [];
    
    if (window.dataLoader) {
        const dataLoader = window.dataLoader;
        
        switch(componentType) {
            case 'agents':
                const agents = dataLoader.getComponentsByType('agent');
                categories = getUniqueCategories(agents);
                break;
            case 'commands':
                const commands = dataLoader.getComponentsByType('command');
                categories = getUniqueCategories(commands);
                break;
            case 'settings':
                try {
                    categories = dataLoader.getSettingCategories ? dataLoader.getSettingCategories() : getUniqueCategories(dataLoader.getSettings());
                } catch (e) {
                    const settings = dataLoader.getComponentsByType('setting') || dataLoader.getSettings();
                    categories = getUniqueCategories(settings);
                }
                break;
            case 'hooks':
                try {
                    categories = dataLoader.getHookCategories ? dataLoader.getHookCategories() : getUniqueCategories(dataLoader.getHooks());
                } catch (e) {
                    const hooks = dataLoader.getComponentsByType('hook') || dataLoader.getHooks();
                    categories = getUniqueCategories(hooks);
                }
                break;
            case 'mcps':
                const mcps = dataLoader.getComponentsByType('mcp');
                categories = getUniqueCategories(mcps);
                break;
            case 'skills':
                const skills = dataLoader.getComponentsByType('skill');
                categories = getUniqueCategories(skills);
                break;
            case 'templates':
                const templates = dataLoader.getComponentsByType('template');
                categories = getUniqueCategories(templates);
                break;
            case 'plugins':
                // Plugins don't have categories
                categories = [];
                break;
            default:
                categories = [];
        }
        
    }
    
    // Add "All" option at the beginning
    if (categories.length > 0) {
        categories.unshift('All');
    }
    
    if (categories.length > 0) {
        categoryChips.innerHTML = categories.map((category, index) => {
            const displayName = escapeHTML(formatCategoryName(category));
            const safeCategory = escapeHTML(category.toLowerCase());
            // Only the first item (All) should be active by default
            const isActive = index === 0 ? 'active' : '';
            return `
                <button class="filter-chip ${isActive}" data-category="${safeCategory}" onclick="setCategoryFilter('${safeCategory}')">
                    ${displayName}
                </button>
            `;
        }).join('');
        
        categoryContainer.style.display = 'block';
    } else {
        categoryContainer.style.display = 'none';
    }
}

// Helper function to extract unique categories from component data
function getUniqueCategories(components) {
    if (!components || !Array.isArray(components)) return [];
    
    const categories = new Set();
    components.forEach(component => {
        if (component.category && component.category.trim() !== '') {
            categories.add(component.category);
        }
    });
    
    return Array.from(categories).sort();
}

// Helper function to format category names for display
function formatCategoryName(category) {
    if (category === 'All') return 'All';
    
    // Convert category names to proper case
    return category
        .split(/[-_\s]+/)
        .map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
        .join(' ');
}

// Function to handle category filter selection
// Enhanced setCategoryFilter function that handles both old and new category systems
window.setCategoryFilter = function setCategoryFilter(category) {
    // Handle the new category chips in #categoryChips
    const categoryButtons = document.querySelectorAll('#categoryChips button.filter-chip');
    if (categoryButtons.length > 0) {
        categoryButtons.forEach((btn) => {
            btn.classList.remove('active');
        });

        // Add active class only to the clicked button
        const activeBtn = document.querySelector(`#categoryChips button[data-category="${category}"]`);
        if (activeBtn) {
            activeBtn.classList.add('active');
        }
    }

    // Also call the existing IndexManager setCategoryFilter method for actual filtering
    if (window.indexManager && window.indexManager.setCategoryFilter) {
        window.indexManager.setCategoryFilter(category);
    }

    // Force re-render of the current filter to apply category filtering
    if (window.indexManager && window.indexManager.displayCurrentFilter) {
        window.indexManager.displayCurrentFilter();
    }
}

// Global helper functions for template cards
function showInstallationFiles(languageKey, frameworkKey, displayName) {
    alert(`Installation files for ${displayName} would be shown here.`);
}

// Global function for template details
function showTemplateDetails(templateId, templateName, subtype) {
    if (!window.indexManager || !window.indexManager.componentsData) {
        console.error('IndexManager or components data not available');
        return;
    }
    
    // Find the template in the data
    const template = window.indexManager.componentsData.templates.find(t => t.id === templateId);
    if (!template) {
        console.error('Template not found:', templateId);
        return;
    }
    
    // Create modal to show template files
    const modalHTML = `
        <div class="modal-overlay" onclick="closeComponentModal()">
            <div class="modal-content component-modal" onclick="event.stopPropagation()">
                <div class="modal-header">
                    <div class="component-modal-title">
                        <span class="component-icon">📦</span>
                        <h3>${templateName} Template</h3>
                    </div>
                    <div class="component-type-badge" style="background-color: #f9a825;">TEMPLATE</div>
                    <button class="modal-close" onclick="closeComponentModal()">×</button>
                </div>
                <div class="modal-body">
                    <div class="component-details">
                        <div class="component-description">
                            ${template.description}
                        </div>
                        
                        <div class="installation-section">
                            <h4>📦 Installation</h4>
                            <div class="command-line">
                                <code>${template.installCommand}</code>
                                <button class="copy-btn" onclick="copyToClipboard('${template.installCommand}')">Copy</button>
                            </div>
                        </div>

                        <div class="component-content">
                            <h4>📁 Template Files (${template.files ? template.files.length : 0} files)</h4>
                            ${template.files && template.files.length > 0 ? `
                                <div class="template-files-list">
                                    ${template.files.map(file => `
                                        <div class="template-file-item">
                                            <span class="file-icon">📄</span>
                                            <span class="file-name">${file}</span>
                                        </div>
                                    `).join('')}
                                </div>
                            ` : '<p>No files listed for this template.</p>'}
                        </div>
                    </div>
                </div>
                <div class="modal-actions">
                    <a href="https://github.com/davila7/claude-code-templates/tree/main/cli-tool/templates/${subtype === 'framework' ? `${template.language}/examples/${templateName}` : templateName}" target="_blank" class="github-folder-link">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                            <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.30.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
                        </svg>
                        View on GitHub
                    </a>
                </div>
            </div>
        </div>
    `;
    
    // Remove existing modal if present
    const existingModal = document.querySelector('.modal-overlay');
    if (existingModal) {
        existingModal.remove();
    }
    
    // Add modal to body
    document.body.insertAdjacentHTML('beforeend', modalHTML);
}

// Global function for setting category filter (called from onclick)
// setCategoryFilter function is now defined globally above as window.setCategoryFilter

// Show component contribute modal (copied from script.js)
function showComponentContributeModal(type) {
    const typeConfig = {
        agents: { 
            name: 'Agent', 
            description: 'AI specialist that handles specific development tasks',
            example: 'python-testing-specialist',
            structure: '- Agent metadata (name, description, color)\n- Core expertise areas\n- When to use guidelines\n- Code examples and patterns'
        },
        commands: { 
            name: 'Command', 
            description: 'Custom slash command for Claude Code',
            example: 'optimize-bundle',
            structure: '- Command description and usage\n- Task breakdown\n- Process steps\n- Best practices and examples'
        },
        mcps: { 
            name: 'MCP', 
            description: 'Model Context Protocol integration',
            example: 'redis-integration',
            structure: '- MCP server configuration\n- Connection parameters\n- Environment variables\n- Usage examples'
        },
        settings: { 
            name: 'Setting', 
            description: 'Claude Code configuration setting',
            example: 'custom-model-config',
            structure: '- Setting description\n- Configuration options\n- Environment variables\n- Usage examples and best practices'
        },
        hooks: { 
            name: 'Hook', 
            description: 'Automation hook for tool execution',
            example: 'format-on-save',
            structure: '- Hook description and trigger\n- Command to execute\n- PreToolUse or PostToolUse configuration\n- Error handling and examples'
        },
        templates: {
            name: 'Template',
            description: 'Project template with language or framework setup',
            example: 'python or django-app',
            structure: 'For Languages: Create folder with base files\nFor Frameworks: Add to examples/ subfolder with specific setup'
        },
        skills: {
            name: 'Skill',
            description: 'Interactive skill for specialized tasks',
            example: 'data-visualization-skill',
            structure: '- Skill description and purpose\n- Interactive prompts and parameters\n- Input/output specifications\n- Usage examples and best practices'
        }
    };

    const config = typeConfig[type];
    
    let modalHTML = '';
    
    if (type === 'templates') {
        // Special modal for templates
        modalHTML = `
            <div class="modal-overlay" onclick="closeComponentModal()">
                <div class="modal-content contribute-modal" onclick="event.stopPropagation()">
                    <div class="modal-header">
                        <h3>📦 Contribute a New Template</h3>
                        <button class="modal-close" onclick="closeComponentModal()">×</button>
                    </div>
                    <div class="modal-body">
                        <div class="contribute-intro">
                            <p>Help expand Claude Code by contributing a new project template! Choose between contributing a new <strong>Language</strong> or a <strong>Framework</strong>:</p>
                        </div>
                        
                        <div class="template-types">
                            <div class="template-type-section">
                                <h3>🏗️ Contributing a New Language</h3>
                                <p>Add support for a completely new programming language (e.g., Kotlin, PHP, Swift)</p>
                                
                                <div class="contribute-steps">
                                    <div class="contribute-step">
                                        <div class="step-number-contrib">1</div>
                                        <div class="step-content-contrib">
                                            <h4>Create Language Folder</h4>
                                            <p>Create a new folder in <code>cli-tool/templates/</code> with your language name:</p>
                                            <div class="step-command">
                                                <code>mkdir cli-tool/templates/kotlin</code>
                                                <button class="copy-btn" onclick="copyToClipboard('mkdir cli-tool/templates/kotlin')">Copy</button>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="contribute-step">
                                        <div class="step-number-contrib">2</div>
                                        <div class="step-content-contrib">
                                            <h4>Add Base Files</h4>
                                            <p>Add the essential files for your language. <strong>Required Claude Code files:</strong></p>
                                            <div class="claude-files-info">
                                                <ul>
                                                    <li><code>CLAUDE.md</code> - Project documentation and Claude Code instructions</li>
                                                    <li><code>.mcp.json</code> - MCP server configuration if needed</li>
                                                    <li><code>.claude/</code> - Claude Code configuration folder with agents, commands, and settings</li>
                                                </ul>
                                            </div>
                                            <div class="component-structure">
                                                <strong>Required structure:</strong>
                                                <pre>cli-tool/templates/kotlin/
├── CLAUDE.md           # Claude Code configuration
├── .mcp.json          # MCP server configuration
└── .claude/           # Claude Code settings
    ├── agents/        # Language-specific agents
    ├── commands/      # Language-specific commands
    └── settings.json  # Claude settings
                                        </pre>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="contribute-step">
                                        <div class="step-number-contrib">3</div>
                                        <div class="step-content-contrib">
                                            <h4>Create Examples Folder (Optional)</h4>
                                            <p>If your language has popular frameworks, create an examples folder:</p>
                                            <div class="step-command">
                                                <code>mkdir cli-tool/templates/kotlin/examples</code>
                                                <button class="copy-btn" onclick="copyToClipboard('mkdir cli-tool/templates/kotlin/examples')">Copy</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="template-type-section">
                                <h3>⚡ Contributing a Framework</h3>
                                <p>Add a framework variation to an existing language (e.g., Spring Boot for Java)</p>
                                
                                <div class="contribute-steps">
                                    <div class="contribute-step">
                                        <div class="step-number-contrib">1</div>
                                        <div class="step-content-contrib">
                                            <h4>Choose Existing Language</h4>
                                            <p>Navigate to an existing language's examples folder:</p>
                                            <div class="step-command">
                                                <code>cd cli-tool/templates/javascript-typescript/examples</code>
                                                <button class="copy-btn" onclick="copyToClipboard('cd cli-tool/templates/javascript-typescript/examples')">Copy</button>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="contribute-step">
                                        <div class="step-number-contrib">2</div>
                                        <div class="step-content-contrib">
                                            <h4>Create Framework Folder</h4>
                                            <p>Create a folder with your framework name:</p>
                                            <div class="step-command">
                                                <code>mkdir nextjs-app</code>
                                                <button class="copy-btn" onclick="copyToClipboard('mkdir nextjs-app')">Copy</button>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="contribute-step">
                                        <div class="step-number-contrib">3</div>
                                        <div class="step-content-contrib">
                                            <h4>Add Framework Files</h4>
                                            <p>Add all necessary files for your framework setup. <strong>Required Claude Code files:</strong></p>
                                            <div class="claude-files-info">
                                                <ul>
                                                    <li><code>CLAUDE.md</code> - Framework documentation and Claude Code instructions</li>
                                                    <li><code>.mcp.json</code> - MCP server configuration for framework-specific tools</li>
                                                    <li><code>.claude/</code> - Claude Code configuration folder with framework-specific agents and commands</li>
                                                </ul>
                                            </div>
                                            <div class="component-structure">
                                                <strong>Required structure:</strong>
                                                <pre>nextjs-app/
├── CLAUDE.md           # Claude Code configuration
├── .mcp.json          # MCP server configuration
└── .claude/           # Claude Code settings
    ├── agents/        # Framework-specific agents
    ├── commands/      # Framework-specific commands
    └── settings.json  # Claude settings
                                        </pre>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="contribute-step">
                            <div class="step-number-contrib">4</div>
                            <div class="step-content-contrib">
                                <h4>Test Your Template</h4>
                                <p>Test your template installation:</p>
                                <div class="step-command">
                                    <code>npx claude-code-templates@latest --template=your-template-name --yes</code>
                                    <button class="copy-btn" onclick="copyToClipboard('npx claude-code-templates@latest --template=your-template-name --yes')">Copy</button>
                                </div>
                            </div>
                        </div>
                        
                        <div class="contribute-step">
                            <div class="step-number-contrib">5</div>
                            <div class="step-content-contrib">
                                <h4>Submit Pull Request</h4>
                                <p>Submit your template contribution (replace with your actual language/framework folder):</p>
                                <div class="step-command">
                                    <code>git add cli-tool/templates/&lt;your-language&gt;/</code>
                                    <button class="copy-btn" onclick="copyToClipboard('git add cli-tool/templates/<your-language>/')">Copy</button>
                                </div>
                                <div class="step-command">
                                    <code>git commit -m "feat: Add [language/framework] template"</code>
                                    <button class="copy-btn" onclick="copyToClipboard('git commit -m \\"feat: Add [language/framework] template\\"')">Copy</button>
                                </div>
                            </div>
                        </div>
                        
                        <div class="contribute-footer">
                            <div class="help-section">
                                <h4>Need Help?</h4>
                                <p>Check <a href="https://github.com/davila7/claude-code-templates/tree/main/cli-tool/templates" target="_blank">existing templates</a> for examples or open an issue on GitHub for guidance.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        `;
    } else {
        // Default modal for other component types
        modalHTML = `
            <div class="modal-overlay" onclick="closeComponentModal()">
                <div class="modal-content contribute-modal" onclick="event.stopPropagation()">
                    <div class="modal-header">
                        <h3>📝 Contribute a New ${config.name}</h3>
                        <button class="modal-close" onclick="closeComponentModal()">×</button>
                    </div>
                    <div class="modal-body">
                        <div class="contribute-intro">
                            <p>Help expand Claude Code by contributing a new ${config.name.toLowerCase()}! Follow these steps:</p>
                        </div>
                        
                        <div class="contribute-steps">
                            <div class="contribute-step">
                                <div class="step-number-contrib">1</div>
                                <div class="step-content-contrib">
                                    <h4>Create Your ${config.name}</h4>
                                    <p>Add your ${config.name.toLowerCase()} to a category folder in: <code>cli-tool/components/${type}/&lt;category&gt;/</code></p>
                                    <div class="component-structure">
                                        <strong>Structure should include:</strong>
                                        <pre>${config.structure}</pre>
                                    </div>
                                    <div class="step-command">
                                        <strong>Example path:</strong> <code>cli-tool/components/${type}/&lt;category&gt;/${config.example}.${(type === 'mcps' || type === 'settings' || type === 'hooks') ? 'json' : 'md'}</code>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="contribute-step">
                                <div class="step-number-contrib">2</div>
                                <div class="step-content-contrib">
                                    <h4>Follow the Pattern</h4>
                                    <p>Check existing ${type} in the repository to understand the structure and conventions.</p>
                                    <div class="step-command">
                                        <a href="https://github.com/davila7/claude-code-templates/tree/main/cli-tool/components/${type}" target="_blank" class="github-folder-link">
                                            📁 View existing ${type}
                                        </a>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="contribute-step">
                                <div class="step-number-contrib">3</div>
                                <div class="step-content-contrib">
                                    <h4>Test Your Component</h4>
                                    <p>Ensure your ${config.name.toLowerCase()} works correctly with Claude Code.</p>
                                    <div class="step-command">
                                        <code>cd cli-tool && npm test</code>
                                        <button class="copy-btn" onclick="copyToClipboard('cd cli-tool && npm test')">Copy</button>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="contribute-step">
                                <div class="step-number-contrib">4</div>
                                <div class="step-content-contrib">
                                    <h4>Submit Pull Request</h4>
                                    <p>Submit your contribution with proper documentation (replace &lt;category&gt; with your actual category folder):</p>
                                    <div class="step-command">
                                        <code>git add cli-tool/components/${type}/&lt;category&gt;/${config.example}.${(type === 'mcps' || type === 'settings' || type === 'hooks') ? 'json' : 'md'}</code>
                                        <button class="copy-btn" onclick="copyToClipboard('git add cli-tool/components/${type}/<category>/${config.example}.${(type === 'mcps' || type === 'settings' || type === 'hooks') ? 'json' : 'md'}')">Copy</button>
                                    </div>
                                    <div class="step-command">
                                        <code>git commit -m "feat: Add ${config.example} ${config.name.toLowerCase()}"</code>
                                        <button class="copy-btn" onclick="copyToClipboard('git commit -m \\"feat: Add ${config.example} ${config.name.toLowerCase()}\\"')">Copy</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="contribute-footer">
                            <div class="help-section">
                                <h4>Need Help?</h4>
                                <p>Check existing ${type} for examples or open an issue on GitHub for guidance.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        `;
    }
    
    // Remove existing modal if present
    const existingModal = document.querySelector('.modal-overlay');
    if (existingModal) {
        existingModal.remove();
    }
    
    // Add modal to body
    document.body.insertAdjacentHTML('beforeend', modalHTML);
    
    // Add event listener for ESC key
    const handleEscape = (e) => {
        if (e.key === 'Escape') {
            closeComponentModal();
            document.removeEventListener('keydown', handleEscape);
        }
    };
    document.addEventListener('keydown', handleEscape);
}

// Global functions for templates functionality
function showInstallationFiles(languageKey, frameworkKey, displayName) {
    alert(`Installation files for ${displayName} would be shown here`);
}

// Close modal (from script.js)
function closeModal() {
    const modal = document.querySelector('.modal');
    if (modal) {
        modal.remove();
    }
}

// Close component modal
function closeComponentModal() {
    const modalOverlay = document.querySelector('.modal-overlay');
    if (modalOverlay) {
        modalOverlay.remove();
    }
}

// Global pagination function (called from onclick)
function goToPage(page) {
    if (window.indexManager) {
        window.indexManager.goToPage(page);
    }
}

// Clean component name by removing extensions and formatting
function getCleanComponentName(name) {
    if (!name) {
        return 'Unknown Component';
    }
    
    let cleanName = name;
    
    // Remove .md extension if present
    if (cleanName.endsWith('.md')) {
        cleanName = cleanName.slice(0, -3);
    }
    
    // Remove .json extension if present
    if (cleanName.endsWith('.json')) {
        cleanName = cleanName.slice(0, -5);
    }
    
    // Convert kebab-case or snake_case to Title Case
    cleanName = cleanName
        .replace(/[-_]/g, ' ')
        .split(' ')
        .map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
        .join(' ');
        
    return cleanName;
}

// Handle Add to Cart button click
function handleAddToCart(name, path, type, category, buttonElement) {
    // Prevent event propagation to avoid card flip
    if (window.event) {
        window.event.stopPropagation();
    }
    
    // Clean the component name for better display
    const cleanName = getCleanComponentName(name);
    
    const item = {
        name: cleanName,
        path: path,
        category: category,
        description: `${cleanName} - ${category}`
    };
    
    // Add to cart using the cart manager
    const success = addToCart(item, type);
    
    if (success) {
        // Update button state
        buttonElement.classList.add('added');
        buttonElement.innerHTML = `
            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                <path d="M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z"/>
            </svg>
            Added to Stack
        `;
        
        // Show a brief animation
        buttonElement.style.transform = 'scale(0.95)';
        setTimeout(() => {
            buttonElement.style.transform = 'scale(1)';
        }, 150);
        
    }
}

// Initialize when DOM is ready
document.addEventListener('DOMContentLoaded', () => {
    window.indexManager = new IndexPageManager();
    window.indexManager.init();

    // Focus search input on page load and setup terminal cursor
    setTimeout(() => {
        const searchInput = document.getElementById('searchInput');
        if (searchInput) {
            searchInput.focus();
            setupTerminalCursor();
        }
    }, 300); // Small delay to ensure DOM is fully loaded
});

// Terminal cursor functionality
function setupTerminalCursor() {
    const searchInput = document.getElementById('searchInput');
    const cursor = document.getElementById('terminalCursor');
    
    if (!searchInput || !cursor) return;
    
    function updateCursorPosition() {
        const promptWidth = 26; // Width of ">" prompt + extra space
        
        // If input has text, position cursor at the end of the text
        if (searchInput.value.length > 0) {
            // Create a temporary span to measure text width
            const temp = document.createElement('span');
            temp.style.visibility = 'hidden';
            temp.style.position = 'absolute';
            temp.style.whiteSpace = 'pre';
            temp.style.font = window.getComputedStyle(searchInput).font;
            temp.textContent = searchInput.value;
            
            document.body.appendChild(temp);
            const textWidth = temp.getBoundingClientRect().width;
            document.body.removeChild(temp);
            
            cursor.style.left = `${promptWidth + textWidth + 2}px`;
        } else {
            // If input is empty, position cursor right after the prompt with space
            cursor.style.left = `${promptWidth}px`;
        }
    }
    
    // Update cursor position on input
    searchInput.addEventListener('input', updateCursorPosition);
    searchInput.addEventListener('focus', () => {
        cursor.style.display = 'block';
        updateCursorPosition();
    });
    searchInput.addEventListener('blur', () => {
        cursor.style.display = 'none';
    });
    
    // Initial position
    updateCursorPosition();
}