// ==UserScript==
// @name         /bag/ filter
// @namespace    http://tampermonkey.net/
// @version      1.7.6
// @description  Hides non whitelisted images. Images are whitelisted after 15 minutes of the post not being deleted.
// @author       Anonymous
// @match        https://boards.4chan.org/vg*
// @grant        none
// ==/UserScript==

(function () {
    'use strict';

    // Check for a thread.
    if (!/^bag\/|\/bag\/|Blue Archive|BIue Archive/.test(document?.querySelector('.postInfo.desktop .subject')?.textContent?.trim() ?? '')) return;

    const ADD_TO_WHITELIST_TIMEOUT_MS = 15 * 60 * 1000;
    const MD5_WHITELIST_KEY = 'bagFilter';
    const IS_DISABLED_KEY = 'bagFilterDisabled';
    const FILTERED_CSS_CLASS = 'bag-filter-filtered';
    const FILTER_STYLES = `
.fileThumb img:not(.full-image).${FILTERED_CSS_CLASS} {
    width: 50px !important;
    height: 50px !important;
    filter: blur(5px) !important;
}`;

    const styleSheet = document.createElement('style');
    document.head.appendChild(styleSheet);

    const opLinks = document.querySelector('.opContainer .fileText');
    const toggleLink = document.createElement('a');
    toggleLink.href = '#';
    opLinks.appendChild(document.createTextNode(' '));
    opLinks.appendChild(toggleLink);
    toggleLink.onclick = () => {
        window.localStorage.setItem(IS_DISABLED_KEY, String(!isDisabled()));
        updateToggle();
    }

    function isDisabled() {
        return window.localStorage.getItem(IS_DISABLED_KEY) === 'true';
    }

    function updateToggle() {
        if (isDisabled()) {
            toggleLink.textContent = 'enable bag filter';
            styleSheet.textContent = '';
        } else {
            toggleLink.textContent = 'disable bag filter';
            styleSheet.textContent = FILTER_STYLES;
        }
    }

    const md5Whitelist = new Set(JSON.parse(window.localStorage.getItem(MD5_WHITELIST_KEY) || '[]'));

    function update() {
        if (isDisabled()) {
            return;
        }
        const addToWhitelistPostTime = Date.now() - ADD_TO_WHITELIST_TIMEOUT_MS;
        const posts = document.querySelectorAll('.replyContainer:has(.fileThumb)');
        let md5WhitelistChanged = false;
        for (const post of posts) {
            const postTime = new Number(post.querySelector('.dateTime').dataset.utc) * 1000;
            const thumbnail = post.querySelector('img:not(.full-image');
            const md5 = thumbnail.dataset.md5;
            const otherFiltersMatch = imageSizeMatch(post);
            if (post.hasAttribute('hidden')) {
                if (md5Whitelist.has(md5)) {
                    md5Whitelist.delete(md5);
                    md5WhitelistChanged = true;
                }
            } else if (postTime < addToWhitelistPostTime && !post.classList.contains('deleted-post')) {
                if (!md5Whitelist.has(md5) && otherFiltersMatch) {
                    md5Whitelist.add(md5);
                    md5WhitelistChanged = true;
                }
            }
            if (md5Whitelist.has(md5) || !otherFiltersMatch) {
                thumbnail.classList.remove(FILTERED_CSS_CLASS);
            } else {
                thumbnail.classList.add(FILTERED_CSS_CLASS);
            }
        }
        if (md5WhitelistChanged) {
            window.localStorage.setItem(MD5_WHITELIST_KEY, JSON.stringify([...md5Whitelist]));
        }
    }

    function imageSizeMatch(post) {
        const fileText = post.querySelector('.fileText-original, .fileText')?.textContent;
        if (fileText) {
            const matchInKB = fileText.match(/\((\d+(?:\.\d+)?)\s*KB/i);
            if (matchInKB) {
                const sizeInKB = parseFloat(matchInKB[1]);
                return sizeInKB >= 20;
            }
            const matchInMB = fileText.match(/\((\d+(?:\.\d+)?)\s*MB/i);
            if (matchInMB) {
                const sizeInMB = parseFloat(matchInMB[1]);
                return sizeInMB >= 1;
            }
        }
        return false;
    }

    // Function to handle right-click with Shift key pressed to add the image to the whitelist
    function handleRightClick(event) {
        // Check if Shift key is pressed
        if (!event.shiftKey) return;

        // Prevent the default context menu from showing
        event.preventDefault();

        const thumbnail = event.target;
        const md5 = thumbnail.dataset.md5;
        if (md5 && !md5Whitelist.has(md5)) {
            md5Whitelist.add(md5);
            window.localStorage.setItem(MD5_WHITELIST_KEY, JSON.stringify([...md5Whitelist]));
            thumbnail.classList.remove(FILTERED_CSS_CLASS);  // Immediately show the image
        }
    }

    // Attach right-click event listeners to all image thumbnails
    function addRightClickListeners() {
        const images = document.querySelectorAll('.replyContainer .fileThumb img:not(.full-image)');
        images.forEach(image => {
            image.addEventListener('contextmenu', handleRightClick);  // Detect right-click (context menu)
        });
    }

    // Observe for dynamic content loading (e.g., infinite scrolling)
    const observer = new MutationObserver(() => {
        update();
        addRightClickListeners();  // Reattach listeners if new images are loaded
    });

    observer.observe(document.body, {childList: true, subtree: true});

    // Initial run
    updateToggle();
    update();
    addRightClickListeners();
})();