// ==UserScript==
// @name         godotshaders搜索页面排序
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  为godotshaders搜索页面添加一键排序功能，根据点赞数+评论数智能排列内容(仅限当前页面)
// @author       beibeibeibei
// @license      MIT
// @match        https://godotshaders.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    function main() {
        let archiveContainer = document.getElementById('archive-container');
        if (archiveContainer) {
            add_css();

            let sortButton = document.createElement('button');
            sortButton.className = 'beibeibeibei-sort-btn';
            sortButton.textContent = '排序';

            let aside = document.querySelector('aside')
            if (aside) {
                aside.appendChild(sortButton);
            } else {
                archiveContainer.parentNode.insertBefore(sortButton, archiveContainer);
            }
            sortButton.addEventListener('click', sortArticles);
        }
    }

    function sortArticles(event) {
        let sortButton = event.target;

        sortButton.disabled = true;
        sortButton.textContent = "排序中...";

        let container = document.getElementById('archive-container');
        let articles = Array.from(container.querySelectorAll('#archive-container > article'));
        let other_eles = Array.from(container.querySelectorAll('#archive-container > :not(article)'));

        // 创建排序属性beibeibeibeiSortValue
        articles.forEach((art) => {
            let comments_count_selector = ".dashicons-admin-comments + .entry-taxonomies";
            let likes_count_selector = ".dashicons-heart + .entry-taxonomies";
            let comments_count_weight = 0.01;

            if (art.querySelector(comments_count_selector) === null && art.querySelector(likes_count_selector) === null) {
                // 没有评论也没有点赞，直接赋零return
                art.dataset.beibeibeibeiSortValue = 0;
                return;
            } else if (art.querySelector(comments_count_selector) === null && art.querySelector(likes_count_selector) !== null) {
                // 只有点赞
                let value = parseInt(art.querySelector(likes_count_selector).textContent);
                art.dataset.beibeibeibeiSortValue = value;
            } else if (art.querySelector(comments_count_selector) !== null && art.querySelector(likes_count_selector) === null) {
                // 只有评论
                let value = parseInt(art.querySelector(comments_count_selector).textContent);
                art.dataset.beibeibeibeiSortValue = value * comments_count_weight;
            } else if (art.querySelector(comments_count_selector) !== null && art.querySelector(likes_count_selector) !== null) {
                // 评论和点赞都有
                let comments_count_value = parseInt(art.querySelector(comments_count_selector).textContent);
                let likes_count_value = parseInt(art.querySelector(likes_count_selector).textContent);
                art.dataset.beibeibeibeiSortValue = comments_count_value * comments_count_weight + likes_count_value;
            }
        });

        // sort
        articles.sort((a, b) => parseFloat(b.dataset.beibeibeibeiSortValue) - parseFloat(a.dataset.beibeibeibeiSortValue));

        // 重新添加到容器中
        articles.forEach(article => {
            container.appendChild(article);
        });

        // 把不是article的元素也重新添加到容器中，这些不是article的元素就会沉底
        other_eles.forEach((other_e) => {
            document.getElementById('archive-container').appendChild(other_e);
        });

        show_toast("排序完成", 2500);
        sortButton.disabled = false;
        sortButton.textContent = "排序";
    }

    function show_toast(text, toast_duration = 3000) {
        // 创建一个toast通知元素
        let toast = document.querySelector(".beibeibeibei-toast");
        if (toast === null) {
            toast = document.createElement('div');
            toast.className = 'beibeibeibei-toast';
            toast.style.animation = `fade ${toast_duration / 1000}s`;
            toast.addEventListener('animationend', () => {
                toast.style.animationPlayState = "paused"; // 动画结束后暂停
            });
            document.body.appendChild(toast);
        }
        toast.textContent = text;

        //执行CSS动画
        toast.style.animation = 'none'; // 清除当前动画
        toast.offsetHeight; // 触发重排，实现强制重置
        toast.style.animation = `fade ${toast_duration / 1000}s`; // 重新设置动画
        toast.style.animationPlayState = 'running'; // 开始播放动画
    }

    function add_css() {
        // 添加CSS动画和toast样式
        var style = document.createElement('style');
        style.textContent = `
            @keyframes fade {
                0%       { opacity: 0; top: -100px; }
                10%,90%  { opacity: 1; top: 20px; }
                100%     { opacity: 0; top: -100px; }
            }
            .beibeibeibei-sort-btn:active {
                transform: translate(2px, 2px);
            }
            .beibeibeibei-toast {
                position: fixed;
                top: -100px;
                left: 50%;
                transform: translateX(-50%);
                background-color: rgba(0, 0, 0, 0.7);
                color: white;
                padding: 10px 20px;
                border-radius: 4px;
                opacity: 0;
                box-shadow: 0px 7px 30px 0px rgba(100, 100, 111, 0.2);
                /*原页面有一个全屏搜索输入框的zIndex是100000*/
                z-index: 100001;
                animation-play-state: paused;
            }
        `;
        document.head.appendChild(style);
    }

    if (document.readyState === "loading") {
        document.addEventListener("DOMContentLoaded", main);
    } else {
        main();
    }
})();