// ==UserScript==
// @name         MP4 转 M3U8 外链工具
// @namespace    https://github.com/userscripts/mp4-to-m3u8
// @version      1.0.0
// @description  在任意网页上检测 MP4 视频链接，一键转换为 M3U8 外链，支持自定义服务器地址
// @author       Auto
// @match        *://*/*
// @grant        GM_xmlhttpRequest
// @grant        GM_setValue
// @grant        GM_getValue
// @grant        GM_addStyle
// @grant        GM_setClipboard
// @grant        GM_notification
// @connect      *
// @run-at       document-idle
// ==/UserScript==

(function () {
  'use strict';

  /* ========================================================
   * 配置项（可在面板中修改并持久保存）
   * ======================================================== */
  const CONFIG = {
    // 你的后端转换服务地址（见下方 Node.js 服务说明）
    serverUrl: GM_getValue('serverUrl', 'http://localhost:3700'),
    // 切片时长（秒）
    segmentTime: GM_getValue('segmentTime', 10),
    // 外链基础 URL（留空则使用服务器本地路径）
    baseUrl: GM_getValue('baseUrl', ''),
  };

  /* ========================================================
   * 样式注入
   * ======================================================== */
  GM_addStyle(`
    #m3u8-fab {
      position: fixed;
      right: 20px;
      bottom: 80px;
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: linear-gradient(135deg, #6366f1, #8b5cf6);
      color: #fff;
      font-size: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-shadow: 0 4px 16px rgba(99,102,241,.5);
      z-index: 2147483647;
      user-select: none;
      transition: transform .2s, box-shadow .2s;
    }
    #m3u8-fab:hover { transform: scale(1.1); box-shadow: 0 6px 20px rgba(99,102,241,.7); }

    #m3u8-panel {
      position: fixed;
      right: 20px;
      bottom: 140px;
      width: 400px;
      max-height: 80vh;
      background: #1e1e2e;
      color: #cdd6f4;
      border-radius: 14px;
      box-shadow: 0 12px 40px rgba(0,0,0,.6);
      z-index: 2147483646;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      font-size: 13px;
      display: none;
      flex-direction: column;
      overflow: hidden;
      animation: m3u8-slide-in .2s ease;
    }
    @keyframes m3u8-slide-in {
      from { opacity:0; transform: translateY(12px); }
      to   { opacity:1; transform: translateY(0); }
    }
    #m3u8-panel.open { display: flex; }

    .m3u8-header {
      padding: 14px 16px 10px;
      background: #181825;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid rgba(255,255,255,.06);
    }
    .m3u8-header h3 {
      margin: 0;
      font-size: 14px;
      font-weight: 600;
      color: #cba6f7;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .m3u8-close {
      cursor: pointer;
      color: #6c7086;
      font-size: 18px;
      line-height: 1;
      padding: 2px 4px;
      border-radius: 4px;
    }
    .m3u8-close:hover { color: #cdd6f4; background: rgba(255,255,255,.06); }

    .m3u8-tabs {
      display: flex;
      background: #181825;
      border-bottom: 1px solid rgba(255,255,255,.06);
    }
    .m3u8-tab {
      flex: 1;
      padding: 8px 0;
      text-align: center;
      cursor: pointer;
      color: #6c7086;
      font-size: 12px;
      transition: color .15s;
    }
    .m3u8-tab.active {
      color: #cba6f7;
      border-bottom: 2px solid #cba6f7;
    }

    .m3u8-body {
      flex: 1;
      overflow-y: auto;
      padding: 12px 14px;
    }
    .m3u8-body::-webkit-scrollbar { width: 4px; }
    .m3u8-body::-webkit-scrollbar-thumb { background: #45475a; border-radius: 4px; }

    .m3u8-section { margin-bottom: 14px; }
    .m3u8-label {
      font-size: 11px;
      color: #6c7086;
      margin-bottom: 4px;
      text-transform: uppercase;
      letter-spacing: .5px;
    }

    .m3u8-input {
      width: 100%;
      padding: 7px 10px;
      background: #313244;
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 7px;
      color: #cdd6f4;
      font-size: 12px;
      outline: none;
      box-sizing: border-box;
      transition: border-color .15s;
    }
    .m3u8-input:focus { border-color: #cba6f7; }

    .m3u8-row { display: flex; gap: 8px; }
    .m3u8-row .m3u8-input { flex: 1; }

    .m3u8-btn {
      padding: 7px 14px;
      border: none;
      border-radius: 7px;
      cursor: pointer;
      font-size: 12px;
      font-weight: 600;
      transition: all .15s;
      white-space: nowrap;
    }
    .m3u8-btn-primary {
      background: linear-gradient(135deg, #6366f1, #8b5cf6);
      color: #fff;
    }
    .m3u8-btn-primary:hover { filter: brightness(1.1); }
    .m3u8-btn-primary:disabled { opacity: .5; cursor: not-allowed; filter: none; }
    .m3u8-btn-ghost {
      background: rgba(255,255,255,.06);
      color: #cdd6f4;
    }
    .m3u8-btn-ghost:hover { background: rgba(255,255,255,.1); }

    .m3u8-result {
      background: #181825;
      border-radius: 8px;
      padding: 10px;
      margin-top: 10px;
      display: none;
    }
    .m3u8-result.show { display: block; }
    .m3u8-result-url {
      font-family: "SF Mono","Fira Code",monospace;
      font-size: 11px;
      color: #a6e3a1;
      word-break: break-all;
      margin-bottom: 8px;
    }
    .m3u8-result-btns { display: flex; gap: 6px; flex-wrap: wrap; }

    .m3u8-link-item {
      background: #313244;
      border-radius: 8px;
      padding: 8px 10px;
      margin-bottom: 6px;
      cursor: pointer;
      transition: background .15s;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .m3u8-link-item:hover { background: #45475a; }
    .m3u8-link-item.selected { border: 1px solid #cba6f7; }
    .m3u8-link-text {
      flex: 1;
      font-size: 11px;
      color: #89b4fa;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .m3u8-link-badge {
      font-size: 10px;
      padding: 2px 6px;
      border-radius: 4px;
      background: rgba(137,180,250,.15);
      color: #89b4fa;
    }

    .m3u8-status {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      padding: 6px 0;
    }
    .m3u8-status-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #6c7086;
      flex-shrink: 0;
    }
    .m3u8-status-dot.running {
      background: #f9e2af;
      animation: m3u8-pulse .8s infinite;
    }
    .m3u8-status-dot.ok { background: #a6e3a1; }
    .m3u8-status-dot.err { background: #f38ba8; }
    @keyframes m3u8-pulse {
      0%,100% { opacity:1; } 50% { opacity:.3; }
    }

    .m3u8-progress {
      height: 4px;
      background: #313244;
      border-radius: 4px;
      margin-top: 8px;
      overflow: hidden;
    }
    .m3u8-progress-bar {
      height: 100%;
      background: linear-gradient(90deg, #6366f1, #a6e3a1);
      border-radius: 4px;
      width: 0%;
      transition: width .3s;
    }

    .m3u8-settings-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 6px 0;
      border-bottom: 1px solid rgba(255,255,255,.04);
    }
    .m3u8-settings-row:last-child { border-bottom: none; }
    .m3u8-settings-key { color: #a6adc8; font-size: 12px; }
    .m3u8-settings-val { color: #cdd6f4; font-size: 12px; }
    .m3u8-save-tip {
      font-size: 11px;
      color: #a6e3a1;
      margin-top: 6px;
      display: none;
    }
    .m3u8-empty {
      text-align: center;
      padding: 24px 0;
      color: #45475a;
      font-size: 12px;
    }
  `);

  /* ========================================================
   * DOM 构建
   * ======================================================== */
  const fab = document.createElement('div');
  fab.id = 'm3u8-fab';
  fab.title = 'MP4 → M3U8 工具';
  fab.innerHTML = '📹';
  document.body.appendChild(fab);

  const panel = document.createElement('div');
  panel.id = 'm3u8-panel';
  panel.innerHTML = `
    <div class="m3u8-header">
      <h3>📹 MP4 → M3U8 外链工具</h3>
      <span class="m3u8-close" id="m3u8-close">✕</span>
    </div>
    <div class="m3u8-tabs">
      <div class="m3u8-tab active" data-tab="convert">🔄 转换</div>
      <div class="m3u8-tab" data-tab="detect">🔍 检测</div>
      <div class="m3u8-tab" data-tab="settings">⚙️ 设置</div>
    </div>

    <!-- 转换面板 -->
    <div class="m3u8-body" id="tab-convert">
      <div class="m3u8-section">
        <div class="m3u8-label">MP4 视频 URL</div>
        <textarea class="m3u8-input" id="m3u8-url-input" rows="3"
          placeholder="粘贴 MP4 视频地址&#10;支持 http/https 直链"></textarea>
      </div>
      <div class="m3u8-section">
        <div class="m3u8-row">
          <div style="flex:1">
            <div class="m3u8-label">切片时长 (秒)</div>
            <input class="m3u8-input" id="m3u8-seg-time" type="number" min="2" max="60" value="10">
          </div>
          <div style="flex:2">
            <div class="m3u8-label">外链基础 URL (可选)</div>
            <input class="m3u8-input" id="m3u8-base-url" type="text" placeholder="https://your-cdn.com/hls/">
          </div>
        </div>
      </div>
      <div class="m3u8-section">
        <div class="m3u8-row">
          <button class="m3u8-btn m3u8-btn-primary" id="m3u8-convert-btn" style="flex:1">🚀 开始转换</button>
          <button class="m3u8-btn m3u8-btn-ghost" id="m3u8-clear-btn">🗑</button>
        </div>
      </div>
      <div class="m3u8-status" id="m3u8-status">
        <div class="m3u8-status-dot" id="m3u8-dot"></div>
        <span id="m3u8-status-text">等待输入...</span>
      </div>
      <div class="m3u8-progress" id="m3u8-progress" style="display:none">
        <div class="m3u8-progress-bar" id="m3u8-progress-bar"></div>
      </div>
      <div class="m3u8-result" id="m3u8-result">
        <div class="m3u8-label">M3U8 外链地址</div>
        <div class="m3u8-result-url" id="m3u8-result-url"></div>
        <div class="m3u8-result-btns">
          <button class="m3u8-btn m3u8-btn-primary" id="m3u8-copy-btn">📋 复制地址</button>
          <button class="m3u8-btn m3u8-btn-ghost" id="m3u8-player-btn">▶ 打开播放器</button>
          <button class="m3u8-btn m3u8-btn-ghost" id="m3u8-embed-btn">🔗 生成嵌入代码</button>
        </div>
        <div id="m3u8-embed-code" style="margin-top:8px;display:none">
          <div class="m3u8-label" style="margin-top:6px">嵌入代码</div>
          <textarea class="m3u8-input" id="m3u8-embed-text" rows="4" readonly style="font-family:monospace;font-size:11px"></textarea>
        </div>
      </div>
    </div>

    <!-- 检测面板 -->
    <div class="m3u8-body" id="tab-detect" style="display:none">
      <div class="m3u8-section">
        <div class="m3u8-label">当前页面检测到的视频链接</div>
        <div id="m3u8-detected-list"><div class="m3u8-empty">正在扫描页面...</div></div>
      </div>
      <div style="display:flex;gap:8px;margin-top:4px">
        <button class="m3u8-btn m3u8-btn-primary" id="m3u8-rescan-btn" style="flex:1">🔄 重新扫描</button>
        <button class="m3u8-btn m3u8-btn-ghost" id="m3u8-use-selected-btn">✓ 使用选中</button>
      </div>
    </div>

    <!-- 设置面板 -->
    <div class="m3u8-body" id="tab-settings" style="display:none">
      <div class="m3u8-section">
        <div class="m3u8-label">后端服务地址</div>
        <input class="m3u8-input" id="cfg-server" type="text" placeholder="http://localhost:3700">
        <div style="font-size:11px;color:#6c7086;margin-top:4px">
          需在本机运行转换服务，见下方说明
        </div>
      </div>
      <div class="m3u8-section">
        <div class="m3u8-label">默认切片时长 (秒)</div>
        <input class="m3u8-input" id="cfg-seg-time" type="number" min="2" max="60" value="10">
      </div>
      <div class="m3u8-section">
        <div class="m3u8-label">默认外链基础 URL</div>
        <input class="m3u8-input" id="cfg-base-url" type="text" placeholder="https://your-cdn.com/hls/">
      </div>
      <button class="m3u8-btn m3u8-btn-primary" id="m3u8-save-cfg" style="width:100%">💾 保存设置</button>
      <div class="m3u8-save-tip" id="m3u8-save-tip">✓ 已保存</div>

      <div style="margin-top:16px">
        <div class="m3u8-label">📖 后端服务说明</div>
        <div style="font-size:11px;color:#6c7086;line-height:1.6;background:#181825;padding:10px;border-radius:8px;margin-top:4px">
          此脚本需配合本地 Node.js 转换服务使用：<br>
          <br>
          1. 安装依赖：<br>
          <code style="color:#a6e3a1">npm install express cors axios</code><br>
          <br>
          2. 运行服务（需已安装 ffmpeg）：<br>
          <code style="color:#a6e3a1">node mp4_to_m3u8_server.js</code><br>
          <br>
          服务默认监听 <b style="color:#cba6f7">http://localhost:3700</b>
        </div>
      </div>
    </div>
  `;
  document.body.appendChild(panel);

  /* ========================================================
   * 状态
   * ======================================================== */
  let currentTab = 'convert';
  let detectedLinks = [];
  let selectedLink = null;
  let resultM3u8Url = '';
  let resultPlayerUrl = '';

  /* ========================================================
   * 工具函数
   * ======================================================== */
  function setStatus(msg, state = '') {
    const dot = document.getElementById('m3u8-dot');
    const txt = document.getElementById('m3u8-status-text');
    if (dot) {
      dot.className = 'm3u8-status-dot' + (state ? ` ${state}` : '');
    }
    if (txt) txt.textContent = msg;
  }

  function setProgress(pct) {
    const bar = document.getElementById('m3u8-progress');
    const fill = document.getElementById('m3u8-progress-bar');
    if (!bar || !fill) return;
    if (pct < 0) {
      bar.style.display = 'none';
    } else {
      bar.style.display = 'block';
      fill.style.width = pct + '%';
    }
  }

  function showResult(m3u8Url, playerUrl) {
    resultM3u8Url = m3u8Url;
    resultPlayerUrl = playerUrl;
    const box = document.getElementById('m3u8-result');
    const urlEl = document.getElementById('m3u8-result-url');
    if (box) box.classList.add('show');
    if (urlEl) urlEl.textContent = m3u8Url;
  }

  function copyText(text) {
    try {
      GM_setClipboard(text);
      GM_notification({ title: 'M3U8 外链已复制', text: text.slice(0, 80), timeout: 2500 });
    } catch (e) {
      navigator.clipboard.writeText(text).catch(() => {});
    }
  }

  /* ========================================================
   * 页面视频链接检测
   * ======================================================== */
  function detectVideoLinks() {
    const found = new Map();

    // 1. <video> / <source> 标签
    document.querySelectorAll('video, video source').forEach(el => {
      const src = el.src || el.currentSrc || el.getAttribute('src');
      if (src) found.set(src, 'video标签');
    });

    // 2. <a> 链接
    document.querySelectorAll('a[href]').forEach(el => {
      if (/\.(mp4|mkv|avi|mov|flv|webm)(\?.*)?$/i.test(el.href)) {
        found.set(el.href, 'a链接');
      }
    });

    // 3. 页面源码中的 MP4 URL（简单正则）
    const bodyText = document.documentElement.innerHTML;
    const urlRegex = /https?:\/\/[^\s"'<>]+\.mp4(\?[^\s"'<>]*)?/gi;
    let m;
    while ((m = urlRegex.exec(bodyText)) !== null) {
      const url = m[0].replace(/[,;)]+$/, '');
      if (!found.has(url)) found.set(url, '页面源码');
    }

    return [...found.entries()].map(([url, src]) => ({ url, src }));
  }

  function renderDetectedList() {
    const list = document.getElementById('m3u8-detected-list');
    if (!list) return;
    if (detectedLinks.length === 0) {
      list.innerHTML = '<div class="m3u8-empty">未检测到 MP4 视频链接</div>';
      return;
    }
    list.innerHTML = detectedLinks.map((item, i) => `
      <div class="m3u8-link-item${selectedLink === i ? ' selected' : ''}" data-idx="${i}">
        <span class="m3u8-link-text" title="${item.url}">${item.url}</span>
        <span class="m3u8-link-badge">${item.src}</span>
      </div>
    `).join('');

    list.querySelectorAll('.m3u8-link-item').forEach(el => {
      el.addEventListener('click', () => {
        selectedLink = parseInt(el.dataset.idx);
        renderDetectedList();
      });
    });
  }

  /* ========================================================
   * 转换请求
   * ======================================================== */
  function doConvert() {
    const urlInput = document.getElementById('m3u8-url-input');
    const segInput = document.getElementById('m3u8-seg-time');
    const baseInput = document.getElementById('m3u8-base-url');
    const btn = document.getElementById('m3u8-convert-btn');

    const videoUrl = urlInput ? urlInput.value.trim() : '';
    const segTime = parseInt(segInput ? segInput.value : 10) || 10;
    const baseUrl = baseInput ? baseInput.value.trim() : '';
    const serverUrl = CONFIG.serverUrl;

    if (!videoUrl) {
      setStatus('请先输入 MP4 视频地址', 'err');
      return;
    }
    if (!/^https?:\/\//i.test(videoUrl)) {
      setStatus('请输入有效的 http/https URL', 'err');
      return;
    }

    if (btn) btn.disabled = true;
    setStatus('正在请求转换...', 'running');
    setProgress(10);

    // 隐藏旧结果
    const resultBox = document.getElementById('m3u8-result');
    if (resultBox) resultBox.classList.remove('show');

    const payload = {
      url: videoUrl,
      segmentTime: segTime,
      baseUrl: baseUrl || undefined,
    };

    GM_xmlhttpRequest({
      method: 'POST',
      url: `${serverUrl}/convert`,
      headers: { 'Content-Type': 'application/json' },
      data: JSON.stringify(payload),
      responseType: 'json',
      timeout: 5 * 60 * 1000, // 5 分钟超时
      onprogress: (e) => {
        if (e.loaded && e.total) {
          setProgress(Math.min(90, Math.round(e.loaded / e.total * 90)));
        }
      },
      onload: (res) => {
        if (btn) btn.disabled = false;
        setProgress(-1);
        try {
          const data = typeof res.response === 'object' ? res.response : JSON.parse(res.responseText);
          if (data.success) {
            setStatus(`转换成功！共 ${data.segments} 个切片`, 'ok');
            showResult(data.m3u8Url, data.playerUrl);
          } else {
            setStatus('转换失败：' + (data.error || '未知错误'), 'err');
          }
        } catch (e) {
          setStatus('响应解析失败：' + e.message, 'err');
        }
      },
      onerror: () => {
        if (btn) btn.disabled = false;
        setProgress(-1);
        setStatus(`无法连接转换服务 (${serverUrl})，请检查服务是否运行`, 'err');
      },
      ontimeout: () => {
        if (btn) btn.disabled = false;
        setProgress(-1);
        setStatus('请求超时，视频可能过大，请稍后重试', 'err');
      },
    });
  }

  /* ========================================================
   * 进度轮询（可选，如果服务器支持 /status/:id）
   * ======================================================== */
  function pollStatus(jobId) {
    const serverUrl = CONFIG.serverUrl;
    const timer = setInterval(() => {
      GM_xmlhttpRequest({
        method: 'GET',
        url: `${serverUrl}/status/${jobId}`,
        responseType: 'json',
        onload: (res) => {
          try {
            const data = typeof res.response === 'object' ? res.response : JSON.parse(res.responseText);
            if (data.progress !== undefined) setProgress(data.progress);
            if (data.status === 'done') {
              clearInterval(timer);
              setProgress(100);
              setStatus(`转换成功！共 ${data.segments} 个切片`, 'ok');
              showResult(data.m3u8Url, data.playerUrl);
              document.getElementById('m3u8-convert-btn').disabled = false;
            } else if (data.status === 'error') {
              clearInterval(timer);
              setProgress(-1);
              setStatus('转换失败：' + data.error, 'err');
              document.getElementById('m3u8-convert-btn').disabled = false;
            }
          } catch (e) { /* ignore */ }
        },
        onerror: () => clearInterval(timer),
      });
    }, 2000);
  }

  /* ========================================================
   * Tab 切换
   * ======================================================== */
  function switchTab(name) {
    currentTab = name;
    document.querySelectorAll('.m3u8-tab').forEach(t => t.classList.toggle('active', t.dataset.tab === name));
    ['convert', 'detect', 'settings'].forEach(id => {
      const el = document.getElementById(`tab-${id}`);
      if (el) el.style.display = id === name ? 'block' : 'none';
    });
    if (name === 'detect') {
      detectedLinks = detectVideoLinks();
      renderDetectedList();
    }
    if (name === 'settings') {
      const cfgServer = document.getElementById('cfg-server');
      const cfgSeg = document.getElementById('cfg-seg-time');
      const cfgBase = document.getElementById('cfg-base-url');
      if (cfgServer) cfgServer.value = CONFIG.serverUrl;
      if (cfgSeg) cfgSeg.value = CONFIG.segmentTime;
      if (cfgBase) cfgBase.value = CONFIG.baseUrl;
    }
  }

  /* ========================================================
   * 事件绑定
   * ======================================================== */

  // FAB 开关面板
  fab.addEventListener('click', () => {
    panel.classList.toggle('open');
    if (panel.classList.contains('open') && currentTab === 'detect') {
      detectedLinks = detectVideoLinks();
      renderDetectedList();
    }
  });

  // 关闭按钮
  document.getElementById('m3u8-close').addEventListener('click', () => {
    panel.classList.remove('open');
  });

  // Tab 切换
  document.querySelectorAll('.m3u8-tab').forEach(t => {
    t.addEventListener('click', () => switchTab(t.dataset.tab));
  });

  // 转换按钮
  document.getElementById('m3u8-convert-btn').addEventListener('click', doConvert);

  // 清除按钮
  document.getElementById('m3u8-clear-btn').addEventListener('click', () => {
    const inp = document.getElementById('m3u8-url-input');
    if (inp) inp.value = '';
    const box = document.getElementById('m3u8-result');
    if (box) box.classList.remove('show');
    setStatus('等待输入...', '');
    setProgress(-1);
  });

  // 复制地址
  document.getElementById('m3u8-copy-btn').addEventListener('click', () => {
    copyText(resultM3u8Url);
    document.getElementById('m3u8-copy-btn').textContent = '✅ 已复制！';
    setTimeout(() => { document.getElementById('m3u8-copy-btn').textContent = '📋 复制地址'; }, 2000);
  });

  // 打开播放器
  document.getElementById('m3u8-player-btn').addEventListener('click', () => {
    if (resultPlayerUrl) window.open(resultPlayerUrl, '_blank');
  });

  // 生成嵌入代码
  document.getElementById('m3u8-embed-btn').addEventListener('click', () => {
    const box = document.getElementById('m3u8-embed-code');
    const ta = document.getElementById('m3u8-embed-text');
    if (!box || !ta) return;
    if (box.style.display === 'none') {
      box.style.display = 'block';
      ta.value = `<!-- HLS 视频播放器 -->
<video id="hlsPlayer" controls style="width:100%"></video>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"><\/script>
<script>
  var video = document.getElementById('hlsPlayer');
  var src = '${resultM3u8Url}';
  if (Hls.isSupported()) {
    var hls = new Hls();
    hls.loadSource(src);
    hls.attachMedia(video);
  } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
    video.src = src;
  }
<\/script>`;
      document.getElementById('m3u8-embed-btn').textContent = '🔗 收起代码';
    } else {
      box.style.display = 'none';
      document.getElementById('m3u8-embed-btn').textContent = '🔗 生成嵌入代码';
    }
  });

  // 重新扫描
  document.getElementById('m3u8-rescan-btn').addEventListener('click', () => {
    selectedLink = null;
    detectedLinks = detectVideoLinks();
    renderDetectedList();
  });

  // 使用选中链接
  document.getElementById('m3u8-use-selected-btn').addEventListener('click', () => {
    if (selectedLink === null || !detectedLinks[selectedLink]) return;
    const urlInput = document.getElementById('m3u8-url-input');
    if (urlInput) urlInput.value = detectedLinks[selectedLink].url;
    switchTab('convert');
  });

  // 保存设置
  document.getElementById('m3u8-save-cfg').addEventListener('click', () => {
    const sv = document.getElementById('cfg-server').value.trim();
    const st = parseInt(document.getElementById('cfg-seg-time').value) || 10;
    const bu = document.getElementById('cfg-base-url').value.trim();

    CONFIG.serverUrl = sv || 'http://localhost:3700';
    CONFIG.segmentTime = st;
    CONFIG.baseUrl = bu;

    GM_setValue('serverUrl', CONFIG.serverUrl);
    GM_setValue('segmentTime', CONFIG.segmentTime);
    GM_setValue('baseUrl', CONFIG.baseUrl);

    // 同步到转换面板
    const segIn = document.getElementById('m3u8-seg-time');
    const baseIn = document.getElementById('m3u8-base-url');
    if (segIn) segIn.value = st;
    if (baseIn) baseIn.value = bu;

    const tip = document.getElementById('m3u8-save-tip');
    if (tip) {
      tip.style.display = 'block';
      setTimeout(() => { tip.style.display = 'none'; }, 2000);
    }
  });

  // 初始化转换面板的默认值
  const segInDefault = document.getElementById('m3u8-seg-time');
  const baseInDefault = document.getElementById('m3u8-base-url');
  if (segInDefault) segInDefault.value = CONFIG.segmentTime;
  if (baseInDefault) baseInDefault.value = CONFIG.baseUrl;

  // Enter 快捷键触发转换
  document.getElementById('m3u8-url-input').addEventListener('keydown', (e) => {
    if (e.ctrlKey && e.key === 'Enter') doConvert();
  });

})();