// ==UserScript==
// @name         Tobias-Styling-Solutions
// @namespace    http://tampermonkey.net/
// @version      5.8
// @description  Saab hacker theme + Tobias Styling logo + theme switcher, optimized button layout for productivity
// @author       Tobias
// @match        https://app4-3-102.boltrics.com/*
// @include      */boltrics.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    const themes = ['default', 'Orange', 'Saab'];
    let currentThemeIndex = 0;

    const themeStyles = {
        default: {
            background: 'url("https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwallpapercave.com%2Fwp%2Fwp3335318.jpg&f=1&nofb=1&ipt=e6d70cfd752d3b0857fe8bd519900dfc901ca3432c25993c97ea4dcfbbb6e961")',
            color: '#2563EB',
            buttonBg: 'linear-gradient(90deg, #2563EB, #3590F3)',
            buttonHoverBg: 'linear-gradient(90deg, #3590F3, #2563EB)',
            buttonColor: '#FFFFFF',
            headerBg: 'transparent',
            headerColor: 'transparent',
            linkColor: '#2563EB',
            linkHoverColor: '#1E40AF',
            bottomBarHeight: '62px'
        },
        Orange: {
            background: 'url("https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fcdn.motor1.com%2Fimages%2Fmgl%2FvxZvnQ%2Fs1%2Fbugatti-tourbillon.jpg&f=1&nofb=1&ipt=ff7659100e2e71b5e567dc589eae7abb1ceac09f14551a8cc1e56d4e9b965091")',
            color: '#DB1C30', // Bright orange text color
            buttonBg: 'rgba(0, 0, 0, 0.7)', // Dark metallic gray, matching Saab
            buttonHoverBg: 'transparent', // Dark orange for hover
            buttonColor: '#DB1C30', // Bright orange for button text
            headerBg: 'transparent',
            headerColor: 'transparent',
            linkColor: '#DB1C30', // Bright OrangeRed for links
            linkHoverColor: '#DB1C30', // Bright orange for link hover
            bottomBarHeight: '62px'
        },
        Saab: {
            background: 'url("https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fengineswapdepot.com%2Fwp-content%2Fuploads%2F2021%2F12%2FSaab-9-3-with-a-modified-96-body-01.jpg&f=1&nofb=1&ipt=cc3ed7222b9be3ec9281a2dfd7612cdf7771ceaa35828e9c16a4953f8cd7dd07")',
            color: 'rgba(0, 255, 0, 1)', // Bright orange text color
            buttonBg: 'rgba(0, 0, 0, 0.7)', // Dark metallic gray, matching Saab
            buttonHoverBg: 'transparent', // Dark orange for hover
            buttonColor: 'rgba(255, 255, 255, 0.5)', // Bright orange for button text
            headerBg: 'transparent',
            headerColor: 'transparent',
            linkColor: '#FFFFFF', // Bright OrangeRed for links
            linkHoverColor: '#FFFFFF', // Bright orange for link hover
            bottomBarHeight: '62px'
        }
    };

    const loadFontAwesome = () => {
        if (!document.querySelector('link[href*="fontawesome"]')) {
            const fa = document.createElement('link');
            fa.rel = 'stylesheet';
            fa.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css';
            fa.onerror = () => console.warn('FontAwesome kon niet worden geladen');
            document.head.appendChild(fa);
        }
    };

    const loadGoogleFonts = () => {
        if (!document.querySelector('link[href*="fonts.googleapis.com"]')) {
            const gf = document.createElement('link');
            gf.rel = 'stylesheet';
            gf.href = 'https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap';
            gf.onerror = () => {
                console.warn('Google Fonts kon niet worden geladen, fallback naar systeemfont');
                const style = document.createElement('style');
                style.textContent = `body { font-family: Arial, sans-serif !important; }`;
                document.head.appendChild(style);
            };
            document.head.appendChild(gf);
        }
    };

    const setFavicon = () => {
        document.querySelectorAll('link[rel="icon"], link[rel="shortcut icon"]').forEach(f => f.remove());
        const favicon = document.createElement('link');
        favicon.rel = 'icon';
        favicon.href = 'https://i.imgur.com/Yx5cQTs.png';
        favicon.onerror = () => {
            favicon.href = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgG2J3XjkwAAAABJRU5ErkJggg==';
        };
        document.head.appendChild(favicon);
    };

    const buttonMap = {};

    const updateButtons = () => {
        Object.entries(buttonMap).forEach(([keyCode, text]) => {
            const btn = document.querySelector(`#keycode-${keyCode}`);
            if (btn && !btn.dataset.modified) {
                btn.dataset.modified = 'true';
            }
        });
    };

    const applyTheme = (theme) => {
        document.body.classList.remove(...themes);
        document.body.classList.add(theme);

        const existingOverlays = document.querySelectorAll('body::after, body::before');
        existingOverlays.forEach(overlay => overlay.remove());

        const existingSaabLogo = document.querySelector('#saab-logo');
        if (existingSaabLogo) existingSaabLogo.remove();

        const style = themeStyles[theme];
        const styleElement = document.createElement('style');
        styleElement.id = 'theme-styles';
        styleElement.textContent = `
            body {
                background: ${style.background} no-repeat center center !important;
                background-size: cover !important;
                color: ${style.color} !important;
                font-family: 'Roboto', Arial, sans-serif !important;
            }
#topbar {
    height: 62px !important;
    font-size: 18px !important;
    background: ${style.headerBg} !important;
    color: ${style.headerColor} !important;
    position: relative;
    z-index: 1000;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

            [id^="keycode-"] {
                background: ${style.buttonBg} !important;
                color: ${style.buttonColor} !important;
                font-size: 2em !important;
                border-radius: 10px !important;
                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
                transition: background 0.3s, transform 0.1s, box-shadow 0.3s !important;
                margin-bottom: 15px !important;
            }
            }
            [id^="keycode-"]:hover {
                background: ${style.buttonHoverBg} !important;
                transform: translateY(-2px) !important;
            }
            a, .button, button {
                background: ${style.buttonBg} !important;
                color: ${style.buttonColor} !important;
                font-size: 2em !important;
                border-radius: 5px !important;
                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
                transition: background 0.3s, transform 0.1s, box-shadow 0.3s !important;
            }
            body.Saab a, body.Saab .button, body.Saab button {
                border: 2px solid #00CC00 !important;
            }
            body.Saab a:hover, body.Saab .button:hover, body.Saab button:hover {
                background: ${style.buttonHoverBg} !important;
                box-shadow: 0 0 10px #00CC00, 0 10px 6px rgba(0, 0, 0, 0.1) !important;
                transform: translateY(-2px) !important;
            }
            body.Saab a, body.Saab .button, body.Saab button {
                color: ${style.buttonColor} !important;
            }
            body.Saab a i, body.Saab .button i, body.Saab button i {
                color: ${style.buttonColor} !important;
            }
            body.Saab a:hover, body.Saab .button:hover, body.Saab button:hover {
                color: rgba(255, 255, 255, 1) !important;
            }
            body.Saab a:hover i, body.Saab .button:hover i, body.Saab button:hover i {
                color: rgba(255, 255, 255, 1) !important;
            }
            body.Orange a, body.Orange .button, body.Orange button {
                border: 2px solid #DB1C30 !important; // Bright orange border
            }
            body.Orange a:hover, body.Orange .button:hover, body.Orange button:hover {
                background: ${style.buttonHoverBg} !important;
                box-shadow: 0 0 10px #DB1C30, 0 10px 6px rgba(0, 0, 0, 0.1) !important;
                transform: translateY(-2px) !important;
            }
            body.Orange a, body.Orange .button, body.Orange button {
                color: ${style.buttonColor} !important;
            }
            body.Orange a i, body.Orange .button i, body.Orange button i {
                color: ${style.buttonColor} !important;
            }
            body.Orange a:hover, body.Orange .button:hover, body.Orange button:hover {
                color: rgba(255, 255, 255, 1) !important;
            }
            body.Orange a:hover i, body.Orange .button:hover i, body.Orange button:hover i {
                color: #DB1C30 !important;
                text-shadow: 0 0 5px rgba(255, 255, 255, 0), 0 0 3px #FF4500 !important;
            }
            a {
                color: ${style.linkColor} !important;
                text-decoration: none !important;
            }
            a:hover {
                color: ${style.linkHoverColor} !important;
            }
            #theme-switcher {
                background: ${style.buttonBg} !important;
                color: ${style.buttonColor} !important;
                font-size: 1.2em !important;
                border-radius: 5px !important;
                border: none !important;
                padding: 12px 24px !important;
                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
                cursor: pointer !important;
                z-index: 10003 !important;
                position: fixed;
                top: 93%;
                left: 85%;
            }
            #theme-switcher:hover {
                background: ${style.buttonHoverBg} !important;
            }
            * {
                border-color: transparent !important;
                outline: none !important;
            }
            [style*="background"], [style*="color"], [style*="border"] {
                background: none !important;
                color: inherit !important;
                border: none !important;
            }
            header#topbar h1 {
                font-family: 'Roboto', 'Segoe UI Emoji', Arial, sans-serif;
                font-size: 2em;
                font-weight: 700;
                line-height: 40px;
                color: ${style.headerColor} !important;
            }
            input, select, textarea {
                background-color: #1e1e1e;
                color: #ffffff;
                border: 1px solid #ffffff;
                border-radius: 4px;
            }
            #bottombar {
                background-color: ${style.headerBg} !important;
                color: ${style.headerColor} !important;
                border: none;
                height: ${style.bottomBarHeight} !important;
                min-height: ${style.bottomBarHeight} !important;
                box-sizing: border-box !important;
            }
            #bottombar #environmentinfo, #bottombar .environmentinfo-prod, #bottombar #environmentinfo-name, #bottombar #versioninfo {
                background-color: ${style.buttonBg} !important;
                color: ${style.headerColor} !important;
                border: none;
                height: 100% !important;
            }
            #bottombar #environmentinfo-settings h3, #bottombar #environmentinfo-settings h4 {
                color: ${style.headerColor} !important;
            }
            #bottombar #environmentinfo-settings a, #bottombar #signout {
                background: ${style.buttonBg} !important;
                color: ${style.headerColor} !important;
                border-radius: 8px;
            }
            body.Saab #bottombar #environmentinfo-settings a, body.Saab #bottombar #signout {
                border: 2px solid #00CC00 !important;
            }
            body.Saab #bottombar #environmentinfo-settings a:hover, body.Saab #bottombar #signout:hover {
                background: ${style.buttonHoverBg} !important;
                box-shadow: 0 0 5px #00CC00, 0 4px 6px rgba(0, 0, 0, 0.1) !important;
            }
            body.Saab #bottombar #environmentinfo-settings a, body.Saab #bottombar #signout {
                color: ${style.buttonColor} !important;
            }
            body.Saab #bottombar #environmentinfo-settings a i, body.Saab #bottombar #signout i {
                color: ${style.buttonColor} !important;
            }
            body.Saab #bottombar #environmentinfo-settings a:hover, body.Saab #bottombar #signout:hover {
                color: #000000 !important;
            }
            body.Saab #bottombar #environmentinfo-settings a:hover i, body.Saab #bottombar #signout:hover i {
                color: #000000 !important;
                text-shadow: 0 0 5px #00CC00, 0 0 3px #00CC00 !important;
            }
            body.Orange #bottombar #environmentinfo-settings a, body.Orange #bottombar #signout {
                border: 2px solid #FF4500 !important;
            }
            body.Orange #bottombar #environmentinfo-settings a:hover, body.Orange #bottombar #signout:hover {
                background: ${style.buttonHoverBg} !important;
                box-shadow: 0 0 5px #FF4500, 0 4px 6px rgba(0, 0, 0, 0.1) !important;
            }
            body.Orange #bottombar #environmentinfo-settings a, body.Orange #bottombar #signout {
                color: ${style.buttonColor} !important;
            }
            body.Orange #bottombar #environmentinfo-settings a i, body.Orange #bottombar #signout i {
                color: ${style.buttonColor} !important;
            }
            body.Orange #bottombar #environmentinfo-settings a:hover, body.Orange #bottombar #signout:hover {
                color: #000000 !important;
            }
            body.Orange #bottombar #environmentinfo-settings a:hover i, body.Orange #bottombar #signout:hover i {
                color: #000000 !important;
                text-shadow: 0 0 5px #FF4500, 0 0 3px #FF4500 !important;
            }
            #breadcrumbs, #breadcrumbs table, #breadcrumbs th, #breadcrumbs td {
                background-color: #1e1e1e;
                color: ${style.headerColor} !important;
                border: 1px solid #ff6f00;
            }
            #breadcrumbs th {
                background: ${style.headerBg} !important;
                color: ${style.headerColor} !important;
            }
            .param .value {
                height: 30px;
                background: ${style.buttonBg} !important;
                color: ${style.buttonColor} !important;
                border-radius: 8px;
                width: fit-content;
                padding: 5px 10px 10px 10px;
                display: inline-block;
            }
            #modal-load.show-modal {
                opacity: 1;
            }
            ::-webkit-scrollbar {
                width: 8px;
            }
            ::-webkit-scrollbar-thumb {
                background: #ff6f00;
                border-radius: 4px;
            }
            ::-webkit-scrollbar-track {
                background: #121212;
            }
        `;
        document.head.querySelector('#theme-styles')?.remove();
        document.head.appendChild(styleElement);

        if (theme === 'default' && !document.querySelector('#saab-logo')) {
    const saabLogo = document.createElement('div');
    saabLogo.id = 'saab-logo';
    saabLogo.innerHTML = `<img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fmy.lineagelogistics.com%2Fimages%2Flineage-logo.png&f=1&nofb=1&ipt=6bdca5fe655f05198a06c1caa0cba836d644953ec640deafe28776e7ec32e555" style="width: 252px; height: 63px; position: absolute; top: 4.3%; left: 50%; transform: translate(-50%, -50%); z-index: -1; pointer-events: none;">`;
    saabLogo.querySelector('img').onerror = () => {
        saabLogo.innerHTML = '<span style="color: #B0C4B1; font-size: 20px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: -1; pointer-events: none;">Saab</span>';
    };
    document.body.appendChild(saabLogo);
}

if (theme === 'Saab' && !document.querySelector('#saab-logo')) {
    const saabLogo = document.createElement('div');
    saabLogo.id = 'saab-logo';
    saabLogo.innerHTML = `<img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fcar-brand-names.com%2Fwp-content%2Fuploads%2F2019%2F10%2FSaab-Logo.png&f=1&nofb=1&ipt=01c9241a1027b0a44ac151f860e02dd25fd3457764fbb92bc9e94443150a938f" style="width: 200px; height: 100px; position: absolute; top: 4.5%; left: 50%; transform: translate(-50%, -50%); z-index: -1; pointer-events: none;">`;
    saabLogo.querySelector('img').onerror = () => {
        saabLogo.innerHTML = '<span style="color: #B0C4B1; font-size: 20px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: -1; pointer-events: none;">Saab</span>';
    };
    document.body.appendChild(saabLogo);
}
        if (theme === 'Orange' && !document.querySelector('#saab-logo')) {
            const saabLogo = document.createElement('div');
            saabLogo.id = 'saab-logo';
            saabLogo.innerHTML = `<img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fpngimg.com%2Fuploads%2Fbugatti%2Fbugatti_PNG99576.png&f=1&nofb=1&ipt=0c2aaf478861b3b5b58609319ae4202b4892f6e77f51f5b938a5199d279a448c" style="width: 194px; height: 143px; position: absolute; top: 4.8%; left: 50%; transform: translate(-50%, -50%); z-index: -1; pointer-events: none;">`;
            saabLogo.querySelector('img').onerror = () => {
                saabLogo.innerHTML = '<span style="color: #FFA500; font-size: 20px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: -1; pointer-events: none;">Orange</span>';
            };
            document.body.appendChild(saabLogo);
        }
        if (theme === 'default' && !document.querySelector('#saab-logo')) {
            const saabLogo = document.createElement('div');
            saabLogo.id = 'saab-logo';
            saabLogo.innerHTML = `<img src="https://i.imgur.com/1euuIzr.png" style="width: 130px; height: 90px; position: fixed; top: 20px; left: 5px; z-index: 999;">`;
            saabLogo.querySelector('img').onerror = () => {
                saabLogo.innerHTML = '<span style="color: #00FF00; font-size: 20px;">Saab</span>';
            };
            document.body.appendChild(saabLogo);
        }
        if (!document.querySelector('#centered-buttons')) {
            const buttonsContainer = document.createElement('div');
            buttonsContainer.id = 'centered-buttons';
            const buttons = document.querySelectorAll('[id^="keycode-"]:not(#keycode-27):not(#keycode-172)');
            buttons.forEach(btn => buttonsContainer.appendChild(btn));
            const topbar = document.querySelector('#topbar');
            if (topbar && topbar.nextSibling) {
                topbar.parentNode.insertBefore(buttonsContainer, topbar.nextSibling);
            } else {
                document.body.appendChild(buttonsContainer);
            }
        }
    };

    const nextTheme = () => {
        currentThemeIndex = (currentThemeIndex + 1) % themes.length;
        applyTheme(themes[currentThemeIndex]);
        const switcher = document.querySelector('#theme-switcher');
        if (switcher) {
            switcher.textContent = `Thema: ${themes[currentThemeIndex]}`;
        }
        const radioToggle = document.querySelector('#radio-toggle');
        if (radioToggle) {
            const style = themeStyles[themes[currentThemeIndex]];
            radioToggle.style.background = style.buttonBg;
            radioToggle.style.color = style.buttonColor;
            const styleSheet = document.querySelector('style#radio-toggle-style');
            if (styleSheet) {
                styleSheet.textContent = `
                    #radio-toggle {
                        background: ${style.buttonBg} !important;
                        color: ${style.buttonColor} !important;
                        font-size: 1.2em !important;
                        border: none !important;
                        padding: 12px 12px !important;
                        cursor: pointer !important;
                        position: fixed;
                        top: 93% !important;
                        left: 81.8%; !important;
                        border-radius: 5px !important;
                        transform: translateX(-50%);
                        z-index: 10004 !important;
                    }
                    #radio-toggle:hover {
                        background: ${style.buttonHoverBg} !important;
                    }
                `;
            }
        }
    };

    const createCustomButtons = () => {
        const container = document.createElement('div');
        container.id = 'custom-buttons';

        const themeSwitcher = document.createElement('button');
        themeSwitcher.id = 'theme-switcher';
        themeSwitcher.textContent = `Thema: ${themes[currentThemeIndex]}`;
        themeSwitcher.addEventListener('click', nextTheme);

        container.appendChild(themeSwitcher);

        const existingContainer = document.querySelector('#custom-buttons');
        if (existingContainer) {
            existingContainer.replaceWith(container);
        } else {
            document.body.appendChild(container);
        }
    };

    const debounce = (func, wait) => {
        let timeout;
        return (...args) => {
            clearTimeout(timeout);
            timeout = setTimeout(() => func(...args), wait);
        };
    };

    const initialize = () => {
        loadFontAwesome();
        loadGoogleFonts();
        setFavicon();
        createCustomButtons();
        applyTheme(themes[currentThemeIndex]);

        document.addEventListener('keydown', (e) => {
            if (e.ctrlKey && e.key === 't') {
                e.preventDefault();
                nextTheme();
            }
        });

        const targetNode = document.body;
        const observer = new MutationObserver(debounce(() => {
            if (document.querySelector('[id^="keycode-"]')) {
                updateButtons();
                applyTheme(themes[currentThemeIndex]);
            }
        }, 200));
        observer.observe(targetNode, { childList: true, subtree: true });
    };

    const onLoad = () => {
        if (document.readyState === 'complete') {
            initialize();
        } else {
            window.addEventListener('load', initialize);
        }
    };

    onLoad();

    if (!document.querySelector('#radio-toggle')) {
        const radioToggle = document.createElement('button');
        radioToggle.id = 'radio-toggle';
        radioToggle.textContent = 'Radio';
        document.body.appendChild(radioToggle);

        let isPlaying = false;
        const audio = new Audio('https://stream.joe.nl/joe/aachigh');

        audio.addEventListener('error', () => {
            console.warn('Audio error detected, resetting playback');
            if (isPlaying) {
                audio.load();
                audio.play().catch(error => console.warn('Retry failed:', error));
            }
        });

        audio.addEventListener('ended', () => {
            if (isPlaying) {
                audio.currentTime = 0;
                audio.play().catch(error => console.warn('Loop failed:', error));
            }
        });

        radioToggle.addEventListener('click', () => {
            if (isPlaying) {
                audio.pause();
                radioToggle.textContent = 'Radio';
            } else {
                audio.play().catch(error => console.warn('Afspelen mislukt:', error));
                radioToggle.textContent = 'Pauzeer';
            }
            isPlaying = !isPlaying;
        });

        const styleElement = document.createElement('style');
        styleElement.id = 'radio-toggle-style';
        const style = themeStyles[themes[currentThemeIndex]];
        styleElement.textContent = `
            #radio-toggle {
                background: ${style.buttonBg} !important;
                color: ${style.buttonColor} !important;
                font-size: 1.2em !important;
                border: none !important;
                padding: 12px 12px !important;
                cursor: pointer !important;
                position: fixed;
                border-radius: 5px !important;
                top: 93% !important;
                left: 81.8%; !important;
                transform: translateX(-50%);
                z-index: 10004 !important;
            }
            #radio-toggle:hover {
                background: ${style.buttonHoverBg} !important;
            }
        `;
        document.head.appendChild(styleElement);
    }
})();