// ==UserScript==
// @name         Reddit Beta Theme Remover
// @namespace    http://tampermonkey.net/
// @version      2024-12-11
// @description  Changes Reddit's latest UI disaster to something you can at least stomach
// @author       ez
// @match        https://www.reddit.com/*
// @match        https://reddit.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=reddit.com
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // Helper function to add/remove a class from an element
    function toggleClassOnElement(element, className, action) {
        if (element.classList) {
            action === 'add' ? element.classList.add(className) : element.classList.remove(className);
        }
    }

    // Helper function to update max-width for main#main-content based on screen width
    function updateMaxWidth(mainElement) {
        if (window.innerWidth > 1920) {
            mainElement.style.maxWidth = '1200px';  // For screens larger than 1920px
        } else {
            mainElement.style.maxWidth = '950px';   // For screens 1920px or smaller
        }
    }

    // Helper function to update margin-left for targetDiv based on screen width
    function updateMarginLeft(targetDiv) {
        targetDiv.style.marginLeft = window.innerWidth > 1920 ? '200px' : '50px';
    }

    // Function to replace colors in inline styles and CSS variables
    function replaceColors() {
        const allElements = document.querySelectorAll('*');
        allElements.forEach(element => {
            if (element.style.cssText) {
                element.style.cssText = element.style.cssText.replace(/#0e1113/g, '#121213');
            }
        });

        const root = document.documentElement;
        const styles = window.getComputedStyle(root);
        Array.from(styles).forEach(property => {
            if (property.startsWith('--color-neutral-background')) {
                root.style.setProperty(property, '#121213');
            }
        });
    }

    // Function to modify specific elements by adding/removing classes
    function modifyClassesOnPage() {
        document.querySelectorAll('*').forEach(element => {
            toggleClassOnElement(element, 'theme-beta', 'remove');
            toggleClassOnElement(element, 'bg-neutral-background', 'remove');
        });
    }

    // Function to apply custom margins and styles to targetDiv
    function applyCustomMarginsAndStyles() {
        const targetDiv = document.querySelector('div.subgrid-container.m\\:col-start-2');
        const mainElement = document.querySelector('main#main-content');
        const rightSidebar = document.querySelector('#right-sidebar-container'); // Right sidebar

        if (targetDiv && mainElement && rightSidebar) {
            // Apply dynamic margin and width adjustments for left content (subgrid-container)
            toggleClassOnElement(targetDiv, 'mx-auto', 'remove');
            targetDiv.classList.add('mr-auto');  // Apply right margin auto for alignment
            updateMarginLeft(targetDiv);         // Update margin-left based on screen width
            toggleClassOnElement(targetDiv, 'm:w-[1120px]', 'remove');
            targetDiv.classList.replace('w-full', 'w-3/4');  // Apply w-3/4 to subgrid-container

            // Update the max-width for the main element
            updateMaxWidth(mainElement);   // Update max-width based on screen width

            // Set min-width to 950px for main element
            mainElement.style.minWidth = '950px';  // Ensure min-width is 950px

            // Apply transform to shift right sidebar
            if (window.innerWidth > 1920) {
                rightSidebar.style.transform = 'translateX(250px)';  // 250px shift for large screens
            } else {
                rightSidebar.style.transform = 'translateX(50px)';  // 150px shift for smaller screens
            }

            // Ensure main content stays full width (w-full)
            toggleClassOnElement(mainElement, 'w-full', 'add');
        }
    }

    // Function to add 'theme-beta' class to specific elements
    function addThemeBetaClassToElements() {
        const elements = document.querySelectorAll('span[data-part="inbox"], span[data-part="advertise"], span[data-part="chat"], span[data-part="create"], reddit-search-large, #user-drawer-content');
        elements.forEach(element => toggleClassOnElement(element, 'theme-beta', 'add'));
    }

    // Main function to apply all changes (called on load, scroll, and resize)
    function applyChanges() {
        modifyClassesOnPage();
        replaceColors();
        applyCustomMarginsAndStyles();
        addThemeBetaClassToElements();
    }

    // Throttle the scroll event to optimize performance (to prevent excess firing)
    let scrollTimeout;
    function handleScroll() {
        clearTimeout(scrollTimeout);
        scrollTimeout = setTimeout(applyChanges, 50); // Apply every 50ms to throttle the scroll event
    }

    // Resize event handler using requestAnimationFrame for smoother resizing
    let resizing = false;
    function handleResize() {
        if (!resizing) {
            resizing = true;
            requestAnimationFrame(() => {
                applyChanges();
                resizing = false;
            });
        }
    }

    // Initial call to apply changes when the page loads
    window.addEventListener('load', applyChanges);

    // Scroll and resize event listeners (with throttling and requestAnimationFrame)
    window.addEventListener('scroll', handleScroll);  // Throttled scroll event
    window.addEventListener('resize', handleResize);  // requestAnimationFrame for resize

    // MutationObserver to detect dynamically added elements and update them
    const observer = new MutationObserver(() => {
        applyChanges();
    });
    observer.observe(document.body, { childList: true, subtree: true });
})();