// ==UserScript==
// @name         Toggle Post Filters (Images / No Quote Backlinks / Grayscale / Blur)
// @namespace    http://tampermonkey.net/
// @version      2.3
// @description  Toggle to hide posts without images, or posts with images but containing quotelinks in backlinks. Also grayscale and/or blur images.
// @match        https://boards.4chan.org/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=4chan.org
// @grant        none
// ==/UserScript==

(function () {
    'use strict';

    const hiddenClass = 'tm-hidden';

    const style = document.createElement('style');
    style.textContent = `
        .tm-hidden {
            display: none !important;
        }
        .tm-toggle-button {
            position: fixed;
            right: 10px;
            padding: 8px 12px;
            margin-top: 5px;
            background-color: #007BFF;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            z-index: 10000;
            font-size: 14px;
        }
        .tm-toggle-button:hover {
            background-color: #0056b3;
        }
    `;
    document.head.appendChild(style);

    let filterNoImage = false;
    let filterImageWithQuote = false;
    let grayscaleEnabled = false;
    let blurEnabled = false;

    function applyImageFilters() {
        const images = document.querySelectorAll('.postContainer img');
        images.forEach(img => {
            let filters = [];
            if (grayscaleEnabled) filters.push('grayscale(100%)');
            if (blurEnabled) filters.push('blur(4px)');
            img.style.filter = filters.join(' ');
        });
    }

    function updatePosts() {
        const posts = document.querySelectorAll('.postContainer');
        posts.forEach(post => {
            const hasImage = post.querySelector('img') !== null;
            const backlinkContainer = post.querySelector('.postInfo > .backlink');
            const hasBacklinkQuote = backlinkContainer && backlinkContainer.querySelector('a.quotelink') !== null;

            let hide = false;
            if (filterNoImage && !hasImage) hide = true;
            if (filterImageWithQuote && hasImage && hasBacklinkQuote) hide = true;

            post.classList.toggle(hiddenClass, hide);
        });

        applyImageFilters();
    }

    function createButton(id, text, topOffset, onClick) {
        const btn = document.createElement('button');
        btn.id = id;
        btn.className = 'tm-toggle-button';
        btn.style.top = `${topOffset}px`;
        btn.textContent = text;
        btn.addEventListener('click', onClick);
        document.body.appendChild(btn);
        return btn;
    }

    const btnImage = createButton('toggleImageBtn', 'Filter: Only Images [OFF]', 10, () => {
        filterNoImage = !filterNoImage;
        btnImage.textContent = `Filter: Only Images [${filterNoImage ? 'ON' : 'OFF'}]`;
        updatePosts();
    });

    const btnQuote = createButton('toggleQuoteBtn', 'Filter: Images w/ Backlink [OFF]', 50, () => {
        filterImageWithQuote = !filterImageWithQuote;
        btnQuote.textContent = `Filter: Images w/ Backlink [${filterImageWithQuote ? 'ON' : 'OFF'}]`;
        updatePosts();
    });

    const btnGray = createButton('toggleGrayBtn', 'Grayscale Images [OFF]', 90, () => {
        grayscaleEnabled = !grayscaleEnabled;
        btnGray.textContent = `Grayscale Images [${grayscaleEnabled ? 'ON' : 'OFF'}]`;
        applyImageFilters();
    });

    const btnBlur = createButton('toggleBlurBtn', 'Blur Images [OFF]', 130, () => {
        blurEnabled = !blurEnabled;
        btnBlur.textContent = `Blur Images [${blurEnabled ? 'ON' : 'OFF'}]`;
        applyImageFilters();
    });

    window.addEventListener('load', updatePosts);

    const observer = new MutationObserver(mutations => {
        mutations.forEach(mutation => {
            mutation.addedNodes.forEach(node => {
                if (node.nodeType === Node.ELEMENT_NODE) {
                    const posts = node.matches('.postContainer') ? [node] : node.querySelectorAll('.postContainer');
                    posts.forEach(post => {
                        const hasImage = post.querySelector('img') !== null;
                        const backlinkContainer = post.querySelector('.postInfo > .backlink');
                        const hasBacklinkQuote = backlinkContainer && backlinkContainer.querySelector('a.quotelink') !== null;

                        let hide = false;
                        if (filterNoImage && !hasImage) hide = true;
                        if (filterImageWithQuote && hasImage && hasBacklinkQuote) hide = true;

                        post.classList.toggle(hiddenClass, hide);
                    });
                }
            });
        });

        applyImageFilters(); // Also re-apply filters to any new images
    });

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