// ==UserScript==
// @name        8chan Single ID Post Opacity with Thread-Specific Cross-Domain Toggle
// @namespace   https://8chan.moe
// @description Halves opacity of posts with unique labelId (based on background-color) if CHECK_UNIQUE_IDS is true, adds a circle emoji toggle after extraMenuButton to adjust opacity for all posts by ID color in the same thread (including OP), persists toggle state across 8chan.moe and 8chan.se, and handles dynamically added posts
// @match       https://8chan.moe/*/res/*
// @match       https://8chan.se/*/res/*
// @version     2.2
// @author      Anonymous
// @grant       GM_setValue
// @grant       GM_getValue
// @license     MIT
// @downloadURL none
// ==/UserScript==

(function() {
    'use strict';

    // Global constant to enable/disable unique ID opacity check
    const CHECK_UNIQUE_IDS = true;

    // Function to extract board and thread from URL and create a domain-agnostic storage key
    function getThreadInfo() {
        const url = window.location.href;
        const regex = /https:\/\/8chan\.(moe|se)\/([^/]+)\/res\/(\d+)\.html/;
        const match = url.match(regex);
        if (match) {
            return {
                board: match[2],
                thread: match[3],
                storageKey: `toggledColors_${match[2]}_${match[3]}`
            };
        }
        return null;
    }

    // Wait for the DOM to be fully loaded
    window.addEventListener('load', function() {
        const threadInfo = getThreadInfo();
        if (!threadInfo) {
            console.error('Could not parse board and thread from URL');
            return;
        }

        const storageKey = threadInfo.storageKey;
        let toggledColors = GM_getValue(storageKey, []);
        if (!Array.isArray(toggledColors)) {
            toggledColors = [];
            GM_setValue(storageKey, toggledColors);
        }

        const colorCount = new Map();

        function updateColorCounts() {
            colorCount.clear();
            document.querySelectorAll('.labelId').forEach(label => {
                const bgColor = label.style.backgroundColor;
                if (bgColor) {
                    colorCount.set(bgColor, (colorCount.get(bgColor) || 0) + 1);
                }
            });
        }

        function createToggleIcon(container, bgColor) {
            if (container.querySelector('.opacityToggle')) return;

            const icon = document.createElement('label');
            icon.textContent = '⚪';
            icon.style.cursor = 'pointer';
            icon.style.margin = '0 2px 0 2px'; // Override inherited margin, keep 2px left/right
            icon.style.verticalAlign = 'top'; // Align top with buttons
            icon.style.display = 'inline-block'; // Match button display
            icon.style.color = toggledColors.includes(bgColor) ? '#00ff00' : '#808080';
            icon.className = 'opacityToggle glowOnHover coloredIcon';
            icon.title = 'Toggle opacity for this ID in this thread';

            // Insert icon after extraMenuButton
            const extraMenuButton = container.querySelector('.extraMenuButton');
            if (extraMenuButton) {
                extraMenuButton.insertAdjacentElement('afterend', icon);
            } else {
                // Fallback: append to container
                container.appendChild(icon);
            }

            icon.addEventListener('click', () => {
                if (toggledColors.includes(bgColor)) {
                    toggledColors = toggledColors.filter(color => color !== bgColor);
                } else {
                    toggledColors.push(bgColor);
                }
                GM_setValue(storageKey, toggledColors);

                icon.style.color = toggledColors.includes(bgColor) ? '#00ff00' : '#808080';

                document.querySelectorAll('.innerOP, .innerPost').forEach(p => {
                    const label = p.querySelector('.labelId');
                    if (label && label.style.backgroundColor === bgColor) {
                        let shouldBeOpaque = toggledColors.includes(bgColor) || (CHECK_UNIQUE_IDS && colorCount.get(bgColor) === 1);
                        p.style.opacity = shouldBeOpaque ? '0.5' : '1';
                    }
                });
            });
        }

        function processPost(post, isOP = false) {
            const labelId = post.querySelector('.labelId');
            if (labelId) {
                const bgColor = labelId.style.backgroundColor;
                if (bgColor) {
                    let shouldBeOpaque = toggledColors.includes(bgColor) || (CHECK_UNIQUE_IDS && colorCount.get(bgColor) === 1);
                    post.style.opacity = shouldBeOpaque ? '0.5' : '1';

                    const title = post.querySelector(isOP ? '.opHead.title' : '.postInfo.title');
                    if (title) {
                        createToggleIcon(title, bgColor);
                    }
                }
            }
        }

        // Initial processing
        updateColorCounts();
        const opPost = document.querySelector('.innerOP');
        if (opPost) processPost(opPost, true);
        document.querySelectorAll('.innerPost').forEach(post => processPost(post, false));

        // MutationObserver for new posts
        const postsContainer = document.querySelector('.divPosts');
        if (postsContainer) {
            const observer = new MutationObserver((mutations) => {
                let newPosts = false;
                mutations.forEach(mutation => {
                    if (mutation.addedNodes.length) {
                        mutation.addedNodes.forEach(node => {
                            if (node.nodeType === Node.ELEMENT_NODE && node.matches('.postCell')) {
                                const innerPost = node.querySelector('.innerPost');
                                if (innerPost) newPosts = true;
                            }
                        });
                    }
                });

                if (newPosts) {
                    updateColorCounts();
                    document.querySelectorAll('.innerPost').forEach(post => {
                        if (!post.style.opacity) processPost(post, false);
                    });
                    document.querySelectorAll('.innerOP, .innerPost').forEach(p => {
                        const label = p.querySelector('.labelId');
                        if (label && label.style.backgroundColor) {
                            const bgColor = label.style.backgroundColor;
                            let shouldBeOpaque = toggledColors.includes(bgColor) || (CHECK_UNIQUE_IDS && colorCount.get(bgColor) === 1);
                            p.style.opacity = shouldBeOpaque ? '0.5' : '1';
                        }
                    });
                }
            });

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