// ==UserScript==
// @name         高亮特定文字
// @namespace    http://tampermonkey.net/
// @version      0.4
// @description  突出显示网页上的特定单词
// @license MIT
// @match        *://*/*
// @grant        none
// @downloadURL none
// ==/UserScript==

(function() {
    'use strict';

    // 默认配置
    let defaultConfig = {
        searchWords: ['example1', 'example2', 'example3'],
        highlightColor: '#ffff00' // 默认高亮颜色为黄色
    };

    // 读取配置
    function getConfig() {
        let config = localStorage.getItem('highlightConfig');
        return config ? JSON.parse(config) : defaultConfig;
    }

    // 保存配置
    function saveConfig(config) {
        localStorage.setItem('highlightConfig', JSON.stringify(config));
    }

    // 突出显示文本
    function highlightText(textNodes, searchWords, highlightColor) {
        for (let node of textNodes) {
            let nodeText = node.nodeValue;
            let newHtml = nodeText;
            for (let word of searchWords) {
                let regex = new RegExp(`(${word})`, 'gi');
                newHtml = newHtml.replace(regex, `<mark style="background-color: ${highlightColor};">$1</mark>`);
            }
            if (newHtml !== nodeText) {
                let newNode = document.createElement('span');
                newNode.innerHTML = newHtml;
                node.parentNode.replaceChild(newNode, node);
            }
        }
    }

    // 获取文本节点
    function getTextNodes(node) {
        let textNodes = [];
        let walker = document.createTreeWalker(node, NodeFilter.SHOW_TEXT, null, false);
        let currentNode;
        while ((currentNode = walker.nextNode())) {
            textNodes.push(currentNode);
        }
        return textNodes;
    }

    // 页面加载后进行高亮
    function highlightOnPage() {
        let body = document.body;
        let config = getConfig();
        let textNodes = getTextNodes(body);
        highlightText(textNodes, config.searchWords, config.highlightColor);
    }

    // 创建按钮
    function createButton() {
        let config = getConfig();  // 获取当前配置，包括高亮颜色

        // 删除旧的设置按钮（如果存在）
        let oldButton = document.getElementById('highlightButton');
        if (oldButton) {
            oldButton.remove();
        }

        let button = document.createElement('div');
        button.id = 'highlightButton';
        button.innerHTML = '设置高亮';
        button.style = `
            position: fixed;
            left: 1vw;
            top: 1vw;
            padding: 0.5vw 1vw;
            background-color: ${config.highlightColor}; /* 设置按钮背景颜色 */
            color: white;
            cursor: pointer;
            z-index: 1000;
            border-radius: 0.5vw;
            box-shadow: 0px 0px 1vw rgba(0, 0, 0, 0.5);
            user-select: none;
            opacity: 0.7;
            transition: opacity 0.3s;
            font-size: 0.8vw;
        `;
        button.onmouseover = () => { button.style.opacity = '1.0'; };
        button.onmouseout = () => { button.style.opacity = '0.7'; };
        document.body.appendChild(button);

        let isDragging = false;

        button.onmousedown = function(event) {
            let shiftX = event.clientX - button.getBoundingClientRect().left;
            let shiftY = event.clientY - button.getBoundingClientRect().top;

            function moveAt(pageX, pageY) {
                button.style.left = pageX - shiftX + 'px';
                button.style.top = pageY - shiftY + 'px';
            }

            function onMouseMove(event) {
                isDragging = true;
                moveAt(event.pageX, event.pageY);
            }

            document.addEventListener('mousemove', onMouseMove);

            button.onmouseup = function() {
                document.removeEventListener('mousemove', onMouseMove);
                button.onmouseup = null;
                if (!isDragging) {
                    openSettings();
                }
                isDragging = false;
            };
        };

        button.ondragstart = () => false;
    }

    // 打开设置界面
    function openSettings() {
        let config = getConfig();
        let overlay = document.createElement('div');
        overlay.id = 'highlightOverlay';
        overlay.style = `
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 1000;
        `;

        let settingsDiv = document.createElement('div');
        settingsDiv.id = 'highlightSettings';
        settingsDiv.style = `
            position: fixed;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            padding: 2vw;
            background-color: white;
            border: 0.1vw solid #ccc;
            border-radius: 0.5vw;
            z-index: 1001;
            box-shadow: 0px 0px 1vw rgba(0, 0, 0, 0.5);
            max-width: 80%;
            max-height: 80%;
            overflow-y: auto;
            transition: opacity 0.3s;
            font-size: 1vw;
        `;
        settingsDiv.innerHTML = `
            <h2>高亮设置</h2>
            <div id="wordBlocks" style="display: flex; flex-wrap: wrap; max-height: 15vh; overflow-y: auto; margin-bottom: 1vw; border: 0.1vw solid #ccc;">
                ${config.searchWords.map(word => `<div class="wordBlock" style="padding: 0.5vw; border: 0.1vw solid #ccc; margin: 0.5vw; cursor: pointer;">${word}</div>`).join('')}
            </div>
            <label>高亮颜色:</label>
            <input type="color" id="highlightColor" value="${config.highlightColor}" style="width: 100%; margin-bottom: 1vw;">
            <button id="newWord" style="margin-right: 1vw;">新建</button>
            <button id="editWord" style="margin-right: 1vw;">编辑</button>
            <button id="deleteWord" style="margin-right: 1vw;">删除</button>
            <button id="saveSettings" style="margin-right: 1vw;">保存</button>
            <button id="closeSettings">关闭</button>
        `;

        overlay.appendChild(settingsDiv);
        document.body.appendChild(overlay);

        let selectedWordBlock = null;

        document.querySelectorAll('.wordBlock').forEach(block => {
            block.onclick = function() {
                if (selectedWordBlock) {
                    selectedWordBlock.style.backgroundColor = '';
                }
                selectedWordBlock = this;
                selectedWordBlock.style.backgroundColor = '#d3d3d3';
            };
        });

        document.getElementById('newWord').onclick = function() {
            let newWord = prompt('请输入新的高亮单词:');
            if (newWord) {
                config.searchWords.push(newWord.trim());
                saveConfig(config);
                document.body.removeChild(overlay);
                openSettings();
            }
        };

        document.getElementById('editWord').onclick = function() {
            if (selectedWordBlock) {
                let editedWord = prompt('编辑高亮单词:', selectedWordBlock.textContent);
                if (editedWord) {
                    let index = config.searchWords.indexOf(selectedWordBlock.textContent);
                    if (index !== -1) {
                        config.searchWords[index] = editedWord.trim();
                        saveConfig(config);
                        document.body.removeChild(overlay);
                        openSettings();
                    }
                }
            } else {
                alert('请先选择一个单词块进行编辑');
            }
        };

        document.getElementById('deleteWord').onclick = function() {
            if (selectedWordBlock) {
                let index = config.searchWords.indexOf(selectedWordBlock.textContent);
                if (index !== -1) {
                    config.searchWords.splice(index, 1);
                    saveConfig(config);
                    document.body.removeChild(overlay);
                    openSettings();
                }
            } else {
                alert('请先选择一个单词块进行删除');
            }
        };

        document.getElementById('saveSettings').onclick = function() {
            let newHighlightColor = document.getElementById('highlightColor').value;
            saveConfig({ searchWords: config.searchWords, highlightColor: newHighlightColor });
            document.body.removeChild(overlay);
            highlightOnPage();
            createButton(); // Update button color
        };

        document.getElementById('closeSettings').onclick = function() {
            document.body.removeChild(overlay);
        };
    }

    // 页面加载完成后执行
    window.addEventListener('load', function() {
        highlightOnPage();
        createButton();
    });
})();