// ==UserScript==
// @name         超格教育网课字幕助手
// @namespace    https://chaogejiaoyu.com/
// @version      1.0.0
// @description  抓取 .vtt 字幕并在视频侧边显示可跳转的字幕列表
// @match        *://*.chaogejiaoyu.com/*
// @grant        GM_xmlhttpRequest
// @run-at       document-end
// @allFrames    true
// ==/UserScript==

(() => {
  const log = (...args) => console.log('[字幕助手]', ...args);

  if (window.top === window && !document.getElementById('playbackVideo')) {
    // 主框架先退出，等待在 iframe 中运行
    return;
  }

  let inited = false;
  let fontSize = 14;
  const waitInterval = setInterval(() => {
    const video = document.getElementById('playbackVideo');
    if (!video) return;
    if (inited) return;
    inited = true;
    clearInterval(waitInterval);
    init(video).catch(err => log('初始化失败', err));
  }, 800);

  async function init(video) {
    log('检测到视频元素，开始初始化');
    const vttUrl = findVttUrl(video);
    if (!vttUrl) {
      log('未找到字幕文件地址');
      return;
    }

    const vttText = await fetchVtt(vttUrl);
    if (!vttText) {
      log('字幕拉取失败');
      return;
    }

    const cues = parseVtt(vttText);
    if (!cues.length) {
      log('未解析到有效字幕');
      return;
    }

    const ui = buildSidebar();
    renderList(ui, cues, video, ui.state.mode);
    bindAutoHighlight(video, ui.list, cues);
    enableResize(ui.container);
  }

  function findVttUrl(video) {
    const datasetUrl = video.dataset.vcaptionsTargetVideo || video.getAttribute('data-vcaptions-target-video');
    if (datasetUrl && datasetUrl.includes('.vtt')) return datasetUrl;

    const track = video.querySelector('track[src*=".vtt"]');
    if (track) return track.getAttribute('src');

    const possible = document.querySelector('[src*=".vtt"], a[href*=".vtt"]');
    if (possible) return possible.getAttribute('src') || possible.getAttribute('href');

    return null;
  }

  async function fetchVtt(url) {
    try {
      const res = await fetch(url);
      if (!res.ok) throw new Error(res.statusText);
      return await res.text();
    } catch (err) {
      log('fetch 失败，尝试 GM_xmlhttpRequest', err);
      return new Promise(resolve => {
        GM_xmlhttpRequest({
          method: 'GET',
          url,
          onload: resp => resolve(resp.responseText),
          onerror: () => resolve(null),
        });
      });
    }
  }

  function parseVtt(text) {
    const lines = text.split(/\r?\n/);
    const timeRegex = /(\d{2}:\d{2}:\d{2}\.\d{3})\s*-->\s*(\d{2}:\d{2}:\d{2}\.\d{3})/;
    const toSeconds = t => {
      const [h, m, s] = t.split(':');
      return parseInt(h, 10) * 3600 + parseInt(m, 10) * 60 + parseFloat(s);
    };

    const cues = [];
    for (let i = 0; i < lines.length; i++) {
      const match = lines[i].match(timeRegex);
      if (!match) continue;
      const start = toSeconds(match[1]);
      const textLines = [];
      i++;
      while (i < lines.length && lines[i].trim() !== '') {
        textLines.push(lines[i]);
        i++;
      }
      const raw = textLines.join(' ');
      const clean = sanitizeText(raw);
      cues.push({ time: start, text: clean });
    }
    return cues;
  }

  const sanitizeText = str => (str || '').replace(/<\/?c[^>]*>/gi, '').trim();

  function buildSidebar() {
    const container = document.createElement('div');
    container.id = 'chaoge-caption-sidebar';
    Object.assign(container.style, {
      position: 'fixed',
      right: '10px',
      top: '12%',
      width: '280px',
      height: '70%',
      background: 'rgba(255,255,255,0.9)',
      backdropFilter: 'blur(6px)',
      border: '1px solid rgba(255,255,255,0.6)',
      borderRadius: '16px',
      boxShadow: '0 12px 28px rgba(0,0,0,0.12)',
      overflow: 'hidden',
      zIndex: '2147483647',
      fontSize: '14px',
      color: '#1f1f1f',
      boxSizing: 'border-box',
      display: 'flex',
      flexDirection: 'column',
    });

    const header = document.createElement('div');
    Object.assign(header.style, {
      minHeight: '46px',
      display: 'flex',
      alignItems: 'center',
      flexWrap: 'wrap',
      gap: '6px',
      padding: '8px 10px',
      background: 'linear-gradient(135deg, #f7f7f9, #eef1f5)',
      borderBottom: '1px solid rgba(0,0,0,0.05)',
      cursor: 'grab',
      userSelect: 'none',
      boxSizing: 'border-box',
    });

    const title = document.createElement('div');
    title.textContent = '字幕助手';
    Object.assign(title.style, {
      fontWeight: '600',
      fontSize: '13px',
      color: '#111',
      flex: '0 0 auto',
    });

    const btnArea = document.createElement('div');
    Object.assign(btnArea.style, {
      display: 'flex',
      alignItems: 'center',
      gap: '6px',
      flex: '1 1 auto',
      justifyContent: 'flex-end',
    });

    const pillBtn = (text) => {
      const b = document.createElement('button');
      b.textContent = text;
      Object.assign(b.style, {
        border: '1px solid #d0d7de',
        background: '#fff',
        color: '#111',
        padding: '4px 8px',
        borderRadius: '8px',
        cursor: 'pointer',
        fontSize: '11px',
        whiteSpace: 'nowrap',
        transition: 'all 0.15s ease',
      });
      b.addEventListener('mouseenter', () => (b.style.background = '#f2f4f7'));
      b.addEventListener('mouseleave', () => (b.style.background = '#fff'));
      return b;
    };

    const toggle = pillBtn('收起');
    toggle.addEventListener('click', () => {
      const hidden = container.dataset.hidden === '1';
      container.dataset.hidden = hidden ? '0' : '1';
      container.style.height = hidden ? container.dataset.prevHeight || '70%' : '48px';
      container.style.overflow = hidden ? 'hidden' : 'hidden';
      list.style.display = hidden ? 'block' : 'none';
      toggle.textContent = hidden ? '收起' : '展开';
    });

    const modeBtn = pillBtn('文档模式');

    const fontDec = pillBtn('A-');
    fontDec.style.padding = '4px 7px';
    fontDec.style.minWidth = '26px';
    fontDec.addEventListener('click', () => {
      if (fontSize > 10) {
        fontSize--;
        container.style.fontSize = `${fontSize}px`;
        renderList({ list, state }, cuesCache, currentVideo, state.mode);
      }
    });

    const fontInc = pillBtn('A+');
    fontInc.style.padding = '4px 7px';
    fontInc.style.minWidth = '26px';
    fontInc.addEventListener('click', () => {
      if (fontSize < 24) {
        fontSize++;
        container.style.fontSize = `${fontSize}px`;
        renderList({ list, state }, cuesCache, currentVideo, state.mode);
      }
    });

    const copyBtn = pillBtn('复制全文');
    copyBtn.style.display = 'none';
    copyBtn.addEventListener('click', () => {
      const allText = cuesCache.map(c => c.text).join(' ');
      navigator.clipboard.writeText(allText).then(() => {
        const origText = copyBtn.textContent;
        copyBtn.textContent = '已复制!';
        setTimeout(() => (copyBtn.textContent = origText), 1500);
      });
    });

    const dragHint = document.createElement('span');
    dragHint.textContent = '⇅';
    Object.assign(dragHint.style, {
      fontSize: '14px',
      color: '#6b7280',
      flex: '0 0 auto',
    });

    btnArea.appendChild(fontDec);
    btnArea.appendChild(fontInc);
    btnArea.appendChild(modeBtn);
    btnArea.appendChild(copyBtn);
    btnArea.appendChild(toggle);
    btnArea.appendChild(dragHint);
    header.appendChild(title);
    header.appendChild(btnArea);

    const list = document.createElement('div');
    list.id = 'chaoge-caption-list';
    Object.assign(list.style, {
      flex: '1',
      minHeight: '0',
      overflowY: 'auto',
      padding: '10px 10px 14px',
      boxSizing: 'border-box',
      background: 'rgba(255,255,255,0.75)',
    });

    container.appendChild(header);
    container.appendChild(list);
    document.body.appendChild(container);
    container.dataset.prevHeight = '70%';

    const state = { mode: 'list' }; // 'list' | 'doc'

    modeBtn.addEventListener('click', () => {
      state.mode = state.mode === 'list' ? 'doc' : 'list';
      modeBtn.textContent = state.mode === 'list' ? '文档模式' : '列表模式';
      copyBtn.style.display = state.mode === 'doc' ? 'inline-block' : 'none';
      renderList({ list, state }, cuesCache, currentVideo, state.mode);
    });

    enableDrag(container, header);
    return { container, list, state, modeBtn, copyBtn };
  }

  let cuesCache = [];
  let currentVideo = null;

  function renderList(ui, cues, video, mode = 'list') {
    cuesCache = cues;
    currentVideo = video;
    const listEl = ui.list;
    listEl.innerHTML = '';
    listEl.style.whiteSpace = 'normal';
    listEl.style.overflowX = 'hidden';
    const frag = document.createDocumentFragment();

    const baseRowStyle = {
      cursor: 'pointer',
      transition: 'all 0.15s ease',
    };

    cues.forEach((item, idx) => {
      const row = document.createElement(mode === 'doc' ? 'span' : 'div');
      row.className = 'caption-row';
      row.dataset.time = item.time;
      row.dataset.idx = String(idx);
      row.textContent = item.text || '[空行]';
      const baseBg = mode === 'list' ? 'transparent' : 'transparent';
      row.dataset.baseBg = baseBg;

      if (mode === 'list') {
        Object.assign(row.style, {
          ...baseRowStyle,
          padding: '6px 8px',
          marginBottom: '2px',
          border: 'none',
          background: baseBg,
          borderRadius: '0',
        });
      } else {
        Object.assign(row.style, {
          ...baseRowStyle,
          display: 'inline',
          padding: '0',
          marginRight: '6px',
          marginBottom: '4px',
          border: 'none',
          background: baseBg,
          lineHeight: '1.6',
        });
      }

      row.addEventListener('mouseenter', () => (row.style.background = '#f7f9fb'));
      row.addEventListener('mouseleave', () => (row.style.background = row.classList.contains('active') ? '#e6f7ff' : baseBg));
      row.addEventListener('click', () => {
        video.currentTime = item.time;
        video.play();
      });
      frag.appendChild(row);
    });
    listEl.appendChild(frag);
  }

  function bindAutoHighlight(video, listEl, cues) {
    const getRows = () => Array.from(listEl.querySelectorAll('.caption-row'));
    if (!getRows().length) return;

    const setActive = idx => {
      const rows = getRows();
      rows.forEach((r, i) => {
        const baseBg = r.dataset.baseBg || 'transparent';
        if (i === idx) {
          r.classList.add('active');
          r.style.background = '#e6f7ff';
          r.scrollIntoView({ block: 'center', behavior: 'smooth' });
        } else {
          r.classList.remove('active');
          r.style.background = baseBg;
        }
      });
    };

    video.addEventListener('timeupdate', () => {
      const t = video.currentTime;
      let lo = 0;
      let hi = cues.length - 1;
      let best = 0;
      while (lo <= hi) {
        const mid = Math.floor((lo + hi) / 2);
        if (cues[mid].time <= t) {
          best = mid;
          lo = mid + 1;
        } else {
          hi = mid - 1;
        }
      }
      setActive(best);
    });
  }

  function enableDrag(box, handle) {
    let dragging = false;
    let offsetX = 0;
    let offsetY = 0;

    const onMouseDown = e => {
      dragging = true;
      box.style.right = 'auto';
      const rect = box.getBoundingClientRect();
      offsetX = e.clientX - rect.left;
      offsetY = e.clientY - rect.top;
      handle.style.cursor = 'grabbing';
      document.addEventListener('mousemove', onMouseMove);
      document.addEventListener('mouseup', onMouseUp);
    };

    const onMouseMove = e => {
      if (!dragging) return;
      box.style.left = `${Math.max(6, e.clientX - offsetX)}px`;
      box.style.top = `${Math.max(6, e.clientY - offsetY)}px`;
    };

    const onMouseUp = () => {
      dragging = false;
      handle.style.cursor = 'grab';
      document.removeEventListener('mousemove', onMouseMove);
      document.removeEventListener('mouseup', onMouseUp);
    };

    handle.addEventListener('mousedown', onMouseDown);
  }

  function enableResize(box) {
    const resizeHandle = document.createElement('div');
    Object.assign(resizeHandle.style, {
      position: 'absolute',
      left: '0',
      top: '0',
      bottom: '0',
      width: '6px',
      cursor: 'ew-resize',
      background: 'transparent',
      transition: 'background 0.15s',
    });
    resizeHandle.title = '拖拽调整大小';
    box.appendChild(resizeHandle);

    let resizing = false;
    let startX = 0;
    let startWidth = 0;

    const onMouseDown = (e) => {
      resizing = true;
      startX = e.clientX;
      startWidth = box.offsetWidth;
      document.addEventListener('mousemove', onMouseMove);
      document.addEventListener('mouseup', onMouseUp);
      e.preventDefault();
    };

    const onMouseMove = (e) => {
      if (!resizing) return;
      const diff = startX - e.clientX;
      const newWidth = Math.max(200, Math.min(800, startWidth + diff));
      box.style.width = `${newWidth}px`;
    };

    const onMouseUp = () => {
      resizing = false;
      document.removeEventListener('mousemove', onMouseMove);
      document.removeEventListener('mouseup', onMouseUp);
    };

    resizeHandle.addEventListener('mouseenter', () => {
      resizeHandle.style.background = 'rgba(59, 130, 246, 0.3)';
    });
    resizeHandle.addEventListener('mouseleave', () => {
      if (!resizing) resizeHandle.style.background = 'transparent';
    });
    resizeHandle.addEventListener('mousedown', onMouseDown);
  }
})();