// ==UserScript==
// @name         /bag/ filter 2nd
// @namespace    http://tampermonkey.net/
// @version      1.5
// @description  Hiding
// @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;

    // Helper function
    function hasReplyReference(postContainer) {
        const blockquote = postContainer.querySelector('.postMessage');
        return blockquote && blockquote.textContent.includes('>>');
    }

    // Add CSS
    const style = document.createElement('style');
    style.textContent = `
        .fileThumb img.hidden-image {
            visibility: hidden;
            opacity: 0;
            width: 50px;
            height: 50px;
            transition: opacity 0.3s ease, visibility 0.3s ease, width 0.3s ease, height 0.3s ease;
        }

        .fileThumb:hover img.hidden-image {
            visibility: visible;
            opacity: 1;
            width: auto; /* Return to original width */
            height: auto; /* Return to original height */
        }
    `;
    document.head.appendChild(style);

    // Function to apply
    function hideAndResizeReplyImages() {
        const posts = document.querySelectorAll('.postContainer');
        posts.forEach(post => {
            // Check
            if (hasReplyReference(post)) {
                const thumbnails = post.querySelectorAll('.fileThumb img');
                thumbnails.forEach(thumb => {
                    // Apply class
                    if (!thumb.classList.contains('hidden-image')) {
                        thumb.classList.add('hidden-image');

                        // Explicitly set width and height
                        thumb.style.width = '50px';
                        thumb.style.height = '50px';

                        // Restore
                        thumb.addEventListener('mouseenter', () => {
                            thumb.style.width = '';
                            thumb.style.height = '';
                        });

                        // Reapply
                        thumb.addEventListener('mouseleave', () => {
                            thumb.style.width = '50px';
                            thumb.style.height = '50px';
                        });
                    }
                });
            }
        });
    }

    // Observe for dynamic content loading (e.g., infinite scrolling)
    const observer = new MutationObserver(() => {
        hideAndResizeReplyImages();
    });

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

    // Initial run
    hideAndResizeReplyImages();
})();