// ==UserScript==
// @name         币安盯盘助手
// @namespace    http://tampermonkey.net/
// @version      1.8.6
// @description  使用WebSocket实时显示多个币安交易对价格及24小时涨跌幅。
// @author       Grok
// @match        *://*/*
// @grant        GM_setValue
// @grant        GM_getValue
// @licens       MII
// @downloadURL none
// ==/UserScript==

(() => {
    'use strict';

    const CONFIG = {
        WS_URL: 'wss://stream.binance.com:9443/ws',
        RECONNECT_DELAY: 2000,
        INITIAL_TOP: 15,
        INITIAL_RIGHT: 15,
        WIDTH: 200,
        PADDING: 12,
        DEFAULT_PAIRS: ['ethusdt'],
        MAX_PAIRS: 10,
        STORAGE_KEY: 'binance_tracker_pairs'
    };

    if (document.getElementById('price-tracker')) return;

    const utils = {
        savePairs: pairs => GM_setValue(CONFIG.STORAGE_KEY, JSON.stringify(pairs)),
        loadPairs: () => JSON.parse(GM_getValue(CONFIG.STORAGE_KEY) || JSON.stringify(CONFIG.DEFAULT_PAIRS))
    };

    const ui = {
        wsSubscriptions: new Map(),
        isDragging: false,
        offsetX: 0,
        offsetY: 0,

        init() {
            this.container = Object.assign(document.createElement('div'), {
                id: 'price-tracker',
                style: `top:${CONFIG.INITIAL_TOP}px;right:${CONFIG.INITIAL_RIGHT}px;min-width:${CONFIG.WIDTH}px;padding:${CONFIG.PADDING}px`
            });
            this.container.innerHTML = `
                <div class="header">
                    <span class="title">币安助手</span>
                    <span class="settings-btn">⚙️</span>
                </div>
                <div class="pairs-container"></div>
                <div class="settings-panel" style="display:none">
                    <input type="text" class="pair-input" placeholder="输入交易对 (如 btcusdt)">
                    <button class="add-pair-btn">添加</button>
                </div>
            `;

            this.settingsBtn = this.container.querySelector('.settings-btn');
            this.settingsPanel = this.container.querySelector('.settings-panel');
            this.pairsContainer = this.container.querySelector('.pairs-container');
            this.pairInput = this.settingsPanel.querySelector('.pair-input');
            this.addPairBtn = this.settingsPanel.querySelector('.add-pair-btn');

            document.body.appendChild(this.container);
            this.injectStyles();
            this.addEventListeners();
            utils.loadPairs().forEach(pair => this.addPair(pair));
        },

        injectStyles() {
            document.head.appendChild(Object.assign(document.createElement('style'), {
                textContent: `
                    #price-tracker{position:fixed;background:linear-gradient(145deg,#2d3236,#202529);border:1px solid rgba(255,255,255,0.05);border-radius:14px;box-shadow:0 10px 28px rgba(0,0,0,0.4),0 1px 4px rgba(0,0,0,0.3);z-index:9999;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;cursor:grab;user-select:none;overflow:hidden;backdrop-filter:blur(10px);animation:fadeIn 0.3s ease-out}
                    #price-tracker:hover{box-shadow:0 14px 36px rgba(0,0,0,0.45),0 2px 6px rgba(0,0,0,0.35);transition:box-shadow 0.2s ease}
                    .header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
                    .title{color:#f0b90b;font-size:20px;font-weight:600;letter-spacing:0.5px;text-shadow:0 1px 1px rgba(0,0,0,0.2)}
                    .settings-btn{font-size:px;color:#f0b90b;cursor:pointer;padding:4px;border-radius:50%;background:rgba(255,255,255,0.06);transition:all 0.25s cubic-bezier(0.4,0,0.2,1);box-shadow:0 1px 3px rgba(0,0,0,0.2)}
                    .settings-btn:hover{transform:rotate(90deg) scale(1.2);background:rgba(255,255,255,0.14);box-shadow:0 2px 5px rgba(0,0,0,0.25)}
                    .pairs-container{max-height:240px;overflow:hidden}
                    .pair-item{margin-bottom:12px;padding:8px;border-radius:10px;background:rgba(255,255,255,0.05);position:relative;transition:all 0.25s cubic-bezier(0.4,0,0.2,1);animation:slideIn 0.3s ease-out;box-shadow:0 1px 3px rgba(0,0,0,0.15)}
                    .pair-item:hover{background:rgba(255,255,255,0.08);box-shadow:0 3px 6px rgba(0,0,0,0.2)}
                    .remove-btn{position:absolute;top:6px;right:6px;font-size:12px;color:#ff6666;cursor:pointer;opacity:0;transition:all 0.25s cubic-bezier(0.4,0,0.2,1);background:rgba(255,102,102,0.12);border-radius:50%;width:18px;height:18px;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 1px rgba(0,0,0,0.2)}
                    .pair-item:hover .remove-btn{opacity:1;transform:rotate(90deg)}
                    .remove-btn:hover{background:rgba(255,102,102,0.25);color:#ff8888;transform:rotate(180deg) scale(1.15)}
                    .price-header{display:flex;align-items:center;gap:8px;margin-bottom:6px}
                    .symbol{color:#f0b90b;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;text-shadow:0 1px 1px rgba(0,0,0,0.2)}
                    .price-container{display:flex;align-items:center;justify-content:space-between;gap:12px}
                    .price-value{color:#fff;font-weight:700;font-size:20px;letter-spacing:-0.5px;text-shadow:0 1px 3px rgba(0,0,0,0.3);transition:color 0.4s ease}
                    .price-value.updated-up{animation:pricePulseUp 0.4s ease-in-out}
                    .price-value.updated-down{animation:pricePulseDown 0.4s ease-in-out}
                    .change-24h{font-weight:600;font-size:13px;padding:4px 8px;border-radius:8px;background:rgba(255,255,255,0.08);box-shadow:inset 0 1px 2px rgba(0,0,0,0.15),0 1px 1px rgba(0,0,0,0.1);transition:all 0.25s cubic-bezier(0.4,0,0.2,1)}
                    .change-24h:hover{transform:scale(1.1);box-shadow:inset 0 1px 2px rgba(0,0,0,0.2),0 2px 3px rgba(0,0,0,0.15)}
                    .positive{color:#00ee00}.negative{color:#ff6666}
                    .price-time{color:#c0c8d0;font-size:11px;margin-top:6px;opacity:0.9;letter-spacing:0.3px;text-shadow:0 1px 1px rgba(0,0,0,0.15)}
                    .status-dot{background:#00ee00;border-radius:50%;width:8px;height:8px;box-shadow:0 0 4px rgba(0,238,0,0.7);animation:dotPulse 2s infinite cubic-bezier(0.4,0,0.6,1);flex-shrink:0}
                    .settings-panel{position:absolute;top:36px;right:${CONFIG.PADDING}px;background:#2d3236;border:1px solid rgba(255,255,255,0.07);border-radius:12px;padding:10px;box-shadow:0 6px 16px rgba(0,0,0,0.4);z-index:10000;backdrop-filter:blur(8px);opacity:0;transform:translateY(-8px);transition:all 0.3s cubic-bezier(0.4,0,0.2,1)}
                    .settings-panel.active{opacity:1;transform:translateY(0)}
                    .pair-input{padding:6px 10px;border:none;border-radius:8px;background:rgba(255,255,255,0.1);color:#fff;font-size:13px;margin-right:8px;outline:none;width:100px;transition:all 0.2s ease;box-shadow:0 1px 1px rgba(0,0,0,0.2)}
                    .pair-input:focus{background:rgba(255,255,255,0.16);transform:scale(1.03);box-shadow:0 2px 3px rgba(0,0,0,0.25)}
                    .pair-input::placeholder{color:#c0c8d0;opacity:0.75}
                    .add-pair-btn{padding:6px 12px;border:none;border-radius:8px;background:#f0b90b;color:#202529;font-weight:600;font-size:13px;cursor:pointer;transition:all 0.25s cubic-bezier(0.4,0,0.2,1);box-shadow:0 1px 4px rgba(240,185,11,0.35)}
                    .add-pair-btn:hover{background:#ffc107;transform:translateY(-2px) scale(1.06);box-shadow:0 3px 8px rgba(240,185,11,0.5)}
                    @keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
                    @keyframes slideIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:translateX(0)}}
                    @keyframes slideOut{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-8px)}}
                    @keyframes pricePulseUp{0%{transform:scale(1);color:#fff}50%{transform:scale(1.06);color:#00ee00}100%{transform:scale(1);color:#fff}}
                    @keyframes pricePulseDown{0%{transform:scale(1);color:#fff}50%{transform:scale(1.06);color:#ff6666}100%{transform:scale(1);color:#fff}}
                    @keyframes dotPulse{0%{transform:scale(1);opacity:1;box-shadow:0 0 4px rgba(0,238,0,0.7)}50%{transform:scale(1.25);opacity:0.7;box-shadow:0 0 8px rgba(0,238,0,0.9)}100%{transform:scale(1);opacity:1;box-shadow:0 0 4px rgba(0,238,0,0.7)}}
                `
            }));
        },

        addEventListeners() {
            const handleDragStart = (e) => {
                if (!this.settingsPanel.contains(e.target) && e.button === 0) {
                    this.isDragging = true;
                    const rect = this.container.getBoundingClientRect();
                    this.offsetX = e.clientX - rect.left;
                    this.offsetY = e.clientY - rect.top;
                    this.container.style.cursor = 'grabbing';
                    e.preventDefault();
                }
            };

            const handleDragMove = (e) => {
                if (this.isDragging) {
                    const newLeft = Math.max(0, Math.min(e.clientX - this.offsetX, window.innerWidth - this.container.offsetWidth));
                    const newTop = Math.max(0, Math.min(e.clientY - this.offsetY, window.innerHeight - this.container.offsetHeight));
                    requestAnimationFrame(() => {
                        this.container.style.left = `${newLeft}px`;
                        this.container.style.top = `${newTop}px`;
                        this.container.style.right = 'auto';
                    });
                }
            };

            const handleDragEnd = () => {
                if (this.isDragging) {
                    this.isDragging = false;
                    this.container.style.cursor = 'grab';
                }
            };

            this.container.addEventListener('mousedown', handleDragStart);
            document.addEventListener('mousemove', handleDragMove);
            document.addEventListener('mouseup', handleDragEnd);

            this.settingsBtn.addEventListener('click', (e) => (e.stopPropagation(), this.toggleSettings()));
            this.addPairBtn.addEventListener('click', () => this.handleAddPair());
            this.pairInput.addEventListener('keypress', (e) => e.key === 'Enter' && this.handleAddPair());
            this.container.addEventListener('click', (e) => this.settingsPanel.contains(e.target) && e.stopPropagation());
        },

        addPair(pair) {
            if (this.wsSubscriptions.size >= CONFIG.MAX_PAIRS) return alert(`最多支持 ${CONFIG.MAX_PAIRS} 个交易对`);
            if (this.wsSubscriptions.has(pair)) return;

            const pairDiv = Object.assign(document.createElement('div'), { className: 'pair-item' });
            pairDiv.innerHTML = `
                <span class="remove-btn">✕</span>
                <div class="price-header"><span class="status-dot"></span><span class="symbol">${pair.toUpperCase()}</span></div>
                <div class="price-container"><span class="price-value">$--.--</span><span class="change-24h">--.--%</span></div>
                <div class="price-time">更新时间: --:--:--</div>
            `;

            pairDiv.querySelector('.remove-btn').addEventListener('click', (e) => (e.stopPropagation(), this.removePair(pair)));
            this.pairsContainer.appendChild(pairDiv);

            const elements = {
                priceValue: pairDiv.querySelector('.price-value'),
                change24h: pairDiv.querySelector('.change-24h'),
                priceTime: pairDiv.querySelector('.price-time'),
                statusDot: pairDiv.querySelector('.status-dot'),
                element: pairDiv,
                lastPrice: null
            };
            this.wsSubscriptions.set(pair, elements);

            priceTracker.subscribePair();
            this.savePairs();
        },

        removePair(pair) {
            const sub = this.wsSubscriptions.get(pair);
            if (sub) {
                sub.element.style.animation = 'slideOut 0.3s ease-in forwards';
                sub.element.addEventListener('animationend', () => {
                    sub.element.remove();
                    this.wsSubscriptions.delete(pair);
                    priceTracker.subscribePair();
                    this.savePairs();
                }, { once: true });
            }
        },

        handleAddPair() {
            const pair = this.pairInput.value.trim().toLowerCase();
            if (pair && !this.wsSubscriptions.has(pair)) {
                this.addPair(pair);
                this.pairInput.value = '';
            }
        },

        savePairs: () => utils.savePairs([...ui.wsSubscriptions.keys()]),

        updateDisplay(pair, price, change, time, status) {
            const sub = this.wsSubscriptions.get(pair);
            if (!sub) return;

            const currentPrice = parseFloat(price.replace('$', ''));
            if (sub.lastPrice !== null && currentPrice !== sub.lastPrice) {
                sub.priceValue.textContent = price;
                sub.priceValue.classList.remove('updated-up', 'updated-down');
                sub.priceValue.classList.add(currentPrice > sub.lastPrice ? 'updated-up' : 'updated-down');
                sub.priceValue.addEventListener('animationend', () => sub.priceValue.classList.remove('updated-up', 'updated-down'), { once: true });
            } else {
                sub.priceValue.textContent = price;
            }
            sub.lastPrice = currentPrice;

            sub.change24h.textContent = change;
            sub.change24h.classList.remove('positive', 'negative');
            if (change !== '--.--%') sub.change24h.classList.add(parseFloat(change) >= 0 ? 'positive' : 'negative');
            sub.priceTime.textContent = `更新时间: ${time}`;
            sub.statusDot.style.background = status === 'success' ? '#00ee00' : '#ff6666';
            sub.statusDot.style.boxShadow = status === 'success' ? '0 0 4px rgba(0,238,0,0.7)' : '0 0 4px rgba(255,102,102,0.7)';
        },

        toggleSettings() {
            const isVisible = this.settingsPanel.style.display !== 'none';
            this.settingsPanel.style.display = isVisible ? 'none' : 'block';
            this.settingsPanel.classList.toggle('active', !isVisible);
        }
    };

    const priceTracker = {
        ws: null,
        reconnectTimeout: null,

        connect() {
            if (this.ws) this.ws.close();
            const pairs = [...ui.wsSubscriptions.keys()];
            if (!pairs.length) return;

            this.ws = new WebSocket(`${CONFIG.WS_URL}/${pairs.join('@ticker/')}@ticker`);
            this.ws.onopen = () => ui.wsSubscriptions.forEach((_, pair) => ui.updateDisplay(pair, '$--.--', '--.--%', '已连接', 'success'));
            this.ws.onmessage = (event) => {
                try {
                    const data = JSON.parse(event.data);
                    ui.updateDisplay(data.s.toLowerCase(), `$${parseFloat(data.c).toFixed(2)}`, `${parseFloat(data.P).toFixed(2)}%`, new Date().toLocaleTimeString(), 'success');
                } catch (e) {
                    console.error('WebSocket data error:', e);
                }
            };
            this.ws.onerror = () => {
                ui.wsSubscriptions.forEach((_, pair) => ui.updateDisplay(pair, '错误', '--.--%', '连接失败', 'error'));
                this.reconnect();
            };
            this.ws.onclose = () => {
                ui.wsSubscriptions.forEach((_, pair) => ui.updateDisplay(pair, '断开', '--.--%', '等待重连', 'error'));
                this.reconnect();
            };
        },

        subscribePair: () => priceTracker.connect(),
        reconnect() {
            clearTimeout(this.reconnectTimeout);
            this.reconnectTimeout = setTimeout(() => !this.ws || this.ws.readyState !== WebSocket.OPEN && this.connect(), CONFIG.RECONNECT_DELAY);
        },
        start: () => ui.init(),
        stop: () => { if (this.ws) this.ws.close(); clearTimeout(this.reconnectTimeout); }
    };

    priceTracker.start();
    window.addEventListener('unload', priceTracker.stop);
})();