/**
 * Opens links in a dialog, either by key combinations, holding the middle mouse button or context menu
 * Forum link: https://forum.vivaldi.net/topic/92501/open-in-dialog-mod?_=1717490394230
 */
(() => {
    const ICON_CONFIG = {
            linkIcon: '', // if set, an icon shows up after links - example values 'fa-solid fa-up-right-from-square', 'fa-solid fa-circle-info', 'fa-regular fa-square' search for other icons: https://fontawesome.com/search?o=r&ic=free&s=solid&ip=classic
            linkIconInteractionOnHover: true, // if false, you have to click the icon to show the dialog - if true, the dialog shows on mouseenter
            showIconDelay: 250, // set to 0 to disable - delays showing the icon on hovering a link
            showDialogOnHoverDelay: 250 // set to 0 to disable - delays showing the dialog on hovering the linkIcon
        },
        CONTEXT_MENU_CONFIG = {
            menuPrefix: '[Dialog Tab]',
            linkMenuTitle: 'Open link',
            searchMenuTitle: 'Search by "%s"',
            selectSearchMenuTitle: 'Search with'
        };

    // Wait for the browser to come to a ready state
    setTimeout(function waitDialog() {
        const browser = document.getElementById('browser');
        if (!browser) {
            return setTimeout(waitDialog, 300);
        }
        new DialogMod();
    }, 300);

    class DialogMod {
        webviews = new Map();
        iconUtils = new IconUtils();
        searchEngineUtils = new SearchEngineUtils(
            (url) => this.dialogTab(url),
            (engineId, searchText) => this.dialogTabSearch(engineId, searchText),
            CONTEXT_MENU_CONFIG
        );
        KEYBOARD_SHORTCUTS = {
            'Ctrl+Alt+Period': this.searchForSelectedText.bind(this),
            'Ctrl+Shift+F': this.searchForSelectedText.bind(this),
            Esc: () => {
                if (!this.webviews.size) return;

                const webviewValues = Array.from(this.webviews.values());
                let webviewData = webviewValues.at(-1);
                if (!webviewData.fromPanel) {
                    const tabId = Number(document.querySelector('.active.visible.webpageview webview').tab_id);
                    webviewData = webviewValues.findLast(_data => _data.tabId === tabId);
                }
                webviewData && this.removeDialog(webviewData.webview.id);
            }
        };

        constructor() {
            // Setup keyboard shortcuts
            vivaldi.tabsPrivate.onKeyboardShortcut.addListener(this.keyCombo.bind(this));

            new WebsiteInjectionUtils(
                (navigationDetails) => this.getWebviewConfig(navigationDetails),
                (url, fromPanel) => this.dialogTab(url, fromPanel),
                ICON_CONFIG
            );
        }

        /**
         * Finds the correct configuration for showing the dialog
         */
        getWebviewConfig(navigationDetails) {
            if (navigationDetails.frameType !== "outermost_frame") return {webview: null, fromPanel: false};

            // first dialog from the tab
            let webview = document.querySelector(`webview[tab_id="${navigationDetails.tabId}"]`);
            if (webview) return {webview, fromPanel: false};

            // first dialog from the webpanel
            webview = document.querySelector(`.webpanel-content webview[src*="${navigationDetails.url}"]`);
            if (webview) return {webview, fromPanel: true};

            // follow-up dialog from the webpanel
            webview = Array.from(this.webviews.values()).find(view => view.fromPanel)?.webview;
            if (webview) return {webview, fromPanel: true};

            // follow-up dialog from tab
            const lastWebviewId = document.querySelector('.active.visible.webpageview .dialog-container:last-of-type webview')?.id;
            return {webview: this.webviews.get(lastWebviewId)?.webview, fromPanel: false};
        }

        /**
         * Open Default Search Engine in Dialog and search for the selected text
         * @returns {Promise<void>}
         */
        async searchForSelectedText() {
            const tabs = await chrome.tabs.query({active: true});
            vivaldi.utilities.getSelectedText(tabs[0].id, (text) => this.dialogTabSearch(this.searchEngineUtils.defaultSearchId, text));
        };

        /**
         * Prepares url for search, calls dailogTab function
         * @param {String} engineId engine id of the engine to be used
         * @param {int} selectionText the text to search
         */
        async dialogTabSearch(engineId, selectionText) {
            let searchRequest = await vivaldi.searchEngines.getSearchRequest(engineId, selectionText);
            this.dialogTab(searchRequest.url);
        }

        /**
         * Handle a potential keyboard shortcut (copy from KeyboardMachine)
         * @param {number} id I don't know what this does, but it's an extra argument
         * @param {String} combination written in the form (CTRL+SHIFT+ALT+KEY)
         */
        keyCombo(id, combination) {
            const customShortcut = this.KEYBOARD_SHORTCUTS[combination];
            if (customShortcut) {
                customShortcut();
            }
        }

        /**
         * Removes the dialog for a giveb webview
         * @param webviewId The id of the webview
         */
        removeDialog(webviewId) {
            const data = this.webviews.get(webviewId);
            if (data) {
                chrome.tabs.query({}, (tabs) => {
                    const tab = tabs.find(tab => tab.vivExtData && tab.vivExtData.includes(`${webviewId}tabId`));
                    if (tab) chrome.tabs.remove(tab.id);
                });

                data.divContainer.remove();
                chrome.tabs.onRemoved.removeListener(data.tabCloseListener);
                this.webviews.delete(webviewId);
            }
        }

        /**
         * Checks if the current window is the correct window to show the dialog and then opens the dialog
         * @param {string} linkUrl the url to load
         * @param {boolean} fromPanel indicates whether the dialog is opened from a panel
         */
        dialogTab(linkUrl, fromPanel = undefined) {
            chrome.windows.getLastFocused((window) => {
                if (window.id === vivaldiWindowId && window.state !== chrome.windows.WindowState.MINIMIZED) {
                    this.showDialog(linkUrl, fromPanel);
                }
            });
        }

        /**
         * Opens a link in a dialog like display in the current visible tab
         * @param {string} linkUrl the url to load
         * @param {boolean} fromPanel indicates whether the dialog is opened from a panel
         */
        showDialog(linkUrl, fromPanel) {
            const dialogContainer = document.createElement('div'),
                dialogTab = document.createElement('div'),
                webview = document.createElement('webview'),
                webviewId = `dialog-${this.getWebviewId()}`,
                progressBar = new ProgressBar(webviewId),
                optionsContainer = document.createElement('div');

            if (fromPanel === undefined && this.webviews.size !== 0) {
                fromPanel = Array.from(this.webviews.values()).at(-1).fromPanel;
            }

            const tabId = !fromPanel ? Number(document.querySelector('.active.visible.webpageview webview').tab_id) : null;

            this.webviews.set(webviewId, {
                divContainer: dialogContainer,
                webview: webview,
                fromPanel: fromPanel,
                tabId: tabId
            });

            // remove dialogs when tab is closed without closing dialogs
            if (!fromPanel) {
                const clearWebviews = (closedTabId) => {
                    if (tabId === closedTabId) {
                        this.webviews.forEach((view, key) => view.tabCloseListener === clearWebviews && this.removeDialog(key));
                        chrome.tabs.onRemoved.removeListener(clearWebviews);
                    }
                };
                this.webviews.get(webviewId).tabCloseListener = clearWebviews;
                chrome.tabs.onRemoved.addListener(clearWebviews);
            }

            //#region dialogTab properties
            dialogTab.setAttribute('class', 'dialog-tab');
            dialogTab.style.width = 85 - 5 * this.webviews.size + '%';
            dialogTab.style.height = 95 - 5 * this.webviews.size + '%';
            //#endregion

            //#region optionsContainer properties
            optionsContainer.setAttribute('class', 'options-container');
            optionsContainer.innerHTML = this.iconUtils.ellipsis;

            let timeout;
            optionsContainer.addEventListener('mouseover', () => {
                if (optionsContainer.children.length === 1) {
                    optionsContainer.innerHTML = '';
                    this.showWebviewOptions(webviewId, optionsContainer);
                }
                clearTimeout(timeout);
            });
            optionsContainer.addEventListener('mouseleave', () => {
                timeout = setTimeout(() => optionsContainer.innerHTML = this.iconUtils.ellipsis, 1500);
            });
            //#endregion

            //#region webview properties
            webview.id = webviewId;
            webview.tab_id = `${webviewId}tabId`;
            webview.setAttribute('src', linkUrl);

            webview.addEventListener('loadstart', () => {
                webview.style.backgroundColor = 'var(--colorBorder)';
                progressBar.start();

                const input = document.getElementById(`input-${webview.id}`);
                if (input !== null) {
                    input.value = webview.src;
                }
            });
            webview.addEventListener('loadstop', () => progressBar.clear(true));
            fromPanel && webview.addEventListener('mousedown', (event) => event.stopPropagation());
            //#endregion

            //#region dialogContainer properties
            dialogContainer.setAttribute('class', 'dialog-container');

            let stopEvent = (event) => {
                event.preventDefault();
                event.stopPropagation();

                if (event.target.id === `input-${webviewId}`) {
                    const inputElement = event.target;

                    // Calculate the cursor position based on the click location
                    const offsetX = event.clientX - inputElement.getBoundingClientRect().left;

                    // Create a canvas to measure text width
                    const context = document.createElement('canvas').getContext('2d');
                    context.font = window.getComputedStyle(inputElement).font;

                    // Measure the width of the text up to each character
                    let cursorPosition = 0,
                        textWidth = 0;
                    for (let i = 0; i < inputElement.value.length; i++) {
                        const charWidth = context.measureText(inputElement.value[i]).width;
                        if (textWidth + charWidth > offsetX) {
                            cursorPosition = i;
                            break;
                        }
                        textWidth += charWidth;
                        cursorPosition = i + 1;
                    }

                    // Manually focus the input element and set the cursor position
                    inputElement.focus({preventScroll: true});
                    inputElement.setSelectionRange(cursorPosition, cursorPosition);
                }
            };

            fromPanel && document.body.addEventListener('pointerdown', stopEvent);

            dialogContainer.addEventListener('click', (event) => {
                if (event.target === dialogContainer) {
                    fromPanel && document.body.removeEventListener('pointerdown', stopEvent);
                    this.removeDialog(webviewId);
                }
            });

            //#endregion

            dialogTab.appendChild(optionsContainer);
            dialogTab.appendChild(progressBar.element);
            dialogTab.appendChild(webview);

            dialogContainer.appendChild(dialogTab);

            // Get for current tab and append divContainer
            fromPanel
                ? document.querySelector('#browser').appendChild(dialogContainer)
                : document.querySelector('.active.visible.webpageview').appendChild(dialogContainer);
        }

        /**
         * Displays open in tab buttons and current url in input element
         * @param {string} webviewId is the id of the webview
         * @param {Object} thisElement the current instance divOptionContainer (div) element
         */
        showWebviewOptions(webviewId, thisElement) {
            let inputId = `input-${webviewId}`,
                data = this.webviews.get(webviewId),
                webview = data ? data.webview : undefined;
            if (webview && document.getElementById(inputId) === null) {
                const input = document.createElement('input', 'text'),
                    VALID_URL_PREFIXES = [
                        'http://',
                        'https://',
                        'file://',
                        'vivaldi://'
                    ],
                    isValidUrl = (url) => VALID_URL_PREFIXES.some(prefix => url.startsWith(prefix) || url === 'about:blank');

                input.value = webview.src;
                input.id = inputId;
                input.setAttribute('class', 'dialog-input');

                input.addEventListener('keydown', async (event) => {
                    if (event.key === 'Enter') {
                        let value = input.value;
                        if (isValidUrl(value)) {
                            webview.src = value;
                        } else {
                            const searchRequest = await vivaldi.searchEngines.getSearchRequest(this.searchEngineUtils.defaultSearchId, value);
                            webview.src = searchRequest.url;
                        }
                    }
                });

                const fragment = document.createDocumentFragment(),
                    buttons = [
                        {content: this.iconUtils.back, action: () => webview.back()},
                        {content: this.iconUtils.forward, action: () => webview.forward()},
                        {content: this.iconUtils.reload, action: () => webview.reload()},
                        {
                            content: this.iconUtils.readerView,
                            action: this.showReaderView.bind(this, webview),
                            cls: 'reader-view-toggle'
                        },
                        {content: this.iconUtils.newTab, action: this.openNewTab.bind(this, inputId, true)},
                        {content: this.iconUtils.backgroundTab, action: this.openNewTab.bind(this, inputId, false)},
                    ];

                buttons.forEach(button => fragment.appendChild(this.createOptionsButton(button.content, button.action, button.cls || '')));
                fragment.appendChild(input);

                thisElement.append(fragment);
            }
        }

        /**
         * Create a button with default style for the web view options.
         * @param {Node | string} content the content of the button to display
         * @param {Function} clickListenerCallback the click listeners callback function
         * @param {string} cls optional additional class for the button
         */
        createOptionsButton(content, clickListenerCallback, cls = '') {
            const button = document.createElement('button');
            button.setAttribute('class', `options-button ${cls}`.trim());
            button.addEventListener('click', clickListenerCallback);

            if (typeof content === 'string') {
                button.innerHTML = content;
            } else {
                button.appendChild(content);
            }

            return button;
        }

        /**
         * Returns a random, verified id.
         */
        getWebviewId() {
            return Math.floor(Math.random() * 10000) + new Date().getTime() % 1000;
        }

        /**
         * Sets the webviews content to a reader version
         *
         * @param {webview} webview the webview to update
         */
        showReaderView(webview) {
            if (webview.src.includes('https://clearthis.page/?u=')) {
                webview.src = webview.src.replace('https://clearthis.page/?u=', '');
            } else {
                webview.src = `https://clearthis.page/?u=${webview.src}`;
            }
        }

        /**
         * Opens a new Chrome tab with specified active boolean value
         * @param {string} inputId is the id of the input containing current url
         * @param {boolean} active indicates whether the tab is active or not (background tab)
         */
        openNewTab(inputId, active) {
            const url = document.getElementById(inputId).value;
            chrome.tabs.create({url: url, active: active});
        }
    }

    class WebsiteInjectionUtils {

        constructor(getWebviewConfig, openDialog, iconConfig) {
            this.iconConfig = JSON.stringify(iconConfig);

            // inject detection of click observers
            chrome.webNavigation.onCompleted.addListener((navigationDetails) => {
                const {webview, fromPanel} = getWebviewConfig(navigationDetails);
                webview && this.injectCode(webview, fromPanel);
            });

            // react on demand to open a dialog
            chrome.runtime.onMessage.addListener((message) => {
                if (message.url) {
                    openDialog(message.url, message.fromPanel);
                }
            });
        }

        injectCode(webview, fromPanel) {
            const handler = WebsiteLinkInteractionHandler.toString(),
                instantiationCode = `
                if (!this.dialogEventListenerSet){
                    new (${handler})(${fromPanel}, ${this.iconConfig});
                    this.dialogEventListenerSet = true;
                }
            `;

            webview.executeScript({code: instantiationCode});
        }
    }

    class WebsiteLinkInteractionHandler {
        constructor(fromPanel, config) {
            this.fromPanel = fromPanel;
            this.config = config;


            this.icon = null;

            this.timers = {
                showIcon: null,
                showDialog: null,
                hideIcon: null
            }

            this.#initialize();
        }

        /**
         * Checks if a link is clicked by the middle mouse while pressing Ctrl + Alt, then fires an event with the Url
         */
        #initialize() {
            this.#setupMouseHandling();

            if (this.config.linkIcon) {
                this.#setupIconHandling();
            }
        }

        /**
         * Richtet die Maus-Event-Listener ein
         */
        #setupMouseHandling() {
            let holdTimerForMiddleClick;

            document.addEventListener('pointerdown', (event) => {
                // Check if the Ctrl key, Alt key, and mouse button were pressed
                if (event.ctrlKey && event.altKey && [0, 1].includes(event.button)) {
                    this.#callDialog(event);
                } else if (event.button === 1) {
                    holdTimerForMiddleClick = setTimeout(() => this.#callDialog(event), 500);
                }
            });

            document.addEventListener('pointerup', (event) => {
                if (event.button === 1) clearTimeout(holdTimerForMiddleClick);
            });
        }

        #setupIconHandling() {
            this.#createIcon();
            this.#createIconStyle()

            document.addEventListener('mouseover', this.debounce((event) => {
                const link = this.#getLinkElement(event);
                if (!link) return;

                clearTimeout(this.timers.hideIcon);

                requestAnimationFrame(() => {
                    const rect = link.getBoundingClientRect();
                    Object.assign(this.icon.style, {
                        display: 'block',
                        left: `${rect.right + 5}px`,
                        top: `${rect.top + window.scrollY}px`
                    });
                });

                this.icon.dataset.targetUrl = link.href;

                link.addEventListener('mouseleave', this.#hideLinkIcon.bind(this));
            }, this.config.showIconDelay));
        }

        #createIcon() {
            const icon = document.createElement('div');
            icon.className = `link-icon ${this.config.linkIcon}`;
            icon.style.display = 'none';

            if (this.config.linkIconInteractionOnHover) {
                icon.addEventListener('mouseenter', () => {
                    this.timers.showDialog = setTimeout(() => this.#sendDialogMessage(this.icon.dataset.targetUrl), this.config.showDialogOnHoverDelay);
                });
                icon.addEventListener('mouseleave', () => clearTimeout(this.timers.showDialog));
            } else {
                icon.addEventListener('click', () => this.#sendDialogMessage(this.icon.dataset.targetUrl));
                icon.addEventListener('mouseenter', () => clearTimeout(this.timers.hideIcon));
                icon.addEventListener('mouseleave', this.#hideLinkIcon.bind(this));
            }

            this.icon = icon;
            document.body.appendChild(this.icon);
        }

        #hideLinkIcon() {
            this.timers.hideIcon = setTimeout(() => {
                this.icon.style.display = 'none';
                clearTimeout(this.timers.showIcon);
            }, this.config.linkIconInteractionOnHover ? 300 : 600);
        }

        #getLinkElement(event) {
            return event.target.closest('a[href]:not([href="#"])');
        }

        #sendDialogMessage(url) {
            chrome.runtime.sendMessage({url, fromPanel: this.fromPanel});
        }

        #callDialog(event) {
            let link = this.#getLinkElement(event);
            if (link) {
                event.preventDefault();
                this.#sendDialogMessage(link.href);
            }
        };

        #createIconStyle() {
            const style = document.createElement('style');
            style.textContent = `
                .link-icon {
                    position: absolute;
                    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
                    cursor: pointer;
                    z-index: 9999;
                    transition: opacity 0.2s ease;
                }
            
                .link-icon:hover {
                    opacity: 0.9;
                }
            `;
            document.head.appendChild(style);
        }

        debounce(fn, delay) {
            let timer = null;
            return (...args) => {
                clearTimeout(timer);
                timer = setTimeout(fn.bind(this, ...args), delay);
            }
        };
    }

    /**
     * Utility class for adding and updating context menu items
     */
    class SearchEngineUtils {

        /**
         * Constructor for SearchEngineUtils
         * @param {Function} openLinkCallback - Callback for opening links
         * @param {Function} searchCallback - Callback for searching
         * @param {Object} [config={}] - Configuration options
         * @param {string} [config.menuPrefix] - Prefix for the context menu item
         * @param {string} [config.linkMenuTitle] - Titel for the link menu
         * @param {string} [config.searchMenuTitle] - title for the search menu
         * @param {string} [config.selectSearchMenuTitle] - title for the select search menu
         */
        constructor(openLinkCallback, searchCallback, config = {}) {
            this.openLinkCallback = openLinkCallback;
            this.searchCallback = searchCallback;

            this.menuPrefix = config.menuPrefix;
            this.linkMenuTitle = config.linkMenuTitle;
            this.searchMenuTitle = config.searchMenuTitle;
            this.selectSearchMenuTitle = config.selectSearchMenuTitle;

            this.createdContextMenuMap = new Map();
            this.searchEngineCollection = [];
            this.defaultSearchId = null;
            this.privateSearchId = null;

            // Cache static IDs for frequent access
            this.LINK_ID = 'dialog-tab-link';
            this.SEARCH_ID = 'search-dialog-tab';
            this.SELECT_SEARCH_ID = 'select-search-dialog-tab';

            this.#initialize();
        }

        /**
         * Initializes the context menu and listeners
         * @returns {Promise<void>}
         */
        async #initialize() {
            // Create context menu items
            this.#createContextMenuOption();

            // Initialize search engines and context menus
            this.#updateSearchEnginesAndContextMenu();

            // Update context menus when search engines change
            vivaldi.searchEngines.onTemplateUrlsChanged.addListener(() => {
                this.#removeContextMenuSelectSearch();
                this.#updateSearchEnginesAndContextMenu();
            });
        }

        /**
         * Creates context menu items to open a dialog tab
         */
        #createContextMenuOption() {
            chrome.contextMenus.create({
                id: this.LINK_ID,
                title: `${this.menuPrefix} ${this.linkMenuTitle}`,
                contexts: ['link']
            });
            chrome.contextMenus.create({
                id: this.SEARCH_ID,
                title: `${this.menuPrefix} ${this.searchMenuTitle}`,
                contexts: ['selection']
            });
            chrome.contextMenus.create({
                id: this.SELECT_SEARCH_ID,
                title: `${this.menuPrefix} ${this.selectSearchMenuTitle}`,
                contexts: ['selection']
            });

            chrome.contextMenus.onClicked.addListener((itemInfo) => {
                const {menuItemId, parentMenuItemId, linkUrl, selectionText} = itemInfo;

                if (menuItemId === this.LINK_ID) {
                    this.openLinkCallback(linkUrl);
                } else if (menuItemId === this.SEARCH_ID) {
                    const engineId = window.incognito ? this.privateSearchId : this.defaultSearchId;
                    this.searchCallback(engineId, selectionText);
                } else if (parentMenuItemId === this.SELECT_SEARCH_ID) {
                    const engineId = menuItemId.substr(parentMenuItemId.length);
                    this.searchCallback(engineId, selectionText);
                }
            });
        }

        /**
         * Updates the search engines and context menu
         */
        async #updateSearchEnginesAndContextMenu() {
            const searchEngines = await vivaldi.searchEngines.getTemplateUrls();
            this.searchEngineCollection = searchEngines.templateUrls;
            this.defaultSearchId = searchEngines.defaultSearch;
            this.privateSearchId = searchEngines.defaultPrivate;

            this.#createContextMenuSelectSearch();
        }

        /**
         * Removes sub-context menu items for select search engine menu item
         */
        #removeContextMenuSelectSearch() {
            this.createdContextMenuMap.forEach((_, engineId) => {
                const menuId = this.SELECT_SEARCH_ID + engineId;
                chrome.contextMenus.remove(menuId);
            });

            this.createdContextMenuMap.clear();
        }

        /**
         * Creates sub-context menu items for select search engine menu item
         */
        #createContextMenuSelectSearch() {
            this.searchEngineCollection.forEach((engine) => {
                if (!this.createdContextMenuMap.has(engine.guid)) {
                    chrome.contextMenus.create({
                        id: this.SELECT_SEARCH_ID + engine.guid,
                        parentId: this.SELECT_SEARCH_ID,
                        title: engine.name,
                        contexts: ['selection']
                    });
                    this.createdContextMenuMap.set(engine.guid, true);
                }
            });
        }
    }

    class ProgressBar {
        constructor(webviewId) {
            this.webviewId = webviewId;
            this.progress = 0;
            this.interval = null;
            this.element = this.#createProgressBar(webviewId);
        }

        #createProgressBar(webviewId) {
            const progressBar = document.createElement('div');
            progressBar.setAttribute('class', 'progress-bar');
            progressBar.id = `progressBar-${webviewId}`;
            return progressBar;
        }

        start() {
            this.element.style.visibility = 'visible';
            this.progress = 0;

            if (!this.interval) {
                this.interval = setInterval(() => {
                    if (this.progress >= 100) {
                        this.clear();
                    } else {
                        this.progress++;
                        this.element.style.width = this.progress + '%';
                    }
                }, 10);
            }
        }

        clear(loadStop = false) {
            if (this.interval) {
                clearInterval(this.interval);
                this.interval = null;
            }

            if (loadStop) {
                this.element.style.width = '100%';

                setTimeout(() => {
                    this.progress = 0;
                    this.element.style.visibility = 'hidden';
                    this.element.style.width = this.progress + '%';
                }, 250);
            }
        }
    }


    /**
     * Utility class to manage SVG icons
     * @class
     */
    class IconUtils {

        // Static icons
        static SVG = {
            ellipsis: '<svg xmlns="http://www.w3.org/2000/svg" height="2em" viewBox="0 0 448 512"><path d="M8 256a56 56 0 1 1 112 0A56 56 0 1 1 8 256zm160 0a56 56 0 1 1 112 0 56 56 0 1 1 -112 0zm216-56a56 56 0 1 1 0 112 56 56 0 1 1 0-112z"/></svg>',
            readerView: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M3 4h10v1H3zM3 6h10v1H3zM3 8h10v1H3zM3 10h6v1H3z"></path></svg>',
            newTab: '<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32H320zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z"/></svg>',
            backgroundTab: '<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512"><path d="M384 32c35.3 0 64 28.7 64 64V416c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96C0 60.7 28.7 32 64 32H384zM160 144c-13.3 0-24 10.7-24 24s10.7 24 24 24h94.1L119 327c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l135-135V328c0 13.3 10.7 24 24 24s24-10.7 24-24V168c0-13.3-10.7-24-24-24H160z"/></svg>'
        };

        // Vivaldi icons
        static VIVALDI_BUTTONS = [{
            name: 'back',
            buttonName: 'Back',
            fallback: '<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512"><path d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.2 288 416 288c17.7 0 32-14.3 32-32s-14.3-32-32-32l-306.7 0L214.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z"/></svg>'
        }, {
            name: 'forward',
            buttonName: 'Forward',
            fallback: '<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512"><path d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"/></svg>'
        }, {
            name: 'reload',
            buttonName: 'Reload',
            fallback: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M125.7 160H176c17.7 0 32 14.3 32 32s-14.3 32-32 32H48c-17.7 0-32-14.3-32-32V64c0-17.7 14.3-32 32-32s32 14.3 32 32v51.2L97.6 97.6c87.5-87.5 229.3-87.5 316.8 0s87.5 229.3 0 316.8s-229.3 87.5-316.8 0c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0c62.5 62.5 163.8 62.5 226.3 0s62.5-163.8 0-226.3s-163.8-62.5-226.3 0L125.7 160z"/></svg>'
        }];

        #initialized = false;
        #iconMap = new Map();


        constructor() {
            this.#initializeStaticIcons();
        }

        /**
         * Initializes static icons
         */
        #initializeStaticIcons() {
            Object.entries(IconUtils.SVG).forEach(([key, value]) => {
                this.#iconMap.set(key, value);
            });
        }

        /**
         * Initialize Vivaldi icons from the DOM or use fallback
         */
        #initializeVivaldiIcons() {
            if (this.#initialized) return;

            IconUtils.VIVALDI_BUTTONS.forEach(button => {
                this.#iconMap.set(button.name, this.#getVivaldiButton(button.buttonName, button.fallback));
            });

            this.#initialized = true;
        }

        /**
         * Gets the SVG of a Vivaldi button or returns the fallback
         * @param {string} buttonName - name of the button in Vivali ui
         * @param {string} fallbackSVG - fallback svg if no icon is found
         * @returns {string} - the SVG as a string
         */
        #getVivaldiButton(buttonName, fallbackSVG) {
            const svg = document.querySelector(`.button-toolbar [name="${buttonName}"] svg`);
            return svg ? svg.cloneNode(true).outerHTML : fallbackSVG;
        }

        /**
         * Get icon by name
         * @param {string} name - Name of the icon
         * @returns {string} - Icon as SVG string
         */
        getIcon(name) {
            if (!this.#initialized && IconUtils.VIVALDI_BUTTONS.some(btn => btn.name === name)) {
                this.#initializeVivaldiIcons();
            }

            return this.#iconMap.get(name) || '';
        }

        get ellipsis() {
            return this.getIcon('ellipsis');
        }

        get back() {
            return this.getIcon('back');
        }

        get forward() {
            return this.getIcon('forward');
        }

        get reload() {
            return this.getIcon('reload');
        }

        get readerView() {
            return this.getIcon('readerView');
        }

        get newTab() {
            return this.getIcon('newTab');
        }

        get backgroundTab() {
            return this.getIcon('backgroundTab');
        }
    }
})
();