// ==UserScript==
// @name         特教教材国家级示范培训 · 学习辅助面板（合规版 v1.3）
// @namespace    http://tampermonkey.net/
// @version      1.3
// @description  面板始终显示；视频懒检测绑定；真实学习时间统计；自动下一节；快捷键；本地笔记
// @author       Helper
// @match        https://t.pep.com.cn/*
// @match        https://wp.pep.com.cn/*
// @run-at       document-idle
// @grant        GM_addStyle
// @license      MIT
// ==/UserScript==

(function () {
    'use strict';

    // ===================== 配置 =====================
    const CONFIG = {
        videoSelector: 'video',
        seekStep: 10,
        volumeStep: 0.1,
        noteStorageKey: 'tj_pep_notes',
        statsStorageKey: 'tj_study_stats',
        autoNext: {
            enabled: false,
            countdown: 3,
            selectors: [
                'a[class*="next"]', 'button[class*="next"]',
                '[class*="next-btn"]', '[class*="nextBtn"]',
                '.next', '.btn-next'
            ],
            texts: ['下一节', '下一个', '下一讲', '下一课', '下一集', '下一章']
        }
    };
    CONFIG.autoNext.enabled = localStorage.getItem('tj_auto_next') === '1';

    // ===================== 工具 =====================
    const $ = (sel, root = document) => root.querySelector(sel);
    const pad = n => String(n).padStart(2, '0');
    function fmtTime(sec) {
        if (sec == null || isNaN(sec) || !isFinite(sec)) return '--:--';
        const s = Math.floor(sec % 60), m = Math.floor(sec / 60 % 60), h = Math.floor(sec / 3600);
        return h > 0 ? `${h}:${pad(m)}:${pad(s)}` : `${pad(m)}:${pad(s)}`;
    }
    function fmtDur(sec) {
        sec = Math.max(0, Math.floor(sec || 0));
        return `${pad(Math.floor(sec / 3600))}:${pad(Math.floor(sec % 3600 / 60))}:${pad(sec % 60)}`;
    }
    function log(msg) { console.log('[特教培训辅助]', msg); }
    function escapeHtml(str) {
        const d = document.createElement('div'); d.textContent = str; return d.innerHTML;
    }
    function isVisible(el) {
        if (!el || el.disabled) return false;
        const r = el.getBoundingClientRect(), st = getComputedStyle(el);
        return r.width > 0 && r.height > 0 && st.visibility !== 'hidden' &&
            st.display !== 'none' && st.opacity !== '0';
    }
    function showTip(msg, ms = 3000) {
        const el = document.createElement('div');
        el.className = 'tj-tip'; el.textContent = msg;
        document.body.appendChild(el);
        setTimeout(() => el.remove(), ms);
    }

    // ===================== 学习时间统计（仅真实播放） =====================
    const stats = loadStats();
    let sessionSeconds = 0;
    let lastTick = performance.now();
    let lastSave = 0;
    let studyRunning = false;
    let currentVideo = null;

    function todayKey() {
        const d = new Date();
        return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
    }
    function pageKey() { return location.pathname + location.search; }
    function loadStats() {
        try {
            const s = JSON.parse(localStorage.getItem(CONFIG.statsStorageKey) || '{}');
            return { total: s.total || 0, daily: s.daily || {}, pages: s.pages || {} };
        } catch { return { total: 0, daily: {}, pages: {} }; }
    }
    function saveStats() {
        try { localStorage.setItem(CONFIG.statsStorageKey, JSON.stringify(stats)); } catch {}
    }
    function tickStats() {
        const now = performance.now();
        const delta = (now - lastTick) / 1000;
        lastTick = now;
        const v = currentVideo;
        if (!v || v.paused || v.ended || v.readyState < 2) return;
        if (delta <= 0 || delta > 5) return;
        sessionSeconds += delta;
        stats.total += delta;
        stats.daily[todayKey()] = (stats.daily[todayKey()] || 0) + delta;
        stats.pages[pageKey()] = (stats.pages[pageKey()] || 0) + delta;
        if (now - lastSave > 5000) { saveStats(); lastSave = now; }
    }
    setInterval(tickStats, 1000);
    window.addEventListener('beforeunload', saveStats);
    document.addEventListener('visibilitychange', () => {
        if (document.visibilityState === 'hidden') saveStats();
    });

    // ===================== 快捷键 =====================
    function bindShortcuts(video) {
        if (video.__tjKeysBound) return;
        video.__tjKeysBound = true;
        document.addEventListener('keydown', function (e) {
            const tag = (e.target.tagName || '').toLowerCase();
            if (tag === 'input' || tag === 'textarea' || e.target.isContentEditable) return;
            const v = currentVideo;
            if (!v) return;
            switch (e.key) {
                case ' ': e.preventDefault(); v.paused ? v.play().catch(() => {}) : v.pause(); break;
                case 'ArrowLeft': e.preventDefault(); v.currentTime = Math.max(0, v.currentTime - CONFIG.seekStep); break;
                case 'ArrowRight': e.preventDefault(); v.currentTime = Math.min(v.duration || 0, v.currentTime + CONFIG.seekStep); break;
                case 'ArrowUp': e.preventDefault(); v.volume = Math.min(1, v.volume + CONFIG.volumeStep); break;
                case 'ArrowDown': e.preventDefault(); v.volume = Math.max(0, v.volume - CONFIG.volumeStep); break;
                case 'm': case 'M': e.preventDefault(); v.muted = !v.muted; break;
                case 'n': case 'N': e.preventDefault(); addNoteAtCurrentTime(v); break;
            }
        });
    }

    // ===================== 笔记 =====================
    function loadNotes() {
        try { return JSON.parse(localStorage.getItem(CONFIG.noteStorageKey) || '[]'); }
        catch { return []; }
    }
    function saveNotes(notes) { localStorage.setItem(CONFIG.noteStorageKey, JSON.stringify(notes)); }
    function addNoteAtCurrentTime(video) {
        const t = video.currentTime;
        const text = prompt(`在 ${fmtTime(t)} 处记录笔记：`, '');
        if (text == null) return;
        const trimmed = text.trim(); if (!trimmed) return;
        const notes = loadNotes();
        notes.push({ time: t, timeLabel: fmtTime(t), text: trimmed, page: location.href, createdAt: new Date().toLocaleString() });
        saveNotes(notes); renderNotes();
    }
    function renderNotes() {
        const list = document.getElementById('noteList'); if (!list) return;
        const notes = loadNotes().filter(n => n.page === location.href).sort((a, b) => a.time - b.time);
        if (!notes.length) { list.innerHTML = '<div style="color:#8899bb;font-size:12px;padding:6px 0;">暂无笔记，播放时按 N 添加</div>'; return; }
        list.innerHTML = notes.map(n => `
            <div style="display:flex;gap:8px;padding:5px 0;border-bottom:1px solid rgba(255,255,255,0.06);font-size:12px;">
                <span class="note-time" data-t="${n.time}" style="color:#ffd700;white-space:nowrap;cursor:pointer;">${n.timeLabel}</span>
                <span style="color:#c8d6e5;word-break:break-word;">${escapeHtml(n.text)}</span>
            </div>`).join('');
        list.querySelectorAll('.note-time').forEach(el => {
            el.onclick = () => { if (currentVideo) currentVideo.currentTime = parseFloat(el.dataset.t); };
        });
    }

    // ===================== 自动下一节 =====================
    let nextTimer = null, nextTarget = null;
    function findNextButton() {
        const panel = document.getElementById('tj-helper-panel');
        for (const sel of CONFIG.autoNext.selectors) {
            for (const el of document.querySelectorAll(sel)) {
                if (panel && panel.contains(el)) continue;
                if (isVisible(el)) return el;
            }
        }
        for (const el of document.querySelectorAll('a, button, [role="button"], [class*="btn"], [class*="next"]')) {
            if (panel && panel.contains(el)) continue;
            const t = (el.textContent || '').replace(/\s+/g, '').trim();
            if (!t || t.length > 12) continue;
            if (CONFIG.autoNext.texts.some(x => t === x || t.includes(x)) && isVisible(el)) return el;
        }
        return null;
    }
    function cancelPendingNext() {
        if (nextTimer) { clearInterval(nextTimer); nextTimer = null; }
        const toast = document.getElementById('tj-next-toast'); if (toast) toast.remove();
        nextTarget = null;
    }
    function triggerAutoNext() {
        if (!CONFIG.autoNext.enabled || nextTimer) return;
        const btn = findNextButton();
        if (!btn) { log('未找到“下一节”按钮'); showTip('视频已结束，未找到“下一节”按钮，请手动切换'); return; }
        nextTarget = btn;
        let remain = CONFIG.autoNext.countdown;
        const toast = document.createElement('div');
        toast.id = 'tj-next-toast';
        toast.innerHTML = `<span>⏭ 视频已结束，<b class="cnt">${remain}</b> 秒后自动播放下一节</span><button class="cancel">取消</button>`;
        document.body.appendChild(toast);
        nextTimer = setInterval(() => {
            remain--;
            if (remain <= 0) {
                clearInterval(nextTimer); nextTimer = null; toast.remove();
                const t = nextTarget; nextTarget = null;
                try { t.click(); } catch (e) { log('点击失败：' + e.message); }
            } else {
                const c = toast.querySelector('.cnt'); if (c) c.textContent = remain;
            }
        }, 1000);
        toast.querySelector('.cancel').onclick = () => { cancelPendingNext(); log('已取消自动跳转'); };
    }
    function bindEndedHandler(video) {
        if (video.__tjEndedBound) return;
        video.__tjEndedBound = true;
        video.addEventListener('ended', () => { log('视频自然播放结束'); triggerAutoNext(); });
        video.addEventListener('loadstart', cancelPendingNext);
    }

    // ===================== 一键学习 / 停止 =====================
    function syncAutoNextUI() {
        const t = document.getElementById('autoNextToggle'); if (t) t.checked = CONFIG.autoNext.enabled;
    }
    async function startOneClickStudy() {
        const v = currentVideo || $(CONFIG.videoSelector);
        if (!v) { showTip('未检测到视频。请确认已进入播放页，或按 F12 检查 video / iframe'); return; }
        CONFIG.autoNext.enabled = true; syncAutoNextUI(); studyRunning = true;
        if (v.ended) { triggerAutoNext(); return; }
        if (v.paused) {
            try { await v.play(); log('一键学习：已开始播放'); }
            catch { showTip('浏览器拦截了自动播放，请先点击一次视频区域再点“一键学习”'); return; }
        }
    }
    function stopStudy() {
        CONFIG.autoNext.enabled = false; syncAutoNextUI();
        cancelPendingNext(); studyRunning = false;
        showTip('已停止自动连播（当前视频不会暂停）');
    }

    // ===================== 视频检测与绑定 =====================
    function attachVideo(video) {
        if (!video || video === currentVideo) return;
        currentVideo = video;
        bindShortcuts(video);
        bindEndedHandler(video);
        lastTick = performance.now();
        log('已绑定视频元素');
        updateVideoStatus();
    }
    function findAndAttachVideo() {
        const v = $(CONFIG.videoSelector);
        if (v) attachVideo(v);
        updateVideoStatus();
    }
    function updateVideoStatus() {
        const el = document.getElementById('videoStatus');
        if (!el) return;
        if (currentVideo && document.contains(currentVideo)) {
            el.textContent = '✅ 已检测';
            el.style.color = '#8f8';
            el.title = '已绑定视频元素';
        } else {
            el.textContent = '⚠️ 未检测';
            el.style.color = '#ffa500';
            el.title = detectHint();
        }
        const hintEl = document.getElementById('videoHint');
        if (hintEl) hintEl.textContent = currentVideo ? '' : detectHint();
    }
    function detectHint() {
        const iframes = [...document.querySelectorAll('iframe')].filter(f => f.src);
        if (iframes.length) {
            const src = iframes.map(f => f.src).slice(0, 2).join('  |  ');
            return `未找到 video。页面含 iframe：${src} —— 视频可能在 iframe 内，需把该域名加入 @match。`;
        }
        return '未找到 video 元素。播放器可能不是原生 <video>，请检查 CONFIG.videoSelector。';
    }
    function startVideoWatcher() {
        findAndAttachVideo();
        try {
            new MutationObserver(() => findAndAttachVideo())
                .observe(document.documentElement, { childList: true, subtree: true });
        } catch {}
        setInterval(findAndAttachVideo, 1500);
    }

    // ===================== 面板刷新循环 =====================
    let rafId = null;
    function refreshPanel() {
        const v = currentVideo;
        const set = (id, txt) => { const el = document.getElementById(id); if (el) el.textContent = txt; };
        const setColor = (id, c) => { const el = document.getElementById(id); if (el) el.style.color = c; };

        if (v) {
            set('curTime', fmtTime(v.currentTime));
            set('durTime', fmtTime(v.duration));
            set('playRate', (v.playbackRate || 1) + 'x');
            const fill = document.getElementById('progressFill');
            if (fill) {
                const p = v.duration && isFinite(v.duration) ? Math.min(100, v.currentTime / v.duration * 100) : 0;
                fill.style.width = p.toFixed(1) + '%';
            }
            let s = '未开始', c = '#8899bb';
            if (v.ended) { s = '本节已结束'; c = '#ffa500'; }
            else if (v.paused) { s = '已暂停'; c = '#ffd700'; }
            else if (v.readyState >= 2) { s = studyRunning ? '🔴 学习中' : '播放中'; c = '#8f8'; }
            else { s = '加载中…'; c = '#8899bb'; }
            set('runState', s); setColor('runState', c);
        } else {
            set('runState', '等待视频'); setColor('runState', '#8899bb');
        }
        set('sessionTime', fmtDur(sessionSeconds));
        set('todayTime', fmtDur(stats.daily[todayKey()] || 0));
        set('pageTime', fmtDur(stats.pages[pageKey()] || 0));

        rafId = requestAnimationFrame(refreshPanel);
    }

    // ===================== 创建面板 =====================
    function createPanel() {
        if (document.getElementById('tj-helper-panel')) return;
        GM_addStyle(`
            #tj-helper-panel{position:fixed;bottom:24px;right:24px;width:330px;
                background:linear-gradient(160deg,rgba(18,24,42,.97),rgba(10,15,28,.99));
                backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
                border:1px solid rgba(255,215,0,.12);border-radius:16px;padding:16px;z-index:2147483647;
                font-family:'Segoe UI',system-ui,-apple-system,sans-serif;color:#e2e8f0;
                box-shadow:0 16px 48px rgba(0,0,0,.7);user-select:none;max-height:90vh;overflow-y:auto;}
            #tj-helper-panel .hdr{display:flex;align-items:center;justify-content:space-between;
                margin-bottom:12px;cursor:move;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.07);}
            #tj-helper-panel .hdr .t{font-size:14px;font-weight:700;
                background:linear-gradient(135deg,#ffd700,#f5a623);-webkit-background-clip:text;
                -webkit-text-fill-color:transparent;background-clip:text;}
            #tj-helper-panel .hdr .tag{font-size:10px;color:#ffd700;background:rgba(255,215,0,.1);
                padding:2px 8px;border-radius:10px;}
            #tj-helper-panel .actions{display:flex;gap:8px;margin-bottom:12px;}
            #tj-helper-panel .btn-primary{flex:1;padding:11px 0;border:none;border-radius:10px;
                background:linear-gradient(135deg,#f5af19,#f12711);color:#fff;font-size:14px;font-weight:700;
                cursor:pointer;box-shadow:0 4px 16px rgba(241,39,17,.25);}
            #tj-helper-panel .btn-primary:hover{transform:translateY(-1px);}
            #tj-helper-panel .btn-stop{flex:0 0 90px;padding:11px 0;border:1px solid rgba(255,120,120,.25);
                border-radius:10px;background:rgba(255,120,120,.08);color:#ff9999;font-size:13px;cursor:pointer;}
            #tj-helper-panel .btn-stop:hover{background:rgba(255,120,120,.16);}
            #tj-helper-panel .sec-title{font-size:10px;color:#667799;letter-spacing:1px;margin:10px 0 6px;text-transform:uppercase;}
            #tj-helper-panel .row{display:flex;justify-content:space-between;align-items:center;
                font-size:12px;color:#8899bb;padding:4px 0;}
            #tj-helper-panel .row .v{color:#e2e8f0;font-weight:600;font-variant-numeric:tabular-nums;}
            #tj-helper-panel .time-big{text-align:center;font-size:28px;font-weight:700;color:#ffd700;
                font-variant-numeric:tabular-nums;letter-spacing:1px;line-height:1.2;}
            #tj-helper-panel .time-lbl{text-align:center;font-size:10px;color:#667799;margin-bottom:6px;}
            #tj-helper-panel .bar{height:5px;background:rgba(255,255,255,.08);border-radius:3px;overflow:hidden;margin:4px 0 8px;}
            #tj-helper-panel .bar .fill{height:100%;width:0;border-radius:3px;
                background:linear-gradient(90deg,#ffd700,#f5a623);transition:width .3s;}
            #tj-helper-panel .next-row{display:flex;align-items:center;justify-content:space-between;
                background:rgba(0,0,0,.22);border-radius:10px;padding:8px 12px;margin:8px 0;}
            #tj-helper-panel .next-row .lbl{font-size:12px;color:#c8d6e5;}
            #tj-helper-panel .next-row .sub{font-size:10px;color:#556677;display:block;margin-top:2px;}
            #tj-helper-panel .switch{position:relative;display:inline-block;width:38px;height:20px;flex:none;}
            #tj-helper-panel .switch input{opacity:0;width:0;height:0;}
            #tj-helper-panel .slider{position:absolute;cursor:pointer;inset:0;background:#2a3a5a;border-radius:20px;transition:.2s;}
            #tj-helper-panel .slider::before{content:'';position:absolute;width:14px;height:14px;left:3px;top:3px;
                background:#fff;border-radius:50%;transition:.2s;}
            #tj-helper-panel .switch input:checked + .slider{background:#f5a623;}
            #tj-helper-panel .switch input:checked + .slider::before{transform:translateX(18px);}
            #tj-helper-panel .hint{font-size:10px;color:#556677;text-align:center;line-height:1.7;margin:8px 0;}
            #tj-helper-panel .video-hint{font-size:10px;color:#ffa500;line-height:1.5;margin:4px 0;
                padding:6px 8px;background:rgba(255,165,0,.07);border-radius:6px;word-break:break-all;display:none;}
            #tj-helper-panel .note-hdr{display:flex;justify-content:space-between;align-items:center;
                font-size:11px;color:#88ddff;margin-bottom:4px;}
            #noteList{max-height:120px;overflow-y:auto;}
            #noteList::-webkit-scrollbar{width:4px;}
            #noteList::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:4px;}
            #tj-next-toast{position:fixed;left:50%;bottom:30px;transform:translateX(-50%);
                background:rgba(20,28,50,.96);border:1px solid rgba(255,215,0,.25);color:#e2e8f0;
                padding:12px 20px;border-radius:14px;font-family:system-ui;font-size:14px;z-index:2147483647;
                display:flex;align-items:center;gap:14px;box-shadow:0 12px 36px rgba(0,0,0,.6);}
            #tj-next-toast .cnt{color:#ffd700;font-size:16px;}
            #tj-next-toast .cancel{background:rgba(255,255,255,.08);border:none;color:#c8d6e5;
                padding:6px 14px;border-radius:8px;cursor:pointer;font-size:13px;}
            .tj-tip{position:fixed;left:50%;bottom:100px;transform:translateX(-50%);
                background:rgba(20,28,50,.96);border:1px solid rgba(255,255,255,.12);color:#e2e8f0;
                padding:10px 18px;border-radius:10px;font-family:system-ui;font-size:13px;
                z-index:2147483647;box-shadow:0 10px 30px rgba(0,0,0,.5);}
        `);

        const panel = document.createElement('div');
        panel.id = 'tj-helper-panel';
        panel.innerHTML = `
            <div class="hdr" id="tjDragHandle">
                <span class="t">📘 学习辅助</span>
                <span class="tag">合规版 v1.3</span>
            </div>
            <div class="actions">
                <button class="btn-primary" id="oneClickBtn">▶ 一键学习</button>
                <button class="btn-stop" id="stopBtn">⏹ 停止</button>
            </div>
            <div class="sec-title">运行情况</div>
            <div class="row"><span>视频检测</span><span class="v" id="videoStatus" style="color:#ffa500;">⚠️ 未检测</span></div>
            <div class="video-hint" id="videoHint"></div>
            <div class="row"><span>运行状态</span><span class="v" id="runState" style="color:#8899bb;">等待视频</span></div>
            <div class="row"><span>播放速率</span><span class="v" id="playRate">1x</span></div>
            <div class="sec-title">学习时间（真实播放）</div>
            <div class="time-big" id="sessionTime">00:00:00</div>
            <div class="time-lbl">本次会话</div>
            <div class="row"><span>今日累计</span><span class="v" id="todayTime">00:00:00</span></div>
            <div class="row"><span>本页累计</span><span class="v" id="pageTime">00:00:00</span></div>
            <div class="sec-title">当前视频</div>
            <div class="row"><span>进度</span><span class="v"><span id="curTime">--:--</span> / <span id="durTime">--:--</span></span></div>
            <div class="bar"><div class="fill" id="progressFill"></div></div>
            <div class="next-row">
                <div>
                    <span class="lbl">🔁 自动下一节</span>
                    <span class="sub">仅在本节自然播放结束后切换</span>
                </div>
                <label class="switch">
                    <input type="checkbox" id="autoNextToggle">
                    <span class="slider"></span>
                </label>
            </div>
            <div class="hint">空格 播放/暂停 · ←/→ 快退/快进 ${CONFIG.seekStep}s · ↑/↓ 音量 · M 静音 · N 笔记</div>
            <div class="note-hdr">
                <span>📝 时间点笔记</span>
                <span style="cursor:pointer;color:#8899bb;font-size:10px;" id="clearNotesBtn">清空本页</span>
            </div>
            <div id="noteList"></div>
        `;
        document.body.appendChild(panel);

        document.getElementById('oneClickBtn').addEventListener('click', startOneClickStudy);
        document.getElementById('stopBtn').addEventListener('click', stopStudy);

        const toggle = document.getElementById('autoNextToggle');
        toggle.checked = CONFIG.autoNext.enabled;
        toggle.addEventListener('change', e => {
            CONFIG.autoNext.enabled = e.target.checked;
            localStorage.setItem('tj_auto_next', e.target.checked ? '1' : '0');
            if (!e.target.checked) { cancelPendingNext(); studyRunning = false; }
        });

        // 拖动
        const handle = document.getElementById('tjDragHandle');
        let dragging = false, sx = 0, sy = 0, ox = 0, oy = 0;
        handle.addEventListener('mousedown', e => {
            e.preventDefault();
            const r = panel.getBoundingClientRect();
            ox = r.left; oy = r.top; sx = e.clientX; sy = e.clientY;
            dragging = true; panel.style.transition = 'none';
        });
        document.addEventListener('mousemove', e => {
            if (!dragging) return;
            e.preventDefault();
            const nx = Math.max(0, Math.min(ox + e.clientX - sx, innerWidth - panel.offsetWidth));
            const ny = Math.max(0, Math.min(oy + e.clientY - sy, innerHeight - panel.offsetHeight));
            panel.style.left = nx + 'px'; panel.style.top = ny + 'px';
            panel.style.right = 'auto'; panel.style.bottom = 'auto';
        });
        document.addEventListener('mouseup', () => {
            if (dragging) { dragging = false; panel.style.transition = ''; }
        });

        document.getElementById('clearNotesBtn').addEventListener('click', () => {
            if (!confirm('确定清空当前页面的所有笔记？')) return;
            saveNotes(loadNotes().filter(n => n.page !== location.href));
            renderNotes();
        });

        // 双击“视频检测”行手动重新检测
        document.getElementById('videoStatus').addEventListener('dblclick', () => {
            findAndAttachVideo();
            showTip('已重新检测视频');
        });

        renderNotes();
        updateVideoStatus();
    }

    // ===================== 初始化：先建面板，再懒检测视频 =====================
    function init() {
        if (!document.body) { setTimeout(init, 200); return; }
        createPanel();
        startVideoWatcher();
        if (rafId) cancelAnimationFrame(rafId);
        refreshPanel();
        log('面板已创建；视频检测中。双击“视频检测”行可手动重试。');
    }

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', init);
    } else {
        init();
    }
})();