script.js

// Plugin database with expanded list
let pluginData = JSON.parse(localStorage.getItem('pluginDatabase')) || [
    // Plugin Alliance
    { id: 1, name: "bx_console SSL 4000 E", developer: "Plugin Alliance", cpuUsage: 8, rating: 4.7, category: "Channel Strip", icon: "http://static.photos/technology/200x200/1" },
    { id: 2, name: "bx_console SSL 4000 G", developer: "Plugin Alliance", cpuUsage: 8, rating: 4.7, category: "Channel Strip", icon: "http://static.photos/technology/200x200/2" },
    { id: 3, name: "bx_console Focusrite SC", developer: "Plugin Alliance", cpuUsage: 7, rating: 4.6, category: "Channel Strip", icon: "http://static.photos/technology/200x200/3" },
    { id: 4, name: "MAAT thEQorange", developer: "Plugin Alliance", cpuUsage: 4, rating: 4.8, category: "EQ", icon: "http://static.photos/technology/200x200/4" },
    { id: 5, name: "Unfiltered Audio G8", developer: "Plugin Alliance", cpuUsage: 12, rating: 4.5, category: "Dynamic EQ", icon: "http://static.photos/technology/200x200/5" },
    { id: 6, name: "SPL Iron", developer: "Plugin Alliance", cpuUsage: 5, rating: 4.5, category: "Compressor", icon: "http://static.photos/technology/200x200/6" },
    { id: 7, name: "AMEK EQ 200", developer: "Plugin Alliance", cpuUsage: 3, rating: 4.7, category: "EQ", icon: "http://static.photos/technology/200x200/7" },

    // Soundtoys
    { id: 8, name: "Decapitator", developer: "Soundtoys", cpuUsage: 6, rating: 4.9, category: "Saturation", icon: "http://static.photos/technology/200x200/8" },
    { id: 9, name: "EchoBoy", developer: "Soundtoys", cpuUsage: 9, rating: 4.8, category: "Delay", icon: "http://static.photos/technology/200x200/9" },
    { id: 10, name: "Little AlterBoy", developer: "Soundtoys", cpuUsage: 14, rating: 4.6, category: "Vocals", icon: "http://static.photos/technology/200x200/10" },

    // Waves
    { id: 11, name: "CLA-76", developer: "Waves", cpuUsage: 4, rating: 4.5, category: "Compressor", icon: "http://static.photos/technology/200x200/11" },
    { id: 12, name: "SSL E-Channel", developer: "Waves", cpuUsage: 6, rating: 4.6, category: "Channel Strip", icon: "http://static.photos/technology/200x200/12" },
    { id: 13, name: "H-Delay", developer: "Waves", cpuUsage: 5, rating: 4.4, category: "Delay", icon: "http://static.photos/technology/200x200/13" },

    // Eventide
    { id: 14, name: "H3000 Factory", developer: "Eventide", cpuUsage: 16, rating: 4.7, category: "Effects", icon: "http://static.photos/technology/200x200/14" },
    { id: 15, name: "UltraChannel", developer: "Eventide", cpuUsage: 8, rating: 4.5, category: "Channel Strip", icon: "http://static.photos/technology/200x200/15" },

    // TDR
    { id: 16, name: "Kotelnikov", developer: "TDR", cpuUsage: 2, rating: 4.8, category: "Compressor", icon: "http://static.photos/technology/200x200/16" },
    { id: 17, name: "Nova", developer: "TDR", cpuUsage: 3, rating: 4.7, category: "Dynamic EQ", icon: "http://static.photos/technology/200x200/17" }
];

// Developers with their plugin counts
const developersData = [
    { id: 1, name: "Plugin Alliance", rating: 4.7, pluginsCount: 75, icon: "http://static.photos/technology/200x200/18" },
    { id: 2, name: "Soundtoys", rating: 4.8, pluginsCount: 12, icon: "http://static.photos/technology/200x200/19" },
    { id: 3, name: "Waves", rating: 4.3, pluginsCount: 200, icon: "http://static.photos/technology/200x200/20" },
    { id: 4, name: "Eventide", rating: 4.6, pluginsCount: 25, icon: "http://static.photos/technology/200x200/21" },
    { id: 5, name: "TDR", rating: 4.8, pluginsCount: 10, icon: "http://static.photos/technology/200x200/22" }
];
document.addEventListener('DOMContentLoaded', function() {
    // Initialize the page with data
    populateTiers();
    populateDevelopers();
    
    // Set up search functionality
    document.getElementById('search-btn').addEventListener('click', performSearch);
    document.getElementById('plugin-search').addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            performSearch();
        }
    });
});

function populateTiers() {
    const highCpuList = document.getElementById('high-cpu-list');
    const mediumCpuList = document.getElementById('medium-cpu-list');
    const lowCpuList = document.getElementById('low-cpu-list');
    
    // Clear existing content
    highCpuList.innerHTML = '';
    mediumCpuList.innerHTML = '';
    lowCpuList.innerHTML = '';
    
    // Sort plugins by rating (highest first)
    const sortedPlugins = [...pluginData].sort((a, b) => b.rating - a.rating);
    
    sortedPlugins.forEach(plugin => {
        const pluginCard = createPluginCard(plugin);
        
        if (plugin.cpuUsage > 15) {
            highCpuList.appendChild(pluginCard);
        } else if (plugin.cpuUsage >= 5) {
            mediumCpuList.appendChild(pluginCard);
        } else {
            lowCpuList.appendChild(pluginCard);
        }
    });
}

function populateDevelopers() {
    const developersGrid = document.getElementById('developers-grid');
    developersGrid.innerHTML = '';
    
    // Sort developers by rating (highest first)
    const sortedDevelopers = [...developersData].sort((a, b) => b.rating - a.rating);
    
    sortedDevelopers.forEach(dev => {
        const developerCard = document.createElement('div');
        developerCard.className = 'developer-card';
        
        developerCard.innerHTML = `
            <div class="flex items-center p-4">
                <img src="${dev.icon}" alt="${dev.name}" class="w-16 h-16 rounded-full object-cover mr-4">
                <div>
                    <h3 class="font-semibold text-lg">${dev.name}</h3>
                    <div class="rating-stars">
                        ${renderStars(dev.rating)}
                        <span class="ml-1 text-sm text-gray-600">${dev.rating.toFixed(1)}</span>
                    </div>
                    <p class="text-sm text-gray-500">${dev.pluginsCount} plugins</p>
                </div>
            </div>
            <div class="bg-gray-50 px-4 py-2 border-t">
                <a href="#" class="text-purple-600 text-sm font-medium">View plugins</a>
            </div>
        `;
        
        developersGrid.appendChild(developerCard);
    });
}

function createPluginCard(plugin) {
    const card = document.createElement('div');
    card.className = 'plugin-card';
    
    // Determine CPU class
    let cpuClass = '';
    if (plugin.cpuUsage > 15) {
        card.classList.add('border-red-500');
        cpuClass = 'high-cpu';
    } else if (plugin.cpuUsage >= 5) {
        card.classList.add('border-yellow-500');
        cpuClass = 'medium-cpu';
    } else {
        card.classList.add('border-green-500');
        cpuClass = 'low-cpu';
    }
    
    card.innerHTML = `
        <div class="flex items-start">
            <img src="${plugin.icon}" alt="${plugin.name}" class="w-12 h-12 rounded-md object-cover mr-3">
            <div class="flex-grow">
                <h3 class="font-semibold">${plugin.name}</h3>
                <p class="text-sm text-gray-600">${plugin.developer}</p>
            </div>
            <span class="cpu-badge ${cpuClass}">${plugin.cpuUsage}% CPU</span>
        </div>
        <div class="mt-2 flex justify-between items-center">
            <div class="rating-stars">
                ${renderStars(plugin.rating)}
                <span class="ml-1 text-sm text-gray-600">${plugin.rating.toFixed(1)}</span>
            </div>
            <span class="text-xs bg-gray-100 px-2 py-1 rounded">${plugin.category}</span>
        </div>
    `;
    
    return card;
}

function renderStars(rating) {
    let stars = '';
    const fullStars = Math.floor(rating);
    const hasHalfStar = rating % 1 >= 0.5;
    
    for (let i = 1; i <= 5; i++) {
        if (i <= fullStars) {
            stars += '<i data-feather="star" class="star-filled w-4 h-4"></i>';
        } else if (i === fullStars + 1 && hasHalfStar) {
            stars += '<i data-feather="star" class="star-filled w-4 h-4"></i>';
        } else {
            stars += '<i data-feather="star" class="star-empty w-4 h-4"></i>';
        }
    }
    
    return stars;
}
function performSearch() {
    const searchInput = document.getElementById('plugin-search');
    const query = searchInput.value.trim().toLowerCase();
    
    if (!query) return;
    
    const resultsSection = document.getElementById('results-section');
    const resultsContainer = document.getElementById('search-results');
    
    // Show loading state
    resultsContainer.innerHTML = '<div class="loading-spinner"></div>';
    resultsSection.classList.remove('hidden');
    
    // First check local database
    const filteredPlugins = pluginData.filter(plugin => 
        plugin.name.toLowerCase().includes(query) || 
        plugin.developer.toLowerCase().includes(query)
    );
    
    const filteredDevelopers = developersData.filter(dev => 
        dev.name.toLowerCase().includes(query)
    );
    
    // If nothing found locally, try to fetch from plugin database API
    if (filteredPlugins.length === 0 && filteredDevelopers.length === 0) {
        fetchPluginFromAPI(query).then(newPlugin => {
            if (newPlugin) {
                pluginData.push(newPlugin);
                localStorage.setItem('pluginDatabase', JSON.stringify(pluginData));
                filteredPlugins.push(newPlugin);
            }
            displayResults(filteredPlugins, filteredDevelopers, query);
        });
    } else {
        displayResults(filteredPlugins, filteredDevelopers, query);
    }
}

async function fetchPluginFromAPI(query) {
    try {
        // This would be replaced with actual API call in production
        const response = await fetch(`https://plugin-database-api.example.com/search?q=${query}`);
        if (response.ok) {
            const data = await response.json();
            if (data.plugins && data.plugins.length > 0) {
                // Add the first matching plugin to our database
                const newPlugin = {
                    id: Date.now(), // Generate unique ID
                    name: data.plugins[0].name,
                    developer: data.plugins[0].developer,
                    cpuUsage: data.plugins[0].cpuUsage || 5, // Default to medium CPU
                    rating: data.plugins[0].rating || 4.0,
                    category: data.plugins[0].category || 'Effects',
                    icon: data.plugins[0].icon || `http://static.photos/technology/200x200/${Math.floor(Math.random() * 100)}`
                };
                return newPlugin;
            }
        }
    } catch (e) {
        console.error("Failed to fetch plugin data:", e);
    }
    return null;
}

function displayResults(filteredPlugins, filteredDevelopers, query) {
    const resultsContainer = document.getElementById('search-results');
    
    // Clear loading state
    resultsContainer.innerHTML = '';
    
    if (filteredPlugins.length === 0 && filteredDevelopers.length === 0) {
        resultsContainer.innerHTML = `
            <div class="text-center py-8">
                <p class="text-gray-500 mb-4">No results found for "${query}"</p>
                <button id="request-plugin-btn" class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-lg text-sm">
                    Request this plugin to be added
                </button>
            </div>
        `;
        
        document.getElementById('request-plugin-btn')?.addEventListener('click', () => {
            alert(`We've noted your request for "${query}" and will add it to our database soon!`);
        });
        return;
    }
if (filteredPlugins.length > 0) {
            const heading = document.createElement('h3');
            heading.className = 'text-xl font-semibold text-gray-800 mb-4';
            heading.textContent = 'Plugins';
            resultsContainer.appendChild(heading);
            
            filteredPlugins.forEach(plugin => {
                resultsContainer.appendChild(createPluginCard(plugin));
            });
        }
        
        if (filteredDevelopers.length > 0) {
            const heading = document.createElement('h3');
            heading.className = 'text-xl font-semibold text-gray-800 mb-4 mt-8';
            heading.textContent = 'Developers';
            resultsContainer.appendChild(heading);
            
            filteredDevelopers.forEach(dev => {
                const devCard = document.createElement('div');
                devCard.className = 'bg-white rounded-lg p-4 shadow-sm';
                devCard.innerHTML = `
                    <div class="flex items-center">
                        <img src="${dev.icon}" alt="${dev.name}" class="w-12 h-12 rounded-full object-cover mr-4">
                        <div>
                            <h3 class="font-semibold">${dev.name}</h3>
                            <div class="rating-stars">
                                ${renderStars(dev.rating)}
                                <span class="ml-1 text-sm text-gray-600">${dev.rating.toFixed(1)}</span>
                            </div>
                            <p class="text-sm text-gray-500">${dev.pluginsCount} plugins</p>
                        </div>
                    </div>
                `;
                resultsContainer.appendChild(devCard);
            });
        }
    }, 800);
}