// ==UserScript==
// @name         Via风格自定义规则管理器
// @namespace    http://tampermonkey.net/
// @version      4.5.1
// @description  类似Via浏览器的自定义规则功能，支持域名分组管理
// @author       Custom Rules Manager
// @match        *://*/*
// @grant        GM_getValue
// @grant        GM_setValue
// @grant        GM_addStyle
// @grant        GM_registerMenuCommand
// @grant        GM_xmlhttpRequest
// @grant        unsafeWindow
// @run-at       document-end
// @license      MIT
// @icon         data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iMzIiIGN5PSIzMiIgcj0iMzIiIGZpbGw9InVybCgjcGFpbnQwX2xpbmVhcl8xXzY1XzApIi8+CjxwYXRoIGQ9Ik0xNyAyNEMxNyAyMC4xMzQgMjAuMTM0IDE3IDI0IDE3SDQwQzQzLjg2NiAxNyA0NyAyMC4xMzQgNDcgMjRWNDBDNDcgNDMuODY2IDQzLjg2NiA0NyA0MCA0N0gyNEMyMC4xMzQgNDcgMTcgNDMuODY2IDE3IDQwVjI0WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTIzIDI3QzIzIDI0Ljc5MDkgMjQuNzkwOSAyMyAyNyAyM0gzN0MzOS4yMDkxIDIzIDQxIDI0Ljc5MDkgNDEgMjdWMzdDNDEgMzkuMjA5MSAzOS4yMDkxIDQxIDM3IDQxSDI3QzI0Ljc5MDkgNDEgMjMgMzkuMjA5MSAyMyAzN1YyN1oiIGZpbGw9InVybCgjcGFpbnQxX2xpbmVhcl8xXzY1XzApIi8+CjxwYXRoIGQ9Ik0yNSAyOUMyNSAyNy44OTU0IDI1Ljg5NTQgMjcgMjcgMjdIMzdDMzguMTA0NiAyNyAzOSAyNy44OTU0IDM5IDI5VjM1QzM5IDM2LjEwNDYgMzguMTA0NiAzNyAzNyAzN0gyN0MyNS44OTU0IDM3IDI1IDM2LjEwNDYgMjUgMzVWMjlaIiBmaWxsPSJ1cmwoI3BhaW50Ml9saW5lYXJfMV82NV8wKSIvPgo8cGF0aCBkPSJNMjcgMzJMMzIgMjdMMzcgMzJIMzJWMzdIMjdWMzJaIiBmaWxsPSJ3aGl0ZSIvPgo8ZGVmcz4KPGxpbmVhckdyYWRpZW50IGlkPSJwYWludDBfbGluZWFyXzFfNjVfMCIgeDE9IjAiIHkxPSIwIiB4Mj0iNjQiIHkyPSI2NCIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgo8c3RvcCBzdG9wLWNvbG9yPSIjNjY3ZWVhIi8+CjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzc2NGJhMiIvPgo8L2xpbmVhckdyYWRpZW50Pgo8bGluZWFyR3JhZGllbnQgaWQ9InBhaW50MV9saW5lYXJfMV82NV8wIiB4MT0iMjMiIHkxPSIyMyIgeDI9IjQxIiB5Mj0iNDEiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KPHN0b3Agc3RvcC1jb2xvcj0iIzY2N2VlYSIvPgo8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiM3NjRiYTIiLz4KPC9saW5lYXJHcmFkaWVudD4KPGxpbmVhckdyYWRpZW50IGlkPSJwYWludDJfbGluZWFyXzFfNjVfMCIgeDE9IjI1IiB5MT0iMjciIHgyPSIzOSIgeTI9IjM3IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CjxzdG9wIHN0b3AtY29sb3I9IiM2NjdlZGEiLz4KPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjNzY0YmEyIi8+CjwvbGluZWFyR3JhZGllbnQ+CjwvZGVmcz4KPC9zdmc+Cg==
// ==/UserScript==

(function() {
    'use strict';

    // ========== 规则存储和初始化 ==========
    const STORAGE_KEY = 'custom_rules_v5';
    
    // 初始为空
    const DEFAULT_RULES = [];

    // 获取所有规则
    function getAllRules() {
        const saved = GM_getValue(STORAGE_KEY, JSON.stringify(DEFAULT_RULES));
        try {
            return JSON.parse(saved);
        } catch (e) {
            return DEFAULT_RULES;
        }
    }

    // 保存规则
    function saveRules(rules) {
        GM_setValue(STORAGE_KEY, JSON.stringify(rules));
        applyRules(); // 重新应用规则
    }

    // ========== 规则解析和应用 ==========
    function parseRule(ruleString) {
        const rule = ruleString.trim();
        if (!rule || rule.startsWith('!') || rule.startsWith('#')) {
            return null;
        }
        
        const match = rule.match(/^([^#]+)##(.+)$/);
        if (match) {
            return {
                domain: match[1].trim(),
                selector: match[2].trim(),
                raw: rule
            };
        }
        return null;
    }

    // 检查域名匹配
    function domainMatches(ruleDomain, currentDomain) {
        if (ruleDomain === '*') return true;
        if (ruleDomain.startsWith('*.')) {
            const baseDomain = ruleDomain.substring(2);
            return currentDomain === baseDomain || currentDomain.endsWith('.' + baseDomain);
        }
        return currentDomain === ruleDomain;
    }

    // 应用规则
    function applyRules() {
        const currentDomain = window.location.hostname;
        const rules = getAllRules();
        let css = '';
        
        rules.forEach(ruleStr => {
            const rule = parseRule(ruleStr);
            if (!rule) return;
            
            if (domainMatches(rule.domain, currentDomain)) {
                css += `${rule.selector} { display: none !important; }\n`;
            }
        });
        
        if (css) {
            const oldStyle = document.getElementById('custom-rules-style');
            if (oldStyle) oldStyle.remove();
            
            const style = document.createElement('style');
            style.id = 'custom-rules-style';
            style.textContent = css;
            document.head.appendChild(style);
        }
    }

    // ========== 通用工具函数 ==========
    
    // 复制文本到剪贴板
    function copyToClipboard(text) {
        return new Promise((resolve) => {
            // 创建临时textarea
            const textArea = document.createElement('textarea');
            textArea.value = text;
            textArea.style.position = 'fixed';
            textArea.style.left = '-9999px';
            textArea.style.top = '-9999px';
            document.body.appendChild(textArea);
            
            try {
                textArea.select();
                textArea.setSelectionRange(0, textArea.value.length);
                
                // 尝试使用execCommand
                const success = document.execCommand('copy');
                document.body.removeChild(textArea);
                
                if (success) {
                    resolve(true);
                } else {
                    // 尝试使用Clipboard API
                    if (navigator.clipboard && navigator.clipboard.writeText) {
                        navigator.clipboard.writeText(text).then(() => {
                            resolve(true);
                        }).catch(() => {
                            resolve(false);
                        });
                    } else {
                        resolve(false);
                    }
                }
            } catch (err) {
                document.body.removeChild(textArea);
                resolve(false);
            }
        });
    }
    
    // 下载文本文件
    function downloadTextFile(text, filename = 'custom-rules.txt') {
        try {
            const blob = new Blob([text], { type: 'text/plain;charset=utf-8' });
            const url = URL.createObjectURL(blob);
            const link = document.createElement('a');
            
            link.href = url;
            link.download = filename;
            link.style.display = 'none';
            document.body.appendChild(link);
            link.click();
            
            setTimeout(() => {
                document.body.removeChild(link);
                URL.revokeObjectURL(url);
            }, 100);
            
            return true;
        } catch (err) {
            console.error('下载失败:', err);
            return false;
        }
    }
    
    // 显示消息
    function showMessage(message, type = 'success') {
        const host = document.getElementById('custom-rules-host');
        if (host && host.shadowRoot) {
            const status = host.shadowRoot.querySelector('#status-message');
            if (status) {
                status.textContent = message;
                status.style.color = type === 'error' ? '#f44336' : '#4CAF50';
                
                // 3秒后清空
                setTimeout(() => {
                    if (status && status.textContent === message) {
                        status.textContent = '';
                    }
                }, 3000);
            }
        }
    }

    // ========== UI 管理 ==========
    let uiVisible = false;
    let currentDomain = window.location.hostname;

    // 创建UI
    function createRuleUI() {
        // 如果UI已存在，先移除
        const oldHost = document.getElementById('custom-rules-host');
        if (oldHost) {
            oldHost.remove();
            uiVisible = false;
        }
        
        // 创建宿主元素
        const host = document.createElement('div');
        host.id = 'custom-rules-host';
        
        // 创建Shadow DOM
        const shadowRoot = host.attachShadow({ mode: 'open' });
        
        // 添加样式
        const style = document.createElement('style');
        style.textContent = `
            :host {
                all: initial;
                font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            }
            
            * {
                box-sizing: border-box;
                margin: 0;
                padding: 0;
            }
            
            .overlay {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, 0.5);
                z-index: 2147483647;
                opacity: 0;
                transition: opacity 0.3s;
            }
            
            .ui-container {
                position: fixed;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%) scale(0.9);
                width: 90%;
                max-width: 700px;
                max-height: 85vh;
                background: white;
                border-radius: 12px;
                box-shadow: 0 20px 60px rgba(0,0,0,0.3);
                z-index: 2147483647;
                opacity: 0;
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                overflow: hidden;
                display: flex;
                flex-direction: column;
            }
            
            .header {
                background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                color: white;
                padding: 16px 20px;
                position: relative;
                flex-shrink: 0;
            }
            
            .title {
                margin: 0;
                font-size: 16px;
                font-weight: 600;
            }
            
            .close-btn {
                position: absolute;
                top: 12px;
                right: 12px;
                background: rgba(255,255,255,0.2);
                border: none;
                color: white;
                width: 28px;
                height: 28px;
                border-radius: 50%;
                cursor: pointer;
                font-size: 18px;
                line-height: 1;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            
            .stats {
                margin-top: 8px;
                font-size: 12px;
                opacity: 0.9;
                line-height: 1.4;
            }
            
            .tabs {
                display: flex;
                background: #f8f9fa;
                border-bottom: 1px solid #e0e0e0;
                flex-shrink: 0;
            }
            
            .tab-btn {
                flex: 1;
                padding: 12px;
                border: none;
                background: none;
                cursor: pointer;
                font-size: 13px;
                font-weight: 500;
                color: #666;
                transition: all 0.2s;
            }
            
            .tab-btn.active {
                color: #667eea;
                border-bottom: 2px solid #667eea;
            }
            
            .main-content {
                flex: 1;
                overflow: hidden;
                display: flex;
                flex-direction: column;
                min-height: 0;
            }
            
            .content-area {
                flex: 1;
                overflow-y: auto;
                padding: 16px;
                position: relative;
            }
            
            .footer {
                padding: 12px 20px;
                border-top: 1px solid #f0f0f0;
                background: #fafafa;
                display: flex;
                justify-content: space-between;
                align-items: center;
                flex-shrink: 0;
            }
            
            .help-btn {
                background: none;
                border: none;
                color: #666;
                font-size: 12px;
                cursor: pointer;
                padding: 6px 12px;
                border-radius: 4px;
                transition: background-color 0.2s;
            }
            
            .help-btn:hover {
                background-color: #f0f0f0;
            }
            
            .status-message {
                font-size: 12px;
                color: #666;
                max-width: 200px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            
            .domain-group {
                margin-bottom: 12px;
                border: 1px solid #e0e0e0;
                border-radius: 8px;
                overflow: hidden;
                background: white;
                transition: transform 0.2s, box-shadow 0.2s;
            }
            
            .domain-group.current-domain {
                border-color: #667eea;
                box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
            }
            
            .domain-group.current-domain .domain-header {
                background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
            }
            
            .domain-group.current-domain .domain-header .domain-name {
                color: #667eea;
                font-weight: 600;
            }
            
            .domain-header {
                background: #f5f5f5;
                padding: 12px 16px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                cursor: pointer;
                user-select: none;
                position: relative;
                z-index: 1;
            }
            
            .domain-info {
                display: flex;
                align-items: center;
                gap: 8px;
                flex: 1;
            }
            
            .status-indicator {
                width: 8px;
                height: 8px;
                border-radius: 50%;
                display: inline-block;
                flex-shrink: 0;
            }
            
            .status-active {
                background-color: #4CAF50;
                box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
            }
            
            .status-inactive {
                background-color: #ccc;
            }
            
            .domain-content {
                flex: 1;
                display: flex;
                flex-direction: column;
            }
            
            .domain-name-row {
                display: flex;
                align-items: center;
                gap: 8px;
                margin-bottom: 2px;
            }
            
            .domain-name {
                font-weight: 500;
                color: #333;
                font-size: 14px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            
            .current-domain-tag {
                background: #667eea;
                color: white;
                font-size: 10px;
                padding: 1px 6px;
                border-radius: 10px;
                font-weight: bold;
                margin-left: 4px;
                flex-shrink: 0;
            }
            
            .rule-count-row {
                display: flex;
                align-items: center;
            }
            
            .rule-count {
                font-size: 12px;
                color: #666;
                font-weight: normal;
                padding-left: 16px;
            }
            
            .delete-domain {
                background: #ff4444;
                color: white;
                border: none;
                padding: 6px 12px;
                border-radius: 4px;
                cursor: pointer;
                font-size: 12px;
                font-weight: 500;
                flex-shrink: 0;
                margin-left: 12px;
                height: 28px;
            }
            
            .rules-container {
                background: white;
                max-height: 0;
                overflow: hidden;
                transition: max-height 0.3s ease;
                position: relative;
                z-index: 0;
            }
            
            .rules-container.expanded {
                max-height: none;
            }
            
            .rule-item {
                padding: 12px 16px;
                border-bottom: 1px solid #f5f5f5;
                display: flex;
                justify-content: space-between;
                align-items: center;
                background: #fafafa;
            }
            
            .rule-item:nth-child(odd) {
                background: #fff;
            }
            
            .rule-info {
                flex: 1;
            }
            
            .rule-domain {
                font-size: 12px;
                color: #666;
                margin-bottom: 4px;
            }
            
            .rule-selector {
                font-family: 'Consolas', 'Monaco', monospace;
                font-size: 12px;
                color: #333;
                word-break: break-all;
                background: rgba(0, 0, 0, 0.02);
                padding: 4px 8px;
                border-radius: 4px;
                border-left: 2px solid #667eea;
            }
            
            .delete-rule {
                background: #ff9800;
                color: white;
                border: none;
                padding: 4px 8px;
                border-radius: 4px;
                cursor: pointer;
                font-size: 12px;
                font-weight: 500;
                margin-left: 12px;
                flex-shrink: 0;
            }
            
            .action-buttons {
                display: flex;
                gap: 10px;
            }
            
            .action-btn {
                flex: 1;
                padding: 12px;
                color: white;
                border: none;
                border-radius: 6px;
                font-size: 14px;
                font-weight: 500;
                cursor: pointer;
            }
            
            .batch-section {
                margin-top: 20px;
            }
            
            .batch-textarea {
                width: 100%;
                height: 200px;
                padding: 10px;
                border: 1px solid #ddd;
                border-radius: 6px;
                font-family: 'Consolas', 'Monaco', monospace;
                font-size: 12px;
                box-sizing: border-box;
                margin-bottom: 10px;
                resize: vertical;
            }
            
            .empty-state {
                text-align: center;
                padding: 30px 16px;
            }
            
            .empty-icon {
                font-size: 36px;
                color: #ddd;
                margin-bottom: 12px;
            }
            
            .empty-text {
                color: #999;
                margin-bottom: 6px;
                font-size: 13px;
            }
            
            .empty-hint {
                color: #aaa;
                font-size: 12px;
            }
            
            .chevron {
                display: inline-block;
                transition: transform 0.3s;
                font-size: 10px;
                color: #666;
                flex-shrink: 0;
            }
            
            .chevron.down {
                transform: rotate(90deg);
            }
            
            /* 滚动条样式 */
            .content-area::-webkit-scrollbar {
                width: 8px;
            }
            
            .content-area::-webkit-scrollbar-track {
                background: #f1f1f1;
                border-radius: 4px;
            }
            
            .content-area::-webkit-scrollbar-thumb {
                background: #c1c1c1;
                border-radius: 4px;
            }
            
            .content-area::-webkit-scrollbar-thumb:hover {
                background: #a8a8a8;
            }
            
            /* 排序选项样式 */
            .sort-options {
                display: flex;
                align-items: center;
                gap: 12px;
                margin-bottom: 16px;
                padding-bottom: 12px;
                border-bottom: 1px solid #f0f0f0;
            }
            
            .sort-label {
                font-size: 13px;
                color: #666;
                font-weight: 500;
            }
            
            .sort-toggle {
                display: flex;
                align-items: center;
                gap: 6px;
                cursor: pointer;
                user-select: none;
                padding: 4px 8px;
                border-radius: 4px;
                transition: background-color 0.2s;
            }
            
            .sort-toggle:hover {
                background-color: #f0f0f0;
            }
            
            .toggle-switch {
                position: relative;
                display: inline-block;
                width: 44px;
                height: 24px;
            }
            
            .toggle-slider {
                position: absolute;
                cursor: pointer;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background-color: #ccc;
                transition: .4s;
                border-radius: 34px;
            }
            
            .toggle-slider:before {
                position: absolute;
                content: "";
                height: 18px;
                width: 18px;
                left: 3px;
                bottom: 3px;
                background-color: white;
                transition: .4s;
                border-radius: 50%;
                box-shadow: 0 1px 3px rgba(0,0,0,0.2);
            }
            
            .toggle-switch input:checked + .toggle-slider {
                background-color: #667eea;
            }
            
            .toggle-switch input:checked + .toggle-slider:before {
                transform: translateX(20px);
            }
            
            .toggle-switch input {
                display: none;
            }
            
            .toggle-text {
                font-size: 13px;
                color: #333;
                font-weight: 500;
            }
            
            /* 工具页样式 */
            .tools-grid {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 12px;
                margin-bottom: 20px;
            }
            
            .tool-card {
                background: white;
                border: 1px solid #e0e0e0;
                border-radius: 8px;
                padding: 16px;
                cursor: pointer;
                transition: all 0.2s;
                text-align: center;
            }
            
            .tool-card:hover {
                border-color: #667eea;
                box-shadow: 0 4px 12px rgba(0,0,0,0.1);
                transform: translateY(-2px);
            }
            
            .tool-card.export {
                border-color: #2196F3;
            }
            
            .tool-card.import {
                border-color: #4CAF50;
            }
            
            .tool-icon {
                font-size: 32px;
                margin-bottom: 8px;
            }
            
            .tool-title {
                font-size: 14px;
                font-weight: 600;
                margin-bottom: 4px;
                color: #333;
            }
            
            .tool-desc {
                font-size: 12px;
                color: #666;
                line-height: 1.4;
            }
            
            /* 简单的导入导出框 */
            .simple-import-box {
                margin-top: 20px;
                border: 1px solid #e0e0e0;
                border-radius: 8px;
                padding: 16px;
                background: #f9f9f9;
            }
            
            .simple-import-title {
                font-size: 14px;
                font-weight: 600;
                margin-bottom: 10px;
                color: #333;
            }
            
            .simple-import-textarea {
                width: 100%;
                height: 120px;
                padding: 10px;
                border: 1px solid #ddd;
                border-radius: 4px;
                font-family: 'Consolas', 'Monaco', monospace;
                font-size: 12px;
                box-sizing: border-box;
                margin-bottom: 10px;
                resize: vertical;
            }
            
            .simple-buttons {
                display: flex;
                gap: 10px;
                margin-top: 15px;
            }
            
            .simple-btn {
                flex: 1;
                padding: 10px;
                border: none;
                border-radius: 6px;
                font-size: 14px;
                font-weight: 500;
                cursor: pointer;
            }
            
            .simple-btn.primary {
                background: #4CAF50;
                color: white;
            }
            
            .simple-btn.secondary {
                background: #2196F3;
                color: white;
            }
            
            .simple-btn.cancel {
                background: #f5f5f5;
                color: #666;
            }
            
            /* 导出选项样式 */
            .export-options {
                display: flex;
                flex-direction: column;
                gap: 12px;
                margin: 20px 0;
            }
            
            .export-option {
                display: flex;
                align-items: center;
                padding: 12px;
                background: #f8f9fa;
                border: 1px solid #e0e0e0;
                border-radius: 8px;
                cursor: pointer;
                transition: all 0.2s;
            }
            
            .export-option:hover {
                background: #e3f2fd;
                border-color: #2196F3;
            }
            
            .export-option-icon {
                font-size: 24px;
                margin-right: 12px;
                width: 40px;
                text-align: center;
            }
            
            .export-option-content {
                flex: 1;
            }
            
            .export-option-title {
                font-size: 14px;
                font-weight: 600;
                color: #333;
                margin-bottom: 4px;
            }
            
            .export-option-desc {
                font-size: 12px;
                color: #666;
            }
            
            .export-cancel-btn {
                width: 100%;
                padding: 12px;
                background: #f5f5f5;
                color: #666;
                border: none;
                border-radius: 8px;
                font-size: 14px;
                font-weight: 500;
                cursor: pointer;
                margin-top: 10px;
            }
            
            .export-cancel-btn:hover {
                background: #e0e0e0;
            }
            
            /* 导入选项样式 */
            .import-options {
                display: flex;
                flex-direction: column;
                gap: 12px;
                margin: 20px 0;
            }
            
            .import-option {
                display: flex;
                align-items: center;
                padding: 12px;
                background: #f8f9fa;
                border: 1px solid #e0e0e0;
                border-radius: 8px;
                cursor: pointer;
                transition: all 0.2s;
            }
            
            .import-option:hover {
                background: #e8f5e9;
                border-color: #4CAF50;
            }
            
            .import-option-icon {
                font-size: 24px;
                margin-right: 12px;
                width: 40px;
                text-align: center;
            }
            
            .import-option-content {
                flex: 1;
            }
            
            .import-option-title {
                font-size: 14px;
                font-weight: 600;
                color: #333;
                margin-bottom: 4px;
            }
            
            .import-option-desc {
                font-size: 12px;
                color: #666;
            }
            
            .import-cancel-btn {
                width: 100%;
                padding: 12px;
                background: #f5f5f5;
                color: #666;
                border: none;
                border-radius: 8px;
                font-size: 14px;
                font-weight: 500;
                cursor: pointer;
                margin-top: 10px;
            }
            
            .import-cancel-btn:hover {
                background: #e0e0e0;
            }
            
            /* 对话框样式 */
            .dialog-overlay {
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: rgba(0, 0, 0, 0.5);
                z-index: 2147483648;
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 20px;
                opacity: 0;
                transition: opacity 0.3s;
                pointer-events: none;
            }
            
            .dialog-overlay.active {
                opacity: 1;
                pointer-events: all;
            }
            
            .dialog-container {
                background: white;
                border-radius: 12px;
                width: 100%;
                max-width: 500px;
                max-height: 90vh;
                overflow-y: auto;
                box-shadow: 0 20px 60px rgba(0,0,0,0.3);
                transform: translateY(20px);
                transition: transform 0.3s;
            }
            
            .dialog-overlay.active .dialog-container {
                transform: translateY(0);
            }
            
            .dialog-header {
                background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                color: white;
                padding: 16px 20px;
                position: relative;
                border-radius: 12px 12px 0 0;
            }
            
            .dialog-header.export {
                background: #2196F3;
            }
            
            .dialog-header.import {
                background: #4CAF50;
            }
            
            .dialog-title {
                margin: 0;
                font-size: 16px;
                font-weight: 600;
            }
            
            .dialog-close {
                position: absolute;
                top: 12px;
                right: 12px;
                background: rgba(255,255,255,0.2);
                border: none;
                color: white;
                width: 28px;
                height: 28px;
                border-radius: 50%;
                cursor: pointer;
                font-size: 18px;
                line-height: 1;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            
            .dialog-body {
                padding: 20px;
            }
            
            .dialog-info {
                margin-bottom: 16px;
                font-size: 14px;
                color: #333;
                text-align: center;
            }
            
            .text-import-area {
                margin: 20px 0;
            }
            
            .text-import-textarea {
                width: 100%;
                height: 200px;
                padding: 12px;
                border: 1px solid #ddd;
                border-radius: 8px;
                font-family: 'Consolas', 'Monaco', monospace;
                font-size: 12px;
                line-height: 1.5;
                resize: vertical;
                box-sizing: border-box;
                margin-bottom: 16px;
            }
            
            .text-import-textarea:focus {
                outline: none;
                border-color: #4CAF50;
                box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
            }
            
            .dialog-buttons {
                display: flex;
                gap: 10px;
                margin-top: 20px;
            }
            
            .dialog-button {
                flex: 1;
                padding: 12px;
                border: none;
                border-radius: 8px;
                font-size: 14px;
                font-weight: 500;
                cursor: pointer;
                transition: background-color 0.2s;
            }
            
            .dialog-button.primary {
                background: #4CAF50;
                color: white;
            }
            
            .dialog-button.primary:hover {
                background: #388E3C;
            }
            
            .dialog-button.secondary {
                background: #2196F3;
                color: white;
            }
            
            .dialog-button.secondary:hover {
                background: #0b7dda;
            }
            
            .dialog-button.cancel {
                background: #f5f5f5;
                color: #666;
            }
            
            .dialog-button.cancel:hover {
                background: #e0e0e0;
            }
            
            /* 导入模式选项样式 */
            .import-mode-options {
                display: flex;
                flex-direction: column;
                gap: 12px;
                margin: 20px 0;
            }
            
            .import-mode-option {
                display: flex;
                align-items: center;
                padding: 12px;
                background: #f8f9fa;
                border: 1px solid #e0e0e0;
                border-radius: 8px;
                cursor: pointer;
                transition: all 0.2s;
            }
            
            .import-mode-option:hover {
                background: #f0f8ff;
                border-color: #2196F3;
            }
            
            .import-mode-option.selected {
                background: #e3f2fd;
                border-color: #2196F3;
            }
            
            .import-mode-option-icon {
                font-size: 24px;
                margin-right: 12px;
                width: 40px;
                text-align: center;
            }
            
            .import-mode-option-content {
                flex: 1;
            }
            
            .import-mode-option-title {
                font-size: 14px;
                font-weight: 600;
                color: #333;
                margin-bottom: 4px;
            }
            
            .import-mode-option-desc {
                font-size: 12px;
                color: #666;
            }
        `;
        shadowRoot.appendChild(style);
        
        // 创建遮罩层
        const overlay = document.createElement('div');
        overlay.className = 'overlay';
        
        // 创建主界面
        const ui = document.createElement('div');
        ui.className = 'ui-container';
        ui.id = 'custom-rules-ui';
        
        // 渲染界面内容
        renderUI(shadowRoot, ui);
        
        shadowRoot.appendChild(overlay);
        shadowRoot.appendChild(ui);
        
        // 将宿主元素添加到文档
        document.body.appendChild(host);
        
        // 显示动画
        setTimeout(() => {
            overlay.style.opacity = '1';
            ui.style.opacity = '1';
            ui.style.transform = 'translate(-50%, -50%) scale(1)';
        }, 10);
        
        // 关闭事件
        overlay.addEventListener('click', (e) => {
            if (e.target === overlay) {
                closeUI();
            }
        });
        
        uiVisible = true;
        
        // 返回关闭函数
        function closeUI() {
            overlay.style.opacity = '0';
            ui.style.opacity = '0';
            ui.style.transform = 'translate(-50%, -50%) scale(0.9)';
            
            setTimeout(() => {
                if (host.parentNode) {
                    host.parentNode.removeChild(host);
                }
                uiVisible = false;
            }, 300);
        }
        
        // 绑定关闭按钮
        const closeBtn = shadowRoot.querySelector('#close-ui');
        if (closeBtn) {
            closeBtn.addEventListener('click', closeUI);
        }
    }

    // 渲染界面内容
    function renderUI(shadowRoot, container) {
        const rules = getAllRules();
        const sortByCurrentDomain = GM_getValue('sort_by_current_domain', true);
        
        // 按域名分组
        const domainGroups = {};
        rules.forEach(ruleStr => {
            const rule = parseRule(ruleStr);
            if (!rule) return;
            
            if (!domainGroups[rule.domain]) {
                domainGroups[rule.domain] = [];
            }
            domainGroups[rule.domain].push(rule);
        });
        
        // 计算统计信息
        const totalRules = rules.length;
        const totalDomains = Object.keys(domainGroups).length;
        const activeRules = rules.filter(ruleStr => {
            const rule = parseRule(ruleStr);
            return rule && domainMatches(rule.domain, currentDomain);
        }).length;
        
        // 构建HTML
        container.innerHTML = `
            <div class="header">
                <h2 class="title">自定义规则管理器</h2>
                <button class="close-btn" id="close-ui">×</button>
                <div class="stats">
                    共 ${totalRules} 条规则，${totalDomains} 个域名
                    <br>
                    当前域名: <strong>${currentDomain}</strong> (${activeRules}条生效)
                </div>
            </div>
            
            <div class="tabs" id="ui-tabs">
                <button class="tab-btn active" data-tab="manage">
                    规则管理
                </button>
                <button class="tab-btn" data-tab="add">
                    添加规则
                </button>
                <button class="tab-btn" data-tab="tools">
                    工具
                </button>
            </div>
            
            <div class="main-content">
                <div class="content-area" id="tab-content">
                    ${renderManageTab(domainGroups, sortByCurrentDomain)}
                </div>
            </div>
            
            <div class="footer">
                <button class="help-btn" id="help-btn">📖 帮助</button>
                <div class="status-message" id="status-message"></div>
            </div>
        `;
        
        // 绑定事件
        bindEvents(shadowRoot, container);
    }

    // 渲染管理标签页
    function renderManageTab(domainGroups, sortByCurrentDomain) {
        let domains = Object.keys(domainGroups);
        
        // 排序：如果启用当前域名置顶，则将当前域名排在最前面
        if (sortByCurrentDomain) {
            domains.sort((a, b) => {
                const aIsCurrent = domainMatches(a, currentDomain);
                const bIsCurrent = domainMatches(b, currentDomain);
                
                if (aIsCurrent && !bIsCurrent) return -1;
                if (!aIsCurrent && bIsCurrent) return 1;
                
                // 如果都是当前域名或都不是，按字母顺序排序
                return a.localeCompare(b);
            });
        } else {
            domains.sort((a, b) => a.localeCompare(b));
        }
        
        let html = `
            <div class="sort-options">
                <span class="sort-label">排序选项:</span>
                <label class="sort-toggle" for="sort-switch">
                    <div class="toggle-switch">
                        <input type="checkbox" id="sort-switch" ${sortByCurrentDomain ? 'checked' : ''}>
                        <span class="toggle-slider"></span>
                    </div>
                    <span class="toggle-text">当前域名规则置顶</span>
                </label>
            </div>
        `;
        
        if (domains.length === 0) {
            html += `
                <div class="empty-state">
                    <div class="empty-icon">📝</div>
                    <div class="empty-text">暂无规则</div>
                    <div class="empty-hint">点击"添加规则"标签创建第一条规则，或导入现有规则</div>
                </div>
            `;
            return html;
        }
        
        domains.forEach(domain => {
            const rules = domainGroups[domain];
            const isCurrentDomain = domainMatches(domain, currentDomain);
            const statusClass = isCurrentDomain ? 'status-active' : 'status-inactive';
            const domainClass = isCurrentDomain ? 'domain-group current-domain' : 'domain-group';
            
            html += `
                <div class="${domainClass}" data-domain="${domain}">
                    <div class="domain-header">
                        <span class="chevron">▶</span>
                        <span class="status-indicator ${statusClass}"></span>
                        <div class="domain-content">
                            <div class="domain-name-row">
                                <span class="domain-name">${domain}</span>
                                ${isCurrentDomain ? '<span class="current-domain-tag">当前</span>' : ''}
                            </div>
                            <div class="rule-count-row">
                                <span class="rule-count">${rules.length} 条规则</span>
                            </div>
                        </div>
                        <button class="delete-domain" data-domain="${domain}">
                            删除全部
                        </button>
                    </div>
                    <div class="rules-container">
            `;
            
            rules.forEach((rule, index) => {
                html += `
                    <div class="rule-item">
                        <div class="rule-info">
                            <div class="rule-domain">
                                ${rule.domain}##
                            </div>
                            <div class="rule-selector">
                                ${rule.selector}
                            </div>
                        </div>
                        <button class="delete-rule" data-rule="${encodeURIComponent(rule.raw)}">
                            删除
                        </button>
                    </div>
                `;
            });
            
            html += `
                    </div>
                </div>
            `;
        });
        
        return html;
    }

    // 渲染添加标签页
    function renderAddTab() {
        return `
            <div style="max-width: 500px; margin: 0 auto;">
                <div class="batch-section">
                    <textarea class="batch-textarea" id="batch-input" placeholder="每行一条规则，格式：域名##选择器

示例：
www.123pan.com##.ad-banner
youtube.com##.video-ads
*.baidu.com##.advertisement"></textarea>
                    <div style="display: flex; gap: 10px;">
                        <button class="action-btn" id="batch-add-btn" style="background: #4CAF50; font-size: 13px; padding: 10px; flex: 2;">
                            确认添加
                        </button>
                        <button class="action-btn" id="batch-clear-btn" style="background: #9e9e9e; font-size: 13px; padding: 10px; flex: 1;">
                            清空
                        </button>
                    </div>
                </div>
            </div>
        `;
    }

    // 渲染工具标签页
    function renderToolsTab() {
        const rules = getAllRules();
        const totalRules = rules.length;
        
        return `
            <div style="max-width: 500px; margin: 0 auto;">
                <h3 style="margin: 0 0 16px 0; color: #333; font-size: 15px;">工具</h3>
                
                <div class="tools-grid">
                    <div class="tool-card export" id="export-card">
                        <div class="tool-icon">📤</div>
                        <div class="tool-title">导出规则</div>
                        <div class="tool-desc">将所有规则导出为文本或文件</div>
                    </div>
                    
                    <div class="tool-card import" id="import-card">
                        <div class="tool-icon">📥</div>
                        <div class="tool-title">导入规则</div>
                        <div class="tool-desc">通过文本或文件导入规则</div>
                    </div>
                </div>
                
                <div style="background: #f8f9fa; padding: 16px; border-radius: 8px; margin-bottom: 16px;">
                    <h4 style="margin: 0 0 8px 0; color: #333; font-size: 14px;">统计信息</h4>
                    <div style="font-size: 13px; color: #666; line-height: 1.5;">
                        <div>总规则数: ${totalRules}</div>
                        <div>当前域名: ${currentDomain}</div>
                        <div>生效规则: ${rules.filter(ruleStr => {
                            const rule = parseRule(ruleStr);
                            return rule && domainMatches(rule.domain, currentDomain);
                        }).length} 条</div>
                    </div>
                </div>
                
                <div class="simple-import-box">
                    <div class="simple-import-title">快速导入规则</div>
                    <textarea class="simple-import-textarea" id="simple-import-textarea" placeholder="粘贴规则文本，每行一条规则，格式：域名##选择器"></textarea>
                    <div class="simple-buttons">
                        <button class="simple-btn primary" id="simple-import-btn">导入规则</button>
                        <button class="simple-btn cancel" id="simple-import-clear-btn">清空</button>
                    </div>
                </div>
                
                <div style="background: #fff3cd; padding: 12px; border-radius: 6px; border: 1px solid #ffeaa7; margin-top: 20px;">
                    <h4 style="margin: 0 0 8px 0; color: #856404; font-size: 13px;">⚠️ 注意事项</h4>
                    <div style="font-size: 12px; color: #856404; line-height: 1.5;">
                        <div>• 导入模式：合并导入（保留现有规则）</div>
                        <div>• 导出规则可以选择复制或下载</div>
                        <div>• 建议先导出备份再进行操作</div>
                    </div>
                </div>
            </div>
        `;
    }

    // 绑定事件
    function bindEvents(shadowRoot, container) {
        // 标签切换
        container.querySelectorAll('.tab-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                // 更新标签样式
                container.querySelectorAll('.tab-btn').forEach(b => {
                    b.classList.remove('active');
                });
                
                this.classList.add('active');
                
                // 更新内容
                const tab = this.getAttribute('data-tab');
                const content = container.querySelector('#tab-content');
                
                if (tab === 'manage') {
                    const rules = getAllRules();
                    const domainGroups = {};
                    const sortByCurrentDomain = GM_getValue('sort_by_current_domain', true);
                    
                    rules.forEach(ruleStr => {
                        const rule = parseRule(ruleStr);
                        if (!rule) return;
                        
                        if (!domainGroups[rule.domain]) {
                            domainGroups[rule.domain] = [];
                        }
                        domainGroups[rule.domain].push(rule);
                    });
                    
                    content.innerHTML = renderManageTab(domainGroups, sortByCurrentDomain);
                    bindManageEvents(shadowRoot, container);
                } else if (tab === 'add') {
                    content.innerHTML = renderAddTab();
                    bindAddEvents(shadowRoot, container);
                } else if (tab === 'tools') {
                    content.innerHTML = renderToolsTab();
                    bindToolsEvents(shadowRoot, container);
                }
            });
        });
        
        // 排序开关事件
        const sortSwitch = container.querySelector('#sort-switch');
        if (sortSwitch) {
            sortSwitch.addEventListener('change', function(e) {
                e.stopPropagation();
                GM_setValue('sort_by_current_domain', this.checked);
                
                // 重新渲染管理标签页
                const manageTab = container.querySelector('.tab-btn[data-tab="manage"]');
                if (manageTab && manageTab.classList.contains('active')) {
                    manageTab.click();
                }
            });
        }
        
        // 管理标签页事件
        bindManageEvents(shadowRoot, container);
        
        // 帮助按钮
        const helpBtn = container.querySelector('#help-btn');
        if (helpBtn) {
            helpBtn.addEventListener('click', showHelp);
        }
    }

    // 绑定工具标签页事件
    function bindToolsEvents(shadowRoot, container) {
        const content = container.querySelector('#tab-content');
        if (!content) return;
        
        // 导出卡片
        const exportCard = content.querySelector('#export-card');
        if (exportCard) {
            exportCard.addEventListener('click', () => {
                showExportDialog(shadowRoot);
            });
        }
        
        // 导入卡片
        const importCard = content.querySelector('#import-card');
        if (importCard) {
            importCard.addEventListener('click', () => {
                showImportDialog(shadowRoot);
            });
        }
        
        // 简单导入按钮
        const simpleImportBtn = content.querySelector('#simple-import-btn');
        if (simpleImportBtn) {
            simpleImportBtn.addEventListener('click', () => {
                importRulesSimple(shadowRoot);
            });
        }
        
        // 清空按钮
        const simpleImportClearBtn = content.querySelector('#simple-import-clear-btn');
        if (simpleImportClearBtn) {
            simpleImportClearBtn.addEventListener('click', () => {
                const textarea = shadowRoot.querySelector('#simple-import-textarea');
                if (textarea) {
                    textarea.value = '';
                    showMessage('已清空输入框');
                }
            });
        }
    }

    // 显示导出对话框
    function showExportDialog(shadowRoot) {
        // 创建对话框
        const dialog = document.createElement('div');
        dialog.className = 'dialog-overlay';
        dialog.innerHTML = `
            <div class="dialog-container">
                <div class="dialog-header export">
                    <h3 class="dialog-title">导出规则</h3>
                    <button class="dialog-close" id="export-dialog-close">×</button>
                </div>
                <div class="dialog-body">
                    <div class="dialog-info">
                        共有 ${getAllRules().length} 条规则
                    </div>
                    <div class="export-options">
                        <div class="export-option" id="export-copy-option">
                            <div class="export-option-icon">📋</div>
                            <div class="export-option-content">
                                <div class="export-option-title">复制到剪贴板</div>
                                <div class="export-option-desc">将规则复制到剪贴板，然后可以粘贴到其他地方</div>
                            </div>
                        </div>
                        
                        <div class="export-option" id="export-download-option">
                            <div class="export-option-icon">💾</div>
                            <div class="export-option-content">
                                <div class="export-option-title">下载为文件</div>
                                <div class="export-option-desc">将规则下载为文本文件，方便备份和分享</div>
                            </div>
                        </div>
                    </div>
                    <button class="export-cancel-btn" id="export-cancel-btn">取消导出</button>
                </div>
            </div>
        `;
        
        // 添加到shadowRoot
        shadowRoot.appendChild(dialog);
        
        // 显示对话框
        setTimeout(() => {
            dialog.classList.add('active');
        }, 10);
        
        // 绑定事件
        const closeBtn = dialog.querySelector('#export-dialog-close');
        const cancelBtn = dialog.querySelector('#export-cancel-btn');
        const copyOption = dialog.querySelector('#export-copy-option');
        const downloadOption = dialog.querySelector('#export-download-option');
        
        function closeDialog() {
            dialog.classList.remove('active');
            setTimeout(() => {
                if (dialog.parentNode) {
                    dialog.parentNode.removeChild(dialog);
                }
            }, 300);
        }
        
        closeBtn.addEventListener('click', closeDialog);
        cancelBtn.addEventListener('click', closeDialog);
        
        // 点击对话框外部关闭
        dialog.addEventListener('click', (e) => {
            if (e.target === dialog) {
                closeDialog();
                showMessage('已取消导出');
            }
        });
        
        // 复制选项
        copyOption.addEventListener('click', async () => {
            const rules = getAllRules();
            if (rules.length === 0) {
                showMessage('没有规则可以导出', 'error');
                return;
            }
            
            const rulesText = rules.join('\n');
            const success = await copyToClipboard(rulesText);
            
            if (success) {
                showMessage(`成功复制 ${rules.length} 条规则到剪贴板`);
            } else {
                showMessage('复制失败，请手动复制', 'error');
            }
            
            closeDialog();
        });
        
        // 下载选项
        downloadOption.addEventListener('click', () => {
            const rules = getAllRules();
            if (rules.length === 0) {
                showMessage('没有规则可以导出', 'error');
                return;
            }
            
            const rulesText = rules.join('\n');
            const filename = `custom-rules-${new Date().toISOString().slice(0, 10)}.txt`;
            const success = downloadTextFile(rulesText, filename);
            
            if (success) {
                showMessage(`已下载 ${rules.length} 条规则到文件`);
            } else {
                showMessage('下载失败，请重试', 'error');
            }
            
            closeDialog();
        });
    }

    // 显示导入对话框
    function showImportDialog(shadowRoot) {
        // 创建对话框
        const dialog = document.createElement('div');
        dialog.className = 'dialog-overlay';
        dialog.innerHTML = `
            <div class="dialog-container">
                <div class="dialog-header import">
                    <h3 class="dialog-title">导入规则</h3>
                    <button class="dialog-close" id="import-dialog-close">×</button>
                </div>
                <div class="dialog-body">
                    <div class="dialog-info">
                        选择导入方式：
                    </div>
                    <div class="import-options">
                        <div class="import-option" id="import-file-option">
                            <div class="import-option-icon">📁</div>
                            <div class="import-option-content">
                                <div class="import-option-title">从文件导入</div>
                                <div class="import-option-desc">选择规则文件进行导入</div>
                            </div>
                        </div>
                        
                        <div class="import-option" id="import-text-option">
                            <div class="import-option-icon">📝</div>
                            <div class="import-option-content">
                                <div class="import-option-title">从文本导入</div>
                                <div class="import-option-desc">粘贴规则文本进行导入</div>
                            </div>
                        </div>
                    </div>
                    <button class="import-cancel-btn" id="import-cancel-btn">取消导入</button>
                </div>
            </div>
        `;
        
        // 添加到shadowRoot
        shadowRoot.appendChild(dialog);
        
        // 显示对话框
        setTimeout(() => {
            dialog.classList.add('active');
        }, 10);
        
        // 绑定事件
        const closeBtn = dialog.querySelector('#import-dialog-close');
        const cancelBtn = dialog.querySelector('#import-cancel-btn');
        const fileOption = dialog.querySelector('#import-file-option');
        const textOption = dialog.querySelector('#import-text-option');
        
        function closeDialog() {
            dialog.classList.remove('active');
            setTimeout(() => {
                if (dialog.parentNode) {
                    dialog.parentNode.removeChild(dialog);
                }
            }, 300);
        }
        
        closeBtn.addEventListener('click', closeDialog);
        cancelBtn.addEventListener('click', closeDialog);
        
        // 点击对话框外部关闭
        dialog.addEventListener('click', (e) => {
            if (e.target === dialog) {
                closeDialog();
            }
        });
        
        // 文件导入选项
        fileOption.addEventListener('click', () => {
            closeDialog();
            importFromFile(shadowRoot);
        });
        
        // 文本导入选项
        textOption.addEventListener('click', () => {
            closeDialog();
            showTextImportDialog(shadowRoot);
        });
    }

    // 显示文本导入对话框
    function showTextImportDialog(shadowRoot) {
        // 创建文本导入对话框
        const dialog = document.createElement('div');
        dialog.className = 'dialog-overlay';
        dialog.innerHTML = `
            <div class="dialog-container" style="max-width: 600px;">
                <div class="dialog-header import">
                    <h3 class="dialog-title">从文本导入规则</h3>
                    <button class="dialog-close" id="text-import-dialog-close">×</button>
                </div>
                <div class="dialog-body">
                    <div class="dialog-info">
                        在下方文本框中粘贴规则，每行一条规则
                    </div>
                    <div class="text-import-area">
                        <textarea class="text-import-textarea" id="text-import-textarea" placeholder="每行一条规则，格式：域名##选择器

示例：
www.example.com##.ad-banner
*.google.com###ads
youtube.com##.video-ads"></textarea>
                    </div>
                    <div class="dialog-buttons">
                        <button class="dialog-button primary" id="text-import-next-btn">下一步</button>
                        <button class="dialog-button cancel" id="text-import-cancel-btn">取消</button>
                    </div>
                </div>
            </div>
        `;
        
        // 添加到shadowRoot
        shadowRoot.appendChild(dialog);
        
        // 显示对话框
        setTimeout(() => {
            dialog.classList.add('active');
            const textarea = dialog.querySelector('#text-import-textarea');
            if (textarea) textarea.focus();
        }, 10);
        
        // 绑定事件
        const closeBtn = dialog.querySelector('#text-import-dialog-close');
        const cancelBtn = dialog.querySelector('#text-import-cancel-btn');
        const nextBtn = dialog.querySelector('#text-import-next-btn');
        
        function closeDialog() {
            dialog.classList.remove('active');
            setTimeout(() => {
                if (dialog.parentNode) {
                    dialog.parentNode.removeChild(dialog);
                }
            }, 300);
        }
        
        closeBtn.addEventListener('click', closeDialog);
        cancelBtn.addEventListener('click', closeDialog);
        
        // 点击对话框外部关闭
        dialog.addEventListener('click', (e) => {
            if (e.target === dialog) {
                closeDialog();
            }
        });
        
        // 下一步按钮
        nextBtn.addEventListener('click', () => {
            const textarea = dialog.querySelector('#text-import-textarea');
            const content = textarea ? textarea.value : '';
            
            if (!content.trim()) {
                showMessage('请输入规则文本', 'error');
                return;
            }
            
            closeDialog();
            showImportModeDialog(shadowRoot, content, 'text');
        });
    }

    // 从文件导入
    function importFromFile(shadowRoot) {
        const fileInput = document.createElement('input');
        fileInput.type = 'file';
        fileInput.accept = '.txt,.text';
        fileInput.style.display = 'none';
        
        fileInput.onchange = function(e) {
            const file = e.target.files[0];
            if (!file) {
                showMessage('未选择文件', 'error');
                return;
            }
            
            const reader = new FileReader();
            reader.onload = function(e) {
                const content = e.target.result;
                showImportModeDialog(shadowRoot, content, 'file');
            };
            reader.onerror = function() {
                showMessage('读取文件失败', 'error');
            };
            reader.readAsText(file);
            
            // 清理
            document.body.removeChild(fileInput);
        };
        
        document.body.appendChild(fileInput);
        fileInput.click();
    }

    // 显示导入模式对话框
    function showImportModeDialog(shadowRoot, content, sourceType) {
        // 创建导入模式对话框
        const dialog = document.createElement('div');
        dialog.className = 'dialog-overlay';
        dialog.innerHTML = `
            <div class="dialog-container">
                <div class="dialog-header import">
                    <h3 class="dialog-title">选择导入模式</h3>
                    <button class="dialog-close" id="import-mode-dialog-close">×</button>
                </div>
                <div class="dialog-body">
                    <div class="dialog-info">
                        从${sourceType === 'file' ? '文件' : '文本'}中检测到规则
                    </div>
                    <div class="import-mode-options">
                        <div class="import-mode-option" id="merge-import-option">
                            <div class="import-mode-option-icon">➕</div>
                            <div class="import-mode-option-content">
                                <div class="import-mode-option-title">合并导入</div>
                                <div class="import-mode-option-desc">保留现有规则，只添加新规则</div>
                            </div>
                        </div>
                        
                        <div class="import-mode-option" id="replace-import-option">
                            <div class="import-mode-option-icon">🔄</div>
                            <div class="import-mode-option-content">
                                <div class="import-mode-option-title">替换导入</div>
                                <div class="import-mode-option-desc">清空现有规则，导入新规则</div>
                            </div>
                        </div>
                    </div>
                    <div class="dialog-buttons">
                        <button class="dialog-button primary" id="import-mode-confirm-btn">确认导入</button>
                        <button class="dialog-button cancel" id="import-mode-cancel-btn">取消</button>
                    </div>
                </div>
            </div>
        `;
        
        // 添加到shadowRoot
        shadowRoot.appendChild(dialog);
        
        // 显示对话框
        setTimeout(() => {
            dialog.classList.add('active');
        }, 10);
        
        // 绑定事件
        const closeBtn = dialog.querySelector('#import-mode-dialog-close');
        const cancelBtn = dialog.querySelector('#import-mode-cancel-btn');
        const confirmBtn = dialog.querySelector('#import-mode-confirm-btn');
        const mergeOption = dialog.querySelector('#merge-import-option');
        const replaceOption = dialog.querySelector('#replace-import-option');
        
        // 默认选择合并导入
        mergeOption.classList.add('selected');
        let selectedMode = 'merge';
        
        function closeDialog() {
            dialog.classList.remove('active');
            setTimeout(() => {
                if (dialog.parentNode) {
                    dialog.parentNode.removeChild(dialog);
                }
            }, 300);
        }
        
        closeBtn.addEventListener('click', closeDialog);
        cancelBtn.addEventListener('click', closeDialog);
        
        // 点击对话框外部关闭
        dialog.addEventListener('click', (e) => {
            if (e.target === dialog) {
                closeDialog();
            }
        });
        
        // 选择导入模式
        mergeOption.addEventListener('click', () => {
            mergeOption.classList.add('selected');
            replaceOption.classList.remove('selected');
            selectedMode = 'merge';
        });
        
        replaceOption.addEventListener('click', () => {
            replaceOption.classList.add('selected');
            mergeOption.classList.remove('selected');
            selectedMode = 'replace';
        });
        
        // 确认导入
        confirmBtn.addEventListener('click', () => {
            closeDialog();
            processImport(content, selectedMode);
        });
    }

    // 处理导入
    function processImport(content, mode) {
        if (!content.trim()) {
            showMessage('没有找到规则内容', 'error');
            return;
        }
        
        // 解析规则
        const newRules = content.split('\n')
            .map(line => line.trim())
            .filter(line => line && !line.startsWith('#') && !line.startsWith('!'))
            .filter(line => line.includes('##'));
        
        if (newRules.length === 0) {
            showMessage('没有找到有效的规则', 'error');
            return;
        }
        
        const existingRules = getAllRules();
        let allRules;
        let importedCount;
        
        if (mode === 'merge') {
            // 合并模式
            const uniqueNewRules = newRules.filter(rule => !existingRules.includes(rule));
            allRules = [...existingRules, ...uniqueNewRules];
            importedCount = uniqueNewRules.length;
        } else {
            // 替换模式
            allRules = newRules;
            importedCount = newRules.length;
        }
        
        saveRules(allRules);
        
        if (mode === 'replace') {
            showMessage(`已替换所有规则，成功导入 ${importedCount} 条新规则`);
        } else {
            showMessage(`成功导入 ${importedCount} 条规则（共 ${allRules.length} 条规则）`);
        }
        
        // 刷新UI
        const host = document.getElementById('custom-rules-host');
        if (host && host.shadowRoot) {
            const ui = host.shadowRoot.querySelector('.ui-container');
            if (ui) {
                const manageTab = ui.querySelector('.tab-btn[data-tab="manage"]');
                if (manageTab) {
                    manageTab.click();
                }
            }
        }
    }

    // 简单导入规则（用于工具页的文本框）
    function importRulesSimple(shadowRoot) {
        const textarea = shadowRoot.querySelector('#simple-import-textarea');
        if (!textarea) return;
        
        const rulesText = textarea.value.trim();
        if (!rulesText) {
            showMessage('请输入规则文本', 'error');
            return;
        }
        
        // 解析规则
        const newRules = rulesText.split('\n')
            .map(line => line.trim())
            .filter(line => line && !line.startsWith('#') && !line.startsWith('!'))
            .filter(line => line.includes('##'));
        
        if (newRules.length === 0) {
            showMessage('没有找到有效的规则', 'error');
            return;
        }
        
        const existingRules = getAllRules();
        const uniqueNewRules = newRules.filter(rule => !existingRules.includes(rule));
        const allRules = [...existingRules, ...uniqueNewRules];
        
        saveRules(allRules);
        textarea.value = '';
        
        const importedCount = uniqueNewRules.length;
        if (importedCount > 0) {
            showMessage(`成功导入 ${importedCount} 条规则（共 ${allRules.length} 条规则）`);
        } else {
            showMessage('所有规则都已存在', 'error');
        }
    }

    // 绑定管理标签页事件
    function bindManageEvents(shadowRoot, container) {
        // 域名折叠/展开
        container.querySelectorAll('.domain-header').forEach(header => {
            header.addEventListener('click', function(e) {
                // 如果点击的是删除按钮，不触发折叠
                if (e.target.classList.contains('delete-domain')) {
                    return;
                }
                
                const group = this.closest('.domain-group');
                const rulesContainer = group.querySelector('.rules-container');
                const chevron = this.querySelector('.chevron');
                
                if (rulesContainer.classList.contains('expanded')) {
                    rulesContainer.style.maxHeight = '0px';
                    rulesContainer.classList.remove('expanded');
                    chevron.classList.remove('down');
                } else {
                    // 使用scrollHeight获取实际高度
                    rulesContainer.style.maxHeight = rulesContainer.scrollHeight + 'px';
                    rulesContainer.classList.add('expanded');
                    chevron.classList.add('down');
                    
                    // 监听过渡结束，设置max-height为none以允许滚动
                    const transitionEndHandler = function onTransitionEnd() {
                        if (rulesContainer.classList.contains('expanded')) {
                            rulesContainer.style.maxHeight = 'none';
                        }
                        rulesContainer.removeEventListener('transitionend', onTransitionEnd);
                    };
                    rulesContainer.addEventListener('transitionend', transitionEndHandler);
                }
            });
        });
        
        // 删除单个规则
        container.querySelectorAll('.delete-rule').forEach(btn => {
            btn.addEventListener('click', function(e) {
                e.stopPropagation();
                const rule = decodeURIComponent(this.getAttribute('data-rule'));
                const rules = getAllRules();
                const newRules = rules.filter(r => r !== rule);
                saveRules(newRules);
                showMessage('规则已删除');
                
                // 重新渲染界面
                const host = document.getElementById('custom-rules-host');
                if (host && host.shadowRoot) {
                    const ui = host.shadowRoot.querySelector('.ui-container');
                    if (ui) {
                        renderUI(host.shadowRoot, ui);
                    }
                }
            });
        });
        
        // 删除整个域名
        container.querySelectorAll('.delete-domain').forEach(btn => {
            btn.addEventListener('click', function(e) {
                e.stopPropagation();
                const domain = this.getAttribute('data-domain');
                const rules = getAllRules();
                const newRules = rules.filter(ruleStr => {
                    const rule = parseRule(ruleStr);
                    return !rule || rule.domain !== domain;
                });
                saveRules(newRules);
                showMessage(`已删除域名 ${domain} 的所有规则`);
                
                // 重新渲染界面
                const host = document.getElementById('custom-rules-host');
                if (host && host.shadowRoot) {
                    const ui = host.shadowRoot.querySelector('.ui-container');
                    if (ui) {
                        renderUI(host.shadowRoot, ui);
                    }
                }
            });
        });
    }

    // 绑定添加标签页事件
    function bindAddEvents(shadowRoot, container) {
        // 批量添加规则
        const batchAddBtn = container.querySelector('#batch-add-btn');
        if (batchAddBtn) {
            batchAddBtn.addEventListener('click', function() {
                const batchInput = container.querySelector('#batch-input');
                const inputValue = batchInput ? batchInput.value : '';
                
                const newRules = inputValue.split('\n')
                    .map(line => line.trim())
                    .filter(line => line && !line.startsWith('#') && !line.startsWith('!'))
                    .filter(line => line.includes('##'));
                
                if (newRules.length === 0) {
                    showMessage('没有找到有效的规则', 'error');
                    return;
                }
                
                const existingRules = getAllRules();
                const uniqueNewRules = newRules.filter(rule => !existingRules.includes(rule));
                
                if (uniqueNewRules.length === 0) {
                    showMessage('所有规则都已存在', 'error');
                    return;
                }
                
                const allRules = [...existingRules, ...uniqueNewRules];
                saveRules(allRules);
                
                // 清空输入框
                if (batchInput) batchInput.value = '';
                
                showMessage(`成功添加 ${uniqueNewRules.length} 条新规则`);
                
                // 切换到管理标签页
                const manageTab = container.querySelector('.tab-btn[data-tab="manage"]');
                if (manageTab) manageTab.click();
            });
        }
        
        // 清空按钮
        const batchClearBtn = container.querySelector('#batch-clear-btn');
        if (batchClearBtn) {
            batchClearBtn.addEventListener('click', function() {
                const batchInput = container.querySelector('#batch-input');
                if (batchInput) batchInput.value = '';
                showMessage('已清空输入框');
            });
        }
    }

    // 显示帮助
    function showHelp() {
        alert(`自定义规则使用说明：

规则格式：
域名##CSS选择器

示例：
1. 隐藏特定元素：
   www.123pan.com##div.ant-modal-root:has(.tuia-modal-wrap)

2. 使用通配符：
   *.baidu.com##.advertisement
   匹配所有 baidu.com 的子域名

3. 常用选择器：
   .class-name          # 按类名
   #element-id          # 按ID
   div[class*='ad']     # 按属性包含
   div:has(.ad)         # 按子元素

4. 管理规则：
   - 按域名分组显示
   - 可删除单个规则
   - 可删除整个域名的所有规则
   - 点击域名展开/折叠规则列表
   - 绿色圆点表示规则在当前页面生效
   - 灰色圆点表示规则在当前页面未生效
   - 当前域名规则会高亮显示并有"当前"标签
   - 可以切换"当前域名规则置顶"排序选项

5. 批量添加：
   - 每行一条规则
   - 格式：域名##选择器

6. 导入导出（在"工具"标签页）：
   - 导出规则：点击后会弹出选项，可以选择复制到剪贴板或下载为文件，也可以取消导出
   - 导入规则：支持文件导入（.txt）或文本粘贴
   - 两种导入模式：合并导入（保留现有规则）和替换导入（清空后导入）

规则立即生效，无需刷新页面。`);
    }

    // ========== 油猴菜单 ==========
    function registerMenuCommand() {
        // 注册主菜单命令
        GM_registerMenuCommand('📋 自定义规则', function() {
            createRuleUI();
        });
    }

    // ========== 初始化 ==========
    function init() {
        // 应用规则
        applyRules();
        
        // 注册菜单命令
        registerMenuCommand();
        
        // 监听页面变化（单页应用）
        let lastUrl = location.href;
        const observer = new MutationObserver(() => {
            if (location.href !== lastUrl) {
                lastUrl = location.href;
                currentDomain = window.location.hostname;
                
                // 延迟应用规则，确保新页面加载完成
                setTimeout(applyRules, 100);
                
                // 如果UI打开，刷新UI
                if (uiVisible) {
                    const host = document.getElementById('custom-rules-host');
                    if (host && host.shadowRoot) {
                        const ui = host.shadowRoot.querySelector('.ui-container');
                        if (ui) {
                            renderUI(host.shadowRoot, ui);
                        }
                    }
                }
            }
        });
        
        observer.observe(document, { subtree: true, childList: true });
        
        console.log('自定义规则管理器已启动');
    }

    // 确保DOM加载完成
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', init);
    } else {
        init();
    }

    // 暴露API到全局
    unsafeWindow.customRulesManager = {
        getAllRules,
        saveRules,
        applyRules,
        showUI: createRuleUI
    };
})();