// ==UserScript==
// @name         DeepL UI Cleaner
// @namespace    http://tampermonkey.net/
// @version      0.3
// @description  Streamlines DeepL's interface for translation-focused use by removing footers, cookie banners, and adding toggle buttons for sidebar and header
// @match        https://www.deepl.com/*
// @license      Unlicense
// @grant        none
// @run-at       document-start
// @downloadURL none
// ==/UserScript==

(function() {
    'use strict';

    // Define selectors for target elements
    const TARGETS = {
        footer: 'footer, .relative.bg-neutral-next-50 > .mobile\\:hidden',
        leftSidebar: '.md\\:block.bg-white.border-e[class*="w-["][class*="px]"].h-full.hidden[class*="start-0"][class*="border-neutral-next-100"]',
        topHeader: '[class*="BasePageHeader-module--container"]',
        cookieBanner: '[id*="cookieBanner"], [class*="cookieBanner"]',
        writePageElements: '.bg-white.px-0[class*="xl:px-["][class*="px]"][class*="md:px-["][class*="px]"][class*="min-[1280px]:px-["][class*="px]"], .mobile\\:hidden.p-8.px-0[class*="xl:px-["][class*="px]"][class*="md:px-["][class*="px]"][class*="min-[1280px]:px-["][class*="px]"]'
    };

    // Create and inject CSS styles
    function injectStyles() {
        const style = document.createElement('style');
        style.textContent = `
            /* Hide sidebar, header, cookie banner, and write page elements by default */
            ${TARGETS.leftSidebar}, ${TARGETS.topHeader}, ${TARGETS.cookieBanner}, ${TARGETS.writePageElements} { display: none !important; }

            /* Style for toggle buttons */
            .toggle-button {
                position: fixed;
                z-index: 10000;
                width: 2em;
                height: 2em;
                background-color: rgba(240, 240, 240, 0.7);
                border: 1px solid #ccc;
                border-radius: 50%;
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 16px;
                transition: all 0.3s;
            }
            .toggle-button:hover {
                background-color: rgba(220, 220, 220, 0.9);
            }
        `;
        (document.head || document.documentElement).appendChild(style);
    }

    // Remove footer, cookie banner, and write page elements
    function removeElements() {
        Object.entries(TARGETS).forEach(([key, selector]) => {
            const elements = document.querySelectorAll(selector);
            elements.forEach(element => {
                if (key === 'footer' || key === 'cookieBanner' || key === 'writePageElements') {
                    element.remove();
                    console.log(`${key} removed`);
                }
            });
        });
    }

    // Create a toggle button
    function createToggleButton(showIcon, hideIcon, onClick) {
        const button = document.createElement('button');
        button.className = 'toggle-button';
        button.textContent = showIcon;
        button.addEventListener('click', onClick);
        return button;
    }

    // Function to adjust button positions
    function adjustButtonPositions() {
        const header = document.querySelector(TARGETS.topHeader);
        const headerVisible = header && getComputedStyle(header).display !== 'none';
        const topPosition = headerVisible ? `${header.offsetHeight}px` : '0.5em';

        document.querySelectorAll('.toggle-button').forEach(button => {
            button.style.top = topPosition;
        });
    }

    // Toggle visibility of elements
    function toggleElementVisibility(selector, button, showIcon, hideIcon) {
        const elements = document.querySelectorAll(selector);
        console.log(`Toggling visibility for ${selector}, found ${elements.length} elements`);
        let isVisible = false;
        elements.forEach(element => {
            const display = getComputedStyle(element).display;
            console.log(`Current display for element: ${display}`);
            if (display === 'none') {
                element.style.setProperty('display', 'block', 'important');
                isVisible = true;
            } else {
                element.style.setProperty('display', 'none', 'important');
            }
        });
        button.textContent = isVisible ? hideIcon : showIcon;
        console.log(`Button text set to: ${button.textContent}`);

        // Adjust button positions after toggling
        setTimeout(adjustButtonPositions, 0);
    }

    // Initialize the script
    function init() {
        // Remove unwanted elements
        removeElements();

        // Create and position sidebar toggle button
        const sidebarButton = createToggleButton('≡', '×', () => toggleElementVisibility(TARGETS.leftSidebar, sidebarButton, '≡', '×'));
        sidebarButton.style.left = '0.5em';
        document.body.appendChild(sidebarButton);

        // Create and position header toggle button
        const headerButton = createToggleButton('▼', '▲', () => toggleElementVisibility(TARGETS.topHeader, headerButton, '▼', '▲'));
        headerButton.style.left = '3em';
        document.body.appendChild(headerButton);

        // Initial adjustment of button positions
        adjustButtonPositions();

        // Set up MutationObserver to handle dynamically added elements
        const observerConfig = { childList: true, subtree: true };
        const observer = new MutationObserver(() => {
            removeElements();
            adjustButtonPositions();
        });
        observer.observe(document.body, observerConfig);

        console.log('DeepL UI Adjuster initialized');
    }

    // Inject styles immediately
    injectStyles();

    // Run initialization when DOM is ready
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', init);
    } else {
        init();
    }
})();