// ==UserScript==
// @name         智能元素定位助手 
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  按Alt+Shift+X激活元素选择模式
// @author       leekhotline
// @match        *://*/*
// @grant        none
// @license      MIT
// @downloadURL https://update.greasyfork.icu/scripts/558328/%E6%99%BA%E8%83%BD%E5%85%83%E7%B4%A0%E5%AE%9A%E4%BD%8D%E5%8A%A9%E6%89%8B.user.js
// @updateURL https://update.greasyfork.icu/scripts/558328/%E6%99%BA%E8%83%BD%E5%85%83%E7%B4%A0%E5%AE%9A%E4%BD%8D%E5%8A%A9%E6%89%8B.meta.js
// ==/UserScript==

(function() {
    'use strict';

    let isSelectionMode = false;
    let selectedElement = null;

    // 快捷键：Alt+Shift+X
    document.addEventListener('keydown', function(e) {
        if (e.altKey && e.shiftKey && e.key === 'X') {
            isSelectionMode = !isSelectionMode;

            if (isSelectionMode) {
                enableSelectionMode();
            } else {
                disableSelectionMode();
            }
        }
    });

    function enableSelectionMode() {
        document.body.style.cursor = 'crosshair';
        document.addEventListener('mouseover', onMouseOver);
        document.addEventListener('click', onClick, true);

        showNotification('🔍 元素选择模式已开启，点击页面元素进行查看');
    }

    function disableSelectionMode() {
        document.body.style.cursor = '';
        document.removeEventListener('mouseover', onMouseOver);
        document.removeEventListener('click', onClick, true);

        if (selectedElement) {
            selectedElement.style.outline = '';
        }

        showNotification('✅ 元素选择模式已关闭');
    }

    function onMouseOver(e) {
        if (selectedElement) {
            selectedElement.style.outline = '';
        }

        selectedElement = e.target;
        selectedElement.style.outline = '2px solid red';
    }

    function onClick(e) {
        e.preventDefault();
        e.stopPropagation();

        const element = e.target;
        analyzeElement(element);

        // 保持选择模式
        return false;
    }

    function analyzeElement(element) {
        const info = {
            tag: element.tagName.toLowerCase(),
            id: element.id,
            classes: element.className,
            text: element.textContent.substring(0, 100),
            href: element.href || '无',
            selectors: []
        };

        // 生成建议的选择器
        if (element.id) {
            info.selectors.push(`#${element.id}`);
        }

        if (element.className) {
            const classes = element.className.split(' ').filter(c => c.trim());
            classes.forEach(c => {
                info.selectors.push(`.${c}`);
                // 组合标签和类名
                info.selectors.push(`${info.tag}.${c}`);
            });
        }

        // 添加属性选择器
        if (element.hasAttribute('data-*')) {
            for (let attr of element.attributes) {
                if (attr.name.startsWith('data-')) {
                    info.selectors.push(`[${attr.name}="${attr.value}"]`);
                }
            }
        }

        // 显示分析结果
        console.clear();
        console.log('=== 元素分析结果 ===');
        console.log('标签:', info.tag);
        console.log('ID:', info.id || '无');
        console.log('类名:', info.classes || '无');
        console.log('文本:', info.text);
        console.log('链接:', info.href);
        console.log('\n=== 推荐的选择器 ===');
        info.selectors.forEach((selector, i) => {
            console.log(`${i+1}. ${selector}`);
            console.log(`   示例: document.querySelector("${selector}")`);
            console.log(`   数量: ${document.querySelectorAll(selector).length}个`);
        });

        // 显示在页面右上角
        showElementInfo(info);
    }

    function showElementInfo(info) {
        const existingPanel = document.getElementById('element-info-panel');
        if (existingPanel) {
            existingPanel.remove();
        }

        const panel = document.createElement('div');
        panel.id = 'element-info-panel';
        panel.style.cssText = `
            position: fixed;
            top: 20px;
            right: 20px;
            background: white;
            border: 2px solid #007bff;
            border-radius: 8px;
            padding: 15px;
            max-width: 500px;
            max-height: 80vh;
            overflow-y: auto;
            z-index: 999999;
            box-shadow: 0 4px 20px rgba(0,0,0,0.3);
            font-family: monospace;
            font-size: 14px;
        `;

        let html = `<h3 style="margin-top:0">📋 元素信息</h3>`;
        html += `<p><strong>标签:</strong> &lt;${info.tag}&gt;</p>`;
        html += `<p><strong>ID:</strong> ${info.id || '无'}</p>`;
        html += `<p><strong>类名:</strong> ${info.classes || '无'}</p>`;
        html += `<p><strong>文本:</strong> ${info.text}...</p>`;

        if (info.href && info.href !== '无') {
            html += `<p><strong>链接:</strong> <a href="${info.href}" target="_blank">${info.href.substring(0, 50)}...</a></p>`;
        }

        html += `<h4>🎯 推荐选择器：</h4>`;
        info.selectors.forEach(selector => {
            const count = document.querySelectorAll(selector).length;
            html += `<div style="margin: 5px 0; padding: 5px; background: #f8f9fa; border-radius: 4px;">
                <code>${selector}</code>
                <span style="color: #666;"> (${count}个)</span>
            </div>`;
        });

        html += `<button onclick="this.parentNode.remove()" style="margin-top:10px; padding:5px 10px; background:#dc3545; color:white; border:none; border-radius:4px; cursor:pointer;">关闭</button>`;

        panel.innerHTML = html;
        document.body.appendChild(panel);
    }

    function showNotification(message) {
        const notification = document.createElement('div');
        notification.textContent = message;
        notification.style.cssText = `
            position: fixed;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            background: #007bff;
            color: white;
            padding: 10px 20px;
            border-radius: 5px;
            z-index: 999999;
            font-family: sans-serif;
        `;

        document.body.appendChild(notification);
        setTimeout(() => notification.remove(), 3000);
    }
})();