// ==UserScript==
// @name         Idiot's Filter For All Of TheBloke's Goddamn Models Holy Shit (Written by ChatGPT)
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Filter models on TheBloke's Hugging Face model page because that sumbitch has over 400 I don't know how Hugging Face puts up with his bandwidth usage
// @author       (You)
// @match        https://huggingface.co/TheBloke
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    window.addEventListener('load', function() {

        // Insert the UI at the top of the page
        let container = document.createElement('div');
        container.innerHTML = `
            <div id="hf-filter-container" style="display: flex; flex-direction: column; align-items: center; margin: 10px;">
                <div id="hf-filter-term-container" style="display: flex; flex-direction: column;">
                    <div class="hf-filter-term-row" style="display: flex; align-items: center;">
                        <input type="text" class="hf-filter-term" style="margin-bottom: 5px; font-size: 14px;">
                        <button class="hf-add" style="margin-left: 5px; font-size: 14px;">Add Term</button>
                        <button class="hf-clear" style="margin-left: 5px; font-size: 14px;">Clear</button>
                    </div>
                </div>
                <div style="display: flex; justify-content: space-between; width: 100%; max-width: 300px;">
                    <button class="hf-filter" style="font-size: 14px;">Filter</button>
                    <button class="hf-unhide" style="font-size: 14px;">Unhide</button>
                    <button class="hf-restart" style="font-size: 14px;">Restart</button>
                </div>
            </div>
        `;
        document.body.insertBefore(container, document.body.firstChild);

        // Apply button styles
        let buttons = document.querySelectorAll('.hf-add, .hf-clear, .hf-filter, .hf-unhide, .hf-restart');
        for(let button of buttons) {
            button.style.border = 'none';
            button.style.color = 'white';
            button.style.padding = '4px 8px';
            button.style.marginTop = '5px';
            button.style.borderRadius = '4px';
            button.style.cursor = 'pointer';
        }

        // Set colors of buttons
    document.querySelectorAll('.hf-filter, .hf-restart').forEach(el => {el.style.backgroundColor = '#28a745'}); // Green
    document.querySelectorAll('.hf-add, .hf-remove').forEach(el => {el.style.backgroundColor = '#007bff'}); // Blue
    document.querySelector('.hf-unhide').style.backgroundColor = '#800080'; // Purple
    document.querySelectorAll('.hf-clear').forEach(el => {el.style.backgroundColor = '#000000'}); // Black


        // Filter function
        let filterModels = () => {
            // Unhide all models first
            let cards = document.querySelectorAll('article.overview-card-wrapper');
            for(let card of cards) card.style.display = '';

            // Loop through each term
            let termInputs = document.querySelectorAll('.hf-filter-term');
            for(let termInput of termInputs) {
                let term = termInput.value.toLowerCase();

                if(term !== '') {
                    // Hide models not containing the term
                    for(let card of cards) {
                        if(!card.textContent.toLowerCase().includes(term)) {
                            card.style.display = 'none';
                        }
                    }
                }
            }
        };

        // Add event listener to 'Filter' button
        document.querySelector('.hf-filter').addEventListener('click', filterModels);

        // Add event listener to 'Unhide' button
        document.querySelector('.hf-unhide').addEventListener('click', () => {
            let cards = document.querySelectorAll('article.overview-card-wrapper');
            for(let card of cards) card.style.display = '';
        });

        // Add Term function
        let addTerm = () => {
            let termRow = document.createElement('div');
            termRow.className = 'hf-filter-term-row';
            termRow.style.display = 'flex';
            termRow.style.alignItems = 'center';

            let newTerm = document.createElement('input');
            newTerm.type = 'text';
            newTerm.className = 'hf-filter-term';
            newTerm.style.marginBottom = '5px';
            newTerm.style.fontSize = '14px';

            newTerm.addEventListener('keyup', function(event) {
                if (event.key === 'Enter') {
                    event.preventDefault();
                    filterModels();
                }
            });

            let removeButton = document.createElement('button');
            removeButton.className = 'hf-remove'; // Use .hf-remove for styling
            removeButton.style.marginLeft = '5px';
            removeButton.textContent = 'Remove';
            removeButton.style.fontSize = '14px';
            removeButton.style.backgroundColor = '#007bff';
            removeButton.style.color = 'white';
            removeButton.style.padding = '4px 8px';
            removeButton.style.borderRadius = '4px';
            removeButton.style.cursor = 'pointer';
            removeButton.addEventListener('click', () => {
                termRow.remove();
                filterModels();
            });

            let clearButton = document.createElement('button');
            clearButton.className = 'hf-clear'; // Use .hf-clear for styling
            clearButton.style.marginLeft = '5px';
            clearButton.textContent = 'Clear';
            clearButton.style.fontSize = '14px';
            clearButton.style.backgroundColor = '#000000';
            clearButton.style.color = 'white';
            clearButton.style.padding = '4px 8px';
            clearButton.style.borderRadius = '4px';
            clearButton.style.cursor = 'pointer';
            clearButton.addEventListener('click', () => {
                newTerm.value = '';
                filterModels();
            });

            termRow.appendChild(newTerm);
            termRow.appendChild(removeButton);
            termRow.appendChild(clearButton);

            document.querySelector('#hf-filter-term-container').appendChild(termRow);
        };

        // Add event listener to 'Add Term' button
        document.querySelector('.hf-add').addEventListener('click', addTerm);

        // Add event listener to 'Clear' button of first term row
        let initialTermRow = document.querySelector('.hf-filter-term-row');
        let initialClearButton = initialTermRow.querySelector('.hf-clear');
        initialClearButton.addEventListener('click', () => {
            initialTermRow.querySelector('.hf-filter-term').value = '';
            filterModels();
        });

        // Make the Enter key trigger the filter function in the first term row
        initialTermRow.querySelector('.hf-filter-term').addEventListener('keyup', function(event) {
            if (event.key === 'Enter') {
                event.preventDefault();
                filterModels();
            }
        });

        // Add event listener to 'Restart' button
        document.querySelector('.hf-restart').addEventListener('click', () => {
            // Clear text from the first term input
            document.querySelector('.hf-filter-term').value = '';

            // Loop through each term
            let termRows = document.querySelectorAll('.hf-filter-term-row');
            for(let termRow of termRows) {
                if(termRow !== termRows[0]) termRow.remove();
            }
            filterModels();
        });

    }, false);

})();