// ==UserScript==
// @name         [ONCHE] Blacklist
// @version      0.2.1
// @description  Script pour https://onche.org, ajoute une liste noire locale au navigateur utilisé
// @author       Programmafion
// @run-at       document-start
// @match        https://onche.org/forum/*
// @match        https://onche.org/topic/*
// @downloadURL  https://codeberg.org/programmafion1/onche_liste-noire/raw/branch/main/onche_blacklist.user.js
// @updateURL    https://codeberg.org/programmafion1/onche_liste-noire/raw/branch/main/onche_blacklist.meta.js
// @icon         https://risibank.fr/cache/medias/0/6/676/67632/full.png
// @grant        GM_addStyle
// ==/UserScript==


window.addEventListener('DOMContentLoaded', () => {
    GM_addStyle('.mdi-account-minus-outline::before {font-family: "material design icons"; content: "\\F0AEC";}.mdi-eye-off-outline::before {font-family: "material design icons"; content: "\\F06D1";}');

    // ====== bouton paramètres ======
    const id = location.pathname.includes('/forum/') ? 'forum' : 'topic';

    document.getElementById(id).style.overflow = 'inherit';
    document.querySelector('.title.is_sticky').style.overflow = 'inherit';

    const settingsButton = new DOMParser().parseFromString(
        `<div title="${getTitleAttribute()}" id="settingsButton" class="mdi mdi-cog clickable" style="padding: 6px; cursor: pointer; position: relative; z-index: 1; opacity: ${getOpacity()}" onmouseenter="this.style.color='#fff';" onmouseout="this.style.color='#71c2fb';">
        <textarea placeholder="Listez chaque pseudo séparé d'une virgule" style="position: absolute; top: 80%; left: -90px; width: 200px; height: 100px; background-color: #fff; border: 1px solid #ccc; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); display: none; z-index: 1;"></textarea>
    </div>`, 'text/html').body.firstChild;

    settingsButton.addEventListener('click', onSettingsButtonClick);
    settingsButton.addEventListener('dblclick', () => toggleDisplayMode());
    document.querySelector('.title .right').prepend(settingsButton);

    new MutationObserver((mutationsList, observer) => {
        for (const mutation of mutationsList) {
            if (mutation.type !== 'childList' || !mutation.addedNodes.length) {
                continue;
            }
            const addedNode = mutation.addedNodes[0];
            if (!addedNode.classList.contains('sticky-container')) {
                continue;
            }
            // addedNode.querySelector('.mdi-cog.clickable').addEventListener('click', onSettingsButtonClick);
            addedNode.querySelector('.mdi-cog.clickable').remove();
        }
    }).observe(document.getElementById(id), { childList: true, subtree: true });


    function onSettingsButtonClick(event) {
        const textAreaEl = this.firstElementChild;
        if (event.target === textAreaEl) {
            return;
        }
        event.stopPropagation();

        textAreaEl.value = localStorage.getItem('blacklist_userscript.blacklist') ?? '';
        textAreaEl.style.display = textAreaEl.style.display === 'block' ? 'none' : 'block';

        document.addEventListener('mousedown', event => {
            if (event.target !== textAreaEl && event.target !== this) {
                textAreaEl.style.display = 'none';
            }
        });

        textAreaEl.addEventListener('keydown', (event) => {
            if (event.key === 'Enter' && !event.shiftKey) {
                event.preventDefault();
                const normalizedNicknames = Array.from(new Set(textAreaEl.value.replace(/^,+|,+$/g, '').replaceAll(' ', '').replaceAll(',,', ',').toLowerCase().split(','))).join(',');
                localStorage.setItem('blacklist_userscript.blacklist', normalizedNicknames);
                textAreaEl.style.backgroundColor = '#28a745';
                requestAnimationFrame(() => {
                    textAreaEl.style.transition = 'background-color 1s ease-in';
                    textAreaEl.style.backgroundColor = 'white';
                    textAreaEl.addEventListener('transitionend', () => {
                        textAreaEl.style.transition = '';
                    }, {once: true});
                });
                textAreaEl.value = normalizedNicknames;
                if (location.pathname.includes('/topic/')) {
                    updateWhitelistedMessagesState();
                    updateBlacklistedMessagesState();
                } else {
                    updateTopicsState();
                }
            }
        });
    }

    function getTitleAttribute(shouldHideMessages) {
        shouldHideMessages ??= localStorage.getItem('blacklist_userscript.hide_messages') === 'true';
        return 'Liste noire ' + (shouldHideMessages ? '(mode caché)' : '(mode réduit)');
    }

    function getOpacity(shouldBetransparent) {
        shouldBetransparent ??= localStorage.getItem('blacklist_userscript.hide_messages') === 'true';
        return 1 - (shouldBetransparent && .5);
    }

    function toggleDisplayMode(shouldHideMessages) {
        shouldHideMessages ??= localStorage.getItem('blacklist_userscript.hide_messages') !== 'true';
        localStorage.setItem('blacklist_userscript.hide_messages', shouldHideMessages);
        settingsButton.style.opacity = getOpacity(shouldHideMessages);
        settingsButton.title = getTitleAttribute(shouldHideMessages);
        (location.pathname.includes('/forum/') ? updateTopicsState : updateMessagesState)();
    }


    // ====== collapse blacklist messages ======
    function updateBlacklistedMessagesState(isFirstCall) {
        const blacklist = (localStorage.getItem('blacklist_userscript.blacklist') ?? []).split(',');
        const shouldHideMessages = localStorage.getItem('blacklist_userscript.hide_messages') === 'true';

        document.querySelectorAll('.message').forEach(message => {
            let author = message.querySelector('.message-username').textContent;
            if (!blacklist.includes(author.toLowerCase())) {
                return;
            } else if (shouldHideMessages) {
                if (!message.classList.contains('answer')) {
                    message.style.display = 'none';
                }
                return;
            }

            message.style.display = 'flex';

            if (message.classList.contains('collapsible')) {
                return;
            }

            // -- BL button --
            // remove "blacklist" button if present
            message.querySelector(':scope > .message-top .mdi-eye-off-outline')?.remove();
            // add "whitelist" button if absent
            if (!message.querySelector(':scope > .message-top .mdi-account-minus-outline')) {
                const whitelistButtonEl = document.createElement('div');
                whitelistButtonEl.classList.add('mdi', 'mdi-account-minus-outline');
                whitelistButtonEl.setAttribute('title', `Retirer ${author} de la liste noire`);
                whitelistButtonEl.addEventListener('click', event => {
                    const blacklist = localStorage.getItem('blacklist_userscript.blacklist') ?? '';
                    author = author.toLowerCase();
                    localStorage.setItem('blacklist_userscript.blacklist', blacklist.replaceAll(',' + author, '').replaceAll(author + ',', '').replaceAll(author, ''));
                    updateWhitelistedMessagesState();
                });
                message.querySelector('.right').prepend(whitelistButtonEl);
            }


            // -- collapsing --
            const chevronEl = document.createElement('div');
            chevronEl.classList.add('chevron', 'mdi', 'mdi-chevron-right');
            chevronEl.style.transition = 'transform 0.5s ease';
            message.querySelector('.right').append(chevronEl);

            const messageTop = message.querySelector('.message-top');
            const messageContent = message.parentElement.querySelector(`[data-id="${message.dataset.id}"] > .message-content`);
            const bottomEl = message.querySelector('.message-bottom') ?? {style: -1};
            const answerEl = message.querySelector('.answer');

            bottomEl.style.display = 'none';
            messageTop.childNodes.forEach(node => {
                node.setAttribute('style', 'display: none !important');
            });
            messageTop.querySelector('.right').childNodes.forEach(node => {
                node.setAttribute('style', 'display: none !important');
                node.style.opacity = 0;
            });
            messageTop.querySelector('.right').lastChild.setAttribute('style', 'opacity: 1; display: block');
            messageTop.querySelector('.right').style.display = 'block';
            if (answerEl) {
                answerEl.style.display = 'none';
                messageContent.style.display = 'none';
            } else {
                if (isFirstCall) {
                    messageContent.style.display = 'none';
                }
                messageContent.style.maxHeight = '0px';
            }


            // -- collapsibility --
            message.style.minHeight = '51px';
            chevronEl.addEventListener('click', function() {
                if (chevronEl.classList.contains('mdi-chevron-right')) {
                    chevronEl.classList.replace('mdi-chevron-right', 'mdi-chevron-down');
                    bottomEl.style.display = 'flex';
                    messageTop.childNodes.forEach(node => {
                        node.style.transition = 'opacity 0.5s ease';
                        node.setAttribute('style', 'display: flex');
                    });
                    messageTop.querySelector('.right').childNodes.forEach(node => {
                        node.style.transition = 'opacity 0.5s ease';
                        node.setAttribute('style', 'display: block');
                        node.style.opacity = 0;
                    });
                    messageTop.querySelector('.right').style.display = 'flex';
                    messageTop.querySelector('.right').lastChild.style.display = 'block';
                    setTimeout(() => {
                        messageTop.querySelector('.right').childNodes.forEach(node => {
                            node.style.opacity = 1;
                        });
                    }, 100);
                    if (answerEl) {
                        answerEl.style.display = 'block';
                        messageContent.style.display = 'block';
                    } else {
                        messageContent.style.display = 'block';
                        messageContent.style.transition = 'max-height 0.5s ease';
                        messageContent.style.maxHeight = messageContent.scrollHeight + 'px';
                    }
                } else {
                    chevronEl.classList.replace('mdi-chevron-down', 'mdi-chevron-right');
                    bottomEl.style.display = 'none';
                    messageTop.childNodes.forEach(node => {
                        node.style.transition = 'opacity 0.5s ease';
                        node.setAttribute('style', 'display: none !important');
                    });
                    messageTop.querySelector('.right').childNodes.forEach(node => {
                        node.style.transition = 'opacity 0.5s ease';
                        node.setAttribute('style', 'display: none !important');
                        node.style.opacity = 0;
                    });
                    messageTop.querySelector('.right').lastChild.style.opacity = 1;
                    setTimeout(() => {
                        messageTop.querySelector('.right').style.display = 'block';
                        messageTop.querySelector('.right').lastChild.style.display = 'block';
                    }, 100);
                    if (answerEl) {
                        answerEl.style.display = 'none';
                        messageContent.style.display = 'none';
                    } else {
                        messageContent.style.transition = 'max-height 0.5s ease';
                        messageContent.style.maxHeight = '0px';
                    }
                }});

            message.classList.add('collapsible');
        });
    }

    function updateWhitelistedMessagesState() {
        document.querySelectorAll('.message').forEach(message => {
            const author = message.querySelector('.message-username').textContent;
            if ((localStorage.getItem('blacklist_userscript.blacklist') ?? '').includes(author.toLowerCase())) {
                return;
            }
            message.style.display = 'flex';

            // -- collapsibility --
            message.classList.remove('collapsible');
            message.querySelector(':scope > .message-top .mdi-chevron-right')?.click();

            // -- BL button --
            // remove whitelist button and chevron if present
            message.querySelector(':scope > .message-top .mdi-account-minus-outline')?.remove();
            message.querySelector(':scope > .message-top .chevron')?.remove();

            // add "blacklist" button if absent
            if (!message.querySelector(':scope > .message-top .mdi-eye-off-outline')) {
                const blAddButtonEl = document.createElement('div');
                blAddButtonEl.classList.add('mdi', 'mdi-eye-off-outline');
                blAddButtonEl.setAttribute('title', `Ne plus voir les messages de ${author}`);
                blAddButtonEl.addEventListener('click', event => {
                    const blacklist = localStorage.getItem('blacklist_userscript.blacklist') ?? '';
                    localStorage.setItem('blacklist_userscript.blacklist', (blacklist ? blacklist + ',' : '') + author.toLowerCase());
                    updateBlacklistedMessagesState();
                });
                message.querySelector('.right').prepend(blAddButtonEl);
            }
        });
    }

    function updateTopicsState() {
        const blacklist = (localStorage.getItem('blacklist_userscript.blacklist') ?? []).split(',');
        const shouldHideMessages = localStorage.getItem('blacklist_userscript.hide_messages') === 'true';

        document.querySelectorAll('.topic-subject.link').forEach(topic => {
            const authorEl = topic.querySelector('.topic-username');
            const spoileredTitle = topic.querySelector('._format._spoiler');
            topic.parentElement.style.display = 'flex';

            if (!blacklist.includes(authorEl.textContent.toLowerCase().trim())) {
                if (spoileredTitle) {
                    spoileredTitle.parentElement.insertBefore(new DOMParser().parseFromString(
                        `<span>${spoileredTitle.textContent}</span>`, 'text/html').body.firstChild, spoileredTitle);
                    topic.insertAdjacentHTML('beforeend',`<div class="topic-username">${authorEl.textContent}</div>`);
                    spoileredTitle.remove();
                    authorEl.parentElement.remove();
                }
                return;
            } else if (shouldHideMessages) {
                return topic.parentElement.style.display = 'none';
            } else if (spoileredTitle) {
                return;
            }

            const titleEl = topic.querySelector('span:not([class])');
            topic.insertBefore(new DOMParser().parseFromString(
                `<div class="wrapper _format _spoiler">
                <div>${titleEl.textContent}</div>
            </div>`, 'text/html').body.firstChild, titleEl);
            titleEl.remove();

            if (!topic.parentElement.classList.contains('compact')) {
                topic.insertAdjacentHTML('beforeend',`<div class="_format _spoiler" style="display: block;"><div class="topic-username">${authorEl.textContent}</div></div>`);
                authorEl.remove();
            }
        });
    }

    if (location.pathname.includes('/forum/')) {
        document.addEventListener('click', event => {
            if (['_format', '_spoiler'].every(cls => event.target.classList.contains(cls))) {
                event.preventDefault();
            }
        });
    }

    const updateMessagesState = (isFirstCall) => {
        updateWhitelistedMessagesState();
        updateBlacklistedMessagesState(isFirstCall);
    };

    const fn = location.pathname.includes('/forum/') ? updateTopicsState : updateMessagesState;

    fn(true);
    window.addEventListener('focus', () => {
        fn();
        toggleDisplayMode(localStorage.getItem('blacklist_userscript.hide_messages') === 'true');
    });
});