(async () => {
  const tag = '[Steam Preview]';
  const warn = message => console.warn(tag, message);
  const selector = '.no_header.profile_page';

  if (new URLSearchParams(location.search).get('previewprofile') !== '1') {
    return warn('请在游戏个人资料预览页运行');
  }

  try {
    // 获取一次正式个人资料 HTML
    const response = await fetch(location.pathname, {
      credentials: 'same-origin',
      cache: 'no-store'
    });

    if (!response.ok) {
      throw new Error(`读取个人资料失败：HTTP ${response.status}`);
    }

    const source = new DOMParser().parseFromString(
      await response.text(), 'text/html'
    );

    const originals = [...source.querySelectorAll(selector)];
    const targets = [...document.querySelectorAll(selector)];

    if (!originals.length || !targets.length) {
      throw new Error('个人资料结构可能已变化');
    }

    // 识别动态背景
    const animated = originals.map(page => ({
      page,
      layer: page.querySelector('.profile_animated_background')
    })).find(({ layer }) =>
      layer?.querySelector('video[src], video source[src]')
    );

    // 识别静态背景
    const staticBg = originals.map(page => ({
      page,
      image: page.style.backgroundImage
    })).find(({ image }) =>
      image && image !== 'none' && image.includes('url(')
    );

    const mode = animated ? 'dynamic'
      : staticBg ? 'static'
      : originals.some(page =>
          page.classList.contains('has_profile_background') ||
          page.querySelector('.profile_animated_background')
        ) ? 'unknown' : 'none';

    const originalPage =
      animated?.page || staticBg?.page || originals[0];

    const originalAvatar = source.querySelector(
      '.profile_header .playerAvatarAutoSizeInner'
    );

    const targetAvatars = [...document.querySelectorAll(
      '.profile_header .playerAvatarAutoSizeInner'
    )];

    const videos = [];

    // 避免重复执行产生多个观察器
    window.__steamProfilePreviewIO?.disconnect();
    window.__steamProfilePreviewIO = null;

    if (mode !== 'unknown') {
      for (const page of targets) {
        // 只清理目标个人资料中的旧背景
        page.querySelectorAll('.profile_animated_background')
          .forEach(layer => {
            layer.querySelectorAll('video')
              .forEach(video => video.pause());
            layer.remove();
          });

        page.classList.toggle(
          'has_profile_background', mode !== 'none'
        );

        page.classList.toggle(
          'full_width_background',
          mode !== 'none' &&
          originalPage.classList.contains('full_width_background')
        );

        if (mode === 'static') {
          // 保留来源页面实际指定的背景属性
          for (const prop of [
            'background-image',
            'background-position',
            'background-size',
            'background-repeat',
            'background-attachment'
          ]) {
            const value = originalPage.style.getPropertyValue(prop);

            if (value) {
              page.style.setProperty(prop, value, 'important');
            } else {
              page.style.removeProperty(prop);
            }
          }
        } else {
          page.style.setProperty(
            'background-image', 'none', 'important'
          );

          for (const prop of [
            'background-position',
            'background-size',
            'background-repeat',
            'background-attachment'
          ]) {
            page.style.removeProperty(prop);
          }

          if (mode === 'dynamic') {
            const layer = document.importNode(animated.layer, true);

            for (const video of layer.querySelectorAll('video')) {
              // 延迟加载，避免隐藏副本持续占用资源
              video.removeAttribute('autoplay');
              video.preload = 'none';
              video.muted = true;
              video.loop = true;
              video.playsInline = true;
              videos.push(video);
            }

            page.prepend(layer);
          }
        }
      }
    } else {
      warn('未识别的背景结构，保留原预览背景');
    }

    // 恢复头像和头像框
    if (originalAvatar && targetAvatars.length) {
      for (const avatar of targetAvatars) {
        avatar.replaceChildren(
          ...[...originalAvatar.childNodes].map(
            node => document.importNode(node, true)
          )
        );

        // 额外兼容可能使用视频的头像
        for (const video of avatar.querySelectorAll('video')) {
          video.removeAttribute('autoplay');
          video.preload = 'none';
          video.muted = true;
          videos.push(video);
        }
      }
    } else {
      warn('头像结构未找到，跳过头像替换');
    }

    // 按可见性管理视频
    const play = video => {
      try {
        video.play()?.catch?.(() => {});
      } catch {}
    };

    if (videos.length) {
      if ('IntersectionObserver' in window) {
        const observer = new IntersectionObserver(entries => {
          for (const { target: video, isIntersecting } of entries) {
            if (isIntersecting) play(video);
            else video.pause();
          }
        }, { threshold: 0.01 });

        videos.forEach(video => observer.observe(video));
        window.__steamProfilePreviewIO = observer;
      } else {
        videos
          .filter(video => video.getClientRects().length)
          .forEach(play);
      }
    }

    console.info(
      tag,
      `完成：背景 ${mode}；头像 ${
        originalAvatar && targetAvatars.length
          ? '已恢复' : '未修改'
      }。`
    );
  } catch (error) {
    warn(error?.message || String(error));
  }
})();