// ==UserScript==

// @name         🌐 搜索中心增强
// @name:en     🌐 Search Hub Enhancer

// @namespace    https://greasyfork.org/zh-CN/users/1454800

// @version      1.0.2

// @description  快速切换搜索引擎的工具栏，可自定义引擎
// @description:en A toolbar for quick switching between search engines with custom engine support

// @author       Aiccest

// @match        *://*/*

// @grant        GM_setValue

// @grant        GM_getValue

// @grant        GM_registerMenuCommand

// @noframes

// @license      MIT

// @downloadURL none
// ==/UserScript==

(function () {

    'use strict';

const i18n = {
      zh: {
        settings: t("settings"),
        searchWith: t("searchWith"),
        defaultEngine: t("defaultEngine"),
        enableIcons: t("enableIcons"),
        save: t("save"),
        cancel: t("cancel"),
        addEngine: t("addEngine"),
        reset: t("reset"),
        toolbarPosition: t("toolbarPosition")
      },
      en: {
        settings: "Settings",
        searchWith: "Search with the following engines",
        defaultEngine: "Default search engine",
        enableIcons: "Enable icons",
        save: "Save",
        cancel: "Cancel",
        addEngine: "Add Engine",
        reset: "Reset",
        toolbarPosition: "Toolbar Position"
      }
    };
    const getLang = () => navigator.language.startsWith("zh") ? "zh" : "en";
    const t = (key) => i18n[getLang()][key] || key;

    const CONFIG = {

        STORAGE_KEY: 'search_hub_engines',

        DEBOUNCE_MS: 600,

        ANIMATION_MS: 300,

        TOOLBAR_POSITION: 'bottom-center',

    };

    const GLOBAL_CSS = `

        :host {

            --bg-color: rgba(255, 255, 255, 0.95);

            --text-color: #1f2937;

            --border-color: #e5e7eb;

            --hover-bg: #f9fafb;

            --panel-bg: white;

            --btn-bg: #f9fafb;

            --btn-active-bg: #e5e7eb;

            --btn-save-bg: #4f46e5;

            --btn-add-bg: #22c55e;

            --btn-close-bg: #6b7280;

        }

        @media (prefers-color-scheme: dark) {

            :host {

                --bg-color: rgba(31, 41, 55, 0.95);

                --text-color: #e5e7eb;

                --border-color: #4b5563;

                --hover-bg: #374151;

                --panel-bg: #1f2937;

                --btn-bg: #374151;

                --btn-active-bg: #4b5563;

            }

        }

        #search-hub-toolbar {

            position: fixed;

            bottom: 0;

            left: 50%;

            transform: translateX(-50%);

            background: var(--bg-color);

            backdrop-filter: blur(8px);

            border-radius: 12px 12px 0 0;

            padding: 8px;

            display: flex;

            gap: 8px;

            z-index: 2147483647;

            max-width: 90vw;

            overflow-x: auto;

            scrollbar-width: none;

            box-shadow: 0 -2px 8px rgba(0,0,0,0.1);

            touch-action: pan-x;

            user-select: none;

            -webkit-user-select: none;

            pointer-events: auto;

        }

        #search-hub-toolbar::-webkit-scrollbar { display: none; }

        .engine-btn {

            padding: 6px 12px;

            background: var(--btn-bg);

            color: var(--text-color);

            border: 0.8px solid var(--border-color);

            border-radius: 8px;

            font-size: 14px;

            cursor: pointer;

            transition: background 0.2s ease;

            white-space: nowrap;

        }

        .engine-btn:hover { background: var(--hover-bg); }

        .settings-btn {

            background: var(--btn-bg);

            color: var(--text-color);

            border: 0.8px solid var(--border-color);

        }

        @media (max-width: 640px) {

            #search-hub-toolbar { max-width: 95vw; }

            .engine-btn { font-size: 12px; padding: 4px 8px; }

        }

        @keyframes fadeIn {

            from { opacity: 0; transform: translate(-50%, -50%) scale(0.95); }

            to { opacity: 1; transform: translate(-50%, -50%) scale(1); }

        }

        .settings-panel {

            position: fixed;

            top: 50%;

            left: 50%;

            transform: translate(-50%, -50%);

            background: var(--panel-bg);

            border-radius: 12px;

            padding: 16px;

            box-shadow: 0 4px 16px rgba(0,0,0,0.2);

            z-index: 2147483647;

            max-width: 600px;

            max-height: 80vh;

            overflow-y: auto;

            font-family: system-ui, sans-serif;

            box-sizing: border-box;

            animation: fadeIn ${CONFIG.ANIMATION_MS}ms ease forwards;

            pointer-events: auto;

            color: var(--text-color);

        }

        h3 {

            font-size: 16px;

            margin: 0 0 12px;

            padding-bottom: 8px;

            border-bottom: 1px solid var(--border-color);

        }

        .engine-item {

            margin-bottom: 12px;

            border: 1px solid var(--border-color);

            border-radius: 6px;

            padding: 0;

        }

        .name-row {

            display: flex;

            gap: 8px;

            align-items: center;

            margin: 8px;

        }

        .name-row input {

            flex: 1;

            padding: 6px 8px;

            border: 1px solid var(--border-color);

            border-radius: 4px;

            font-size: 14px;

            box-sizing: border-box;

            background: var(--panel-bg);

            color: var(--text-color);

        }

        .url-input {

            width: calc(100% - 16px);

            margin: 0 8px 8px;

            padding: 6px 8px;

            border: 1px solid var(--border-color);

            border-radius: 4px;

            font-size: 14px;

            box-sizing: border-box;

            background: var(--panel-bg);

            color: var(--text-color);

        }

        .actions {

            display: flex;

            gap: 4px;

        }

        .action-btn {

            width: 24px;

            height: 24px;

            padding: 0;

            font-size: 14px;

            border: 1px solid var(--border-color);

            border-radius: 4px;

            background: var(--btn-bg);

            cursor: pointer;

            display: flex;

            align-items: center;

            justify-content: center;

            box-sizing: border-box;

            color: var(--text-color);

        }

        .action-btn:hover {

            background: var(--btn-active-bg);

        }

        .action-btn:disabled {

            opacity: 0.5;

            cursor: not-allowed;

        }

        .panel-actions {

            display: flex;

            gap: 8px;

            margin-top: 12px;

            border-top: 1px solid var(--border-color);

            padding-top: 12px;

            justify-content: flex-end;

        }

        .panel-btn {

            padding: 8px 16px;

            font-size: 14px;

            border-radius: 6px;

            border: none;

            cursor: pointer;

            box-sizing: border-box;

            color: white;

        }

        .add-btn { background: var(--btn-add-bg); }

        .save-btn { background: var(--btn-save-bg); }

        .close-btn { background: var(--btn-close-bg); }

        @media (max-width: 640px) {

            .settings-panel { width: 90vw; }

            .name-row input { max-width: calc(100% - 94px); }

            .url-input { width: calc(100% - 16px); }

            .panel-btn { padding: 6px 12px; font-size: 12px; }

        }

    `;

    const debounce = (fn, ms) => {

        let timeout;

        return (...args) => {

            clearTimeout(timeout);

            timeout = setTimeout(() => fn(...args), ms);

        };

    };

    const sanitize = str => str.replace(/[&<>"']/g, c => ({

        '&': '&amp;',

        '<': '&lt;',

        '>': '&gt;',

        '"': '&quot;',

        "'": '&#39;'

    })[c]);

    const generateId = () => `se_${Math.random().toString(36).slice(2, 10)}`;

    class BaiduHandler {

        static isBaidu() {

            return /baidu\.com$/.test(location.hostname);

        }

        static getQuery() {

            if (!this.isBaidu()) return null;

            const input = SearchDetector.getSearchInput();

            return input?.value?.trim() || new URLSearchParams(location.search).get('wd')?.trim() || '';

        }

    }

    class SearchDetector {

        static cachedInput = null;

        static config = {

            domains: {

                'metaso.cn': { basePath: '/', queryParam: 'q', displayName: 'Metaso' },

                'www.baidu.com': { basePath: '/s', queryParam: 'wd', displayName: 'Baidu' },

                'www.yandex.com': { basePath: '/search', queryParam: 'text', displayName: 'Yandex' },

                'search.yahoo.com': { basePath: '/search', queryParam: 'p', displayName: 'Yahoo' },

                'www.startpage.com': { basePath: '/search', queryParam: 'q', displayName: 'Startpage' },

                'search.aol.com': { basePath: '/aol/search', queryParam: 'q', displayName: 'AOL' },

            },

            exclude: [

                { domain: /baidu\.com$/, paths: [/^\/(tieba|zhidao|question|passport)/] },

            ],

            commonQueryParams: ['q', 'wd', 'word', 'keyword', 'search', 'query', 'text', 'p'],

        };

        static getSearchInput() {

            if (!this.cachedInput) {

                this.cachedInput = document.querySelector(

                    'input[type="search"], input#kw, input[name="wd"], input[name="q"], input[name="search"], input[name="query"], input[name="text"], input[name="p"], input.search-input'

                );

            }

            return this.cachedInput;

        }

        static isSearchPage() {

            try {

                const url = new URL(location.href);

                const params = new URLSearchParams(url.search);

                for (const rule of this.config.exclude) {

                    if (rule.domain.test(url.hostname) && rule.paths.some(ex => ex.test(url.pathname))) {

                        return false;

                    }

                }

                const domainConfig = this.config.domains[url.hostname];

                if (domainConfig && domainConfig.basePath === url.pathname.split('?')[0]) {

                    return true;

                }

                const hasQueryParam = this.config.commonQueryParams.some(param => params.has(param) && params.get(param).trim());

                const hasSearchInput = !!this.getSearchInput()?.value?.trim();

                const hasSearchTitle = document.title.toLowerCase().includes('search') || document.title.includes('搜索');

                return hasQueryParam || hasSearchInput || hasSearchTitle;

            } catch (e) {

                console.error('SearchDetector.isSearchPage error:', e);

                return false;

            }

        }

        static getQuery() {

            try {

                const params = new URLSearchParams(location.search);

                for (const param of this.config.commonQueryParams) {

                    const value = params.get(param)?.trim();

                    if (value) return value;

                }

                const inputValue = this.getSearchInput()?.value?.trim();

                if (inputValue) return inputValue;

                return document.title.replace(/\s*[-_|](搜索|Search|Query|Results).*$/, '').trim();

            } catch (e) {

                console.error('SearchDetector.getQuery error:', e);

                return '';

            }

        }

        static custom(e) {

            try {

                const u = new URL(e.url.replace('%s', ''));

                let k = '';

                new URLSearchParams(u.search).forEach((v, key) => { if (v === '') k = key; });

                const pathTest = new RegExp(`^${u.pathname}(/.*)?$`);

                return { domains: [u.hostname], pathTest, paramKeys: [k || 'q'] };

            } catch {

                return null;

            }

        }

        static detectEngineConfig() {

            try {

                const url = new URL(location.href);

                const domainConfig = this.config.domains[url.hostname];

                if (domainConfig) {

                    const searchUrl = `${url.protocol}//${url.hostname}${domainConfig.basePath}${domainConfig.basePath === '/' ? '?' : domainConfig.basePath.includes('?') ? '&' : '?'}${domainConfig.queryParam}=%s`;

                    return { name: domainConfig.displayName, url: searchUrl };

                }

                let queryParam = null;

                let basePath = '/';

                let detectionSource = 'none';

                const forms = document.querySelectorAll('form[action]');

                const searchForm = Array.from(forms).find(form =>

                    form.querySelector('input[type="search"], input[name="q"], input[name="wd"], input[name="search"], input[name="query"], input[name="text"], input[name="p"], input.search-input')

                );

                if (searchForm) {

                    try {

                        const actionUrl = new URL(searchForm.action, url.origin);

                        basePath = actionUrl.pathname || '/';

                        const searchInput = searchForm.querySelector('input[type="search"], input[name="q"], input[name="wd"], input[name="search"], input[name="query"], input[name="text"], input[name="p"], input.search-input');

                        if (searchInput && searchInput.name) {

                            queryParam = searchInput.name;

                            detectionSource = 'form-input';

                        } else {

                            const actionParams = new URLSearchParams(actionUrl.search);

                            for (const param of this.config.commonQueryParams) {

                                if (actionParams.has(param)) {

                                    queryParam = param;

                                    detectionSource = 'form-action';

                                    break;

                                }

                            }

                        }

                    } catch (e) {

                        console.warn('Dynamic form detection failed:', e);

                    }

                }

                if (detectionSource === 'none') {

                    const params = new URLSearchParams(url.search);

                    for (const param of this.config.commonQueryParams) {

                        if (params.has(param) && params.get(param).trim()) {

                            queryParam = param;

                            break;

                        }

                    }

                    if (!queryParam) {

                        for (const [key, value] of params.entries()) {

                            if (value && value.trim().length > 0) {

                                queryParam = key;

                                break;

                            }

                        }

                    }

                    if (!queryParam && this.getSearchInput()?.value?.trim()) {

                        queryParam = 'q';

                    }

                    if (!queryParam) return null;

                    const pathSegments = url.pathname.split('/').filter(segment => segment);

                    const staticSegments = pathSegments.filter(segment =>

                        !/^[0-9]+$/.test(segment) &&

                        !/^ssid=/.test(segment) &&

                        !/^from=/.test(segment) &&

                        !/^[a-f0-9]{8}-/.test(segment) &&

                        segment.length < 20

                    );

                    basePath = staticSegments.length > 0 ? `/${staticSegments.join('/')}` : '/';

                    detectionSource = 'fallback';

                }

                if (!queryParam) return null;

                const hostnameParts = url.hostname.split('.');

                const commonSubdomains = ['www', 'm', 'mobile', 'search'];

                const tlds = ['com', 'cn', 'org', 'net', 'co', 'io', 'ai'];

                const significantParts = hostnameParts.filter(part =>

                    !commonSubdomains.includes(part) && !tlds.includes(part)

                );

                const engineName = significantParts.length > 0 ? significantParts[significantParts.length - 1] : hostnameParts[0];

                const displayName = engineName.charAt(0).toUpperCase() + engineName.slice(1);

                const baseUrl = `${url.protocol}//${url.hostname}${basePath}`;

                const searchUrl = `${baseUrl}${basePath === '/' ? '?' : basePath.includes('?') ? '&' : '?'}${queryParam}=%s`;

                return { name: displayName, url: searchUrl };

            } catch (e) {

                console.error('SearchDetector.detectEngineConfig error:', e);

                return null;

            }

        }

    }

    class SettingsPanel {

        constructor(searchHub) {

            this.searchHub = searchHub;

            this.panel = null;

        }

        render() {

            this.panel = document.createElement('div');

            this.panel.id = 'settings-panel-container';

            this.panel.setAttribute('translate', 'no');

            const shadow = this.panel.attachShadow({ mode: 'open' });

            const style = document.createElement('style');

            style.textContent = GLOBAL_CSS;

            const content = document.createElement('div');

            content.className = 'settings-panel';

            content.innerHTML = `

                <h3>🌐 搜索引擎设置</h3>

                <div id="engine-list">

                    ${this.searchHub.engines.map((e, i) => `

                        <div class="engine-item" data-id="${sanitize(e.id)}">

                            <div class="name-row">

                                <input type="text" value="${sanitize(e.name)}" placeholder="名称" required>

                                <div class="actions">

                                    <button class="action-btn move-up" ${i === 0 ? 'disabled' : ''}>↑</button>

                                    <button class="action-btn move-down" ${i === this.searchHub.engines.length - 1 ? 'disabled' : ''}>↓</button>

                                    <button class="action-btn delete">×</button>

                                </div>

                            </div>

                            <input class="url-input" type="url" value="${sanitize(e.url)}" placeholder="包含 %s 的URL" required>

                        </div>

                    `).join('')}

                </div>

                <div class="panel-actions">

                    <button class="panel-btn add-btn">添加</button>

                    <button class="panel-btn save-btn">保存</button>

                    <button class="panel-btn close-btn">关闭</button>

                </div>

            `;

            shadow.appendChild(style);

            shadow.appendChild(content);

            document.body.appendChild(this.panel);

            shadow.addEventListener('click', e => this.handleClick(e), { capture: true, passive: false });

        }

        handleClick(e) {

            e.stopPropagation();

            const target = e.target;

            const list = this.panel.shadowRoot.querySelector('#engine-list');

            if (target.classList.contains('add-btn')) {

                let name = '新搜索引擎';

                let url = 'https://example.com/search?q=%s';

                if (SearchDetector.isSearchPage()) {

                    const engineConfig = SearchDetector.detectEngineConfig();

                    if (engineConfig) {

                        name = engineConfig.name;

                        url = engineConfig.url;

                    }

                }

                this.searchHub.addEngineItem(list, name, url);

                this.panel.scrollTop = this.panel.scrollHeight;

            } else if (target.classList.contains('save-btn')) {

                const engines = [];

                let valid = true;

                list.querySelectorAll('.engine-item').forEach(item => {

                    const name = item.querySelector('input[type="text"]')?.value.trim();

                    const url = item.querySelector('input[type="url"]')?.value.trim();

                    if (!name || !url) {

                        alert('名称和URL为必填项！');

                        valid = false;

                        return;

                    }

                    if (!/%s/.test(url)) {

                        alert('URL必须包含%s占位符！');

                        valid = false;

                        return;

                    }

                    try {

                        new URL(url.replace('%s', 'test'));

                        engines.push({ id: item.dataset.id, name, url });

                    } catch {

                        alert('无效的URL！');

                        valid = false;

                    }

                });

                if (valid) {

                    this.searchHub.engines = engines;

                    GM_setValue(CONFIG.STORAGE_KEY, engines);

                    this.close();

                    this.searchHub.renderToolbar();

                }

            } else if (target.classList.contains('close-btn')) {

                this.close();

            } else if (target.classList.contains('move-up') || target.classList.contains('move-down')) {

                const item = target.closest('.engine-item');

                if (target.classList.contains('move-up')) {

                    item.previousElementSibling?.before(item);

                } else {

                    item.nextElementSibling?.after(item);

                }

                list.querySelectorAll('.engine-item').forEach((el, i) => {

                    el.querySelector('.move-up').disabled = i === 0;

                    el.querySelector('.move-down').disabled = i === list.querySelectorAll('.engine-item').length - 1;

                });

            } else if (target.classList.contains('delete')) {

                if (list.querySelectorAll('.engine-item').length <= 1) {

                    alert('至少需要一个搜索引擎！');

                    return;

                }

                target.closest('.engine-item').remove();

            }

        }

        close() {

            this.panel?.remove();

            this.panel = null;

        }

    }

    class SearchHub {

        constructor() {

            this.engines = GM_getValue(CONFIG.STORAGE_KEY) || [

                { id: generateId(), name: 'Google', url: 'https://www.google.com/search?q=%s' },

                { id: generateId(), name: 'Bing', url: 'https://www.bing.com/search?q=%s' },

            ];

            if (!GM_getValue(CONFIG.STORAGE_KEY)) GM_setValue(CONFIG.STORAGE_KEY, this.engines);

            this.init();

        }

        init() {

            if (SearchDetector.isSearchPage()) {

                this.renderToolbar();

            }

            this.bindEvents();

            this.bindKeyboard();

            this.observePageChanges();

            GM_registerMenuCommand('🌐 添加当前页面为搜索引擎', () => this.addCurrentPageAsEngine());

        }

        renderToolbar() {

            let toolbarContainer = document.querySelector('#search-hub-toolbar-container');

            if (toolbarContainer) {

                toolbarContainer.remove();

            }

            if (!SearchDetector.isSearchPage()) return;

            toolbarContainer = document.createElement('div');

            toolbarContainer.id = 'search-hub-toolbar-container';

            toolbarContainer.setAttribute('translate', 'no');

            document.body.appendChild(toolbarContainer);

            const shadow = toolbarContainer.attachShadow({ mode: 'open' });

            const style = document.createElement('style');

            style.textContent = GLOBAL_CSS;

            const toolbar = document.createElement('div');

            toolbar.id = 'search-hub-toolbar';

            toolbar.innerHTML = `

                ${this.engines.map(e => `

                    <button class="engine-btn" data-id="${sanitize(e.id)}" data-url="${sanitize(e.url)}">

                        ${sanitize(e.name)}

                    </button>

                `).join('')}

                <button class="engine-btn settings-btn">⚙️</button>

            `;

            toolbar.addEventListener('click', (e) => {

                e.preventDefault();

                e.stopPropagation();

                const target = e.target;

                if (target.classList.contains('settings-btn')) {

                    this.toggleSettings();

                } else if (target.classList.contains('engine-btn')) {

                    const query = BaiduHandler.isBaidu() ? BaiduHandler.getQuery() : SearchDetector.getQuery();

                    if (query) window.open(target.dataset.url.replace('%s', encodeURIComponent(query)), '_blank');

                }

            }, { capture: true, passive: false });

            shadow.appendChild(style);

            shadow.appendChild(toolbar);

        }

        bindEvents() {

            this.globalClickHandler = (e) => {

                if (!e.composedPath().some(el => el.id === 'settings-panel-container') && document.querySelector('#settings-panel-container')) {

                    this.closeSettings();

                }

            };

            document.addEventListener('click', this.globalClickHandler, { capture: true });

        }

        bindKeyboard() {

            this.keyboardHandler = (e) => {

                if (e.ctrlKey && e.shiftKey && e.key.toLowerCase() === 's') {

                    e.preventDefault();

                    this.toggleSettings();

                }

            };

            document.addEventListener('keydown', this.keyboardHandler);

        }

        observePageChanges() {

            const updateToolbar = debounce(() => {

                const isSearchPage = SearchDetector.isSearchPage();

                const toolbarExists = !!document.querySelector('#search-hub-toolbar-container');

                if (isSearchPage && !toolbarExists) {

                    this.renderToolbar();

                } else if (!isSearchPage && toolbarExists) {

                    document.querySelector('#search-hub-toolbar-container')?.remove();

                }

            }, CONFIG.DEBOUNCE_MS);

            const observerTarget = document.querySelector('form, header, main') || document.body;

            const observer = new MutationObserver(mutations => {

                if (mutations.some(m => m.addedNodes.length || m.removedNodes.length)) {

                    updateToolbar();

                }

            });

            observer.observe(observerTarget, { childList: true, subtree: true });

            window.addEventListener('popstate', () => setTimeout(updateToolbar, 100));

            ['pushState', 'replaceState'].forEach(method => {

                const original = history[method];

                history[method] = (...args) => {

                    original.apply(history, args);

                    setTimeout(updateToolbar, 100);

                };

            });

        }

        toggleSettings() {

            if (document.querySelector('#settings-panel-container')) {

                this.closeSettings();

            } else {

                new SettingsPanel(this).render();

            }

        }

        closeSettings() {

            document.querySelector('#settings-panel-container')?.remove();

        }

        addEngineItem(list, name = '新搜索引擎', url = 'https://example.com/search?q=%s', id = generateId()) {

            const item = document.createElement('div');

            item.className = 'engine-item';

            item.dataset.id = id;

            item.innerHTML = `

                <div class="name-row">

                    <input type="text" value="${sanitize(name)}" placeholder="名称" required>

                    <div class="actions">

                        <button class="action-btn move-up">↑</button>

                        <button class="action-btn move-down">↓</button>

                        <button class="action-btn delete">×</button>

                    </div>

                </div>

                <input class="url-input" type="url" value="${sanitize(url)}" placeholder="包含 %s 的URL" required>

            `;

            list.appendChild(item);

            return item;

        }

        addCurrentPageAsEngine() {

            if (!SearchDetector.isSearchPage()) {

                alert('当前页面不是搜索页面，无法添加为搜索引擎！');

                return;

            }

            const engineConfig = SearchDetector.detectEngineConfig();

            if (!engineConfig) {

                alert('无法检测当前页面的搜索引擎配置！');

                return;

            }

            this.toggleSettings();

            const panel = document.querySelector('#settings-panel-container');

            if (panel) {

                const list = panel.shadowRoot.querySelector('#engine-list');

                this.addEngineItem(list, engineConfig.name, engineConfig.url);

                panel.scrollTop = panel.scrollHeight;

            }

        }

        destroy() {

            document.querySelector('#search-hub-toolbar-container')?.remove();

            this.closeSettings();

            if (this.globalClickHandler) {

                document.removeEventListener('click', this.globalClickHandler, { capture: true });

            }

            if (this.keyboardHandler) {

                document.removeEventListener('keydown', this.keyboardHandler);

            }

        }

    }

    function init() {

        new SearchHub();

    }

    if (document.readyState === 'complete') {

        init();

    } else {

        window.addEventListener('load', init);

    }

})();