// ==UserScript==
// @name         文理文理
// @namespace    http://tampermonkey.net/
// @version      3.1
// @description  紧凑型赛博机械风格的可拖动视频控制面板，支持自定义倍速、自动跳转和可缩小功能
// @author       YourName
// @match        *://*.ytccr.com/*
// @grant        GM_addStyle
// @grant        GM_setValue
// @grant        GM_getValue
// @grant        GM_registerMenuCommand
// @require      https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js
// @resource     cyberFont https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700&family=Rajdhani:wght@400;500;700&display=swap
// ==/UserScript==

(function() {
    'use strict';

    // 添加谷歌字体
    const fontLink = document.createElement('link');
    fontLink.rel = 'stylesheet';
    fontLink.href = 'https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700&family=Rajdhani:wght@400;500;700&display=swap';
    document.head.appendChild(fontLink);

    // 添加 CSS 样式
    GM_addStyle(`
        .cyber-control-panel {
            position: fixed;
            top: 120px;
            right: 20px;
            background: linear-gradient(145deg, rgba(15, 20, 40, 0.95), rgba(10, 15, 35, 0.95));
            border-radius: 12px;
            padding: 15px;
            box-shadow: 
                0 0 15px rgba(0, 150, 255, 0.6),
                inset 0 0 10px rgba(0, 100, 255, 0.4);
            z-index: 10000;
            width: 280px;
            border: 1px solid rgba(0, 200, 255, 0.5);
            transition: all 0.3s ease;
            cursor: move;
            user-select: none;
            font-family: 'Orbitron', 'Rajdhani', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        .cyber-control-panel.minimized {
            width: 45px;
            height: 45px;
            padding: 0;
            overflow: hidden;
        }

        .cyber-border {
            position: absolute;
            pointer-events: none;
        }

        .cyber-border-top {
            top: 0;
            left: 8px;
            right: 8px;
            height: 2px;
            background: linear-gradient(90deg, transparent, #00ccff, transparent);
            box-shadow: 0 0 8px #00ccff;
        }

        .cyber-border-bottom {
            bottom: 0;
            left: 8px;
            right: 8px;
            height: 2px;
            background: linear-gradient(90deg, transparent, #00ccff, transparent);
            box-shadow: 0 0 8px #00ccff;
        }

        .cyber-border-left {
            left: 0;
            top: 8px;
            bottom: 8px;
            width: 2px;
            background: linear-gradient(transparent, #00ccff, transparent);
            box-shadow: 0 0 8px #00ccff;
        }

        .cyber-border-right {
            right: 0;
            top: 8px;
            bottom: 8px;
            width: 2px;
            background: linear-gradient(transparent, #00ccff, transparent);
            box-shadow: 0 0 8px #00ccff;
        }

        .corner {
            position: absolute;
            width: 12px;
            height: 12px;
            border: 2px solid #00ccff;
            box-shadow: 0 0 6px #00ccff;
            pointer-events: none;
        }

        .corner-tl {
            top: 0;
            left: 0;
            border-right: none;
            border-bottom: none;
            border-top-left-radius: 4px;
        }

        .corner-tr {
            top: 0;
            right: 0;
            border-left: none;
            border-bottom: none;
            border-top-right-radius: 4px;
        }

        .corner-bl {
            bottom: 0;
            left: 0;
            border-right: none;
            border-top: none;
            border-bottom-left-radius: 4px;
        }

        .corner-br {
            bottom: 0;
            right: 0;
            border-left: none;
            border-top: none;
            border-bottom-right-radius: 4px;
        }

        .panel-title {
            font-size: 1.2rem;
            margin-bottom: 12px;
            color: #00ccff;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            text-shadow: 0 0 6px rgba(0, 200, 255, 0.5);
            padding: 8px;
            background: rgba(0, 30, 60, 0.4);
            border-radius: 6px;
            border: 1px solid rgba(0, 150, 255, 0.3);
        }

        .status-indicator {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 15px;
            padding: 6px;
            background: rgba(0, 20, 40, 0.5);
            border-radius: 6px;
            border: 1px solid rgba(0, 150, 255, 0.3);
        }

        .status-light {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #ff4b4b;
            margin-right: 8px;
            box-shadow: 0 0 8px #ff4b4b;
        }

        .status-light.active {
            background: #00ff95;
            box-shadow: 0 0 8px #00ff95;
        }

        .status-text {
            font-size: 0.95rem;
            font-weight: 500;
            color: #a0f0ff;
        }

        .action-buttons {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 8px;
            margin-bottom: 12px;
        }

        .cyber-btn {
            padding: 10px 15px;
            font-size: 0.9rem;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.3s ease;
            background: linear-gradient(145deg, rgba(0, 100, 255, 0.7), rgba(0, 150, 255, 0.7));
            color: #ffffff;
            font-weight: bold;
            box-shadow: 0 3px 8px rgba(0, 50, 150, 0.4);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            flex: 1;
            min-width: 100px;
            font-family: 'Rajdhani', sans-serif;
            letter-spacing: 0.5px;
            position: relative;
            overflow: hidden;
            border: 1px solid rgba(0, 200, 255, 0.4);
        }

        .cyber-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: 0.5s;
        }

        .cyber-btn:hover::before {
            left: 100%;
        }

        .cyber-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 12px rgba(0, 100, 255, 0.6);
            background: linear-gradient(145deg, rgba(0, 120, 255, 0.8), rgba(0, 180, 255, 0.8));
        }

        .cyber-btn:active {
            transform: translateY(1px);
        }

        .btn-stop {
            background: linear-gradient(145deg, rgba(255, 50, 100, 0.7), rgba(255, 80, 80, 0.7));
        }

        .btn-stop:hover {
            background: linear-gradient(145deg, rgba(255, 70, 120, 0.8), rgba(255, 100, 100, 0.8));
        }

        .btn-auto-jump {
            background: linear-gradient(145deg, rgba(0, 200, 150, 0.7), rgba(0, 220, 180, 0.7));
        }

        .btn-auto-jump:hover {
            background: linear-gradient(145deg, rgba(0, 220, 170, 0.8), rgba(0, 240, 200, 0.8));
        }

        .speed-control, .auto-jump-control {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 12px;
            padding: 8px;
            background: rgba(0, 20, 40, 0.5);
            border-radius: 6px;
            border: 1px solid rgba(0, 150, 255, 0.3);
        }

        .cyber-input {
            flex: 1;
            padding: 8px;
            border-radius: 4px;
            border: 1px solid #00aaff;
            background: rgba(0, 10, 30, 0.7);
            color: #00ffcc;
            text-align: center;
            font-size: 0.95rem;
            font-weight: bold;
            box-shadow: inset 0 0 8px rgba(0, 50, 100, 0.5);
        }

        .cyber-input:focus {
            outline: none;
            border-color: #00ffff;
            box-shadow: 0 0 8px rgba(0, 200, 255, 0.5);
        }

        .speed-label, .auto-jump-label {
            color: #00ccff;
            font-weight: bold;
            min-width: 70px;
            font-size: 0.95rem;
            text-shadow: 0 0 4px rgba(0, 200, 255, 0.5);
        }

        .minimize-btn {
            position: absolute;
            top: 6px;
            right: 6px;
            width: 26px;
            height: 26px;
            border-radius: 50%;
            background: linear-gradient(145deg, rgba(0, 100, 255, 0.7), rgba(0, 150, 255, 0.7));
            color: #ffffff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            z-index: 1001;
            border: 1px solid rgba(0, 200, 255, 0.5);
            box-shadow: 0 0 6px rgba(0, 100, 255, 0.5);
            transition: all 0.3s ease;
        }

        .minimize-btn:hover {
            background: linear-gradient(145deg, rgba(0, 150, 255, 0.8), rgba(0, 200, 255, 0.8));
            transform: scale(1.1);
            box-shadow: 0 0 10px rgba(0, 150, 255, 0.7);
        }

        .minimized-icon {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 1.5rem;
            color: #00ccff;
            text-shadow: 0 0 8px rgba(0, 200, 255, 0.7);
        }

        .drag-handle {
            cursor: move;
        }
    `);

    // 创建控制面板 HTML
    const controlPanelHTML = `
        <div class="cyber-control-panel">
            <div class="cyber-border cyber-border-top"></div>
            <div class="cyber-border cyber-border-bottom"></div>
            <div class="cyber-border cyber-border-left"></div>
            <div class="cyber-border cyber-border-right"></div>
            <div class="corner corner-tl"></div>
            <div class="corner corner-tr"></div>
            <div class="corner corner-bl"></div>
            <div class="corner corner-br"></div>
            
            <button class="minimize-btn" id="minimize-btn">−</button>
            <div class="panel-content">
                <div class="panel-title drag-handle" id="panel-header">
                    <i class="fas fa-gamepad"></i>
                    <span>佛山顺德贤成教育</span>
                </div>
                <div class="status-indicator">
                    <div class="status-light active"></div>
                    <div class="status-text">运行中</div>
                </div>
                <div class="speed-control">
                    <span class="speed-label">播放速度:</span>
                    <input type="number" class="cyber-input" id="speed-input" min="0.1" max="16" step="0.1" value="2.0">
                    <button class="cyber-btn" id="apply-speed">应用</button>
                </div>
                <div class="auto-jump-control">
                    <span class="auto-jump-label">自动跳转:</span>
                    <input type="number" class="cyber-input" id="auto-jump-input" min="5" max="300" step="5" value="30">
                    <button class="cyber-btn btn-auto-jump" id="toggle-auto-jump">开启</button>
                </div>
                <div class="action-buttons">
                    <button class="cyber-btn" id="speed-up">
                        <i class="fas fa-forward"></i> 加速
                    </button>
                    <button class="cyber-btn" id="normal-speed">
                        <i class="fas fa-play"></i> 正常
                    </button>
                    <button class="cyber-btn" id="jump-to-end">
                        <i class="fas fa-step-forward"></i> 跳结尾
                    </button>
                    <button class="cyber-btn btn-stop" id="stop-video">
                        <i class="fas fa-stop"></i> 停止
                    </button>
                </div>
            </div>
        </div>
    `;

    // 插入到页面
    document.body.insertAdjacentHTML('afterbegin', controlPanelHTML);

    // 存储当前状态
    let isSpeedUpEnabled = false;
    let isAutoJumpEnabled = false;
    let isMinimized = false;
    let targetSpeed = GM_getValue('targetSpeed', 2.0);
    let autoJumpInterval = GM_getValue('autoJumpInterval', 30);
    let autoJumpTimer = null;
    let isDragging = false;
    let dragStartX, dragStartY, panelStartX, panelStartY;

    // 初始化输入框值
    document.getElementById('speed-input').value = targetSpeed;
    document.getElementById('auto-jump-input').value = autoJumpInterval;

    // 获取所有视频元素
    function getAllVideos() {
        return document.querySelectorAll('video');
    }

    // 应用速度到所有视频
    function applySpeedToVideos(speed) {
        const videos = getAllVideos();
        videos.forEach(video => {
            try {
                video.playbackRate = speed;
            } catch (e) {
                console.log('设置播放速度失败:', e);
            }
        });
    }

    // 跳至视频结尾
    function jumpToEnd() {
        const videos = getAllVideos();
        videos.forEach(video => {
            if (!isNaN(video.duration)) {
                video.currentTime = video.duration - 0.5;
            }
        });
    }

    // 开始/停止自动跳转
    function toggleAutoJump(enable) {
        if (enable) {
            // 停止现有定时器
            if (autoJumpTimer) clearInterval(autoJumpTimer);

            // 设置新定时器
            autoJumpTimer = setInterval(() => {
                jumpToEnd();
                console.log(`自动跳转至结尾 (间隔: ${autoJumpInterval}秒)`);
            }, autoJumpInterval * 1000);

            // 立即执行一次
            jumpToEnd();

            // 更新UI
            document.getElementById('toggle-auto-jump').textContent = '关闭';
            document.getElementById('toggle-auto-jump').classList.add('btn-stop');
            document.getElementById('toggle-auto-jump').classList.remove('btn-auto-jump');
        } else {
            // 停止定时器
            if (autoJumpTimer) clearInterval(autoJumpTimer);
            autoJumpTimer = null;

            // 更新UI
            document.getElementById('toggle-auto-jump').textContent = '开启';
            document.getElementById('toggle-auto-jump').classList.add('btn-auto-jump');
            document.getElementById('toggle-auto-jump').classList.remove('btn-stop');
        }
    }

    // 切换面板大小
    function toggleMinimize() {
        const panel = document.querySelector('.cyber-control-panel');
        const minimizeBtn = document.getElementById('minimize-btn');

        isMinimized = !isMinimized;

        if (isMinimized) {
            panel.classList.add('minimized');
            minimizeBtn.textContent = "+";
            minimizeBtn.title = "展开面板";
        } else {
            panel.classList.remove('minimized');
            minimizeBtn.textContent = "−";
            minimizeBtn.title = "缩小面板";
        }
    }

    // 面板拖动功能
    const panelHeader = document.getElementById('panel-header');
    const controlPanel = document.querySelector('.cyber-control-panel');
    
    panelHeader.addEventListener('mousedown', startDrag);
    
    function startDrag(e) {
        if (isMinimized) return;
        
        isDragging = true;
        dragStartX = e.clientX;
        dragStartY = e.clientY;
        
        const panelRect = controlPanel.getBoundingClientRect();
        panelStartX = panelRect.left;
        panelStartY = panelRect.top;
        
        controlPanel.style.zIndex = '10001';
        document.addEventListener('mousemove', dragPanel);
        document.addEventListener('mouseup', stopDrag);
    }
    
    function dragPanel(e) {
        if (!isDragging) return;
        
        const deltaX = e.clientX - dragStartX;
        const deltaY = e.clientY - dragStartY;
        
        const newX = panelStartX + deltaX;
        const newY = panelStartY + deltaY;
        
        // 限制在视窗范围内
        const maxX = window.innerWidth - controlPanel.offsetWidth;
        const maxY = window.innerHeight - controlPanel.offsetHeight;
        
        controlPanel.style.left = `${Math.max(0, Math.min(maxX, newX))}px`;
        controlPanel.style.top = `${Math.max(0, Math.min(maxY, newY))}px`;
        controlPanel.style.right = 'auto';
    }
    
    function stopDrag() {
        isDragging = false;
        document.removeEventListener('mousemove', dragPanel);
        document.removeEventListener('mouseup', stopDrag);
    }

    // 监听DOM变化（动态加载的视频）
    const observer = new MutationObserver((mutations) => {
        mutations.forEach(mutation => {
            if (mutation.addedNodes.length) {
                if (isSpeedUpEnabled) {
                    applySpeedToVideos(targetSpeed);
                }
            }
        });
    });

    // 开始监听整个文档
    observer.observe(document, {
        childList: true,
        subtree: true
    });

    // 应用自定义速度
    document.getElementById('apply-speed').addEventListener('click', () => {
        const newSpeed = parseFloat(document.getElementById('speed-input').value);
        if (!isNaN(newSpeed)) {
            targetSpeed = Math.max(0.1, Math.min(16, newSpeed));
            document.getElementById('speed-input').value = targetSpeed.toFixed(1);
            GM_setValue('targetSpeed', targetSpeed);
            if (isSpeedUpEnabled) {
                applySpeedToVideos(targetSpeed);
            }
            alert(`已设置播放速度为 ${targetSpeed}x`);
        } else {
            alert('请输入有效的数字');
        }
    });

    // 切换自动跳转
    document.getElementById('toggle-auto-jump').addEventListener('click', () => {
        const newInterval = parseInt(document.getElementById('auto-jump-input').value);
        if (!isNaN(newInterval) && newInterval >= 5 && newInterval <= 300) {
            autoJumpInterval = newInterval;
            GM_setValue('autoJumpInterval', autoJumpInterval);

            isAutoJumpEnabled = !isAutoJumpEnabled;
            toggleAutoJump(isAutoJumpEnabled);

            alert(isAutoJumpEnabled
                ? `已开启自动跳转 (每 ${autoJumpInterval} 秒)`
                : '已关闭自动跳转');
        } else {
            alert('请输入5-300之间的整数');
        }
    });

    // 加速按钮
    document.getElementById('speed-up').addEventListener('click', () => {
        isSpeedUpEnabled = true;
        applySpeedToVideos(targetSpeed);
        document.querySelector('.status-light').classList.add('active');
        document.querySelector('.status-text').textContent = '加速中';
        alert(`已加速至 ${targetSpeed}x`);
    });

    // 正常速度按钮
    document.getElementById('normal-speed').addEventListener('click', () => {
        isSpeedUpEnabled = false;
        applySpeedToVideos(1.0);
        document.querySelector('.status-light').classList.remove('active');
        document.querySelector('.status-text').textContent = '运行中';
        alert('已恢复正常速度');
    });

    // 跳至视频结尾
    document.getElementById('jump-to-end').addEventListener('click', () => {
        jumpToEnd();
        alert('已跳至视频结尾！');
    });

    // 停止播放
    document.getElementById('stop-video').addEventListener('click', () => {
        const videos = getAllVideos();
        videos.forEach(video => {
            video.pause();
        });
        alert('已停止播放！');
    });

    // 缩小/展开面板
    document.getElementById('minimize-btn').addEventListener('click', toggleMinimize);

    // 输入框回车事件
    document.getElementById('speed-input').addEventListener('keypress', (e) => {
        if (e.key === 'Enter') {
            document.getElementById('apply-speed').click();
        }
    });

    document.getElementById('auto-jump-input').addEventListener('keypress', (e) => {
        if (e.key === 'Enter') {
            document.getElementById('toggle-auto-jump').click();
        }
    });

    // 添加Tampermonkey菜单命令
    GM_registerMenuCommand("打开控制面板", function() {
        const panel = document.querySelector('.cyber-control-panel');
        if (panel.classList.contains('minimized')) {
            toggleMinimize();
        }
    });
    
    GM_registerMenuCommand("关闭控制面板", function() {
        const panel = document.querySelector('.cyber-control-panel');
        if (!panel.classList.contains('minimized')) {
            toggleMinimize();
        }
    });
    
    GM_registerMenuCommand("重置面板位置", function() {
        const panel = document.querySelector('.cyber-control-panel');
        panel.style.top = '120px';
        panel.style.right = '20px';
        panel.style.left = 'auto';
    });
})();