content.js

(() => {
    // Browser standard zoom levels
    const ZOOM_LEVELS = [0.25, 0.33, 0.5, 0.67, 0.75, 0.8, 0.9, 1.0, 1.1, 1.25, 1.5, 1.75, 2.0, 2.5, 3.0, 4.0, 5.0];
    const DEFAULT_INDEX = ZOOM_LEVELS.indexOf(1.0);

    let currentIndex = DEFAULT_INDEX;
    let uiElement = null;
    let uiTimeout = null;
    let lastDetectedZoom = 1.0;
    let extensionEnabled = true;
    let scrollDirection = 'normal'; // 'normal' or 'inverted'

    const domain = window.location.hostname;

    // Check if extension is enabled and get scroll direction on startup
    try {
        chrome.storage.sync.get(['extensionEnabled', 'scrollDirection'], result => {
            extensionEnabled = result.extensionEnabled !== false; // Default to true
            scrollDirection = result.scrollDirection || 'normal'; // Default to normal
        });
    } catch (error) {
        // Extension context invalidated, use defaults
    }

    // Listen for messages from popup
    try {
        chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
            if (request.action === 'toggleExtension') {
                extensionEnabled = request.enabled;
            } else if (request.action === 'updateScrollDirection') {
                scrollDirection = request.direction;
            }
        });
    } catch (error) {
        // Extension context invalidated, message listener not available
    }

    // Lazy UI creation
    const getUI = () => {
        if (uiElement) return uiElement;

        uiElement = document.createElement('div');
        uiElement.id = 'czui';
        uiElement.innerHTML = `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg><span>100%</span><button>−</button><button>+</button><button>Reset</button>`;

        // Inline critical styles
        uiElement.setAttribute('style', 'position:fixed;top:10px;right:10px;background:rgba(255,255,255,.98);backdrop-filter:blur(10px);border:1px solid rgba(0,0,0,.1);border-radius:8px;padding:6px 8px;display:none;align-items:center;gap:8px;font:13px -apple-system,system-ui;color:#007AFF;box-shadow:0 3px 12px rgba(0,0,0,.15);z-index:999999');

        // Minimal dynamic styles
        const style = document.createElement('style');
        style.textContent = '#czui button{background:0;border:1px solid #007AFF;border-radius:4px;width:24px;height:24px;cursor:pointer;font-size:16px;color:#007AFF;display:flex;align-items:center;justify-content:center;padding:0}#czui button:last-child{border:0;padding:4px 12px;color:#007AFF;width:auto}#czui button:hover{background:rgba(0,122,255,.1)}#czui span{min-width:45px;text-align:center;font-weight:500}#czui svg{color:#007AFF}';
        document.head.appendChild(style);

        document.body.appendChild(uiElement);

        // Event delegation
        uiElement.addEventListener('click', e => {
            const btn = e.target.closest('button');
            if (!btn) return;

            const btnIndex = Array.from(uiElement.querySelectorAll('button')).indexOf(btn);
            if (btnIndex === 0) setZoomIndex(Math.max(0, currentIndex - 1));
            else if (btnIndex === 1) setZoomIndex(Math.min(ZOOM_LEVELS.length - 1, currentIndex + 1));
            else if (btnIndex === 2) setZoomIndex(DEFAULT_INDEX);
        });

        return uiElement;
    };

    // Find closest zoom level
    const findClosestIndex = zoom => {
        let closest = 0;
        let minDiff = Math.abs(zoom - ZOOM_LEVELS[0]);

        for (let i = 1; i < ZOOM_LEVELS.length; i++) {
            const diff = Math.abs(zoom - ZOOM_LEVELS[i]);
            if (diff < minDiff) {
                minDiff = diff;
                closest = i;
            }
        }
        return closest;
    };

    // Apply zoom by index
    const setZoomIndex = index => {
        currentIndex = index;
        const zoom = ZOOM_LEVELS[index];
        document.documentElement.style.zoom = zoom;
        try {
            chrome.storage.local.set({ [`z_${domain}`]: zoom });
        } catch (error) {
            // Extension context invalidated, zoom still works without persistence
        }
        showUI(zoom);
    };

    // Show UI with debouncing
    const showUI = zoom => {
        const ui = getUI();
        ui.style.display = 'flex';
        ui.children[1].textContent = `${Math.round(zoom * 100)}%`;

        clearTimeout(uiTimeout);
        uiTimeout = setTimeout(() => ui.style.display = 'none', 3000);
    };

    // Optimized native zoom detection
    const checkNativeZoom = () => {
        const zoom = parseFloat(getComputedStyle(document.documentElement).zoom) || 1;
        if (Math.abs(zoom - lastDetectedZoom) > 0.01) {
            lastDetectedZoom = zoom;
            currentIndex = findClosestIndex(zoom);
            try {
                chrome.storage.local.set({ [`z_${domain}`]: zoom });
            } catch (error) {
                // Extension context invalidated, zoom still works without persistence
            }
            showUI(zoom);
        }
    };

    // Initialize
    try {
        chrome.storage.local.get([`z_${domain}`], result => {
            const saved = result[`z_${domain}`];
            if (saved) {
                currentIndex = findClosestIndex(saved);
                document.documentElement.style.zoom = saved;
                lastDetectedZoom = saved;
            }
        });
    } catch (error) {
        // Extension context invalidated, start with defaults
    }

    // Wheel handler with RAF throttling
    let wheelFrame = null;
    document.addEventListener('wheel', e => {
        if (!e.metaKey || !extensionEnabled) return;

        e.preventDefault();

        if (wheelFrame) return;
        wheelFrame = requestAnimationFrame(() => {
            let direction = e.deltaY > 0 ? 1 : -1;
            // Invert direction if scroll direction is set to inverted
            if (scrollDirection === 'inverted') {
                direction = -direction;
            }
            setZoomIndex(Math.max(0, Math.min(ZOOM_LEVELS.length - 1, currentIndex + direction)));
            wheelFrame = null;
        });
    }, { passive: false });

    // Keyboard handler
    document.addEventListener('keydown', e => {
        if (!e.metaKey || !extensionEnabled) return;

        switch (e.key) {
            case '0':
                e.preventDefault();
                setZoomIndex(DEFAULT_INDEX);
                break;
            case '+':
            case '=':
                e.preventDefault();
                setZoomIndex(Math.min(ZOOM_LEVELS.length - 1, currentIndex + 1));
                break;
            case '-':
                e.preventDefault();
                setZoomIndex(Math.max(0, currentIndex - 1));
                break;
        }
    });

    // Native zoom detection - only when page visible
    let checkInterval;
    document.addEventListener('visibilitychange', () => {
        if (document.hidden) {
            clearInterval(checkInterval);
        } else {
            checkInterval = setInterval(checkNativeZoom, 1000);
        }
    });

    if (!document.hidden) {
        checkInterval = setInterval(checkNativeZoom, 1000);
    }
})();