// ==UserScript==
// @name         Via风格自定义规则管理器
// @namespace    http://tampermonkey.net/
// @version      3.9.5
// @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
// ==/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);
        }
    }

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

    // 创建UI
    function createRuleUI() {
        // 如果UI已存在，先移除
        const oldUI = document.getElementById('custom-rules-ui');
        if (oldUI) oldUI.remove();
        
        const oldOverlay = document.getElementById('custom-rules-overlay');
        if (oldOverlay) oldOverlay.remove();
        
        // 创建宿主元素
        const host = document.createElement('div');
        host.id = 'custom-rules-host';
        
        // 创建Shadow DOM - 使用open模式
        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: 600px;
                max-height: 80vh;
                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;
            }
            
            .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;
            }
            
            .input-group {
                margin-bottom: 16px;
            }
            
            .input-label {
                display: block;
                margin-bottom: 6px;
                color: #333;
                font-weight: 500;
                font-size: 13px;
            }
            
            .input-field {
                width: 100%;
                padding: 10px;
                border: 1px solid #ddd;
                border-radius: 6px;
                font-size: 13px;
                box-sizing: border-box;
            }
            
            .input-hint {
                font-size: 11px;
                color: #888;
                margin-top: 4px;
            }
            
            .preview-box {
                margin-bottom: 20px;
                padding: 10px;
                background: #f8f9fa;
                border-radius: 6px;
            }
            
            .preview-title {
                font-size: 12px;
                color: #666;
                margin-bottom: 6px;
            }
            
            .preview-content {
                font-family: 'Consolas', 'Monaco', monospace;
                font-size: 13px;
                color: #999;
                min-height: 20px;
            }
            
            .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;
            }
        `;
        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);
        }
        
        return 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>
            </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 (domains.length === 0) {
            return `
                <div class="empty-state">
                    <div class="empty-icon">📝</div>
                    <div class="empty-text">暂无规则</div>
                    <div class="empty-hint">点击"添加规则"标签创建第一条规则</div>
                </div>
            `;
        }
        
        // 排序：如果启用当前域名置顶，则将当前域名排在最前面
        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>
        `;
        
        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 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);
                }
            });
        });
        
        // 排序开关事件 - 使用更可靠的change事件
        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 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以允许滚动
                    rulesContainer.addEventListener('transitionend', function onTransitionEnd() {
                        if (rulesContainer.classList.contains('expanded')) {
                            rulesContainer.style.maxHeight = 'none';
                        }
                        rulesContainer.removeEventListener('transitionend', onTransitionEnd);
                    });
                }
            });
        });
        
        // 删除单个规则
        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) {
                        const sortByCurrentDomain = GM_getValue('sort_by_current_domain', true);
                        const rules = getAllRules();
                        const domainGroups = {};
                        rules.forEach(ruleStr => {
                            const rule = parseRule(ruleStr);
                            if (!rule) return;
                            
                            if (!domainGroups[rule.domain]) {
                                domainGroups[rule.domain] = [];
                            }
                            domainGroups[rule.domain].push(rule);
                        });
                        
                        container.querySelector('#tab-content').innerHTML = renderManageTab(domainGroups, sortByCurrentDomain);
                        bindManageEvents(shadowRoot, container);
                    }
                }
            });
        });
        
        // 删除整个域名
        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) {
                        const sortByCurrentDomain = GM_getValue('sort_by_current_domain', true);
                        const rules = getAllRules();
                        const domainGroups = {};
                        rules.forEach(ruleStr => {
                            const rule = parseRule(ruleStr);
                            if (!rule) return;
                            
                            if (!domainGroups[rule.domain]) {
                                domainGroups[rule.domain] = [];
                            }
                            domainGroups[rule.domain].push(rule);
                        });
                        
                        container.querySelector('#tab-content').innerHTML = renderManageTab(domainGroups, sortByCurrentDomain);
                        bindManageEvents(shadowRoot, container);
                    }
                }
            });
        });
    }

    // 绑定添加标签页事件
    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 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 = '';
                    }
                }, 3000);
            }
        }
        
        // 同时在控制台显示
        console.log(`[自定义规则] ${message}`);
    }

    // 显示帮助
    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. 批量添加：
   - 每行一条规则
   - 格式：域名##选择器

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

    // ========== 油猴菜单 ==========
    function registerMenuCommand() {
        // 注册菜单命令
        GM_registerMenuCommand('📋 自定义规则', function() {
            // 检查是否已经有UI
            if (uiVisible) {
                // 如果UI已经显示，先关闭再打开
                const host = document.getElementById('custom-rules-host');
                if (host) host.remove();
                uiVisible = false;
                
                // 延迟一点时间再打开新的UI
                setTimeout(createRuleUI, 50);
            } else {
                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(shadowRoot, ui);
                        }
                    }
                }
            }
        });
        
        observer.observe(document, { subtree: true, childList: true });
        
        console.log('自定义规则管理器已启动');
    }

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

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