import {
  assertBrowserFeature,
  createFeedbackController,
  escapeHtml,
  fetchJson,
  formatBytes,
  linkToSource,
  optionalQueryParam
} from './modules/common.js';
import {
  loadClientSecrets,
  loadGlobalClientSecrets,
  removeClientSecrets,
  saveClientSecrets,
  saveGlobalClientSecrets
} from './modules/clientSecrets.js';
import {
  buildVolumeMap,
  clearAllCachedVolumes,
  clearCachedVolumesForSource,
  getCachedVolumeStats,
  getGlobalCacheStats,
  isVideoMime,
  restoreSegmentBytes,
  supportsFileDownload,
  supportsOpfs,
  supportsVideoPreview
} from './modules/media-core.js';
import {
  analyzeFrameLuma,
  buildThumbnailCandidateTimes
} from './modules/thumbnail-utils.js';

const STATUS_CHANNEL_NAME = 'duplicati-media-status';
const FILE_VIEWS = new Set(['overview', 'preview', 'download', 'cache', 'thumbnail']);

const state = {
  sourceId: optionalQueryParam('sourceId', ''),
  fileId: optionalQueryParam('id', ''),
  source: null,
  fileInfo: null,
  fileInfoError: null,
  cacheStats: {
    currentSource: null,
    global: null
  },
  resolvedBrowserSecrets: null,
  resolvedBrowserSecretsError: null,
  currentSessionId: null,
  workerStatus: null,
  workerChannel: null,
  browserGlobalSecrets: null,
  browserSourceSecrets: null,
  activePreviewSecrets: null,
  currentView: 'overview',
  pageLocked: false,
  thumbnailCapture: {
    inFlight: false,
    attempted: false,
    suppressed: false,
    sessionId: null,
    probeSessionId: null,
    lastMessage: '尚未生成预览图。'
  }
};

const feedback = createFeedbackController(document.querySelector('#feedback'));
const sourceCrumb = document.querySelector('#sourceCrumb');
const fileTitleElement = document.querySelector('#fileTitle');
const fileSummaryElement = document.querySelector('#fileSummary');
const sessionStatusElement = document.querySelector('#sessionStatus');
const cacheStatusElement = document.querySelector('#cacheStatus');
const downloadStatusElement = document.querySelector('#downloadStatus');
const previewPlayer = document.querySelector('#previewPlayer');
const videoHintElement = document.querySelector('#videoHint');
const startPreviewButton = document.querySelector('#startPreviewButton');
const deleteThumbnailFromPreviewButton = document.querySelector('#deleteThumbnailFromPreviewButton');
const downloadButton = document.querySelector('#downloadButton');
const clearSourceCacheButton = document.querySelector('#clearSourceCacheButton');
const clearAllCacheButton = document.querySelector('#clearAllCacheButton');
const saveClientSecretsButton = document.querySelector('#saveClientSecretsButton');
const saveClientGlobalsButton = document.querySelector('#saveClientGlobalsButton');
const deleteThumbnailButton = document.querySelector('#deleteThumbnailButton');
const clientSecretForm = document.querySelector('#clientSecretForm');
const clientSecretHintElement = document.querySelector('#clientSecretHint');
const previewThumbnailHintElement = document.querySelector('#previewThumbnailHint');
const thumbnailStatusElement = document.querySelector('#thumbnailStatus');
const thumbnailPreviewElement = document.querySelector('#thumbnailPreview');
const thumbnailCaptureCanvas = document.querySelector('#thumbnailCaptureCanvas');
const viewPanels = [...document.querySelectorAll('[data-view-panel]')];
const viewLinks = [...document.querySelectorAll('[data-view-link]')];

sourceCrumb.href = state.sourceId ? `${linkToSource(state.sourceId)}#browse` : '/';

function normalizeView(value) {
  return FILE_VIEWS.has(value) ? value : 'overview';
}

function setCurrentView(nextView, { syncHash = true, replace = false } = {}) {
  state.currentView = normalizeView(nextView);

  for (const panel of viewPanels) {
    panel.hidden = panel.dataset.viewPanel !== state.currentView;
  }

  for (const link of viewLinks) {
    const active = link.dataset.viewLink === state.currentView;
    link.classList.toggle('is-active', active);
    link.setAttribute('aria-current', active ? 'page' : 'false');
  }

  if (!syncHash) {
    return;
  }

  const url = new URL(window.location.href);
  url.hash = `#${state.currentView}`;
  if (replace) {
    window.history.replaceState(null, '', url);
  } else {
    window.history.pushState(null, '', url);
  }
}

function setSummaryCard(element, message) {
  element.innerHTML = `<div class="summary-stack"><div class="summary-row"><strong>${escapeHtml(message)}</strong></div></div>`;
}

function isPreviewAvailable() {
  return Boolean(state.fileInfo && isVideoMime(state.fileInfo.file.mime));
}

function isFileRestorable() {
  return Boolean(state.fileInfo);
}

function updateActionStates() {
  const locked = state.pageLocked;
  startPreviewButton.disabled = locked || !isPreviewAvailable();
  downloadButton.disabled = locked || !isFileRestorable();
  clearSourceCacheButton.disabled = locked || !supportsOpfs() || !state.sourceId;
  clearAllCacheButton.disabled = locked || !supportsOpfs();
  saveClientSecretsButton.disabled = locked;
  saveClientGlobalsButton.disabled = locked;
  deleteThumbnailButton.disabled = locked || !Boolean(state.fileInfo?.file?.thumbnail?.available);
  deleteThumbnailFromPreviewButton.disabled = locked || !Boolean(state.fileInfo?.file?.thumbnail?.available);

  for (const element of clientSecretForm.querySelectorAll('input, select')) {
    element.disabled = locked;
  }
}

function setControlsDisabled(disabled) {
  state.pageLocked = disabled;
  updateActionStates();
}

function renderMissingRouteContext() {
  const missing = [];
  if (!state.sourceId) {
    missing.push('sourceId');
  }
  if (!state.fileId) {
    missing.push('id');
  }

  setControlsDisabled(true);
  fileTitleElement.textContent = '文件页未就绪';
  fileSummaryElement.innerHTML = `
    <div class="empty-state-card">
      <p>这个页面缺少必要的地址参数。</p>
      <p>缺少：${escapeHtml(missing.join(', '))}</p>
      <p>请从数据源工作台里的文件列表进入，或检查当前地址是否包含 <code>sourceId</code> 和 <code>id</code>。</p>
    </div>
  `;
  setSummaryCard(sessionStatusElement, '尚未注册媒体会话。');
  setSummaryCard(cacheStatusElement, '本地缓存不可用。');
  setSummaryCard(downloadStatusElement, '下载不可用。');
  setSummaryCard(thumbnailStatusElement, '预览图不可用。');
  setSummaryCard(previewThumbnailHintElement, '当前无法管理预览图。');
  thumbnailPreviewElement.innerHTML = '<div class="thumbnail-placeholder">缺少地址参数</div>';
  setCurrentView('overview', { replace: true });
}

function readClientSecretsForm() {
  return {
    webdavBaseUrl: document.querySelector('#clientWebdavBaseUrl')?.value?.trim() ?? '',
    authMode: document.querySelector('#clientAuthMode')?.value ?? 'basic',
    username: document.querySelector('#clientUsername')?.value?.trim() ?? '',
    password: document.querySelector('#clientPassword')?.value ?? '',
    passphrase: document.querySelector('#clientPassphrase')?.value ?? '',
    rememberOnDevice: Boolean(document.querySelector('#rememberOnDevice')?.checked)
  };
}

function writeClientSecretsForm(secrets) {
  document.querySelector('#clientWebdavBaseUrl').value = secrets?.webdavBaseUrl ?? '';
  document.querySelector('#clientAuthMode').value = secrets?.authMode ?? 'basic';
  document.querySelector('#clientUsername').value = secrets?.username ?? '';
  document.querySelector('#clientPassword').value = secrets?.password ?? '';
  document.querySelector('#clientPassphrase').value = secrets?.passphrase ?? '';
  document.querySelector('#rememberOnDevice').checked = Boolean(secrets?.rememberOnDevice);
}

function mergeClientSecrets({ sourceSecrets, globalSecrets, resolvedSecrets, sourceWebdav }) {
  return {
    webdavBaseUrl:
      sourceSecrets?.webdavBaseUrl ??
      resolvedSecrets?.webdavBaseUrl ??
      sourceWebdav?.effectiveWebdavBaseUrl ??
      sourceWebdav?.derivedWebdavBaseUrl ??
      globalSecrets?.webdavBaseUrl ??
      '',
    authMode: sourceSecrets?.authMode ?? globalSecrets?.authMode ?? resolvedSecrets?.authMode ?? 'basic',
    username: sourceSecrets?.username ?? globalSecrets?.username ?? resolvedSecrets?.username ?? '',
    password: sourceSecrets?.password ?? globalSecrets?.password ?? resolvedSecrets?.password ?? '',
    passphrase: sourceSecrets?.passphrase ?? globalSecrets?.passphrase ?? resolvedSecrets?.passphrase ?? '',
    rememberOnDevice: Boolean(sourceSecrets)
  };
}

function requireClientSecrets() {
  const secrets = readClientSecretsForm();
  if (!secrets.webdavBaseUrl) {
    throw new Error('CLIENT_SECRETS_MISSING: 请输入浏览器直连使用的 WebDAV Base URL。');
  }

  if (!secrets.passphrase) {
    throw new Error('CLIENT_SECRETS_MISSING: 请输入浏览器直连使用的备份口令。');
  }

  return secrets;
}

async function persistClientSecretsPreference(secrets) {
  if (secrets.rememberOnDevice) {
    await saveClientSecrets(state.sourceId, secrets);
  } else {
    await removeClientSecrets(state.sourceId);
  }
}

function renderClientSecretHint() {
  const sourceWebdav = state.source?.webdav;
  clientSecretHintElement.innerHTML = `
    <div class="summary-stack">
      <div class="summary-row">
        <span>任务默认 URL</span>
        <strong>${escapeHtml(sourceWebdav?.effectiveWebdavBaseUrl ?? sourceWebdav?.derivedWebdavBaseUrl ?? '未推导到')}</strong>
      </div>
      <div class="summary-row">
        <span>默认 URL 来源</span>
        <strong>${escapeHtml(sourceWebdav?.effectiveWebdavBaseUrlSource ?? 'none')}</strong>
      </div>
      <div class="summary-row">
        <span>浏览器全局默认值</span>
        <strong>${state.browserGlobalSecrets ? 'available' : 'missing'}</strong>
      </div>
      <div class="summary-row">
        <span>浏览器单源覆盖</span>
        <strong>${state.browserSourceSecrets ? 'saved' : 'none'}</strong>
      </div>
      <div class="summary-row">
        <span>后端解析后的直连凭据</span>
        <strong>${state.resolvedBrowserSecrets ? 'available' : state.resolvedBrowserSecretsError ? 'missing' : 'pending'}</strong>
      </div>
      ${
        state.resolvedBrowserSecretsError
          ? `
      <div class="summary-row">
        <span>后端凭据状态</span>
        <strong>${escapeHtml(state.resolvedBrowserSecretsError.message)}</strong>
      </div>
      `
          : ''
      }
    </div>
  `;
}

function renderWorkerStatus() {
  if (!state.workerStatus) {
    setSummaryCard(sessionStatusElement, '尚未注册媒体会话。');
    return;
  }

  sessionStatusElement.innerHTML = `
    <div class="summary-stack">
      <div class="summary-row">
        <span>当前阶段</span>
        <strong>${escapeHtml(state.workerStatus.phase ?? 'idle')}</strong>
      </div>
      <div class="summary-row">
        <span>当前卷</span>
        <strong>${escapeHtml(state.workerStatus.currentVolume ?? '无')}</strong>
      </div>
      <div class="summary-row">
        <span>已缓存 dblock</span>
        <strong>${escapeHtml(String((state.workerStatus.cachedVolumes ?? []).length))}</strong>
      </div>
      <div class="summary-row">
        <span>缓存列表</span>
        <strong>${escapeHtml((state.workerStatus.cachedVolumes ?? []).join(', ') || '暂无缓存')}</strong>
      </div>
      <div class="summary-row">
        <span>最近错误</span>
        <strong>${escapeHtml(state.workerStatus.lastError ?? '无')}</strong>
      </div>
    </div>
  `;
}

function renderPreviewThumbnailHint() {
  if (!state.fileInfo) {
    setSummaryCard(previewThumbnailHintElement, state.fileInfoError?.message ?? '当前文件还不能管理预览图。');
    return;
  }

  const thumbnail = state.fileInfo.file.thumbnail;
  const captureMessage = state.thumbnailCapture.lastMessage ?? '尚未生成预览图。';
  previewThumbnailHintElement.innerHTML = `
    <div class="summary-stack">
      <div class="summary-row">
        <span>当前缩略图</span>
        <strong>${thumbnail?.available ? '已缓存到后端' : '暂无'}</strong>
      </div>
      <div class="summary-row">
        <span>自动截帧状态</span>
        <strong>${escapeHtml(captureMessage)}</strong>
      </div>
      <div class="summary-row">
        <span>删除说明</span>
        <strong>只删除后端缩略图缓存，不会删除浏览器本地视频缓存。</strong>
      </div>
    </div>
  `;
}

function renderCacheStatus() {
  if (!supportsOpfs()) {
    setSummaryCard(cacheStatusElement, '当前浏览器不支持 OPFS，本地缓存功能不可用。');
    updateActionStates();
    return;
  }

  const currentSource = state.cacheStats.currentSource ?? {
    volumeCount: 0,
    totalBytes: 0
  };
  const global = state.cacheStats.global ?? {
    sourceCount: 0,
    volumeCount: 0,
    totalBytes: 0
  };

  cacheStatusElement.innerHTML = `
    <div class="summary-stack">
      <div class="summary-row">
        <span>当前 source 缓存</span>
        <strong>${escapeHtml(String(currentSource.volumeCount))} 个 dblock / ${formatBytes(currentSource.totalBytes)}</strong>
      </div>
      <div class="summary-row">
        <span>全部浏览器缓存</span>
        <strong>${escapeHtml(String(global.sourceCount))} 个 source，${escapeHtml(String(global.volumeCount))} 个 dblock / ${formatBytes(global.totalBytes)}</strong>
      </div>
    </div>
  `;
}

function renderFileSummary() {
  if (state.fileInfo) {
    const file = state.fileInfo.file;
    const volumeCount = state.fileInfo.volumes.length;
    const isVideo = isVideoMime(file.mime);
    fileTitleElement.textContent = file.name;
    fileSummaryElement.innerHTML = `
      <article class="source-card">
        <div class="source-main">
          <div>
            <p class="source-name">${escapeHtml(file.name)}</p>
            <p class="source-meta">${escapeHtml(file.path)}</p>
            <p class="source-meta">sourceId: ${escapeHtml(state.sourceId)}</p>
          </div>
          <span class="status-pill ${state.source?.enhancement?.status === 'ready' ? 'status-ready' : 'status-idle'}">
            ${escapeHtml(state.source?.enhancement?.status ?? 'unknown')}
          </span>
        </div>

        <div class="stats-grid">
          <div class="stat">
            <span>MIME</span>
            <strong>${escapeHtml(file.mime ?? 'unknown')}</strong>
          </div>
          <div class="stat">
            <span>文件大小</span>
            <strong>${formatBytes(file.size)}</strong>
          </div>
          <div class="stat">
            <span>恢复片段</span>
            <strong>${escapeHtml(String(state.fileInfo.restorePlan.segmentCount))}</strong>
          </div>
          <div class="stat">
            <span>dblock 数量</span>
            <strong>${escapeHtml(String(volumeCount))}</strong>
          </div>
          <div class="stat">
            <span>块大小</span>
            <strong>${formatBytes(state.fileInfo.restorePlan.blockSize)}</strong>
          </div>
          <div class="stat">
            <span>范围播放</span>
            <strong>${state.fileInfo.hints.rangeReady ? '可用' : '不可用'}</strong>
          </div>
          <div class="stat">
            <span>后端预览图</span>
            <strong>${state.fileInfo.file.thumbnail?.available ? '已缓存' : '暂无'}</strong>
          </div>
        </div>

        <div class="summary-chip">${isVideo ? '这是一个视频文件，可以启用前端 Range 播放。' : '这不是视频文件，播放器不会启用，但仍然可以直接下载。'}</div>
      </article>
    `;
    videoHintElement.textContent = isVideo
      ? '点击“启动视频预览”后，浏览器会注册本地媒体会话，并通过 Service Worker 伪造 Range 请求。'
      : '这个文件不是视频，视频预览区不会启用，但仍然可以直接下载。';
    updateActionStates();
    return;
  }

  const errorMessage = state.fileInfoError?.message ?? '尚未获得文件恢复信息。';
  fileTitleElement.textContent = '文件操作未就绪';
  fileSummaryElement.innerHTML = `
    <div class="empty-state-card">
      <p>这个文件当前还不能进入视频预览或下载流程。</p>
      <p>${escapeHtml(errorMessage)}</p>
    </div>
  `;
  videoHintElement.textContent = '请先回到数据源工作台完成增强，再回到文件页。';
  updateActionStates();
}

function renderThumbnailPanel() {
  if (!state.fileInfo) {
    setSummaryCard(thumbnailStatusElement, state.fileInfoError?.message ?? '当前文件还不能读取预览图状态。');
    thumbnailPreviewElement.innerHTML = '<div class="thumbnail-placeholder">暂无预览图</div>';
    renderPreviewThumbnailHint();
    updateActionStates();
    return;
  }

  const thumbnail = state.fileInfo.file.thumbnail;
  const capture = state.thumbnailCapture;
  const statusText = thumbnail?.available
    ? '已缓存到后端'
    : capture.inFlight
      ? '正在从当前视频首帧生成'
      : '暂无预览图';
  const captureMessage = capture.lastMessage ?? '尚未生成预览图。';

  thumbnailStatusElement.innerHTML = `
    <div class="summary-stack">
      <div class="summary-row">
        <span>当前状态</span>
        <strong>${escapeHtml(statusText)}</strong>
      </div>
      <div class="summary-row">
        <span>自动生成状态</span>
        <strong>${escapeHtml(captureMessage)}</strong>
      </div>
      <div class="summary-row">
        <span>缩略图 ID</span>
        <strong>${escapeHtml(thumbnail?.thumbnailId ?? '无')}</strong>
      </div>
    </div>
  `;

  if (thumbnail?.available) {
    thumbnailPreviewElement.innerHTML = `
      <img
        class="thumbnail-preview-image"
        src="${escapeHtml(thumbnail.thumbnailUrl)}"
        alt="${escapeHtml(state.fileInfo.file.name)} 的预览图"
      >
    `;
  } else {
    thumbnailPreviewElement.innerHTML = `
      <div class="thumbnail-placeholder">${capture.inFlight ? '正在生成预览图...' : '暂无预览图'}</div>
    `;
  }

  renderPreviewThumbnailHint();
  updateActionStates();
}

async function sendWorkerMessage(type, payload) {
  const registration = await navigator.serviceWorker.ready;
  const worker = navigator.serviceWorker.controller ?? registration.active ?? registration.waiting;
  if (!worker) {
    throw new Error('SERVICE_WORKER_UNAVAILABLE: Service Worker is not ready.');
  }

  return new Promise((resolve, reject) => {
    const channel = new MessageChannel();
    const timeoutId = setTimeout(() => {
      reject(new Error('SERVICE_WORKER_TIMEOUT: Service Worker did not reply in time.'));
    }, 10_000);

    channel.port1.onmessage = (event) => {
      clearTimeout(timeoutId);
      if (event.data?.ok) {
        resolve(event.data);
      } else {
        reject(new Error(event.data?.error ?? 'Service Worker request failed.'));
      }
    };

    worker.postMessage(
      {
        type,
        ...payload
      },
      [channel.port2]
    );
  });
}

async function ensureServiceWorkerReady() {
  assertBrowserFeature(
    navigator.serviceWorker,
    'SERVICE_WORKER_UNSUPPORTED: 当前浏览器不支持 Service Worker。'
  );

  await navigator.serviceWorker.register('/media-sw.js', {
    scope: '/',
    type: 'module'
  });
  await navigator.serviceWorker.ready;

  if (!navigator.serviceWorker.controller) {
    await new Promise((resolve) => {
      navigator.serviceWorker.addEventListener('controllerchange', () => resolve(), {
        once: true
      });
    });
  }
}

function ensureWorkerStatusChannel() {
  if (state.workerChannel || typeof BroadcastChannel !== 'function') {
    return;
  }

  state.workerChannel = new BroadcastChannel(STATUS_CHANNEL_NAME);
  state.workerChannel.addEventListener('message', (event) => {
    if (event.data?.type !== 'status' || event.data.sessionId !== state.currentSessionId) {
      return;
    }

    const previousCachedCount = state.workerStatus?.cachedVolumes?.length ?? 0;
    state.workerStatus = event.data.status;
    renderWorkerStatus();

    const nextCachedCount = state.workerStatus?.cachedVolumes?.length ?? 0;
    if (nextCachedCount !== previousCachedCount) {
      void refreshCacheStats();
    }
  });
}

async function registerPreviewSession(secrets) {
  await ensureServiceWorkerReady();
  ensureWorkerStatusChannel();

  if (state.currentSessionId) {
    try {
      await sendWorkerMessage('unregister-session', {
        sessionId: state.currentSessionId
      });
    } catch (error) {
      // ignore stale sessions during re-registration
    }
  }

  const sessionId = crypto.randomUUID();
  const response = await sendWorkerMessage('register-session', {
    sessionId,
    sourceId: state.sourceId,
    fileInfo: state.fileInfo,
    secrets
  });

  state.currentSessionId = sessionId;
  state.workerStatus = response.status;
  renderWorkerStatus();
  return sessionId;
}

function resetThumbnailCaptureState(sessionId = null) {
  state.thumbnailCapture = {
    inFlight: false,
    attempted: Boolean(state.fileInfo?.file?.thumbnail?.available),
    suppressed: false,
    sessionId,
    probeSessionId: null,
    lastMessage: state.fileInfo?.file?.thumbnail?.available
      ? '当前文件已存在后端预览图。'
      : '等待视频首帧解码后自动生成。'
  };
  renderThumbnailPanel();
}

async function unregisterWorkerSession(sessionId) {
  if (!sessionId) {
    return;
  }

  try {
    await ensureServiceWorkerReady();
    await sendWorkerMessage('unregister-session', {
      sessionId
    });
  } catch (error) {
    // ignore stale or already-closed sessions during local cleanup
  }
}

async function stopCurrentPreviewSession() {
  previewPlayer.pause();
  previewPlayer.removeAttribute('src');
  previewPlayer.load();
  await unregisterWorkerSession(state.thumbnailCapture.probeSessionId);
  state.thumbnailCapture.probeSessionId = null;

  if (!state.currentSessionId) {
    state.workerStatus = null;
    renderWorkerStatus();
    return;
  }

  await unregisterWorkerSession(state.currentSessionId);
  state.currentSessionId = null;
  state.activePreviewSecrets = null;
  state.workerStatus = null;
  renderWorkerStatus();
}

async function saveClientSecretsLocally(event) {
  event.preventDefault();
  feedback.set('info', '正在更新浏览器本地 source 覆盖...');

  try {
    const secrets = requireClientSecrets();
    await persistClientSecretsPreference(secrets);
    state.browserSourceSecrets = secrets.rememberOnDevice ? secrets : null;
    renderClientSecretHint();
    feedback.set(
      secrets.rememberOnDevice ? 'success' : 'info',
      secrets.rememberOnDevice
        ? '当前 source 的浏览器本地覆盖已保存。'
        : '没有勾选记住，本次只保留在当前页面内存中。'
    );
  } catch (error) {
    feedback.set('error', error.message);
  }
}

async function saveClientSecretsAsGlobal() {
  feedback.set('info', '正在保存浏览器全局默认值...');

  try {
    const secrets = requireClientSecrets();
    await saveGlobalClientSecrets(secrets);
    state.browserGlobalSecrets = secrets;
    renderClientSecretHint();
    feedback.set('success', '浏览器全局默认值已保存。后续文件页会默认继承这些字段。');
  } catch (error) {
    feedback.set('error', error.message);
  }
}

function waitForEventOnce(target, eventName, timeoutMs, readyCheck = null) {
  if (typeof readyCheck === 'function' && readyCheck()) {
    return Promise.resolve();
  }

  return new Promise((resolve, reject) => {
    const timeoutId = setTimeout(() => {
      cleanup();
      reject(new Error(`THUMBNAIL_EVENT_TIMEOUT: Timed out waiting for ${eventName}.`));
    }, timeoutMs);

    function cleanup() {
      clearTimeout(timeoutId);
      target.removeEventListener(eventName, handleSuccess);
      target.removeEventListener('error', handleError);
    }

    function handleSuccess() {
      cleanup();
      resolve();
    }

    function handleError() {
      cleanup();
      reject(new Error(`THUMBNAIL_VIDEO_ERROR: Hidden thumbnail probe video failed during ${eventName}.`));
    }

    target.addEventListener(eventName, handleSuccess, { once: true });
    target.addEventListener('error', handleError, { once: true });
  });
}

async function waitForStableVideoFrame(videoElement) {
  if (typeof videoElement.requestVideoFrameCallback === 'function') {
    await new Promise((resolve) => {
      videoElement.requestVideoFrameCallback(() => resolve());
    });
    return;
  }

  await waitForEventOnce(
    videoElement,
    'loadeddata',
    5_000,
    () => videoElement.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA
  );
  await new Promise((resolve) => setTimeout(resolve, 80));
}

async function seekHiddenVideoTo(videoElement, seconds) {
  const targetTime = Number(seconds);
  if (!Number.isFinite(targetTime) || targetTime < 0) {
    return;
  }

  if (Math.abs(videoElement.currentTime - targetTime) > 0.05) {
    const seekPromise = waitForEventOnce(videoElement, 'seeked', 12_000);
    videoElement.currentTime = targetTime;
    await seekPromise;
  } else if (videoElement.readyState < HTMLMediaElement.HAVE_CURRENT_DATA) {
    await waitForEventOnce(
      videoElement,
      'loadeddata',
      12_000,
      () => videoElement.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA
    );
  }

  await waitForStableVideoFrame(videoElement);
}

async function createThumbnailBlobFromVideo(videoElement) {
  const maxWidth = 480;
  const sourceWidth = Math.max(videoElement.videoWidth || 0, 1);
  const sourceHeight = Math.max(videoElement.videoHeight || 0, 1);
  const scale = Math.min(1, maxWidth / sourceWidth);
  const targetWidth = Math.max(1, Math.round(sourceWidth * scale));
  const targetHeight = Math.max(1, Math.round(sourceHeight * scale));

  thumbnailCaptureCanvas.width = targetWidth;
  thumbnailCaptureCanvas.height = targetHeight;
  const context = thumbnailCaptureCanvas.getContext('2d', { alpha: false });
  if (!context) {
    throw new Error('THUMBNAIL_CANVAS_UNAVAILABLE: 无法创建缩略图绘制上下文。');
  }

  context.drawImage(videoElement, 0, 0, targetWidth, targetHeight);
  const frameAnalysis = analyzeFrameLuma(
    context.getImageData(0, 0, targetWidth, targetHeight).data
  );

  return new Promise((resolve, reject) => {
    thumbnailCaptureCanvas.toBlob(
      (blob) => {
        if (!blob) {
          reject(new Error('THUMBNAIL_CAPTURE_FAILED: 浏览器没有生成有效的缩略图 Blob。'));
          return;
        }

        resolve({
          blob,
          frameAnalysis
        });
      },
      'image/webp',
      0.82
    );
  });
}

async function createThumbnailProbeVideo(sessionId) {
  const probeVideo = document.createElement('video');
  probeVideo.muted = true;
  probeVideo.playsInline = true;
  probeVideo.preload = 'auto';
  probeVideo.controls = false;
  probeVideo.style.position = 'fixed';
  probeVideo.style.opacity = '0';
  probeVideo.style.pointerEvents = 'none';
  probeVideo.style.width = '1px';
  probeVideo.style.height = '1px';
  probeVideo.style.left = '-9999px';
  probeVideo.style.top = '-9999px';
  probeVideo.src = `/__media__/session/${encodeURIComponent(sessionId)}`;
  document.body.append(probeVideo);
  probeVideo.load();
  await waitForEventOnce(
    probeVideo,
    'loadedmetadata',
    12_000,
    () => probeVideo.readyState >= HTMLMediaElement.HAVE_METADATA
  );
  return probeVideo;
}

function cleanupThumbnailProbeVideo(videoElement) {
  if (!videoElement) {
    return;
  }

  videoElement.pause();
  videoElement.removeAttribute('src');
  videoElement.load();
  videoElement.remove();
}

async function maybeCapturePreviewThumbnail() {
  if (!state.fileInfo || !state.currentSessionId || !isVideoMime(state.fileInfo.file.mime)) {
    return;
  }

  if (state.fileInfo.file.thumbnail?.available) {
    return;
  }

  if (state.thumbnailCapture.inFlight || state.thumbnailCapture.attempted || state.thumbnailCapture.suppressed) {
    return;
  }

  if (previewPlayer.readyState < HTMLMediaElement.HAVE_CURRENT_DATA || previewPlayer.videoWidth === 0) {
    return;
  }

  state.thumbnailCapture.inFlight = true;
  state.thumbnailCapture.attempted = true;
  state.thumbnailCapture.lastMessage = '正在寻找有效画面（准备探测候选时间点）...';
  renderThumbnailPanel();

  const activeSessionId = state.currentSessionId;
  const previewSecrets = state.activePreviewSecrets ?? readClientSecretsForm();
  const probeSessionId = crypto.randomUUID();
  state.thumbnailCapture.probeSessionId = probeSessionId;

  let probeVideo = null;
  try {
    await sendWorkerMessage('register-session', {
      sessionId: probeSessionId,
      sourceId: state.sourceId,
      fileInfo: state.fileInfo,
      secrets: previewSecrets
    });

    probeVideo = await createThumbnailProbeVideo(probeSessionId);
    const candidates = buildThumbnailCandidateTimes(probeVideo.duration);
    let selectedBlob = null;
    let selectedMessage = '';
    let fallbackBlob = null;

    for (let index = 0; index < candidates.length; index += 1) {
      if (state.currentSessionId !== activeSessionId || state.thumbnailCapture.sessionId !== activeSessionId) {
        state.thumbnailCapture.lastMessage = '当前会话已切换，跳过旧会话的预览图上传。';
        return;
      }

      const candidate = candidates[index];
      state.thumbnailCapture.lastMessage = `正在寻找有效画面（第 ${index + 1}/${candidates.length} 个候选时间点，${candidate.toFixed(2)}s）`;
      renderThumbnailPanel();

      await seekHiddenVideoTo(probeVideo, candidate);
      const { blob, frameAnalysis } = await createThumbnailBlobFromVideo(probeVideo);
      fallbackBlob = blob;

      if (!frameAnalysis.isBlackFrame) {
        selectedBlob = blob;
        selectedMessage = `已选中第 ${index + 1}/${candidates.length} 个候选时间点（${candidate.toFixed(2)}s）。`;
        break;
      }

      state.thumbnailCapture.lastMessage = `已跳过黑帧（第 ${index + 1}/${candidates.length} 个候选时间点，${candidate.toFixed(2)}s），继续向后寻找。`;
      renderThumbnailPanel();
    }

    const blobToUpload = selectedBlob ?? fallbackBlob;
    if (!blobToUpload) {
      throw new Error('THUMBNAIL_CAPTURE_FAILED: 没有拿到可上传的预览图。');
    }

    if (!selectedMessage) {
      selectedMessage = '前面的候选时间点都偏黑，已回退到最后一个可用画面。';
    }

    if (state.currentSessionId !== activeSessionId || state.thumbnailCapture.sessionId !== activeSessionId) {
      state.thumbnailCapture.lastMessage = '当前会话已切换，跳过旧会话的预览图上传。';
      return;
    }

    const formData = new FormData();
    formData.set('fileId', state.fileId);
    formData.set('image', blobToUpload, 'preview.webp');
    const payload = await fetchJson(`/api/sources/${encodeURIComponent(state.sourceId)}/thumbnails`, {
      method: 'POST',
      body: formData
    });

    state.fileInfo.file.thumbnail = payload.thumbnail;
    state.thumbnailCapture.lastMessage = `${selectedMessage} 预览图已缓存到后端。`;
    renderFileSummary();
    renderThumbnailPanel();
  } catch (error) {
    state.thumbnailCapture.lastMessage = error.message;
    renderThumbnailPanel();
  } finally {
    cleanupThumbnailProbeVideo(probeVideo);
    await unregisterWorkerSession(probeSessionId);
    if (state.thumbnailCapture.probeSessionId === probeSessionId) {
      state.thumbnailCapture.probeSessionId = null;
    }
    state.thumbnailCapture.inFlight = false;
    renderThumbnailPanel();
  }
}

async function startVideoPreview() {
  feedback.set('info', '正在注册浏览器端媒体会话...');

  try {
    assertBrowserFeature(
      supportsVideoPreview(),
      'BROWSER_PREVIEW_UNSUPPORTED: 当前浏览器不支持 OPFS、Service Worker 或 Range 预览所需能力。'
    );
    if (!state.fileInfo) {
      throw state.fileInfoError ?? new Error('FILE_INFO_UNAVAILABLE: 当前文件还不能恢复。');
    }
    if (!isVideoMime(state.fileInfo.file.mime)) {
      throw new Error('VIDEO_MIME_UNSUPPORTED: 当前文件不是视频，无法启用播放器。');
    }

    const secrets = requireClientSecrets();
    await persistClientSecretsPreference(secrets);
    state.activePreviewSecrets = { ...secrets };
    const sessionId = await registerPreviewSession(secrets);
    resetThumbnailCaptureState(sessionId);
    previewPlayer.src = `/__media__/session/${encodeURIComponent(sessionId)}`;
    previewPlayer.load();
    setCurrentView('preview');
    feedback.set('success', '视频预览会话已注册，现在可以开始播放并拖动进度。');
  } catch (error) {
    feedback.set('error', error.message);
  }
}

async function downloadFileDirectly() {
  feedback.set('info', '正在准备浏览器直连下载...');

  try {
    assertBrowserFeature(
      supportsFileDownload(),
      'BROWSER_DOWNLOAD_UNSUPPORTED: 当前浏览器不支持 OPFS 或 showSaveFilePicker。'
    );
    if (!state.fileInfo) {
      throw state.fileInfoError ?? new Error('FILE_INFO_UNAVAILABLE: 当前文件还不能恢复。');
    }

    const secrets = requireClientSecrets();
    await persistClientSecretsPreference(secrets);

    const extension = state.fileInfo.file.name.includes('.')
      ? `.${state.fileInfo.file.name.split('.').pop()}`
      : '.bin';
    const fileHandle = await showSaveFilePicker({
      suggestedName: state.fileInfo.file.name,
      types: [
        {
          description: 'Restored file',
          accept: {
            [state.fileInfo.file.mime || 'application/octet-stream']: [extension]
          }
        }
      ]
    });
    const writable = await fileHandle.createWritable();
    const volumeByRef = buildVolumeMap(state.fileInfo.volumes);
    let writtenBytes = 0;

    for (const segment of state.fileInfo.segments) {
      const volume = volumeByRef.get(segment.volumeRef);
      downloadStatusElement.innerHTML = `
        <div class="summary-stack">
          <div class="summary-row">
            <span>当前卷</span>
            <strong>${escapeHtml(volume?.name ?? segment.volumeRef)}</strong>
          </div>
          <div class="summary-row">
            <span>已写入</span>
            <strong>${formatBytes(writtenBytes)} / ${formatBytes(state.fileInfo.file.size)}</strong>
          </div>
        </div>
      `;

      const bytes = await restoreSegmentBytes({
        sourceId: state.sourceId,
        volume,
        zip: segment.zip,
        secrets,
        onStatus: ({ phase, currentVolume }) => {
          state.workerStatus = {
            phase,
            currentVolume,
            cachedVolumes: state.workerStatus?.cachedVolumes ?? [],
            lastError: null
          };
          renderWorkerStatus();
        }
      });

      await writable.write(bytes);
      writtenBytes += bytes.length;
    }

    await writable.close();
    await refreshCacheStats();
    downloadStatusElement.innerHTML = `
      <div class="summary-stack">
        <div class="summary-row">
          <span>下载状态</span>
          <strong>已完成</strong>
        </div>
        <div class="summary-row">
          <span>写入总量</span>
          <strong>${formatBytes(writtenBytes)}</strong>
        </div>
      </div>
    `;
    feedback.set('success', '文件已经直接恢复并写入本地。');
  } catch (error) {
    downloadStatusElement.innerHTML = `
      <div class="summary-stack">
        <div class="summary-row">
          <span>下载状态</span>
          <strong>${escapeHtml(error.message)}</strong>
        </div>
      </div>
    `;
    feedback.set('error', error.message);
  }
}

async function refreshCacheStats() {
  if (!supportsOpfs()) {
    renderCacheStatus();
    return;
  }

  const [currentSource, global] = await Promise.all([
    state.sourceId ? getCachedVolumeStats(state.sourceId) : Promise.resolve({ volumeCount: 0, totalBytes: 0 }),
    getGlobalCacheStats()
  ]);

  state.cacheStats = {
    currentSource,
    global
  };
  renderCacheStatus();
}

async function clearCurrentSourceCache() {
  feedback.set('info', '正在清理当前 source 的浏览器本地缓存...');

  try {
    assertBrowserFeature(supportsOpfs(), 'CACHE_UNSUPPORTED: 当前浏览器不支持 OPFS，本地缓存不可清理。');
    await stopCurrentPreviewSession();
    const result = await clearCachedVolumesForSource(state.sourceId);
    await refreshCacheStats();
    feedback.set(
      'success',
      `当前 source 缓存已清理，删除了 ${result.removedVolumes} 个 dblock，共 ${formatBytes(result.removedBytes)}。`
    );
  } catch (error) {
    feedback.set('error', error.message);
  }
}

async function clearAllBrowserCache() {
  const confirmed = window.confirm(
    '确定要清理当前浏览器保存的全部视频和下载缓存吗？\n\n这不会删除后端数据库、增强索引或 Duplicati-server.sqlite，只会删除浏览器 OPFS 里的本地缓存。'
  );
  if (!confirmed) {
    return;
  }

  feedback.set('info', '正在清理全部浏览器本地缓存...');

  try {
    assertBrowserFeature(supportsOpfs(), 'CACHE_UNSUPPORTED: 当前浏览器不支持 OPFS，本地缓存不可清理。');
    await stopCurrentPreviewSession();
    const result = await clearAllCachedVolumes();
    await refreshCacheStats();
    feedback.set(
      'success',
      `全部浏览器缓存已清理，删除了 ${result.removedSources} 个 source、${result.removedVolumes} 个 dblock，共 ${formatBytes(result.removedBytes)}。`
    );
  } catch (error) {
    feedback.set('error', error.message);
  }
}

async function deleteCurrentThumbnail() {
  const thumbnailId = state.fileInfo?.file?.thumbnail?.thumbnailId;
  if (!thumbnailId) {
    return;
  }

  const confirmed = window.confirm(
    '确定要删除当前文件的预览图吗？\n\n这不会影响视频播放、下载或 Duplicati-server.sqlite，只会删除后端保存的这张缩略图。'
  );
  if (!confirmed) {
    return;
  }

  feedback.set('info', '正在删除当前文件的预览图...');

  try {
    await fetchJson(
      `/api/sources/${encodeURIComponent(state.sourceId)}/thumbnails/${encodeURIComponent(thumbnailId)}`,
      {
        method: 'DELETE'
      }
    );
    state.fileInfo.file.thumbnail = {
      available: false,
      thumbnailId: null,
      thumbnailUrl: null
    };
    state.thumbnailCapture.suppressed = true;
    state.thumbnailCapture.attempted = true;
    state.thumbnailCapture.lastMessage = '当前预览图已删除。下次启动新预览会话时会重新生成。';
    renderFileSummary();
    renderThumbnailPanel();
    feedback.set('success', '当前文件的预览图已删除。');
  } catch (error) {
    feedback.set('error', error.message);
  }
}

async function loadSource() {
  const payload = await fetchJson(`/api/sources/${encodeURIComponent(state.sourceId)}`);
  state.source = payload.source;
  renderClientSecretHint();
}

async function loadFileInfo() {
  try {
    const payload = await fetchJson(
      `/api/file-info?sourceId=${encodeURIComponent(state.sourceId)}&id=${encodeURIComponent(state.fileId)}`
    );
    state.fileInfo = payload;
    state.fileInfoError = null;
    if (!state.fileInfo.file.thumbnail) {
      state.fileInfo.file.thumbnail = {
        available: false,
        thumbnailId: null,
        thumbnailUrl: null
      };
    }
  } catch (error) {
    state.fileInfo = null;
    state.fileInfoError = error;
  }
}

async function loadResolvedBrowserSecrets() {
  try {
    const payload = await fetchJson(`/api/sources/${encodeURIComponent(state.sourceId)}/browser-secrets`);
    state.resolvedBrowserSecrets = payload.secrets ?? null;
    state.resolvedBrowserSecretsError = null;
  } catch (error) {
    state.resolvedBrowserSecrets = null;
    state.resolvedBrowserSecretsError = error;
  }
}

async function preloadClientSecrets() {
  const [globalSecrets, sourceSecrets] = await Promise.all([
    loadGlobalClientSecrets(),
    loadClientSecrets(state.sourceId)
  ]);
  state.browserGlobalSecrets = globalSecrets;
  state.browserSourceSecrets = sourceSecrets;

  const merged = mergeClientSecrets({
    sourceSecrets,
    globalSecrets,
    resolvedSecrets: state.resolvedBrowserSecrets,
    sourceWebdav: state.source?.webdav
  });
  writeClientSecretsForm(merged);
  renderClientSecretHint();
}

clientSecretForm.addEventListener('submit', (event) => {
  void saveClientSecretsLocally(event);
});

saveClientGlobalsButton.addEventListener('click', () => {
  void saveClientSecretsAsGlobal();
});

clearSourceCacheButton.addEventListener('click', () => {
  void clearCurrentSourceCache();
});

clearAllCacheButton.addEventListener('click', () => {
  void clearAllBrowserCache();
});

startPreviewButton.addEventListener('click', () => {
  void startVideoPreview();
});

deleteThumbnailFromPreviewButton.addEventListener('click', () => {
  void deleteCurrentThumbnail();
});

downloadButton.addEventListener('click', () => {
  void downloadFileDirectly();
});

deleteThumbnailButton.addEventListener('click', () => {
  void deleteCurrentThumbnail();
});

previewPlayer.addEventListener('loadeddata', () => {
  void maybeCapturePreviewThumbnail();
});

for (const link of viewLinks) {
  link.addEventListener('click', (event) => {
    event.preventDefault();
    setCurrentView(normalizeView(link.dataset.viewLink ?? 'overview'));
  });
}

window.addEventListener('hashchange', () => {
  setCurrentView(normalizeView(window.location.hash.slice(1)), { syncHash: false });
});

window.addEventListener('beforeunload', () => {
  if (!navigator.serviceWorker?.controller) {
    return;
  }

  if (state.currentSessionId) {
    navigator.serviceWorker.controller.postMessage({
      type: 'unregister-session',
      sessionId: state.currentSessionId
    });
  }

  if (state.thumbnailCapture.probeSessionId) {
    navigator.serviceWorker.controller.postMessage({
      type: 'unregister-session',
      sessionId: state.thumbnailCapture.probeSessionId
    });
  }
});

async function bootstrap() {
  const initialView = normalizeView(window.location.hash.slice(1) || 'overview');
  setCurrentView(initialView, { replace: true });

  if (!state.sourceId || !state.fileId) {
    renderMissingRouteContext();
    return;
  }

  setControlsDisabled(false);
  setSummaryCard(sessionStatusElement, '尚未注册媒体会话。');
  setSummaryCard(cacheStatusElement, '正在统计浏览器本地缓存...');
  setSummaryCard(downloadStatusElement, '尚未开始下载。');
  setSummaryCard(thumbnailStatusElement, '正在读取预览图状态...');

  await Promise.all([loadSource(), loadFileInfo(), loadResolvedBrowserSecrets()]);
  await preloadClientSecrets();
  await refreshCacheStats();
  resetThumbnailCaptureState(null);
  renderFileSummary();
  renderWorkerStatus();
  renderThumbnailPanel();
  updateActionStates();
}

void bootstrap().catch((error) => {
  feedback.set('error', error.message);
  fileSummaryElement.innerHTML = `
    <div class="empty-state-card">
      <p>无法进入文件页。</p>
    </div>
  `;
});