// ==UserScript==
// @name         [银河奶牛]常见问题答疑
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  在游戏中添加自定义信息页签
// @license      sangshiCHI
// @author       sangshiCHI
// @match        https://www.milkywayidle.com/*
// @match        https://test.milkywayidle.com/*
// @match        https://luyh7.github.io/milkonomy/*
// @match        https://amvoidguy.github.io/MWICombatSimulatorTest/*
// @match        https://shykai.github.io/mwisim.github.io/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=milkywayidle.com
// @grant        GM.xmlHttpRequest
// @grant        GM_registerMenuCommand
// @downloadURL none
// ==/UserScript==






(function() {
    'use strict';

    // 配置项
    const config = {
        searchPlaceholder: '输入关键词搜索...',
        noResultsText: '没有找到相关内容',
        contentData: [
            {title: "战斗技巧", content: "钝击对抗岩石系敌人有加成效果"},
            {title: "资源收集", content: "每日3次免费加速建议用于星尘采集"},
            {title: "设施升级", content: "优先升级奶牛的挤奶速度属性"},
            {title: "PVP策略", content: "合理搭配钝击和魔法抗性装备"}
        ],
        animationDuration: 300// 动画时长（毫秒）
    };

    // 创建符合游戏样式的模态框
    function createStyledModal() {
        const modal = document.createElement('div');
        modal.className = 'Modal_modal__1Jiep custom-modal';
        modal.style.cssText = `
            display: none;
            position: absolute;
            top: calc(100% + 10px);
            right: 0;
            width: 100%;
            max-width: 600px;
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.2);
            z-index: 1000;
            max-height: 70vh;
            overflow-y: auto;
            opacity: 0;
            transform: translateY(-10px);
            transition: all ${config.animationDuration}ms ease;
        `;

        // 移动端适配样式
        modal.innerHTML += `
            <style>
                @media (max-width: 768px) {
                    .custom-modal {
                        position: fixed !important;
                        top: 50% !important;
                        left: 50% !important;
                        transform: translate(-50%, -40%) !important;
                        width: 90% !important;
                        max-height: 80vh !important;
                    }
                    .custom-modal.active {
                        transform: translate(-50%, -50%) !important;
                    }
                }
            </style>
        `;

        // 弹窗内容
        modal.innerHTML += `
            <div style="position:relative;padding:20px;">
                <div class="Modal_closeButton__3eTF7"
                     style="position:absolute;top:10px;right:10px;cursor:pointer;font-size:24px;">×</div>
                <div class="search-container" style="margin-bottom:20px;">
                    <input type="text" id="customSearchInput"
                           placeholder="${config.searchPlaceholder}"
                           style="width:100%;padding:8px 12px;border:1px solid #ddd;border-radius:4px;">
                </div>
                <div id="searchResults">
                    ${config.contentData.map(item => `
                        <div class="search-item" style="margin-bottom:15px;padding:10px;border-bottom:1px solid #eee;">
                            <h3 style="color:#4CAF50;margin:0 0 5px 0;">${item.title}</h3>
                            <p style="color:#666;margin:0;">${item.content}</p>
                        </div>
                    `).join('')}
                </div>
                <div id="noResults" style="display:none;color:#999;text-align:center;padding:20px;">
                    ${config.noResultsText}
                </div>
            </div>
        `;

        return modal;
    }

    // 创建集成按钮
    function createHeaderButton() {
        const btn = document.createElement('button');
        btn.className = 'Button_button__1Fe9z header-custom-btn';
        btn.textContent = '小登常见问题答疑';
        btn.style.cssText = `
            margin-left: auto;
            padding: 8px 16px;
            background: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: opacity 0.2s;
            position: relative;
            z-index: 1001;
        `;
        return btn;
    }

    // 搜索功能实现
    function setupSearch(modal) {
        const searchInput = modal.querySelector('#customSearchInput');
        const items = modal.querySelectorAll('.search-item');
        const noResults = modal.querySelector('#noResults');

        searchInput.addEventListener('input', function(e) {
            const searchTerm = e.target.value.toLowerCase();
            let visibleCount = 0;

            items.forEach(item => {
                const text = item.textContent.toLowerCase();
                const isVisible = text.includes(searchTerm);
                item.style.display = isVisible ? 'block' : 'none';
                if(isVisible) visibleCount++;
            });

            noResults.style.display = visibleCount > 0 ? 'none' : 'block';
        });
    }

    // 初始化
    function init() {
        const header = document.querySelector('.Header_info__26fkk');
        if (!header) return;

        // 设置header定位上下文
        header.style.position = 'relative';

        const modal = createStyledModal();
        const btn = createHeaderButton();

        // 添加元素到header
        header.appendChild(btn);
        header.appendChild(modal);

        // 弹窗控制逻辑
        let isVisible = false;
        const toggleModal = () => {
            isVisible = !isVisible;
            if (isVisible) {
                modal.style.display = 'block';
                setTimeout(() => {
                    modal.style.opacity = '1';
                    modal.style.transform = window.innerWidth <= 768
                        ? 'translate(-50%, -50%)'
                        : 'translateY(0)';
                    modal.classList.add('active');
                }, 10);
            } else {
                modal.style.opacity = '0';
                modal.style.transform = window.innerWidth <= 768
                    ? 'translate(-50%, -40%)'
                    : 'translateY(-10px)';
                setTimeout(() => {
                    modal.style.display = 'none';
                    modal.classList.remove('active');
                }, config.animationDuration);
            }
        };

        // 事件绑定
        btn.addEventListener('click', (e) => {
            e.stopPropagation();
            toggleModal();
        });

        modal.querySelector('.Modal_closeButton__3eTF7').addEventListener('click', toggleModal);

        document.addEventListener('click', (e) => {
            if (!modal.contains(e.target) && e.target !== btn) {
                if (isVisible) toggleModal();
            }
        });

        // 移动端触摸处理
        let touchStartY = 0;
        modal.addEventListener('touchstart', (e) => {
            touchStartY = e.touches[0].clientY;
        }, { passive: true });

        modal.addEventListener('touchmove', (e) => {
            if (!isVisible) return;
            const deltaY = e.touches[0].clientY - touchStartY;
            if (deltaY > 50) toggleModal();
        }, { passive: true });

        // 初始化搜索
        setupSearch(modal);
    }

    // 等待header加载
    const observer = new MutationObserver(() => {
        if (document.querySelector('.Header_info__26fkk')) {
            observer.disconnect();
            init();
        }
    });

    if (document.querySelector('.Header_info__26fkk')) {
        init();
    } else {
        observer.observe(document.body, {
            childList: true,
            subtree: true
        });
    }

    // 窗口大小变化处理
    window.addEventListener('resize', () => {
        const modal = document.querySelector('.custom-modal');
        if (modal && modal.classList.contains('active')) {
            modal.style.transform = window.innerWidth <= 768
                ? 'translate(-50%, -50%)'
                : 'translateY(0)';
        }
    });
})();