// ==UserScript==
// @name         Scroll Marker with Transparent Layer and Toggle
// @namespace    http://tampermonkey.net/
// @version      2.4
// @description  Shows scroll markers and a transparent overlay in scroll direction. Toggle with Alt+Q.
// @author       X
// @match        *://*/*
// @grant        none
// @run-at       document-end
// ==/UserScript==

(function () {
    'use strict';

    const markerColor = 'red';
    const markerDuration = 350;
    const toggleOverlayDuration = 1000;
    const shortcutKey = 'KeyQ';
    const shortcutModifier = 'altKey';
    const markerHeight = '4px';
    const throttleDelay = 100;

    let enabled = true;
    let previousScrollY = window.scrollY;
    let throttleTimeout = null;

    function showMarker(yPos, direction) {
        if (!enabled) return;

        const screenY = yPos - window.scrollY;
        if (screenY < 0 || screenY > window.innerHeight) return;

        // Marker
        const marker = document.createElement('div');
        marker.style.position = 'fixed';
        marker.style.left = '0';
        marker.style.width = '100%';
        marker.style.height = markerHeight;
        marker.style.backgroundColor = markerColor;
        marker.style.top = `${screenY}px`;
        marker.style.zIndex = '999999';
        marker.style.pointerEvents = 'none';
        marker.style.transition = 'opacity 0.1s';
        document.body.appendChild(marker);

        // Transparent layer
        const layer = document.createElement('div');
        layer.style.position = 'fixed';
        layer.style.left = '0';
        layer.style.width = '100%';
        layer.style.backgroundColor = markerColor;
        layer.style.opacity = '0.1';
        layer.style.pointerEvents = 'none';
        layer.style.zIndex = '999998';

        if (direction === 'down') {
            // Layer from marker to bottom
            const layerTop = screenY + parseInt(markerHeight);
            layer.style.top = `${layerTop}px`;
            layer.style.height = `calc(100vh - ${layerTop}px)`;
        } else {
            // Layer from top to marker
            layer.style.top = '0';
            layer.style.height = `${screenY}px`;
        }

        document.body.appendChild(layer);

        // Remove after delay
        setTimeout(() => {
            marker.style.opacity = '0';
            layer.style.opacity = '0';
            setTimeout(() => {
                marker.remove();
                layer.remove();
            }, 100);
        }, markerDuration);
    }

    function showToggleOverlay(stateText) {
        const overlay = document.createElement('div');
        overlay.textContent = `Scroll marker ${stateText}`;
        overlay.style.position = 'fixed';
        overlay.style.top = '50%';
        overlay.style.left = '50%';
        overlay.style.transform = 'translate(-50%, -50%)';
        overlay.style.background = stateText === 'enabled' ? 'green' : 'red'; // Change color based on state
        overlay.style.color = '#fff';
        overlay.style.padding = '10px';
        overlay.style.borderRadius = '6px';
        overlay.style.fontSize = '16px';
        overlay.style.zIndex = '1000000';
        overlay.style.pointerEvents = 'none';
        overlay.style.transition = 'opacity 0.3s';
        document.body.appendChild(overlay);

        setTimeout(() => {
            overlay.style.opacity = '0';
            setTimeout(() => overlay.remove(), 300);
        }, toggleOverlayDuration);
    }

    function handleScroll() {
        const currentY = window.scrollY;
        const deltaY = currentY - previousScrollY;

        if (deltaY > 0) {
            const previousBottom = previousScrollY + window.innerHeight;
            showMarker(previousBottom, 'down');
        } else if (deltaY < 0) {
            const previousTop = previousScrollY;
            showMarker(previousTop, 'up');
        }

        previousScrollY = currentY;
    }

    window.addEventListener('scroll', () => {
        if (throttleTimeout) return;

        throttleTimeout = setTimeout(() => {
            handleScroll();
            throttleTimeout = null;
        }, throttleDelay);
    }, { passive: true });

    window.addEventListener('keydown', (e) => {
        if (e[shortcutModifier] && e.code === shortcutKey) {
            enabled = !enabled;
            showToggleOverlay(enabled ? 'enabled' : 'disabled');
        }
    });
})();