/* eslint-disable @typescript-eslint/ban-ts-comment, @typescript-eslint/no-explicit-any, react-hooks/exhaustive-deps, no-console, @next/next/no-img-element */

'use client';

import { AlertCircle, Cloud, Heart, Keyboard, Loader2, Router, Sparkles, X } from 'lucide-react';
import { useRouter, useSearchParams } from 'next/navigation';
import { Suspense, useEffect, useMemo, useRef, useState } from 'react';

import { isAnimeCategoryText } from '@/lib/anime-keyword-expr';
import { createAnime4KRenderer } from '@/lib/anime4k';
import { getAuthInfoFromBrowserCookie } from '@/lib/auth';
import {
  clearDanmakuCacheByTitle,
  convertDanmakuFormat,
  getDanmakuById,
  getDanmakuFromCache,
  getEpisodes,
  initDanmakuModule,
  loadDanmakuDisplayState,
  loadDanmakuSettings,
  saveDanmakuDisplayState,
  saveDanmakuSettings,
  searchAnime,
} from '@/lib/danmaku/api';
import {
  getDanmakuAnimeId,
  getDanmakuSearchKeyword,
  getDanmakuSourceIndex,
  getManualDanmakuSelection,
  saveDanmakuAnimeId,
  saveDanmakuSearchKeyword,
  saveDanmakuSourceIndex,
  saveManualDanmakuSelection,
} from '@/lib/danmaku/selection-memory';
import type { DanmakuAnime, DanmakuComment, DanmakuSelection, DanmakuSettings } from '@/lib/danmaku/types';
import {
  deleteFavorite,
  deleteSkipConfig,
  generateStorageKey,
  getAllPlayRecords,
  getDanmakuFilterConfig,
  getEpisodeFilterConfig,
  getSkipConfig,
  isFavorited,
  migratePlayRecord,
  saveFavorite,
  savePlayRecord,
  saveSkipConfig,
  subscribeToDataUpdates,
} from '@/lib/db.client';
import { getDoubanDetail } from '@/lib/douban.client';
import { isEpisodeHiddenByFilter, normalizeEpisodeFilterConfig } from '@/lib/episode-filter';
import { appendSpecialSourceParam, isSpecialSourcesEnabledOnDevice } from '@/lib/special-source.client';
import {
  buildEpisodeProgressContentKey,
  loadLocalEpisodeProgress,
  pruneLocalEpisodeProgressStorage,
  saveLocalEpisodeProgress,
} from '@/lib/episode-progress';
import { isNetdiskSource, normalizeNetdiskSource } from '@/lib/netdisk/source';
import {
  getRecommendationCache,
  recommendationCacheKeys,
  setRecommendationCache,
} from '@/lib/recommendations/cache';
import { getIndexedDBVideoPlaybackUrl } from '@/lib/indexeddb-video-cache';
import {
  convertSubtitleFileToVttObjectUrl,
  CUSTOM_SUBTITLE_ACCEPT,
} from '@/lib/subtitle-converter';
import { getTMDBImageUrl } from '@/lib/tmdb.search';
import { DanmakuFilterConfig, EpisodeFilterConfig, SearchResult } from '@/lib/types';
import { base58Decode, getVideoResolutionFromM3u8, processImageUrl } from '@/lib/utils';
import { useEnableAIComments } from '@/hooks/useEnableAIComments';
import { useEnableComments } from '@/hooks/useEnableComments';
import { usePlaySync } from '@/hooks/usePlaySync';

import AIChatPanel from '@/components/AIChatPanel';
import AIComments from '@/components/AIComments';
import CorrectDialog from '@/components/CorrectDialog';
import DanmakuFilterSettings from '@/components/DanmakuFilterSettings';
import DetailPanel from '@/components/DetailPanel';
import DoubanComments from '@/components/DoubanComments';
import DownloadEpisodeSelector from '@/components/DownloadEpisodeSelector';
import Drawer from '@/components/Drawer';
import EpisodeSelector from '@/components/EpisodeSelector';
import PageLayout from '@/components/PageLayout';
import PansouSearch from '@/components/PansouSearch';
import ProxyImage from '@/components/ProxyImage';
import { useSite } from '@/components/SiteProvider';
import SmartRecommendations from '@/components/SmartRecommendations';
import Toast, { ToastProps } from '@/components/Toast';
import VideoCard from '@/components/VideoCard';

import { useDownload } from '@/contexts/DownloadContext';

// 扩展 HTMLVideoElement 类型以支持 hls 属性
declare global {
  interface HTMLVideoElement {
    hls?: any;
  }
}

// Wake Lock API 类型声明
interface WakeLockSentinel {
  released: boolean;
  release(): Promise<void>;
  addEventListener(type: 'release', listener: () => void): void;
  removeEventListener(type: 'release', listener: () => void): void;
}

interface PlayFallbackRecommendation {
  key: string;
  item: SearchResult;
  episodes?: number;
  sourceNames: string[];
  doubanId?: number;
}

interface SearchCachePayload {
  status: 'complete' | 'partial';
  results: SearchResult[];
  query: string;
  updatedAt: number;
}

type CustomSubtitleEngine = 'native' | 'jassub';
type PlaybackSourceBadge = 'local' | 'offline' | null;

interface CustomSubtitleState {
  name: string;
  format: string;
  episodeIndex: number;
  engine: CustomSubtitleEngine;
  url?: string;
  content?: string;
}

interface SourceSubtitleItem {
  label: string;
  url: string;
  fallbackUrl?: string;
  fallbackFormat?: string;
  format?: string;
  sourceFormat?: string;
  codec?: string;
  renderMode?: 'native' | 'jassub';
}

interface JassubSubtitleInstance {
  setTrack?: (content: string) => void | Promise<void>;
  setTrackByUrl?: (url: string) => void | Promise<void>;
  freeTrack?: () => void | Promise<void>;
  destroy?: () => void | Promise<void>;
}

const PLAYBACK_RATE_OPTIONS = [0.5, 0.75, 1, 1.25, 1.5, 2, 3, 4];
const JASSUB_ASSET_BASE = '/assets/jassub';
const JASSUB_CJK_FONT_FAMILY = 'noto sans cjk sc';
const JASSUB_CJK_FONT_URL = `${JASSUB_ASSET_BASE}/NotoSansCJK-Regular.ttc`;
const ADVANCED_SUBTITLE_FORMATS = new Set(['ass', 'ssa']);
const PLAY_SHORTCUT_GROUPS = [
  {
    title: '播放控制',
    items: [
      { keys: ['空格'], description: '播放 / 暂停' },
      { keys: ['←', '→'], description: '快退 / 快进 10 秒' },
      { keys: ['P'], description: '快捷快进' },
      { keys: ['↑', '↓'], description: '音量增加 / 减少' },
      { keys: ['F'], description: '切换全屏' },
    ],
  },
  {
    title: '剧集切换',
    items: [
      { keys: ['Alt', '←'], description: '上一集' },
      { keys: ['Alt', '→'], description: '下一集' },
    ],
  },
  {
    title: '倍速控制',
    items: [
      { keys: ['小键盘 +'], description: '提高一档倍速' },
      { keys: ['小键盘 -'], description: '降低一档倍速' },
      { keys: ['小键盘 /'], description: '恢复 1x' },
    ],
  },
];

function PlayPageClient() {
  const LOCAL_TRANSCODER_BASE_URL = 'http://localhost:19080';
  const router = useRouter();
  const searchParams = useSearchParams();
  const enableComments = useEnableComments();
  const enableAIComments = useEnableAIComments();
  const { addDownloadTask } = useDownload();
  const { siteName } = useSite();

  // 获取 Proxy M3U8 Token
  const proxyToken = typeof window !== 'undefined' ? process.env.NEXT_PUBLIC_PROXY_M3U8_TOKEN || '' : '';

  // 获取用户认证信息
  const authInfo = typeof window !== 'undefined' ? getAuthInfoFromBrowserCookie() : null;

  // 离线下载功能配置
  const enableOfflineDownload = typeof window !== 'undefined'
    ? (window as any).RUNTIME_CONFIG?.ENABLE_OFFLINE_DOWNLOAD || false
    : false;
  const hasOfflinePermission = authInfo?.role === 'owner' || authInfo?.role === 'admin';

  // -----------------------------------------------------------------------------
  // 状态变量（State）
  // -----------------------------------------------------------------------------
  const [loading, setLoading] = useState(true);
  const [loadingStage, setLoadingStage] = useState<
    'searching' | 'preferring' | 'fetching' | 'ready'
  >('searching');
  const [loadingMessage, setLoadingMessage] = useState('正在搜索播放源...');
  const [error, setError] = useState<string | null>(null);
  const [detail, setDetail] = useState<SearchResult | null>(null);

  // TMDB背景图
  const [tmdbBackdrop, setTmdbBackdrop] = useState<string | null>(null);

  // 收藏状态
  const [favorited, setFavorited] = useState(false);

  // 网盘搜索弹窗状态
  const [showPansouDialog, setShowPansouDialog] = useState(false);
  const [netdiskSearchEnabled, setNetdiskSearchEnabled] = useState(false);

  // AI问片状态
  const [showAIChat, setShowAIChat] = useState(false);
  const [aiEnabled, setAiEnabled] = useState(false);
  const [aiDefaultMessageWithVideo, setAiDefaultMessageWithVideo] = useState('');

  // 纠错弹窗状态
  const [showCorrectDialog, setShowCorrectDialog] = useState(false);

  // 详情面板状态
  const [showDetailPanel, setShowDetailPanel] = useState(false);

  // 快捷键说明弹窗状态
  const [showShortcutDialog, setShowShortcutDialog] = useState(false);

  useEffect(() => {
    if (!showShortcutDialog) {
      return;
    }

    const handleShortcutDialogKeyDown = (event: KeyboardEvent) => {
      if (event.key === 'Escape') {
        setShowShortcutDialog(false);
      }
    };

    document.addEventListener('keydown', handleShortcutDialogKeyDown);
    return () => {
      document.removeEventListener('keydown', handleShortcutDialogKeyDown);
    };
  }, [showShortcutDialog]);

  // 大屏设备检测（判断选集面板是否在右侧）
  const [isLargeScreen, setIsLargeScreen] = useState(false);

  // 检测是否为大屏设备
  useEffect(() => {
    const checkScreenSize = () => {
      setIsLargeScreen(window.innerWidth >= 768); // md断点
    };

    checkScreenSize();
    window.addEventListener('resize', checkScreenSize);
    return () => window.removeEventListener('resize', checkScreenSize);
  }, []);

  // 抽屉管理：打开指定抽屉时关闭其他抽屉
  const openDrawer = (drawerName: 'pansou' | 'aiChat' | 'correct' | 'detail') => {
    if (!isLargeScreen) {
      // 小屏设备不需要互斥
      switch (drawerName) {
        case 'pansou':
          setShowPansouDialog(true);
          break;
        case 'aiChat':
          setShowAIChat(true);
          break;
        case 'correct':
          setShowCorrectDialog(true);
          break;
        case 'detail':
          setShowDetailPanel(true);
          break;
      }
      return;
    }

    // 大屏设备：关闭其他抽屉
    setShowPansouDialog(drawerName === 'pansou');
    setShowAIChat(drawerName === 'aiChat');
    setShowCorrectDialog(drawerName === 'correct');
    setShowDetailPanel(drawerName === 'detail');
  };

  // 检查AI功能是否启用
  useEffect(() => {
    if (typeof window !== 'undefined') {
      const enabled =
        (window as any).RUNTIME_CONFIG?.AI_ENABLED &&
        (window as any).RUNTIME_CONFIG?.AI_ENABLE_PLAYPAGE_ENTRY;
      setAiEnabled(enabled);

      // 加载AI默认消息配置
      const defaultMsg = (window as any).RUNTIME_CONFIG?.AI_DEFAULT_MESSAGE_WITH_VIDEO;
      if (defaultMsg) {
        setAiDefaultMessageWithVideo(defaultMsg);
      }
    }
  }, []);

  useEffect(() => {
    if (typeof window !== 'undefined') {
      setNetdiskSearchEnabled(
        !!(window as any).RUNTIME_CONFIG?.NETDISK_SEARCH_ENABLED
      );
    }
  }, []);

  // 网页全屏状态 - 控制导航栏的显示隐藏
  const [isWebFullscreen, setIsWebFullscreen] = useState(false);
  // 原生全屏状态
  const [isNativeFullscreen, setIsNativeFullscreen] = useState(false);

  // 监听浏览器原生全屏事件
  useEffect(() => {
    const handleFullscreenChange = () => {
      const isFullscreen = !!document.fullscreenElement;
      setIsNativeFullscreen(isFullscreen);
    };

    document.addEventListener('fullscreenchange', handleFullscreenChange);
    document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
    document.addEventListener('mozfullscreenchange', handleFullscreenChange);
    document.addEventListener('MSFullscreenChange', handleFullscreenChange);

    return () => {
      document.removeEventListener('fullscreenchange', handleFullscreenChange);
      document.removeEventListener('webkitfullscreenchange', handleFullscreenChange);
      document.removeEventListener('mozfullscreenchange', handleFullscreenChange);
      document.removeEventListener('MSFullscreenChange', handleFullscreenChange);
    };
  }, []);

  // 组件卸载时清理定时器
  useEffect(() => {
    return () => {
      clearRefreshTimer();
    };
  }, []);

  // 跳过片头片尾配置
  const [skipConfig, setSkipConfig] = useState<{
    enable: boolean;
    intro_time: number;
    outro_time: number;
  }>({
    enable: false,
    intro_time: 0,
    outro_time: 0,
  });
  const skipConfigRef = useRef(skipConfig);
  useEffect(() => {
    skipConfigRef.current = skipConfig;
  }, [
    skipConfig,
    skipConfig.enable,
    skipConfig.intro_time,
    skipConfig.outro_time,
  ]);

  // 快捷快进设置（默认 1 分 30 秒）
  const DEFAULT_QUICK_FORWARD_SECONDS = 90;
  const [quickForwardSeconds, setQuickForwardSeconds] = useState(() => {
    if (typeof window === 'undefined') return DEFAULT_QUICK_FORWARD_SECONDS;
    const saved = Number(localStorage.getItem('quickForwardSeconds'));
    return Number.isFinite(saved) && saved > 0 ? saved : DEFAULT_QUICK_FORWARD_SECONDS;
  });
  const quickForwardSecondsRef = useRef(quickForwardSeconds);
  useEffect(() => {
    quickForwardSecondsRef.current = quickForwardSeconds;
  }, [quickForwardSeconds]);

  // 跳过检查的时间间隔控制
  const lastSkipCheckRef = useRef(0);

  // 去广告开关（从 localStorage 继承，默认 true）
  const [blockAdEnabled, setBlockAdEnabled] = useState<boolean>(() => {
    if (typeof window !== 'undefined') {
      const v = localStorage.getItem('enable_blockad');
      if (v !== null) return v === 'true';
    }
    return true;
  });
  const blockAdEnabledRef = useRef(blockAdEnabled);
  useEffect(() => {
    blockAdEnabledRef.current = blockAdEnabled;
  }, [blockAdEnabled]);

  // 外部播放器去广告开关（独立状态，默认 false）
  const [externalPlayerAdBlock, setExternalPlayerAdBlock] = useState<boolean>(() => {
    if (typeof window !== 'undefined') {
      const v = localStorage.getItem('external_player_adblock');
      if (v !== null) return v === 'true';
    }
    return false;
  });
  useEffect(() => {
    if (typeof window !== 'undefined') {
      localStorage.setItem('external_player_adblock', String(externalPlayerAdBlock));
    }
  }, [externalPlayerAdBlock]);

  // 自定义去广告代码（从服务器获取并缓存）
  const customAdFilterCodeRef = useRef<string>('');

  // 初始化时获取自定义去广告代码
  useEffect(() => {
    const fetchAdFilterCode = async () => {
      if (typeof window === 'undefined') return;

      try {
        // 先从 localStorage 获取缓存的代码，立即可用
        const cachedCode = localStorage.getItem('custom_ad_filter_code_cache');
        const cachedVersion = localStorage.getItem('custom_ad_filter_version_cache');

        if (cachedCode) {
          customAdFilterCodeRef.current = cachedCode;
          console.log('使用缓存的去广告代码');
        }

        // 从 window.RUNTIME_CONFIG 获取版本号
        const version = (window as any).RUNTIME_CONFIG?.CUSTOM_AD_FILTER_VERSION || 0;

        // 如果版本号为 0，说明去广告未设置，清空缓存并跳过
        if (version === 0) {
          console.log('去广告代码未设置（版本 0），清空缓存');
          localStorage.removeItem('custom_ad_filter_code_cache');
          localStorage.removeItem('custom_ad_filter_version_cache');
          customAdFilterCodeRef.current = '';
          return;
        }

        // 如果版本号不一致或没有缓存，才获取完整代码
        if (!cachedVersion || parseInt(cachedVersion) !== version) {
          console.log('检测到去广告代码更新（版本 ' + version + '），获取最新代码');

          // 获取完整代码
          const fullResponse = await fetch('/api/ad-filter?full=true');
          if (!fullResponse.ok) {
            console.warn('获取完整去广告代码失败，使用缓存');
            return;
          }

          const { code } = await fullResponse.json();

          if (code) {
            localStorage.setItem('custom_ad_filter_code_cache', code);
            localStorage.setItem('custom_ad_filter_version_cache', version.toString());
            customAdFilterCodeRef.current = code;
          } else if (!cachedCode) {
            // 如果服务器没有代码且本地也没有缓存，清空缓存
            localStorage.removeItem('custom_ad_filter_code_cache');
            localStorage.removeItem('custom_ad_filter_version_cache');
          }
        } else {
          console.log('去广告代码已是最新版本（版本 ' + version + '）');
        }
      } catch (error) {
        console.error('获取去广告代码配置失败:', error);
        // 失败时已经使用了缓存，无需额外处理
      }
    };

    fetchAdFilterCode();
  }, []);

  // Anime4K超分相关状态
  const [webGPUSupported, setWebGPUSupported] = useState<boolean>(false);
  const [anime4kEnabled, setAnime4kEnabled] = useState<boolean>(false);
  const [anime4kMode, setAnime4kMode] = useState<string>(() => {
    if (typeof window !== 'undefined') {
      const v = localStorage.getItem('anime4k_mode');
      if (v !== null) return v;
    }
    return 'ModeA';
  });
  const [anime4kScale, setAnime4kScale] = useState<number>(() => {
    if (typeof window !== 'undefined') {
      const v = localStorage.getItem('anime4k_scale');
      if (v !== null) return parseFloat(v);
    }
    return 2.0;
  });
  const anime4kRef = useRef<any>(null);
  const anime4kEnabledRef = useRef(anime4kEnabled);
  const anime4kModeRef = useRef(anime4kMode);
  const anime4kScaleRef = useRef(anime4kScale);
  useEffect(() => {
    anime4kEnabledRef.current = anime4kEnabled;
    anime4kModeRef.current = anime4kMode;
    anime4kScaleRef.current = anime4kScale;
  }, [anime4kEnabled, anime4kMode, anime4kScale]);

  // 检测WebGPU支持
  useEffect(() => {
    const checkWebGPUSupport = async () => {
      if (typeof navigator === 'undefined' || !('gpu' in navigator)) {
        setWebGPUSupported(false);
        console.log('WebGPU不支持：浏览器不支持WebGPU API');
        return;
      }

      try {
        // 修复anime4k-webgpu库的buffer size限制问题
        // 在全局层面patch requestAdapter，确保所有adapter都有正确的limits
        const originalRequestAdapter = (navigator as any).gpu.requestAdapter.bind((navigator as any).gpu);

        (navigator as any).gpu.requestAdapter = async (options?: any) => {
          const adapter = await originalRequestAdapter(options);
          if (!adapter) return adapter;

          // 保存原始的requestDevice方法
          const originalRequestDevice = adapter.requestDevice.bind(adapter);

          // 重写requestDevice方法，添加必要的buffer size限制
          adapter.requestDevice = async (descriptor?: any) => {
            const adapterLimits = adapter.limits;

            // 合并用户提供的descriptor和我们需要的limits
            const enhancedDescriptor = {
              ...descriptor,
              requiredLimits: {
                ...descriptor?.requiredLimits,
                // 使用adapter支持的最大值，但不超过2GB
                maxBufferSize: Math.min(adapterLimits.maxBufferSize || 2147483648, 2147483648),
                maxStorageBufferBindingSize: Math.min(adapterLimits.maxStorageBufferBindingSize || 1073741824, 1073741824),
              }
            };

            console.log('WebGPU设备请求配置:', enhancedDescriptor.requiredLimits);
            return originalRequestDevice(enhancedDescriptor);
          };

          return adapter;
        };

        const adapter = await (navigator as any).gpu.requestAdapter();
        if (!adapter) {
          setWebGPUSupported(false);
          console.log('WebGPU不支持：无法获取GPU适配器');
          return;
        }

        setWebGPUSupported(true);
        console.log('WebGPU支持检测：✅ 支持');
        console.log('Adapter limits:', {
          maxBufferSize: adapter.limits.maxBufferSize,
          maxStorageBufferBindingSize: adapter.limits.maxStorageBufferBindingSize
        });
      } catch (err) {
        setWebGPUSupported(false);
        console.log('WebGPU不支持：', err);
      }
    };

    checkWebGPUSupport();
  }, []);

  // 弹幕相关状态
  const [danmakuSettings, setDanmakuSettings] = useState<DanmakuSettings>(
    loadDanmakuSettings()
  );
  const [danmakuFilterConfig, setDanmakuFilterConfig] = useState<DanmakuFilterConfig | null>(null);
  const danmakuFilterConfigRef = useRef<DanmakuFilterConfig | null>(null);
  const [episodeFilterConfig, setEpisodeFilterConfig] = useState<EpisodeFilterConfig | null>(null);
  const episodeFilterConfigRef = useRef<EpisodeFilterConfig | null>(null);
  const [currentDanmakuSelection, setCurrentDanmakuSelection] =
    useState<DanmakuSelection | null>(null);
  const [danmakuEpisodesList, setDanmakuEpisodesList] = useState<
    Array<{ episodeId: number; episodeTitle: string }>
  >([]);
  const [danmakuLoading, setDanmakuLoading] = useState(false);
  const [danmakuCount, setDanmakuCount] = useState(0);
  const [danmakuOriginalCount, setDanmakuOriginalCount] = useState(0);
  const danmakuPluginRef = useRef<any>(null);
  const danmakuSettingsRef = useRef(danmakuSettings);

  // 弹幕显示状态的 ref，初始化时从 localStorage 读取
  const danmakuDisplayStateRef = useRef<boolean>(
    (() => {
      const saved = loadDanmakuDisplayState();
      return saved !== false; // null 或 true 都返回 true
    })()
  );

  // 弹幕热力图完全禁用开关（默认不禁用，即启用热力图功能）
  const [danmakuHeatmapDisabled, setDanmakuHeatmapDisabled] = useState<boolean>(() => {
    if (typeof window !== 'undefined') {
      const v = localStorage.getItem('danmaku_heatmap_disabled');
      if (v !== null) return v === 'true';
    }
    return false; // 默认不禁用
  });
  const danmakuHeatmapDisabledRef = useRef(danmakuHeatmapDisabled);
  useEffect(() => {
    danmakuHeatmapDisabledRef.current = danmakuHeatmapDisabled;
  }, [danmakuHeatmapDisabled]);

  // 弹幕热力图开关（默认开启）
  const [danmakuHeatmapEnabled, setDanmakuHeatmapEnabled] = useState<boolean>(() => {
    if (typeof window !== 'undefined') {
      const v = localStorage.getItem('danmaku_heatmap_enabled');
      if (v !== null) return v === 'true';
    }
    return true; // 默认开启
  });
  const danmakuHeatmapEnabledRef = useRef(danmakuHeatmapEnabled);
  useEffect(() => {
    danmakuHeatmapEnabledRef.current = danmakuHeatmapEnabled;
  }, [danmakuHeatmapEnabled]);

  // 多条弹幕匹配结果
  const [danmakuMatches, setDanmakuMatches] = useState<DanmakuAnime[]>([]);
  const [showDanmakuSourceSelector, setShowDanmakuSourceSelector] = useState(false);
  const [showDanmakuFilterSettings, setShowDanmakuFilterSettings] = useState(false);
  const [currentSearchKeyword, setCurrentSearchKeyword] = useState<string>(''); // 当前搜索使用的关键词
  const [toast, setToast] = useState<ToastProps | null>(null);
  const [isTranscoding, setIsTranscoding] = useState(false);

  useEffect(() => {
    danmakuSettingsRef.current = danmakuSettings;
  }, [danmakuSettings]);

  // 初始化弹幕模块（清理过期缓存）
  useEffect(() => {
    initDanmakuModule();
  }, []);

  // 加载弹幕过滤配置
  useEffect(() => {
    const loadFilterConfig = async () => {
      try {
        const config = await getDanmakuFilterConfig();
        if (config) {
          setDanmakuFilterConfig(config);
          danmakuFilterConfigRef.current = config;
        } else {
          // 如果没有配置，设置默认空配置
          const defaultConfig: DanmakuFilterConfig = { rules: [] };
          setDanmakuFilterConfig(defaultConfig);
          danmakuFilterConfigRef.current = defaultConfig;
        }

        // 加载集数过滤配置
        const episodeConfig = await getEpisodeFilterConfig();
        if (episodeConfig) {
          const normalizedEpisodeConfig = normalizeEpisodeFilterConfig(episodeConfig);
          setEpisodeFilterConfig(normalizedEpisodeConfig);
          episodeFilterConfigRef.current = normalizedEpisodeConfig;
        } else {
          const defaultEpisodeConfig: EpisodeFilterConfig = normalizeEpisodeFilterConfig();
          setEpisodeFilterConfig(defaultEpisodeConfig);
          episodeFilterConfigRef.current = defaultEpisodeConfig;
        }
      } catch (error) {
        console.error('加载过滤配置失败:', error);
      }
    };
    loadFilterConfig();
  }, []);

  // 同步弹幕过滤配置到ref
  useEffect(() => {
    danmakuFilterConfigRef.current = danmakuFilterConfig;
  }, [danmakuFilterConfig]);

  // 同步集数过滤配置到ref
  useEffect(() => {
    episodeFilterConfigRef.current = episodeFilterConfig;
  }, [episodeFilterConfig]);

  // 视频基本信息
  const [videoTitle, setVideoTitle] = useState(searchParams.get('title') || '');
  const [videoYear, setVideoYear] = useState(searchParams.get('year') || '');
  const [videoCover, setVideoCover] = useState('');
  const [videoDoubanId, setVideoDoubanId] = useState(0);

  // 更新浏览器标题
  useEffect(() => {
    if (videoTitle) {
      document.title = `${siteName} - ${videoTitle}`;
    } else {
      document.title = siteName;
    }
  }, [videoTitle, siteName]);
  // 豆瓣评分数据
  const [doubanRating, setDoubanRating] = useState<{
    value: number;
    count: number;
    star_count: number;
  } | null>(null);
  // 豆瓣额外信息
  const [doubanCardSubtitle, setDoubanCardSubtitle] = useState<string>('');
  const [doubanAka, setDoubanAka] = useState<string[]>([]);
  const [doubanYear, setDoubanYear] = useState<string>(''); // 从 pubdate 提取的年份

  // 纠错后的描述信息（用于显示，不触发 detail 更新）
  const [correctedDesc, setCorrectedDesc] = useState<string>('');
  const [netdiskTMDBMeta, setNetdiskTMDBMeta] = useState<{
    desc?: string;
    poster?: string;
    year?: string;
    tmdbId?: number;
  } | null>(null);
  const [pendingNetdiskTMDBData, setPendingNetdiskTMDBData] = useState<any | null>(null);

  // 当前源和ID - source 直接存储完整格式（如 'emby_wumei' 或 'emby'）
  const [currentSource, setCurrentSource] = useState(normalizeNetdiskSource(searchParams.get('source')) || '');
  const [currentId, setCurrentId] = useState(searchParams.get('id') || '');
  const [fileName] = useState(searchParams.get('fileName') || ''); // 小雅源：用户点击的文件名
  const isDirectPlay = currentSource === 'directplay';

  useEffect(() => {
    setNetdiskTMDBMeta(null);
    setPendingNetdiskTMDBData(null);
  }, [currentSource, currentId]);

  // 解析 source 参数以获取 embyKey（仅用于 API 调用）
  const parseSourceForApi = (source: string): { source: string; embyKey?: string } => {
    source = normalizeNetdiskSource(source);
    if (source.startsWith('emby_')) {
      const key = source.substring(5);
      return { source: 'emby', embyKey: key };
    }
    return { source };
  };

  const isLazyDetailSource = (source?: string) => {
    if (!source) return false;
    return (
      source === 'openlist' ||
      source === 'emby' ||
      source.startsWith('emby_') ||
      source.startsWith('script:')
    );
  };

  /** 私人影库/网盘类源：配合 moontvplus-extension 跨域媒体模块，供 Anime4K 等读帧 */
  const needsPrivateSourceCrossOrigin = (source?: string | null) => {
    if (!source) return false;
    return (
      source === 'openlist' ||
      source === 'xiaoya' ||
      source === 'emby' ||
      source.startsWith('emby_') ||
      isNetdiskSource(source)
    );
  };

  const applyVideoCrossOrigin = (
    video: HTMLVideoElement | null,
    source?: string | null
  ) => {
    if (!video) return;
    if (needsPrivateSourceCrossOrigin(source ?? currentSourceRef.current)) {
      if (video.crossOrigin !== 'anonymous') {
        video.crossOrigin = 'anonymous';
      }
    } else if (video.crossOrigin) {
      // 切回普通源时去掉，避免无 CORS 的 CDN 在 CORS 模式下播挂
      video.crossOrigin = null;
    }
  };

  const isM3u8LikeUrl = (url?: string) => {
    if (!url) return false;
    const normalizedUrl = url.toLowerCase();
    return normalizedUrl.includes('.m3u8') || normalizedUrl.includes('/m3u8/');
  };

  const buildAbsoluteUrl = (url: string) => {
    if (url.startsWith('http://') || url.startsWith('https://')) {
      return url;
    }
    return `${window.location.origin}${url.startsWith('/') ? '' : '/'}${url}`;
  };

  // 搜索所需信息
  const [searchTitle] = useState(searchParams.get('stitle') || '');
  const [searchType] = useState(searchParams.get('stype') || '');
  const [initialEpisodeProgressTitle] = useState(
    searchTitle || searchParams.get('title') || ''
  );
  const [initialEpisodeProgressYear] = useState(
    searchParams.get('year') || ''
  );
  const episodeProgressContentKey = useMemo(
    () =>
      buildEpisodeProgressContentKey({
        doubanId: videoDoubanId || detail?.douban_id,
        tmdbId: detail?.tmdb_id,
        title: initialEpisodeProgressTitle,
        year: initialEpisodeProgressYear,
        searchType,
      }),
    [
      detail?.douban_id,
      detail?.tmdb_id,
      initialEpisodeProgressTitle,
      initialEpisodeProgressYear,
      searchType,
      videoDoubanId,
    ]
  );

  // 是否需要优选
  const [needPrefer, setNeedPrefer] = useState(
    searchParams.get('prefer') === 'true'
  );
  const needPreferRef = useRef(needPrefer);
  useEffect(() => {
    needPreferRef.current = needPrefer;
  }, [needPrefer]);
  // 集数相关
  const [currentEpisodeIndex, setCurrentEpisodeIndex] = useState(() => {
    const episodeParam = searchParams.get('episode');
    if (episodeParam) {
      const episode = parseInt(episodeParam, 10);
      return episode > 0 ? episode - 1 : 0; // URL 中是 1-based，内部是 0-based
    }
    return 0;
  });

  // 监听 URL 参数变化，更新集数索引（用于房员跟随换集）
  useEffect(() => {
    const episodeParam = searchParams.get('episode');
    if (episodeParam) {
      const episode = parseInt(episodeParam, 10);
      const newIndex = episode > 0 ? episode - 1 : 0;
      console.log('[PlayPage] Checking episode from URL:', { urlEpisode: episode, currentIndex: currentEpisodeIndex, newIndex });
      if (newIndex !== currentEpisodeIndex) {
        console.log('[PlayPage] URL episode changed, updating index to:', newIndex);
        setCurrentEpisodeIndex(newIndex);
      }
    }
  }, [searchParams, currentEpisodeIndex]);

  // 监听集数变化，移除已显示的跳转按钮
  useEffect(() => {
    // 移除已显示的跳转按钮
    if (playRecordJumpLayerRef.current && artPlayerRef.current) {
      try {
        artPlayerRef.current.layers.remove('play-record-jump');
        playRecordJumpLayerRef.current = null;
      } catch (err) {
        console.warn('[PlayRecordJump] 移除跳转按钮失败:', err);
      }
    }

    // 用户主动切集/自动下一集时不再弹“上次播放到 xx”。
    // 首次进入页面仍保留检查能力，用于展示继续播放提示。
    if (suppressPlayRecordJumpOnNextEpisodeChangeRef.current) {
      playRecordJumpInitialCheckRef.current = false;
      playRecordJumpDismissedRef.current = true;
      suppressPlayRecordJumpOnNextEpisodeChangeRef.current = false;
      return;
    }

    playRecordJumpInitialCheckRef.current = true;
    playRecordJumpDismissedRef.current = false;
  }, [currentEpisodeIndex]);

  // 监听 URL 参数变化，当切换到不同视频时重新加载页面
  useEffect(() => {
    const urlTitle = searchParams.get('title') || '';
    const reloadParam = searchParams.get('_reload');

    // 只在有 _reload 参数且标题变化时才重新加载页面
    // 这样可以避免初始化、API返回、房间同步等场景的误触发
    // 只有用户主动点击推荐时才会添加 _reload 参数
    if (reloadParam && urlTitle && urlTitle !== videoTitle && !isSourceChangingRef.current) {
      console.log('[PlayPage] User clicked recommendation, reloading page');
      window.location.reload();
    }

    // 重置换源标记
    isSourceChangingRef.current = false;
  }, [searchParams, videoTitle]);

  const currentSourceRef = useRef(currentSource);
  const currentIdRef = useRef(currentId);
  const videoTitleRef = useRef(videoTitle);
  const videoYearRef = useRef(videoYear);
  const detailRef = useRef<SearchResult | null>(detail);
  const currentEpisodeIndexRef = useRef(currentEpisodeIndex);
  const isSourceChangingRef = useRef(false); // 标记是否正在换源

  // 同步最新值到 refs
  useEffect(() => {
    currentSourceRef.current = currentSource;
    currentIdRef.current = currentId;
    detailRef.current = detail;
    currentEpisodeIndexRef.current = currentEpisodeIndex;
    videoTitleRef.current = videoTitle;
    videoYearRef.current = videoYear;
  }, [
    currentSource,
    currentId,
    detail,
    currentEpisodeIndex,
    videoTitle,
    videoYear,
  ]);

  // 当集数改变时，重置下集预缓存标记
  useEffect(() => {
    nextEpisodePreCacheTriggeredRef.current = false;
    nextEpisodeDanmakuPreloadTriggeredRef.current = false;
    // 清理之前的预缓存 HLS 实例
    if (nextEpisodePreCacheHlsRef.current) {
      try {
        nextEpisodePreCacheHlsRef.current.destroy();
      } catch (e) {
        console.error('清理预缓存 HLS 实例失败:', e);
      }
      nextEpisodePreCacheHlsRef.current = null;
    }
  }, [currentEpisodeIndex]);

  // 监听剧集切换，自动加载对应的弹幕
  const lastLoadedEpisodeIndexForDanmakuRef = useRef<number | null>(null);
  const loadingDanmakuEpisodeIdRef = useRef<number | null>(null);

  useEffect(() => {
    // 等待初始化完成（播放记录恢复完成）
    if (loading) {
      return;
    }

    if (isDirectPlay) {
      return;
    }

    // 检查是否禁用了自动加载弹幕
    if (isDanmakuAutoLoadDisabled()) {
      console.log('[弹幕] 已禁用自动加载弹幕，跳过自动加载');
      setShowDanmakuSourceSelector(false);
      setDanmakuLoading(false);
      return;
    }

    // 检查集数是否有效且是否已改变
    if (currentEpisodeIndex < 0 || !videoTitle) {
      return;
    }

    // 如果集数已经加载过，跳过
    if (lastLoadedEpisodeIndexForDanmakuRef.current === currentEpisodeIndex) {
      return;
    }

    // 标记当前集数已加载
    lastLoadedEpisodeIndexForDanmakuRef.current = currentEpisodeIndex;

    console.log(`[弹幕] 剧集切换到第 ${currentEpisodeIndex + 1} 集，自动加载弹幕`);

    // 立即清空当前弹幕（使用 reset 方法，不触发显示/隐藏事件）
    if (danmakuPluginRef.current) {
      danmakuPluginRef.current.reset();
      setDanmakuCount(0);
    }

    // 自动加载弹幕的逻辑
    const loadDanmakuForCurrentEpisode = async () => {
      const title = videoTitleRef.current;
      if (!title) {
        console.warn('[弹幕] 视频标题为空，无法加载弹幕');
        return;
      }

      const episodeIndex = currentEpisodeIndexRef.current;
      console.log(`[弹幕] 开始加载第 ${episodeIndex + 1} 集弹幕`);

      // 先尝试从 IndexedDB 缓存加载
      try {
        const cachedData = await getDanmakuFromCache(title, episodeIndex);
        if (cachedData && cachedData.comments.length > 0) {
          console.log(`[弹幕] 使用缓存: title="${title}", episodeIndex=${episodeIndex}, 数量=${cachedData.comments.length}`);

          // 如果弹幕插件还未初始化，等待初始化
          if (!danmakuPluginRef.current) {
            console.log('[弹幕] 弹幕插件未初始化，等待初始化...');
            // 缓存命中但插件未初始化，不执行搜索，等待下次触发
            return;
          }

          setDanmakuLoading(true);

          // 转换弹幕格式
          let danmakuData = convertDanmakuFormat(cachedData.comments);

          // 手动应用过滤规则
          const filterConfig = danmakuFilterConfigRef.current;
          if (filterConfig && filterConfig.rules.length > 0) {
            const originalCount = danmakuData.length;
            danmakuData = danmakuData.filter((danmu) => {
              for (const rule of filterConfig.rules) {
                if (!rule.enabled) continue;
                try {
                  if (rule.type === 'normal') {
                    if (danmu.text.includes(rule.keyword)) {
                      return false;
                    }
                  } else if (rule.type === 'regex') {
                    if (new RegExp(rule.keyword).test(danmu.text)) {
                      return false;
                    }
                  }
                } catch (e) {
                  console.error('弹幕过滤规则错误:', e);
                }
              }
              return true;
            });
            const filteredCount = originalCount - danmakuData.length;
            if (filteredCount > 0) {
              console.log(`弹幕过滤: 原始 ${originalCount} 条，过滤 ${filteredCount} 条，剩余 ${danmakuData.length} 条`);
            }
          }

          // 应用弹幕数量限制
          const maxCount = typeof window !== 'undefined' ? parseInt(localStorage.getItem('danmakuMaxCount') || '0', 10) : 0;
          let calculatedOriginalCount = 0;
          if (maxCount > 0 && danmakuData.length > maxCount) {
            const originalCount = danmakuData.length;
            const step = danmakuData.length / maxCount;
            const limitedData = [];
            for (let i = 0; i < maxCount; i++) {
              limitedData.push(danmakuData[Math.floor(i * step)]);
            }
            danmakuData = limitedData;
            calculatedOriginalCount = originalCount;
            setDanmakuOriginalCount(originalCount);
            console.log(`弹幕数量限制: 原始 ${originalCount} 条，限制到 ${danmakuData.length} 条`);
          } else {
            // 没有应用限制，不显示原始数量
            setDanmakuOriginalCount(0);
          }

          // 加载弹幕到插件
          const currentSettings = danmakuSettingsRef.current;
          danmakuPluginRef.current.config({
            danmuku: danmakuData,
            speed: currentSettings.speed,
            opacity: currentSettings.opacity,
            fontSize: currentSettings.fontSize,
            margin: [currentSettings.marginTop, currentSettings.marginBottom],
            synchronousPlayback: currentSettings.synchronousPlayback,
          });
          danmakuPluginRef.current.load();

          // 根据保存的显示状态来决定显示或隐藏弹幕
          const savedDisplayState = loadDanmakuDisplayState();
          if (savedDisplayState === false) {
            danmakuPluginRef.current.hide();
          } else {
            danmakuPluginRef.current.show();
          }

          setDanmakuCount(danmakuData.length);
          console.log(`[弹幕] 缓存加载成功，共 ${danmakuData.length} 条`);

          // 更新当前选择状态（使用实时计算的数量）
          if (cachedData.metadata) {
            setCurrentDanmakuSelection({
              animeId: cachedData.metadata.animeId || 0,
              episodeId: cachedData.metadata.episodeId || 0,
              animeTitle: cachedData.metadata.animeTitle || '',
              episodeTitle: cachedData.metadata.episodeTitle || '',
              searchKeyword: cachedData.metadata.searchKeyword,
              danmakuCount: danmakuData.length,
              danmakuOriginalCount: calculatedOriginalCount > 0 ? calculatedOriginalCount : undefined,
            });
          }

          await new Promise((resolve) => setTimeout(resolve, 1500));
          setDanmakuLoading(false);

          return; // 使用缓存成功，直接返回
        }
      } catch (error) {
        console.error('[弹幕] 读取缓存失败:', error);
      }

      // 没有缓存，先检查是否有手动选择的剧集 ID
      console.log(`[弹幕] 第 ${episodeIndex + 1} 集缓存未命中`);

      // 检查是否有手动选择的剧集 ID
      const manualEpisodeId = getManualDanmakuSelection(title, episodeIndex);
      if (manualEpisodeId) {
        console.log(`[弹幕记忆] 使用手动选择的剧集 ID: ${manualEpisodeId}`);
        try {
          // 需要获取完整的 selection 信息来调用 handleDanmakuSelect
          // 但这里只有 episodeId，所以保持直接调用 loadDanmaku
          setDanmakuLoading(true);
          await loadDanmaku(manualEpisodeId);
          console.log('[弹幕记忆] 使用手动选择的弹幕成功');
          return; // 使用手动选择成功，直接返回
        } catch (error) {
          console.error('[弹幕记忆] 使用手动选择的弹幕失败:', error);
          // 继续执行自动搜索
        }
      }

      // 尝试使用保存的动漫ID自动匹配剧集
      const savedAnimeId = getDanmakuAnimeId(title);
      if (savedAnimeId) {
        console.log(`[弹幕记忆] 尝试使用保存的动漫ID: ${savedAnimeId}`);
        setDanmakuLoading(true);
        try {
          const episodesResult = await getEpisodes(savedAnimeId);

          if (episodesResult.success && episodesResult.bangumi.episodes.length > 0) {
            // 根据当前集数选择对应的弹幕
            const videoEpTitle = detailRef.current?.episodes_titles?.[episodeIndex];
            const episode = matchDanmakuEpisode(episodeIndex, episodesResult.bangumi.episodes, videoEpTitle);

            if (episode) {
              console.log(`[弹幕记忆] 使用保存的动漫ID匹配成功: ${episode.episodeTitle}`);

              const selection: DanmakuSelection = {
                animeId: savedAnimeId,
                episodeId: episode.episodeId,
                animeTitle: episodesResult.bangumi.animeTitle,
                episodeTitle: episode.episodeTitle,
              };

              setDanmakuEpisodesList(episodesResult.bangumi.episodes);

              // 通过统一的 handleDanmakuSelect 处理弹幕加载
              await handleDanmakuSelect(selection);
              return; // 匹配成功，直接返回
            } else {
              console.log('[弹幕记忆] 使用保存的动漫ID匹配失败，降级到关键词搜索');
            }
          }
        } catch (error) {
          console.error('[弹幕记忆] 使用保存的动漫ID失败:', error);
        }
      }

      // 执行自动搜索弹幕（优先使用保存的关键词）
      console.log(`[弹幕] 开始自动搜索`);
      setDanmakuLoading(true);

      // 优先使用保存的搜索关键词，否则使用视频标题
      const savedKeyword = getDanmakuSearchKeyword(title);
      const searchKeyword = savedKeyword || title;
      console.log(`[弹幕] 搜索关键词: ${searchKeyword}${savedKeyword ? ' (使用保存的关键词)' : ' (使用视频标题)'}`);

      try {
        const searchResult = await searchAnime(searchKeyword);

        if (searchResult.success && searchResult.animes.length > 0) {
          // 应用智能过滤：优先匹配年份和标题
          const videoYear = detailRef.current?.year;
          const filteredAnimes = filterDanmakuSources(
            searchResult.animes,
            title,
            videoYear
          );

          // 如果有多个匹配结果，先检查是否有记忆的选择
          if (filteredAnimes.length > 1) {
            console.log(`找到 ${filteredAnimes.length} 个弹幕源`);

            // 检查是否有上次选择的下标
            const rememberedIndex = getDanmakuSourceIndex(title);
            if (rememberedIndex !== null && rememberedIndex < filteredAnimes.length) {
              console.log(`[弹幕记忆] 使用上次选择的弹幕源，下标: ${rememberedIndex}`);
              const anime = filteredAnimes[rememberedIndex];

              // 获取剧集列表
              const episodesResult = await getEpisodes(anime.animeId);

              if (
                episodesResult.success &&
                episodesResult.bangumi.episodes.length > 0
              ) {
                // 根据当前集数选择对应的弹幕
                const currentEp = currentEpisodeIndexRef.current;
                const videoEpTitle = detailRef.current?.episodes_titles?.[currentEp];
                const episode = matchDanmakuEpisode(currentEp, episodesResult.bangumi.episodes, videoEpTitle);

                if (episode) {
                  const selection: DanmakuSelection = {
                    animeId: anime.animeId,
                    episodeId: episode.episodeId,
                    animeTitle: anime.animeTitle,
                    episodeTitle: episode.episodeTitle,
                  };

                  // 设置剧集列表
                  setDanmakuEpisodesList(episodesResult.bangumi.episodes);

                  console.log('使用记忆的弹幕源成功:', selection);

                  // 通过统一的 handleDanmakuSelect 处理弹幕加载
                  await handleDanmakuSelect(selection);
                  setDanmakuLoading(false);
                  return;
                }
              }
            }

            // 没有记忆或记忆失效，让用户选择
            console.log(`等待用户选择弹幕源`);
            setDanmakuMatches(filteredAnimes);
            setCurrentSearchKeyword(searchKeyword); // 保存当前搜索关键词
            setShowDanmakuSourceSelector(true);
            setDanmakuLoading(false);
            if (artPlayerRef.current) {
              artPlayerRef.current.notice.show = `找到 ${filteredAnimes.length} 个弹幕源，请选择`;
            }
            return;
          }

          // 只有一个结果，直接使用
          const anime = filteredAnimes[0];

          // 获取剧集列表
          const episodesResult = await getEpisodes(anime.animeId);

          if (
            episodesResult.success &&
            episodesResult.bangumi.episodes.length > 0
          ) {
            // 根据当前集数选择对应的弹幕
            const currentEp = currentEpisodeIndexRef.current;
            const videoEpTitle = detailRef.current?.episodes_titles?.[currentEp];
            const episode = matchDanmakuEpisode(currentEp, episodesResult.bangumi.episodes, videoEpTitle);

            if (episode) {
              const selection: DanmakuSelection = {
                animeId: anime.animeId,
                episodeId: episode.episodeId,
                animeTitle: anime.animeTitle,
                episodeTitle: episode.episodeTitle,
              };

              // 设置剧集列表
              setDanmakuEpisodesList(episodesResult.bangumi.episodes);

              console.log('自动搜索弹幕成功:', selection);

              // 通过统一的 handleDanmakuSelect 处理弹幕加载
              await handleDanmakuSelect(selection);
            }
          } else {
            console.warn('未找到剧集信息');
            if (artPlayerRef.current) {
              artPlayerRef.current.notice.show = '弹幕加载失败：未找到剧集信息';
            }
          }
        } else {
          console.warn('未找到匹配的弹幕');
          if (artPlayerRef.current) {
            artPlayerRef.current.notice.show = '未找到匹配的弹幕，可在弹幕选项卡手动搜索';
          }
        }
      } catch (error) {
        console.error('自动搜索弹幕失败:', error);
        if (artPlayerRef.current) {
          artPlayerRef.current.notice.show = '弹幕加载失败，请检查网络或稍后重试';
        }
      } finally {
        setDanmakuLoading(false);
      }
    };

    loadDanmakuForCurrentEpisode();
  }, [currentEpisodeIndex, videoTitle, loading, isDirectPlay]);

  // 获取豆瓣评分数据
  useEffect(() => {
    const fetchDoubanRating = async () => {
      if (isDirectPlay) {
        setDoubanRating(null);
        setDoubanCardSubtitle('');
        setDoubanAka([]);
        setDoubanYear('');
        return;
      }

      if (!videoDoubanId || videoDoubanId === 0) {
        setDoubanRating(null);
        setDoubanCardSubtitle('');
        setDoubanAka([]);
        setDoubanYear('');
        return;
      }

      try {
        const doubanData = await getDoubanDetail(videoDoubanId.toString());

        // 设置评分
        if (doubanData.rating) {
          setDoubanRating({
            value: doubanData.rating.value,
            count: doubanData.rating.count,
            star_count: doubanData.rating.star_count,
          });
        } else {
          setDoubanRating(null);
        }

        // 设置 card_subtitle
        if (doubanData.card_subtitle) {
          setDoubanCardSubtitle(doubanData.card_subtitle);
        }

        // 设置 aka（别名）
        if (doubanData.aka && doubanData.aka.length > 0) {
          setDoubanAka(doubanData.aka);
        }

        // 处理 pubdate 获取年份
        if (doubanData.pubdate && doubanData.pubdate.length > 0) {
          const pubdateStr = doubanData.pubdate[0];
          // 删除括号中的内容，包括括号
          const yearMatch = pubdateStr.replace(/\([^)]*\)/g, '').trim();
          if (yearMatch) {
            setDoubanYear(yearMatch);
          }
        }
      } catch (error) {
        console.error('获取豆瓣评分失败:', error);
        setDoubanRating(null);
        setDoubanCardSubtitle('');
        setDoubanAka([]);
        setDoubanYear('');
      }
    };

    fetchDoubanRating();
  }, [videoDoubanId, isDirectPlay]);

  // 获取TMDB背景图
  useEffect(() => {
    const fetchTMDBBackdrop = async () => {
      if (isDirectPlay) {
        setTmdbBackdrop(null);
        return;
      }

      // 检查是否禁用背景图
      if (typeof window !== 'undefined') {
        const disabled = localStorage.getItem('tmdb_backdrop_disabled');
        if (disabled === 'true') {
          setTmdbBackdrop(null);
          return;
        }
      }

      if (!videoTitle) {
        setTmdbBackdrop(null);
        return;
      }

      try {
        const mappingCacheKey = recommendationCacheKeys.tmdbTitleMapping(videoTitle);
        const cachedId = getRecommendationCache<string>(mappingCacheKey);

        if (cachedId) {
          console.log('使用缓存的TMDB ID映射');

          const detailsCacheKey = recommendationCacheKeys.tmdbDetails(cachedId);
          const detailsCache = getRecommendationCache<any>(detailsCacheKey);

          if (detailsCache) {
            if (detailsCache.backdrop) {
              setTmdbBackdrop(processImageUrl(detailsCache.backdrop));
            } else {
              setTmdbBackdrop(null);
            }

            if (!videoDoubanId || videoDoubanId === 0) {
              populateDoubanFieldsFromTMDB(detailsCache);
            }
            populatePlayMetadataFromTMDB(detailsCache);
            return;
          }
        }

        // 构建请求URL
        const url = cachedId
          ? `/api/tmdb-details?cachedId=${encodeURIComponent(cachedId)}`
          : `/api/tmdb-details?title=${encodeURIComponent(videoTitle)}`;

        const response = await fetch(url);

        if (!response.ok) {
          setTmdbBackdrop(null);
          return;
        }

        const result = await response.json();

        if (result.backdrop) {
          setTmdbBackdrop(processImageUrl(result.backdrop));
        } else {
          setTmdbBackdrop(null);
        }

        // 如果没有豆瓣ID，使用TMDb数据补充
        if (!videoDoubanId || videoDoubanId === 0) {
          populateDoubanFieldsFromTMDB(result);
        }
        populatePlayMetadataFromTMDB(result);

        // 保存title到tmdbId的映射到localStorage（1个月）
        if (result.tmdbId) {
          try {
            setRecommendationCache(mappingCacheKey, String(result.tmdbId));

            const detailsCacheKey = recommendationCacheKeys.tmdbDetails(result.tmdbId);
            setRecommendationCache(detailsCacheKey, result);
          } catch (e) {
            console.error('保存缓存失败:', e);
          }
        }
      } catch (error) {
        console.error('获取TMDB背景图失败:', error);
        setTmdbBackdrop(null);
      }
    };

    const populatePlayMetadataFromTMDB = (tmdbData: any) => {
      const currentDetail = detailRef.current;
      if (!currentDetail || !isNetdiskSource(currentDetail.source)) {
        setPendingNetdiskTMDBData(tmdbData);
        return;
      }

      const tmdbYear = tmdbData.releaseDate?.split('-')[0] || '';
      const shouldReplaceDesc =
        !currentDetail.desc ||
        currentDetail.desc.startsWith('临时播放目录：') ||
        currentDetail.desc.startsWith('移动云盘分享：');

      const resolvedTmdbId = typeof tmdbData.tmdbId === 'string'
        ? Number(String(tmdbData.tmdbId).split(':')[1] || 0)
        : tmdbData.tmdbId;

      setNetdiskTMDBMeta({
        desc: shouldReplaceDesc ? (tmdbData.overview || currentDetail.desc) : currentDetail.desc,
        poster: currentDetail.poster || tmdbData.poster || '',
        year: currentDetail.year || tmdbYear,
        tmdbId: currentDetail.tmdb_id || resolvedTmdbId,
      });

      setDetail((prev) => {
        if (!prev || !isNetdiskSource(prev.source)) {
          return prev;
        }

        return {
          ...prev,
          poster: prev.poster || tmdbData.poster || '',
          year: prev.year || tmdbYear,
          desc: shouldReplaceDesc ? (tmdbData.overview || prev.desc) : prev.desc,
          tmdb_id: prev.tmdb_id || resolvedTmdbId,
        };
      });

      if (tmdbData.overview && (!correctedDesc || currentDetail.desc?.startsWith('临时播放目录：'))) {
        setCorrectedDesc(tmdbData.overview);
      }

      if (tmdbData.poster && !currentDetail.poster) {
        setVideoCover(processImageUrl(tmdbData.poster));
      }

      if (tmdbYear && !currentDetail.year) {
        setVideoYear(tmdbYear);
      }
    };

    // 辅助函数：使用TMDb数据填充豆瓣字段
    const populateDoubanFieldsFromTMDB = (tmdbData: any) => {
      // 设置评分
      if (tmdbData.rating) {
        const ratingValue = parseFloat(tmdbData.rating);
        setDoubanRating({
          value: ratingValue,
          count: 0, // TMDb不提供评分人数
          star_count: Math.round(ratingValue / 2), // 转换为5星制
        });
      }

      // 设置年份
      if (tmdbData.releaseDate) {
        const year = tmdbData.releaseDate.split('-')[0];
        setDoubanYear(year);
      }

      // 设置card_subtitle（优先使用genres标签，否则使用年份和类型）
      if (tmdbData.genres && Array.isArray(tmdbData.genres) && tmdbData.genres.length > 0) {
        const genreNames = tmdbData.genres.map((g: any) => g.name).join(' / ');
        setDoubanCardSubtitle(genreNames);
      } else if (tmdbData.mediaType && tmdbData.releaseDate) {
        // 兜底：如果没有genres，使用年份和类型
        const year = tmdbData.releaseDate.split('-')[0];
        const typeText = tmdbData.mediaType === 'movie' ? '电影' : '电视剧';
        setDoubanCardSubtitle(`${year} / ${typeText}`);
      }
    };

    fetchTMDBBackdrop();
  }, [videoTitle, videoDoubanId, isDirectPlay]);

  useEffect(() => {
    if (
      pendingNetdiskTMDBData &&
      isNetdiskSource(detail?.source)
    ) {
      const currentDetail = detail;
      if (!currentDetail) {
        return;
      }
      const pending = pendingNetdiskTMDBData;
      setPendingNetdiskTMDBData(null);
      const tmdbYear = pending.releaseDate?.split('-')[0] || '';
      const shouldReplaceDesc =
        !currentDetail.desc ||
        currentDetail.desc.startsWith('临时播放目录：') ||
        currentDetail.desc.startsWith('移动云盘分享：');
      const resolvedTmdbId = typeof pending.tmdbId === 'string'
        ? Number(String(pending.tmdbId).split(':')[1] || 0)
        : pending.tmdbId;

      setNetdiskTMDBMeta({
        desc: shouldReplaceDesc ? (pending.overview || currentDetail.desc) : currentDetail.desc,
        poster: currentDetail.poster || pending.poster || '',
        year: currentDetail.year || tmdbYear,
        tmdbId: currentDetail.tmdb_id || resolvedTmdbId,
      });

      setDetail((prev) => prev && isNetdiskSource(prev.source) ? {
        ...prev,
        poster: prev.poster || pending.poster || '',
        year: prev.year || tmdbYear,
        desc: shouldReplaceDesc ? (pending.overview || prev.desc) : prev.desc,
        tmdb_id: prev.tmdb_id || resolvedTmdbId,
      } : prev);

      if (pending.poster && !currentDetail.poster) {
        setVideoCover(processImageUrl(pending.poster));
      }
      if (tmdbYear && !currentDetail.year) {
        setVideoYear(tmdbYear);
      }
      if (pending.overview) {
        setCorrectedDesc(pending.overview);
      }
    }
  }, [pendingNetdiskTMDBData, detail]);

  // 视频播放地址
  const [videoUrl, setVideoUrl] = useState('');
  const [playbackSourceBadge, setPlaybackSourceBadge] = useState<PlaybackSourceBadge>(null);

  // 视频清晰度列表
  const [videoQualities, setVideoQualities] = useState<Array<{ name: string, url: string }>>([]);

  // Xiaoya链接刷新相关状态
  const [isRefreshingUrl, setIsRefreshingUrl] = useState(false); // 是否正在刷新链接
  const retryCountRef = useRef(0); // 重试计数
  const lastRefreshTimeRef = useRef(0); // 上次刷新时间
  const refreshTimerRef = useRef<NodeJS.Timeout | null>(null); // 14分钟定时器
  const currentXiaoyaUrlRef = useRef<string>(''); // 当前xiaoya原始URL（用于刷新）
  const isInitialLoadRef = useRef(true); // 标记是否为首次加载
  // xiaoya 仅 m3u8 可续期；openlist 由 refresh14m 决定。用于 startRefreshTimer 自身兜底校验
  const linkRefreshEligibleRef = useRef(false);
  const suppressPlayRecordJumpOnNextEpisodeChangeRef = useRef(false); // 主动切集时不显示播放记录跳转提示

  // 视频源代理模式状态
  const [sourceProxyMode, setSourceProxyMode] = useState(false);

  const resolveCurrentExternalPlaybackUrl = async () => {
    let urlToUse = videoUrl;
    if (sourceProxyMode && detail?.episodes && currentEpisodeIndex < detail.episodes.length) {
      urlToUse = detail.episodes[currentEpisodeIndex];
    }

    if (!urlToUse) {
      return null;
    }

    return buildAbsoluteUrl(urlToUse);
  };

  const handleCreateTranscodeSession = async () => {
    if (isTranscoding) return;

    try {
      setIsTranscoding(true);
      const currentPlayTime = artPlayerRef.current?.currentTime || 0;

      const sourceUrl = await resolveCurrentExternalPlaybackUrl();
      if (!sourceUrl) {
        throw new Error('当前没有可转码的播放链接');
      }

      const requestHeaders: Record<string, string> = {};
      if (sourceUrl.startsWith(window.location.origin)) {
        if (document.cookie) {
          requestHeaders.Cookie = document.cookie;
        }
        requestHeaders.Referer = `${window.location.origin}/`;
      }

      let response: Response;
      try {
        response = await fetch(`${LOCAL_TRANSCODER_BASE_URL}/v1/sessions`, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            url: sourceUrl,
            headers: Object.keys(requestHeaders).length > 0 ? requestHeaders : undefined,
            subtitle: {
              mode: 'burn_embedded',
              stream: 'auto',
            },
            refresh: false,
          }),
        });
      } catch {
        throw new Error('转码服务连接失败');
      }

      const data = await response.json().catch(() => null);
      if (!response.ok) {
        throw new Error(data?.error || data?.message || `转码请求失败 (${response.status})`);
      }

      const playUrl = data?.playlist_url || data?.play_url;
      if (!playUrl) {
        throw new Error('转码器未返回播放地址');
      }

      await new Promise((resolve) => setTimeout(resolve, 3000));

      currentXiaoyaUrlRef.current = '';
      proxyAttemptedRef.current = false;
      resumeTimeRef.current = currentPlayTime > 0 ? currentPlayTime : null;
      setVideoQualities([]);
      setVideoError(null);
      setCorsFailedUrl(null);
      setIsVideoLoading(true);
      setVideoLoadingStage('sourceChanging');
      setPlaybackSourceBadge(null);
      setVideoUrl(playUrl);
      setToast({
        message: '转码任务已创建，等待 3 秒后已切换到转码地址',
        type: 'success',
        onClose: () => setToast(null),
      });
    } catch (error) {
      console.error('创建转码任务失败:', error);
      setToast({
        message: error instanceof Error ? error.message : '创建转码任务失败',
        type: 'error',
        onClose: () => setToast(null),
      });
    } finally {
      setIsTranscoding(false);
    }
  };

  const showExternalTranscodeButton = Boolean(
    detail &&
    videoUrl &&
    !videoUrl.startsWith('blob:') &&
    !isM3u8LikeUrl(videoUrl) &&
    (
      detail.source === 'openlist' ||
      isNetdiskSource(detail.source) ||
      detail.source === 'xiaoya' ||
      detail.source.startsWith('emby')
    )
  );

  // 总集数
  const totalEpisodes = detail?.episodes?.length || 0;
  const directEpisodeLabel = detail?.episodes_titles?.[currentEpisodeIndex] || '直链';
  const shouldShowEpisodeLabel = totalEpisodes > 1 || isDirectPlay;
  const episodeLabel = isDirectPlay
    ? directEpisodeLabel
    : detail?.episodes_titles?.[currentEpisodeIndex] || `第 ${currentEpisodeIndex + 1} 集`;
  const playerEpisodeLabel = isDirectPlay
    ? directEpisodeLabel
    : `第${currentEpisodeIndex + 1}集`;

  const loadSavedPlaybackRate = () => {
    if (typeof window === 'undefined') {
      return 1.0;
    }

    const raw = localStorage.getItem('preferredPlaybackRate');
    const parsed = raw ? Number(raw) : 1;
    return Number.isFinite(parsed) && parsed > 0 ? parsed : 1.0;
  };

  const persistPlaybackRate = (rate: number) => {
    if (typeof window === 'undefined' || !Number.isFinite(rate) || rate <= 0) {
      return;
    }

    localStorage.setItem('preferredPlaybackRate', String(rate));
  };

  const adjustPlaybackRateByStep = (direction: 1 | -1) => {
    if (!artPlayerRef.current) {
      return false;
    }

    const currentRate = artPlayerRef.current.playbackRate || 1;
    const currentIndex = PLAYBACK_RATE_OPTIONS.reduce((nearestIndex, rate, index) => {
      return Math.abs(rate - currentRate) < Math.abs(PLAYBACK_RATE_OPTIONS[nearestIndex] - currentRate)
        ? index
        : nearestIndex;
    }, 0);
    let nextIndex = -1;
    if (direction > 0) {
      nextIndex = PLAYBACK_RATE_OPTIONS.findIndex((rate) => rate > currentRate + 0.01);
    } else {
      for (let index = PLAYBACK_RATE_OPTIONS.length - 1; index >= 0; index--) {
        if (PLAYBACK_RATE_OPTIONS[index] < currentRate - 0.01) {
          nextIndex = index;
          break;
        }
      }
    }
    const boundedNextIndex = nextIndex === -1 ? currentIndex : nextIndex;
    const effectiveNextIndex = Math.min(
      Math.max(boundedNextIndex, 0),
      PLAYBACK_RATE_OPTIONS.length - 1
    );
    const nextRate = PLAYBACK_RATE_OPTIONS[effectiveNextIndex];

    artPlayerRef.current.playbackRate = nextRate;
    artPlayerRef.current.notice.show =
      effectiveNextIndex === currentIndex
        ? direction > 0
          ? `已是最高倍速：${nextRate}x`
          : `已是最低倍速：${nextRate}x`
        : `倍速：${nextRate}x`;
    return true;
  };

  const resetPlaybackRate = () => {
    if (!artPlayerRef.current) {
      return false;
    }

    artPlayerRef.current.playbackRate = 1;
    artPlayerRef.current.notice.show = '倍速：1x';
    return true;
  };

  const formatQuickForwardDuration = (seconds: number) => {
    if (seconds >= 60) {
      const minutes = Math.floor(seconds / 60);
      const remainingSeconds = seconds % 60;
      return remainingSeconds ? `${minutes}分${remainingSeconds}秒` : `${minutes}分钟`;
    }
    return `${seconds}秒`;
  };

  const seekQuickForward = () => {
    const player = artPlayerRef.current;
    if (!player) return false;

    const duration = Number.isFinite(player.duration) ? player.duration : Infinity;
    const nextTime = Math.min(duration, (player.currentTime || 0) + quickForwardSecondsRef.current);
    player.currentTime = nextTime;
    player.notice.show = `快进 ${formatQuickForwardDuration(quickForwardSecondsRef.current)}`;
    return true;
  };

  const isDanmakuAutoLoadDisabled = () => {
    if (typeof window === 'undefined') {
      return false;
    }

    const saved = localStorage.getItem('disableAutoLoadDanmaku');
    if (saved !== null) {
      return saved === 'true';
    }

    return (window as any).RUNTIME_CONFIG?.DANMAKU_AUTO_LOAD_DEFAULT === false;
  };

  // 用于记录是否需要在播放器 ready 后跳转到指定进度
  const resumeTimeRef = useRef<number | null>(null);
  // 播放记录跳转按钮状态
  const playRecordJumpDismissedRef = useRef(false); // 记录用户是否已经关闭过跳转按钮
  const playRecordJumpLayerRef = useRef<any>(null); // 保存跳转按钮层的引用
  const playRecordJumpInitialCheckRef = useRef(true); // 记录是否是首次检查播放记录
  // 上次使用的音量，默认 0.7
  const lastVolumeRef = useRef<number>(0.7);
  // 上次使用的播放速率，默认 1.0
  const lastPlaybackRateRef = useRef<number>(loadSavedPlaybackRate());
  // Safari 切集时会短暂把 playbackRate 重置为 1，这里保留一段恢复窗口避免污染记忆值
  const playbackRateRestoreWindowUntilRef = useRef<number>(0);

  // 换源相关状态
  const [availableSources, setAvailableSources] = useState<SearchResult[]>([]);
  const [sourceSearchLoading, setSourceSearchLoading] = useState(false);
  const [sourceSearchError, setSourceSearchError] = useState<string | null>(
    null
  );
  const [fallbackRecommendations, setFallbackRecommendations] = useState<PlayFallbackRecommendation[]>([]);
  const [hasCompletedSearchRequest, setHasCompletedSearchRequest] = useState(false);
  const [backgroundSourcesLoading, setBackgroundSourcesLoading] = useState(false);
  const fallbackRecommendationsRowRef = useRef<HTMLDivElement>(null);
  const fallbackRecommendationsDraggingRef = useRef(false);
  const fallbackRecommendationsDragStartXRef = useRef(0);
  const fallbackRecommendationsDragStartScrollLeftRef = useRef(0);

  useEffect(() => {
    try {
      pruneLocalEpisodeProgressStorage();
    } catch (error) {
      console.warn('[Play] Failed to prune local episode progress:', error);
    }
  }, []);

  // 优选和测速开关
  const [optimizationEnabled] = useState<boolean>(() => {
    if (typeof window !== 'undefined') {
      const saved = localStorage.getItem('enableOptimization');
      if (saved !== null) {
        try {
          return JSON.parse(saved);
        } catch {
          /* ignore */
        }
      }
    }
    return true;
  });

  const [preferStrategy] = useState<'fast' | 'full'>(() => {
    if (typeof window !== 'undefined') {
      const saved = localStorage.getItem('preferStrategy');
      if (saved === 'fast' || saved === 'full') {
        return saved;
      }
    }
    return 'fast';
  });

  // 保存优选时的测速结果，避免EpisodeSelector重复测速
  const [precomputedVideoInfo, setPrecomputedVideoInfo] = useState<
    Map<string, { quality: string; loadSpeed: string; pingTime: number; bitrate: string }>
  >(new Map());

  // 当前源的视频信息（用于标题旁边显示）
  const [currentSourceVideoInfo, setCurrentSourceVideoInfo] = useState<{
    quality: string;
    loadSpeed: string;
    pingTime: number;
    bitrate: string;
  } | null>(null);

  // 折叠状态（仅在 lg 及以上屏幕有效）
  const [isEpisodeSelectorCollapsed, setIsEpisodeSelectorCollapsed] =
    useState(false);

  // 下载选集面板显示状态
  const [showDownloadSelector, setShowDownloadSelector] = useState(false);

  // 换源加载状态
  const [isVideoLoading, setIsVideoLoading] = useState(true);
  const [videoLoadingStage, setVideoLoadingStage] = useState<
    'initing' | 'sourceChanging' | 'episodeChanging'
  >('initing');
  const [videoError, setVideoError] = useState<string | null>(null);
  // 直链播放时 CORS 失败的原始 URL，用于显示"使用代理播放"按钮
  const [corsFailedUrl, setCorsFailedUrl] = useState<string | null>(null);
  // 标记当前视频是否已经尝试过代理（防止 415→直连→失败→代理 的无限循环）
  const proxyAttemptedRef = useRef(false);
  const videoUrlRequestSeqRef = useRef(0);
  const lastVideoRequestKeyRef = useRef<string | null>(null);

  // 直链代理域名记忆：检查某个域名是否需要代理
  const isDirectplayDomainProxied = (url: string): boolean => {
    try {
      const domain = new URL(url).hostname;
      const domains: string[] = JSON.parse(localStorage.getItem('directplay_proxy_domains') || '[]');
      return domains.includes(domain);
    } catch { return false; }
  };
  // 将域名记录到代理列表
  const addDirectplayProxyDomain = (url: string) => {
    try {
      const domain = new URL(url).hostname;
      const domains: string[] = JSON.parse(localStorage.getItem('directplay_proxy_domains') || '[]');
      if (!domains.includes(domain)) {
        domains.push(domain);
        localStorage.setItem('directplay_proxy_domains', JSON.stringify(domains));
      }
    } catch { /* ignore */ }
  };

  // 播放器就绪状态（用于触发 usePlaySync 的事件监听器设置）
  const [playerReady, setPlayerReady] = useState(false);

  const handleFallbackRecommendationsWheel = (e: React.WheelEvent<HTMLDivElement>) => {
    const container = fallbackRecommendationsRowRef.current;
    if (!container) return;

    if (container.scrollWidth <= container.clientWidth + 1) return;

    const delta = Math.abs(e.deltaY) >= Math.abs(e.deltaX) ? e.deltaY : e.deltaX;
    if (delta === 0) return;

    const maxScrollLeft = container.scrollWidth - container.clientWidth;
    const nextScrollLeft = container.scrollLeft + delta;
    const willScroll =
      (delta < 0 && container.scrollLeft > 0) ||
      (delta > 0 && container.scrollLeft < maxScrollLeft);

    if (!willScroll) return;

    e.preventDefault();
    container.scrollLeft = Math.max(0, Math.min(maxScrollLeft, nextScrollLeft));
  };

  const handleFallbackRecommendationsMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {
    const container = fallbackRecommendationsRowRef.current;
    if (!container || container.scrollWidth <= container.clientWidth) return;
    if (e.button !== 0) return;

    fallbackRecommendationsDraggingRef.current = true;
    fallbackRecommendationsDragStartXRef.current = e.clientX;
    fallbackRecommendationsDragStartScrollLeftRef.current = container.scrollLeft;
  };

  const handleFallbackRecommendationsMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
    const container = fallbackRecommendationsRowRef.current;
    if (!container || !fallbackRecommendationsDraggingRef.current) return;

    const deltaX = e.clientX - fallbackRecommendationsDragStartXRef.current;
    container.scrollLeft = fallbackRecommendationsDragStartScrollLeftRef.current - deltaX;
  };

  const stopFallbackRecommendationsDragging = () => {
    fallbackRecommendationsDraggingRef.current = false;
  };

  // 播放进度保存相关
  const saveIntervalRef = useRef<NodeJS.Timeout | null>(null);
  const lastSaveTimeRef = useRef<number>(0);
  const lastSavedPlayTimeRef = useRef<number | null>(null);

  // 下集预缓存相关
  const nextEpisodePreCacheTriggeredRef = useRef<boolean>(false);
  const nextEpisodePreCacheHlsRef = useRef<any>(null);
  const nextEpisodeDanmakuPreloadTriggeredRef = useRef<boolean>(false);

  const artPlayerRef = useRef<any>(null);
  const artRef = useRef<HTMLDivElement | null>(null);
  const syncAnime4KCanvasFlip = (flip?: string) => {
    const canvas = anime4kRef.current?.canvas as HTMLCanvasElement | undefined;
    if (!canvas) return;

    const currentFlip = flip || artPlayerRef.current?.flip || 'normal';
    canvas.style.transformOrigin = 'center center';
    canvas.style.transform =
      currentFlip === 'horizontal'
        ? 'scaleX(-1)'
        : currentFlip === 'vertical'
          ? 'scaleY(-1)'
          : 'none';
  };
  const customSubtitleInputRef = useRef<HTMLInputElement | null>(null);
  const customSubtitleRef = useRef<CustomSubtitleState | null>(null);
  const currentSubtitleLabelRef = useRef<string>('关闭');

  // Wake Lock 相关
  const wakeLockRef = useRef<WakeLockSentinel | null>(null);

  // 观影室同步功能
  const playSync = usePlaySync({
    artPlayerRef,
    videoId: currentId || '',  // 使用 currentId 状态而不是 searchParams
    videoName: videoTitle || detail?.title || '正在加载...',
    videoYear: videoYear || detail?.year || '',
    searchTitle: searchTitle || '',
    currentEpisode: currentEpisodeIndex + 1,
    currentSource: currentSource || '',
    videoUrl: videoUrl || '',
    playerReady: playerReady,  // 传递播放器就绪状态
  });

  // -----------------------------------------------------------------------------
  // 工具函数（Utils）
  // -----------------------------------------------------------------------------

  const getSubtitleStyle = () => ({
    color: '#fff',
    fontSize: typeof window !== 'undefined' ? localStorage.getItem('subtitleSize') || '2em' : '2em',
  });

  const getSubtitleFileExtension = (fileName: string) => {
    return fileName.toLowerCase().match(/\.([a-z0-9]+)$/)?.[1] || '';
  };

  const isAdvancedSubtitleFormat = (format: string) => {
    return ADVANCED_SUBTITLE_FORMATS.has(format.toLowerCase());
  };

  const getSourceSubtitleFormat = (subtitle?: SourceSubtitleItem | null) => {
    return (
      subtitle?.format ||
      subtitle?.sourceFormat ||
      subtitle?.codec ||
      ''
    ).toLowerCase();
  };

  const isAdvancedSourceSubtitle = (subtitle?: SourceSubtitleItem | null) => {
    return subtitle?.renderMode === 'jassub' ||
      isAdvancedSubtitleFormat(getSourceSubtitleFormat(subtitle));
  };

  const getJassubSubtitleInstance = (): JassubSubtitleInstance | null => {
    return artPlayerRef.current?.plugins?.artplayerPluginJassub?.instance || null;
  };

  const clearJassubSubtitle = () => {
    try {
      getJassubSubtitleInstance()?.freeTrack?.();
    } catch (error) {
      console.warn('[Subtitle] 清理高级字幕失败:', error);
    }
  };

  const revokeCustomSubtitle = () => {
    const customSubtitle = customSubtitleRef.current;
    if (customSubtitle?.engine === 'native' && customSubtitle.url) {
      URL.revokeObjectURL(customSubtitle.url);
    }

    if (customSubtitle?.engine === 'jassub') {
      clearJassubSubtitle();
    }

    customSubtitleRef.current = null;
  };

  const switchSubtitle = (url: string, label: string) => {
    if (!artPlayerRef.current) return;

    clearJassubSubtitle();
    artPlayerRef.current.subtitle.switch(url, {
      name: label,
      type: 'vtt',
      style: getSubtitleStyle(),
      encoding: 'utf-8',
    });
    artPlayerRef.current.subtitle.show = true;
    currentSubtitleLabelRef.current = label;
  };

  const closeSubtitle = () => {
    if (!artPlayerRef.current) return;

    artPlayerRef.current.subtitle.show = false;
    clearJassubSubtitle();
    currentSubtitleLabelRef.current = '关闭';
  };

  const ensureJassubSubtitleInstance = async (
    initialTrack: { content?: string; url?: string }
  ): Promise<{ instance: JassubSubtitleInstance; created: boolean }> => {
    const existingInstance = getJassubSubtitleInstance();
    if (existingInstance) {
      return { instance: existingInstance, created: false };
    }

    if (!initialTrack.content && !initialTrack.url) {
      throw new Error('缺少高级字幕内容');
    }

    if (!artPlayerRef.current) {
      throw new Error('播放器尚未就绪');
    }

    const JassubPluginModule = await import('artplayer-plugin-jassub');
    const artplayerPluginJassub =
      ((JassubPluginModule as any).default || JassubPluginModule) as any;

    artPlayerRef.current.plugins.add(
      artplayerPluginJassub({
        ...(initialTrack.content
          ? { subContent: initialTrack.content }
          : { subUrl: initialTrack.url }),
        workerUrl: `${JASSUB_ASSET_BASE}/jassub-worker.js`,
        wasmUrl: `${JASSUB_ASSET_BASE}/jassub-worker.wasm`,
        modernWasmUrl: `${JASSUB_ASSET_BASE}/jassub-worker-modern.wasm`,
        availableFonts: {
          [JASSUB_CJK_FONT_FAMILY]: JASSUB_CJK_FONT_URL,
          'liberation sans': `${JASSUB_ASSET_BASE}/default.woff2`,
        },
        fallbackFont: JASSUB_CJK_FONT_FAMILY,
      })
    );

    const instance = getJassubSubtitleInstance();
    if (!instance) {
      throw new Error('高级字幕渲染器初始化失败');
    }

    return { instance, created: true };
  };

  const switchAdvancedSubtitle = async (content: string, label: string) => {
    if (!artPlayerRef.current) return;

    artPlayerRef.current.subtitle.show = false;
    const { instance, created } = await ensureJassubSubtitleInstance({ content });

    // 新建实例时 subContent 已作为初始轨道传入；复用实例时需要显式切轨。
    if (!created) {
      await instance.setTrack?.(content);
    }

    currentSubtitleLabelRef.current = label;
  };

  const switchAdvancedSubtitleByUrl = async (url: string, label: string) => {
    if (!artPlayerRef.current) return;

    artPlayerRef.current.subtitle.show = false;
    const { instance, created } = await ensureJassubSubtitleInstance({ url });

    // 新建实例时 subUrl 已作为初始轨道传入；复用实例时需要显式切轨。
    if (!created) {
      if (instance.setTrackByUrl) {
        await instance.setTrackByUrl(url);
      } else {
        const response = await fetch(url, {
          credentials: 'include',
          cache: 'no-store',
        });
        if (!response.ok) {
          throw new Error(`高级字幕加载失败 (${response.status})`);
        }
        await instance.setTrack?.(await response.text());
      }
    }

    currentSubtitleLabelRef.current = label;
  };

  const switchSourceSubtitle = async (subtitle: SourceSubtitleItem) => {
    if (!subtitle.url) return;

    if (isAdvancedSourceSubtitle(subtitle)) {
      try {
        await switchAdvancedSubtitleByUrl(subtitle.url, subtitle.label);
        return;
      } catch (error) {
        if (!subtitle.fallbackUrl) {
          throw error;
        }

        console.warn('[Subtitle] 高级字幕加载失败，尝试降级为普通字幕:', error);
        switchSubtitle(subtitle.fallbackUrl, subtitle.label);

        const message = `高级字幕渲染失败，已降级为普通字幕：${subtitle.label}`;
        if (artPlayerRef.current) {
          artPlayerRef.current.notice.show = message;
        }
        setToast({
          message,
          type: 'info',
          duration: 5000,
          onClose: () => setToast(null),
        });
      }
      return;
    }

    switchSubtitle(subtitle.url, subtitle.label);
  };

  const removeSubtitleSetting = () => {
    try {
      artPlayerRef.current?.setting.remove('subtitle-selector');
    } catch (e) {
      // 忽略错误，可能设置项不存在
    }
  };

  const updateSubtitleSetting = () => {
    if (!artPlayerRef.current) return;

    const sourceSubtitles = (detailRef.current?.subtitles?.[currentEpisodeIndexRef.current] || []) as SourceSubtitleItem[];
    const customSubtitle =
      customSubtitleRef.current?.episodeIndex === currentEpisodeIndexRef.current
        ? customSubtitleRef.current
        : null;

    removeSubtitleSetting();

    const subtitleOptions = [
      { html: '关闭', action: 'close' },
      { html: '上传本地字幕', action: 'upload' },
      ...sourceSubtitles.map((sub: SourceSubtitleItem) => {
        const isAdvanced = isAdvancedSourceSubtitle(sub);
        const format = getSourceSubtitleFormat(sub);
        return {
          html: sub.label,
          action: 'switch',
          engine: isAdvanced ? 'jassub' : 'native',
          url: sub.url,
          fallbackUrl: sub.fallbackUrl,
          fallbackFormat: sub.fallbackFormat,
          format,
        };
      }),
      ...(customSubtitle
        ? [
          {
            html: `本地：${customSubtitle.name}`,
            action: 'switch',
            engine: customSubtitle.engine,
            url: customSubtitle.url,
            content: customSubtitle.content,
          },
        ]
        : []),
    ];

    artPlayerRef.current.setting.add({
      name: 'subtitle-selector',
      html: '字幕',
      selector: subtitleOptions,
      onSelect: function (item: any) {
        if (!artPlayerRef.current) {
          return currentSubtitleLabelRef.current;
        }

        if (item.action === 'close') {
          closeSubtitle();
          return item.html;
        }

        if (item.action === 'upload') {
          customSubtitleInputRef.current?.click();
          return currentSubtitleLabelRef.current;
        }

        if (item.engine === 'jassub') {
          const switchPromise = item.content
            ? switchAdvancedSubtitle(item.content, item.html)
            : item.url
              ? switchSourceSubtitle({
                label: item.html,
                url: item.url,
                fallbackUrl: item.fallbackUrl,
                fallbackFormat: item.fallbackFormat,
                format: item.format,
                renderMode: 'jassub',
              })
              : Promise.resolve();

          void switchPromise.catch((error) => {
            console.warn('[Subtitle] 高级字幕切换失败:', error);
            setToast({
              message: error instanceof Error ? error.message : '高级字幕切换失败',
              type: 'error',
              onClose: () => setToast(null),
            });
          });
          return item.html;
        }

        if (item.url) {
          switchSubtitle(item.url, item.html);
          return item.html;
        }

        return currentSubtitleLabelRef.current;
      },
      default: currentSubtitleLabelRef.current,
    });
  };

  const loadNativeCustomSubtitle = async (file: File) => {
    const convertedSubtitle = await convertSubtitleFileToVttObjectUrl(file);
    revokeCustomSubtitle();

    customSubtitleRef.current = {
      ...convertedSubtitle,
      engine: 'native',
      episodeIndex: currentEpisodeIndexRef.current,
    };

    switchSubtitle(
      convertedSubtitle.url,
      `本地：${convertedSubtitle.name}`
    );
    updateSubtitleSetting();

    return convertedSubtitle;
  };

  const loadAdvancedCustomSubtitle = async (file: File, format: string) => {
    const content = await file.text();
    revokeCustomSubtitle();

    customSubtitleRef.current = {
      name: file.name,
      format,
      engine: 'jassub',
      content,
      episodeIndex: currentEpisodeIndexRef.current,
    };

    await switchAdvancedSubtitle(content, `本地：${file.name}`);
    updateSubtitleSetting();
  };

  const handleCustomSubtitleFileChange = async (
    event: React.ChangeEvent<HTMLInputElement>
  ) => {
    const file = event.target.files?.[0];
    event.target.value = '';

    if (!file) return;

    const extension = getSubtitleFileExtension(file.name);

    try {
      if (isAdvancedSubtitleFormat(extension)) {
        await loadAdvancedCustomSubtitle(file, extension);
        setToast({
          message: `已加载高级字幕：${file.name}`,
          type: 'success',
          onClose: () => setToast(null),
        });
        return;
      }

      const convertedSubtitle = await loadNativeCustomSubtitle(file);
      setToast({
        message: `已加载本地字幕：${convertedSubtitle.name}`,
        type: 'success',
        onClose: () => setToast(null),
      });
    } catch (error) {
      let displayError = error;

      if (isAdvancedSubtitleFormat(extension)) {
        console.warn('[Subtitle] 高级字幕加载失败，尝试降级为普通字幕:', displayError);

        try {
          const convertedSubtitle = await loadNativeCustomSubtitle(file);
          setToast({
            message: `高级字幕渲染失败，已降级为普通字幕：${convertedSubtitle.name}`,
            type: 'info',
            duration: 5000,
            onClose: () => setToast(null),
          });
          return;
        } catch (fallbackError) {
          console.warn('[Subtitle] 高级字幕降级加载失败:', fallbackError);
          displayError = fallbackError;
        }
      }

      console.warn('[Subtitle] 自定义字幕加载失败:', displayError);
      setToast({
        message: displayError instanceof Error ? displayError.message : '字幕加载失败',
        type: 'error',
        onClose: () => setToast(null),
      });
    }
  };

  // 判断剧集状态
  const getSeriesStatus = (detail: SearchResult | null): 'completed' | 'ongoing' | 'unknown' => {
    if (!detail) return 'unknown';

    // 方法1：通过 vod_remarks 判断
    if (detail.vod_remarks) {
      const remarks = detail.vod_remarks.toLowerCase();
      // 判定为完结的关键词
      const completedKeywords = ['全', '完结', '大结局', 'end', '完'];
      // 判定为连载的关键词
      const ongoingKeywords = ['更新至', '连载', '第', '更新到'];

      // 如果包含连载关键词，则为连载中
      if (ongoingKeywords.some(keyword => remarks.includes(keyword))) {
        return 'ongoing';
      }

      // 如果包含完结关键词，则为已完结
      if (completedKeywords.some(keyword => remarks.includes(keyword))) {
        return 'completed';
      }
    }

    // 方法2：通过 vod_total 和实际集数对比判断
    if (detail.vod_total && detail.vod_total > 0 && detail.episodes && detail.episodes.length > 0) {
      // 如果实际集数 >= 总集数，则为已完结
      if (detail.episodes.length >= detail.vod_total) {
        return 'completed';
      }
      // 如果实际集数 < 总集数，则为连载中
      return 'ongoing';
    }

    // 无法判断，返回 unknown
    return 'unknown';
  };

  // 获取当前源的视频信息（分辨率和码率）
  const fetchCurrentSourceVideoInfo = async () => {
    if (!detail || !detail.episodes || detail.episodes.length === 0) {
      return;
    }

    // 获取当前集数的播放地址
    let episodeUrl = detail.episodes[currentEpisodeIndex];
    if (!episodeUrl) {
      return;
    }

    // 简单的正则或者后缀判断，如果明确不是 m3u8 (比如 mp4)，则不走 m3u8 代理
    const isM3u8 = episodeUrl.toLowerCase().includes('.m3u') || !episodeUrl.toLowerCase().match(/\.(mp4|flv|webm|mkv|avi|mov)(\?.*)?$/);

    if (currentSource === 'directplay' && isM3u8) {
      // 仅当 localStorage 记忆了该域名需要代理时才走代理
      if (isDirectplayDomainProxied(episodeUrl)) {
        const tokenParam = proxyToken ? `&token=${encodeURIComponent(proxyToken)}` : '';
        episodeUrl = `/api/proxy-m3u8?url=${encodeURIComponent(episodeUrl)}&source=directplay${tokenParam}`;
      } else {
        // 直链模式且未走代理：跳过 HLS.js 探测。
        // getVideoResolutionFromM3u8 内部使用 HLS.js (XMLHttpRequest) 加载，
        // 而 XHR 受 CORS 限制，探测必然失败。实际播放器通过 <video src> 加载不受 CORS 影响。
        console.log('[视频信息] 直链直连模式，跳过分辨率探测（避免 CORS 误报）');
        setCurrentSourceVideoInfo(null);
        return;
      }
    } else if (sourceProxyMode && isM3u8) {
      episodeUrl = `/api/proxy/vod/m3u8?url=${encodeURIComponent(episodeUrl)}&source=${encodeURIComponent(currentSource)}`;
    }

    try {
      const info = await getVideoResolutionFromM3u8(episodeUrl, 4000);
      setCurrentSourceVideoInfo(info);
    } catch (error) {
      console.error('获取视频信息失败:', error);
      setCurrentSourceVideoInfo(null);
    }
  };

  // 播放源优选函数
  const preferBestSource = async (
    sources: SearchResult[]
  ): Promise<SearchResult> => {
    if (sources.length === 1) return sources[0];

    type SourceTestResult = {
      source: SearchResult;
      testResult: { quality: string; loadSpeed: string; pingTime: number; bitrate: string };
    };
    type MaybeSourceTestResult = SourceTestResult | null;

    const sortedByWeight = [...sources].sort((a, b) => {
      const weightA = a.weight ?? 0;
      const weightB = b.weight ?? 0;
      return weightB - weightA;
    });

    const finalizeSelection = (
      completedResults: MaybeSourceTestResult[]
    ): SearchResult => {
      const newVideoInfoMap = new Map<
        string,
        {
          quality: string;
          loadSpeed: string;
          pingTime: number;
          bitrate: string;
        }
      >();
      completedResults.forEach((result) => {
        if (!result) return;
        const sourceKey = `${result.source.source}-${result.source.id}`;
        newVideoInfoMap.set(sourceKey, result.testResult);
      });
      setPrecomputedVideoInfo(newVideoInfoMap);

      const successfulResults = completedResults.filter(
        Boolean
      ) as SourceTestResult[];

      if (successfulResults.length === 0) {
        console.warn('所有播放源测速都失败，按权重排序');
        return sortedByWeight[0];
      }

      const validSpeeds = successfulResults
        .map((result) => {
          const speedStr = result.testResult.loadSpeed;
          if (speedStr === '未知' || speedStr === '测量中...') return 0;

          const match = speedStr.match(/^([\d.]+)\s*(KB\/s|MB\/s)$/);
          if (!match) return 0;

          const value = parseFloat(match[1]);
          const unit = match[2];
          return unit === 'MB/s' ? value * 1024 : value;
        })
        .filter((speed) => speed > 0);

      const maxSpeed = validSpeeds.length > 0 ? Math.max(...validSpeeds) : 1024;

      const validPings = successfulResults
        .map((result) => result.testResult.pingTime)
        .filter((ping) => ping > 0);

      const minPing = validPings.length > 0 ? Math.min(...validPings) : 50;
      const maxPing = validPings.length > 0 ? Math.max(...validPings) : 1000;

      const resultsWithScore = successfulResults.map((result) => ({
        ...result,
        score: calculateSourceScore(
          result.testResult,
          maxSpeed,
          minPing,
          maxPing,
          result.source.weight ?? 0
        ),
      }));

      resultsWithScore.sort((a, b) => b.score - a.score);

      console.log('播放源评分排序结果:');
      resultsWithScore.forEach((result, index) => {
        console.log(
          `${index + 1}. ${result.source.source_name
          } - 评分: ${result.score.toFixed(2)} (${result.testResult.quality}, ${result.testResult.loadSpeed
          }, ${result.testResult.pingTime}ms)`
        );
      });

      return resultsWithScore[0].source;
    };

    const testSingleSource = async (
      source: SearchResult
    ): Promise<MaybeSourceTestResult> => {
      try {
        if (!source.episodes || source.episodes.length === 0) {
          console.warn(`播放源 ${source.source_name} 没有可用的播放地址`);
          return null;
        }

        let episodeUrl =
          source.episodes.length > 1
            ? source.episodes[1]
            : source.episodes[0];

        const isM3u8 = episodeUrl.toLowerCase().includes('.m3u') || !episodeUrl.toLowerCase().match(/\.(mp4|flv|webm|mkv|avi|mov)(\?.*)?$/);
        if (source.source === 'directplay' && isM3u8) {
          if (isDirectplayDomainProxied(episodeUrl)) {
            const tokenParam = proxyToken ? `&token=${encodeURIComponent(proxyToken)}` : '';
            episodeUrl = `/api/proxy-m3u8?url=${encodeURIComponent(episodeUrl)}&source=directplay${tokenParam}`;
          }
        } else if (source.proxyMode && isM3u8) {
          episodeUrl = `/api/proxy/vod/m3u8?url=${encodeURIComponent(episodeUrl)}&source=${encodeURIComponent(source.source)}`;
        }

        const testResult = await getVideoResolutionFromM3u8(episodeUrl);

        return {
          source,
          testResult,
        };
      } catch (error) {
        return null;
      }
    };

    const maxConcurrency = Math.ceil(sources.length / 2);

    const runAllWithSameConcurrency = async (): Promise<MaybeSourceTestResult[]> => {
      const results: MaybeSourceTestResult[] = new Array(sources.length);
      let nextIndex = 0;

      const worker = async () => {
        while (nextIndex < sources.length) {
          const currentIndex = nextIndex++;
          results[currentIndex] = await testSingleSource(sources[currentIndex]);
        }
      };

      await Promise.all(
        Array.from({ length: Math.min(maxConcurrency, sources.length) }, () =>
          worker()
        )
      );

      return results;
    };

    if (preferStrategy === 'full' || sortedByWeight.length < 5) {
      const allResults = await runAllWithSameConcurrency();
      return finalizeSelection(allResults);
    }

    const topPriorityKeys = new Set(
      sortedByWeight
        .slice(0, 5)
        .map((source) => `${source.source}-${source.id}`)
    );

    const quickResults = await new Promise<MaybeSourceTestResult[]>((resolve) => {
      const results: Array<MaybeSourceTestResult | undefined> = new Array(sources.length);
      let nextIndex = 0;
      let activeCount = 0;
      let completedCount = 0;
      let topCompletedCount = 0;
      let topSuccessCount = 0;
      let settled = false;

      const maybeResolve = () => {
        if (settled) return;

        if (topCompletedCount === 5 && topSuccessCount > 0) {
          settled = true;
          resolve(
            results.filter((result) => result !== undefined) as MaybeSourceTestResult[]
          );
          return;
        }

        if (completedCount === sources.length) {
          settled = true;
          resolve(results as MaybeSourceTestResult[]);
          return;
        }

        while (!settled && activeCount < maxConcurrency && nextIndex < sources.length) {
          const currentIndex = nextIndex++;
          const currentSource = sources[currentIndex];
          const sourceKey = `${currentSource.source}-${currentSource.id}`;
          activeCount += 1;

          testSingleSource(currentSource)
            .then((result) => {
              results[currentIndex] = result;
              completedCount += 1;

              if (topPriorityKeys.has(sourceKey)) {
                topCompletedCount += 1;
                if (result) {
                  topSuccessCount += 1;
                }
              }
            })
            .finally(() => {
              activeCount -= 1;
              maybeResolve();
            });
        }
      };

      maybeResolve();
    });

    return finalizeSelection(quickResults);
  };

  // 计算播放源综合评分
  const calculateSourceScore = (
    testResult: {
      quality: string;
      loadSpeed: string;
      pingTime: number;
    },
    maxSpeed: number,
    minPing: number,
    maxPing: number,
    weight = 0
  ): number => {
    let score = 0;

    // 分辨率评分 (40% 权重)
    const qualityScore = (() => {
      switch (testResult.quality) {
        case '4K':
          return 100;
        case '2K':
          return 85;
        case '1080p':
          return 75;
        case '720p':
          return 60;
        case '480p':
          return 40;
        case 'SD':
          return 20;
        default:
          return 0;
      }
    })();
    score += qualityScore * 0.4;

    // 下载速度评分 (40% 权重) - 基于最大速度线性映射
    const speedScore = (() => {
      const speedStr = testResult.loadSpeed;
      if (speedStr === '未知' || speedStr === '测量中...') return 30;

      // 解析速度值
      const match = speedStr.match(/^([\d.]+)\s*(KB\/s|MB\/s)$/);
      if (!match) return 30;

      const value = parseFloat(match[1]);
      const unit = match[2];
      const speedKBps = unit === 'MB/s' ? value * 1024 : value;

      // 基于最大速度线性映射，最高100分
      const speedRatio = speedKBps / maxSpeed;
      return Math.min(100, Math.max(0, speedRatio * 100));
    })();
    score += speedScore * 0.4;

    // 网络延迟评分 (20% 权重) - 基于延迟范围线性映射
    const pingScore = (() => {
      const ping = testResult.pingTime;
      if (ping <= 0) return 0; // 无效延迟给默认分

      // 如果所有延迟都相同，给满分
      if (maxPing === minPing) return 100;

      // 线性映射：最低延迟=100分，最高延迟=0分
      const pingRatio = (maxPing - ping) / (maxPing - minPing);
      return Math.min(100, Math.max(0, pingRatio * 100));
    })();
    score += pingScore * 0.2;

    // 权重加分 - 直接加到总分上（0-100分）
    score += weight;

    return Math.round(score * 100) / 100; // 保留两位小数
  };

  const cleanupLocalPlaybackBlobUrls = () => {
    if (typeof window === 'undefined') return;
    const urls = (window as any).__localFileBlobUrls;
    if (Array.isArray(urls)) {
      urls.forEach((url) => {
        if (typeof url === 'string' && url.startsWith('blob:')) {
          URL.revokeObjectURL(url);
        }
      });
    }
    (window as any).__localFileBlobUrls = [];
  };

  // 检查是否有本地下载的视频
  const checkLocalDownload = async (
    source: string,
    videoId: string,
    episodeIndex: number
  ): Promise<boolean> => {
    if (!enableOfflineDownload || !hasOfflinePermission) {
      return false;
    }

    try {
      const response = await fetch(
        `/api/offline-download?action=check&source=${encodeURIComponent(source)}&videoId=${encodeURIComponent(videoId)}&episodeIndex=${episodeIndex}`
      );

      if (response.ok) {
        const data = await response.json();
        return data.downloaded || false;
      }
    } catch (error) {
      console.error('检查本地下载失败:', error);
    }

    return false;
  };

  /**
   * 检查 File System API 本地下载
   */
  const checkFileSystemDownload = async (
    title: string,
    source?: string,
    videoId?: string,
    episodeIndex?: number
  ): Promise<{ hasLocal: boolean; dirHandle?: FileSystemDirectoryHandle }> => {
    try {
      // 从 IndexedDB 读取目录句柄
      const dbName = 'MoonTVPlus';
      const storeName = 'dirHandles';

      return new Promise((resolve) => {
        const request = indexedDB.open(dbName, 2); // 使用版本 2

        request.onupgradeneeded = (event) => {
          const db = (event.target as IDBOpenDBRequest).result;

          // 创建 dirHandles 表（如果不存在）
          if (!db.objectStoreNames.contains(storeName)) {
            db.createObjectStore(storeName);
          }

          // 创建 activeTasks 表（如果不存在）
          if (!db.objectStoreNames.contains('activeTasks')) {
            const activeStore = db.createObjectStore('activeTasks', { keyPath: 'id' });
            activeStore.createIndex('status', 'status', { unique: false });
            activeStore.createIndex('createdAt', 'createdAt', { unique: false });
          }

          // 创建 completedTasks 表（如果不存在）
          if (!db.objectStoreNames.contains('completedTasks')) {
            const completedStore = db.createObjectStore('completedTasks', { keyPath: 'id' });
            completedStore.createIndex('source', 'source', { unique: false });
            completedStore.createIndex('videoId', 'videoId', { unique: false });
            completedStore.createIndex('completedAt', 'completedAt', { unique: false });
            completedStore.createIndex('sourceVideoId', ['source', 'videoId'], { unique: false });
          }
        };

        request.onsuccess = async (event) => {
          const db = (event.target as IDBOpenDBRequest).result;

          // 检查 object store 是否存在
          if (!db.objectStoreNames.contains(storeName)) {
            db.close();
            resolve({ hasLocal: false });
            return;
          }

          const transaction = db.transaction([storeName], 'readonly');
          const store = transaction.objectStore(storeName);
          const getRequest = store.get('downloadDir');

          getRequest.onsuccess = async () => {
            const dirHandle = getRequest.result as FileSystemDirectoryHandle | undefined;
            if (!dirHandle) {
              resolve({ hasLocal: false });
              return;
            }

            try {
              // 请求读权限
              const permission = await (dirHandle as any).queryPermission({ mode: 'read' });
              if (permission !== 'granted') {
                const requestPermission = await (dirHandle as any).requestPermission({ mode: 'read' });
                if (requestPermission !== 'granted') {
                  console.warn('未获得读权限');
                  resolve({ hasLocal: false });
                  return;
                }
              }

              // 如果有 source、videoId 和 episodeIndex，检查子目录
              if (source && videoId && episodeIndex !== undefined) {
                const sourceDirHandle = await dirHandle.getDirectoryHandle(source, { create: false });
                const videoIdDirHandle = await sourceDirHandle.getDirectoryHandle(videoId, { create: false });
                const epDirHandle = await videoIdDirHandle.getDirectoryHandle(`ep${episodeIndex + 1}`, { create: false });

                // 检查是否存在 playlist.m3u8 文件
                await epDirHandle.getFileHandle('playlist.m3u8', { create: false });
                console.log('找到本地下载文件:', title, `(${source}/${videoId}/ep${episodeIndex + 1})`);
                resolve({ hasLocal: true, dirHandle: epDirHandle });
              } else {
                // 缺少必要参数
                resolve({ hasLocal: false });
              }
            } catch (error) {
              // 文件不存在
              console.error('检查本地文件失败:', error);
              resolve({ hasLocal: false });
            }
          };

          getRequest.onerror = () => {
            resolve({ hasLocal: false });
          };
        };

        request.onerror = () => {
          resolve({ hasLocal: false });
        };
      });
    } catch (error) {
      console.error('检查 File System API 下载失败:', error);
      return { hasLocal: false };
    }
  };

  /**
   * 判断当前是否应启用 14 分钟链接续期
   * xiaoya：始终启用；openlist：PathMeta.refresh14m 为 true
   */
  const shouldEnableLinkRefresh = () => {
    const lazyUrl = currentXiaoyaUrlRef.current;
    if (!lazyUrl) return false;

    if (lazyUrl.startsWith('/api/xiaoya/play')) {
      return true;
    }

    if (lazyUrl.startsWith('/api/openlist/play')) {
      return Boolean(detailRef.current?.refresh14m);
    }

    return false;
  };

  /**
   * 是否像 HLS/m3u8 播放地址（xiaoya 仍只在此场景启 14 分钟定时器）
   */
  const isM3u8LikePlayUrl = (url: string) => {
    if (!url) return false;
    const lower = url.toLowerCase();
    return (
      lower.includes('.m3u8') ||
      lower.includes('.m3u') ||
      lower.includes('/m3u8/') ||
      lower.includes('m3u8')
    );
  };

  /**
   * 是否应在拿到真实地址后启动 14 分钟定时器
   * - xiaoya：保持原逻辑，仅 m3u8 启
   * - openlist：PathMeta.refresh14m 开启即可（签名 URL 常无扩展名）
   */
  const shouldStartLinkRefreshTimer = (resolvedPlayUrl?: string) => {
    if (!shouldEnableLinkRefresh()) {
      linkRefreshEligibleRef.current = false;
      return false;
    }
    const lazyUrl = currentXiaoyaUrlRef.current;
    // openlist：PathMeta.refresh14m 已通过 shouldEnableLinkRefresh；签名 URL 常无扩展名
    if (lazyUrl?.startsWith('/api/openlist/play')) {
      linkRefreshEligibleRef.current = true;
      return true;
    }
    // xiaoya：保持原逻辑，仅 m3u8 启定时器
    const ok = isM3u8LikePlayUrl(resolvedPlayUrl || '');
    linkRefreshEligibleRef.current = ok;
    return ok;
  };

  /**
   * 获取当前播放用的 video / hls 实例（定时器不依赖创建时闭包）
   */
  const getPlaybackMedia = (preferredHls?: any, preferredVideo?: HTMLVideoElement) => {
    const video =
      preferredVideo ||
      (artPlayerRef.current?.video as HTMLVideoElement | undefined) ||
      null;
    const hls = preferredHls || (video as any)?.hls || null;
    return { video, hls };
  };

  /**
   * 刷新成功后的统一收尾：提示、重置重试、重启定时器
   */
  const finishLinkRefresh = (
    isScheduled: boolean,
    preferredHls?: any,
    preferredVideo?: HTMLVideoElement
  ) => {
    setIsRefreshingUrl(false);
    if (artPlayerRef.current) {
      artPlayerRef.current.notice.show = isScheduled
        ? '链接已自动刷新'
        : '链接已过期并自动刷新';
    }
    retryCountRef.current = 0;
    startRefreshTimer(preferredHls, preferredVideo);
  };

  /**
   * 刷新 xiaoya / openlist 链接（静默刷新，尽量不打断播放）
   * - HLS：用 hls.loadSource 换源
   * - 直链（mp4 等）：直接改 video.src
   * hls / video 可选；定时器触发时会从 artPlayer 重新取
   */
  const refreshXiaoyaUrl = async (
    preferredHls?: any,
    preferredVideo?: HTMLVideoElement,
    isScheduled: boolean = false
  ) => {
    // 防抖：距离上次刷新不足3秒则不刷新
    const now = Date.now();
    if (now - lastRefreshTimeRef.current < 3000) {
      console.log('[链接刷新] 防抖跳过');
      return false;
    }

    // 重试次数限制（仅对错误触发的刷新）
    if (!isScheduled && retryCountRef.current >= 3) {
      console.error('[链接刷新] 重试次数已达上限');
      setVideoError('链接已过期且刷新失败，请手动刷新页面');
      const { hls } = getPlaybackMedia(preferredHls, preferredVideo);
      try {
        hls?.destroy?.();
      } catch {
        // ignore
      }
      return false;
    }

    // 检查是否有原始URL
    if (!currentXiaoyaUrlRef.current) {
      console.warn('[链接刷新] 无原始URL，跳过刷新');
      return false;
    }

    if (!shouldEnableLinkRefresh()) {
      console.log('[链接刷新] 当前路径未开启 refresh14m，跳过');
      return false;
    }

    console.log(`[链接刷新] 开始刷新 (${isScheduled ? '定时' : '错误触发'})`);
    setIsRefreshingUrl(true);

    if (!isScheduled) {
      retryCountRef.current++;
    }
    lastRefreshTimeRef.current = now;

    try {
      // 先请求新链接；请求期间继续播放，进度要在换源前一刻再记录，
      // 否则恢复会回退到请求开始时的时间点（倒退几秒）
      const separator = currentXiaoyaUrlRef.current.includes('?') ? '&' : '?';
      const fetchUrl = `${currentXiaoyaUrlRef.current}${separator}format=json&t=${Date.now()}`;

      const response = await fetch(fetchUrl);
      const data = await response.json();

      if (!data.url) {
        throw new Error('未获取到有效链接');
      }

      // play 响应可带回 refresh14m，配置热更新后仍一致
      if (
        typeof data.refresh14m === 'boolean' &&
        currentXiaoyaUrlRef.current.startsWith('/api/openlist/play')
      ) {
        if (detailRef.current?.source === 'openlist') {
          detailRef.current.refresh14m = data.refresh14m;
        }
        if (!data.refresh14m) {
          currentXiaoyaUrlRef.current = '';
          clearRefreshTimer();
          setIsRefreshingUrl(false);
          console.log('[链接刷新] play 响应 refresh14m=false，停止续期');
          return false;
        }
      }

      // 保存清晰度列表（若有）
      if (data.qualities && data.qualities.length > 0) {
        setVideoQualities(data.qualities);
      }

      console.log('[链接刷新] 获取到新链接');

      // 链接就绪后再取 media，并在此刻记录进度（换源前最后一刻）
      const { video, hls } = getPlaybackMedia(preferredHls, preferredVideo);
      if (!video) {
        throw new Error('播放器尚未就绪');
      }

      const currentTime = video.currentTime;
      const isPaused = video.paused;
      console.log(
        `[链接刷新] 换源前记录进度 (${isScheduled ? '定时' : '错误触发'}):`,
        currentTime
      );

      // 优先走 HLS 换源；没有 hls 实例时按 progressive 直链处理
      if (hls && typeof hls.loadSource === 'function') {
        try {
          hls.stopLoad();
        } catch {
          // ignore
        }
        hls.loadSource(data.url);

        await new Promise<void>((resolve, reject) => {
          const HlsEvents = (hls.constructor as any).Events;
          let settled = false;
          let finished = false;

          const cleanup = () => {
            try {
              hls.off(HlsEvents.MANIFEST_PARSED, onManifestParsed);
            } catch {
              // ignore
            }
            window.clearTimeout(timeoutId);
          };

          const complete = () => {
            if (finished) return;
            finished = true;
            finishLinkRefresh(isScheduled, hls, video);
            resolve();
          };

          const onManifestParsed = () => {
            if (settled) return;
            settled = true;
            cleanup();

            try {
              hls.startLoad(currentTime);
            } catch {
              // ignore
            }

            const restorePlayback = () => {
              if (currentTime > 0) {
                try {
                  video.currentTime = currentTime;
                } catch {
                  // ignore
                }
              }

              const afterSeek = () => {
                console.log('[链接刷新] HLS 刷新完成，恢复到:', video.currentTime);
                if (!isPaused) {
                  video.play().catch((err) => {
                    console.warn('[链接刷新] 自动播放失败:', err);
                  });
                } else {
                  video.pause();
                }
                complete();
              };

              if (currentTime > 0) {
                video.addEventListener('seeked', afterSeek, { once: true });
                // seeked 偶发不触发时兜底
                window.setTimeout(() => {
                  afterSeek();
                }, 1500);
              } else {
                afterSeek();
              }
            };

            if (video.readyState >= 2) {
              restorePlayback();
            } else {
              video.addEventListener('loadeddata', restorePlayback, { once: true });
              window.setTimeout(() => {
                restorePlayback();
              }, 3000);
            }
          };

          hls.once(HlsEvents.MANIFEST_PARSED, onManifestParsed);

          const timeoutId = window.setTimeout(() => {
            if (settled) return;
            settled = true;
            cleanup();
            reject(new Error('加载超时'));
          }, 10000);
        });

        return true;
      }

      // progressive / 原生播放：直接换 src 并恢复进度
      await new Promise<void>((resolve, reject) => {
        let settled = false;
        let finished = false;
        const cleanup = () => {
          video.removeEventListener('loadeddata', onLoaded);
          video.removeEventListener('error', onError);
          window.clearTimeout(timeoutId);
        };

        const complete = () => {
          if (finished) return;
          finished = true;
          finishLinkRefresh(isScheduled, null, video);
          resolve();
        };

        const onLoaded = () => {
          if (settled) return;
          settled = true;
          cleanup();

          if (currentTime > 0) {
            try {
              video.currentTime = currentTime;
            } catch {
              // ignore
            }
          }

          const afterSeek = () => {
            console.log('[链接刷新] 直链刷新完成，恢复到:', video.currentTime);
            if (!isPaused) {
              video.play().catch((err) => {
                console.warn('[链接刷新] 自动播放失败:', err);
              });
            } else {
              video.pause();
            }
            complete();
          };

          if (currentTime > 0) {
            video.addEventListener('seeked', afterSeek, { once: true });
            window.setTimeout(afterSeek, 1500);
          } else {
            afterSeek();
          }
        };

        const onError = () => {
          if (settled) return;
          settled = true;
          cleanup();
          reject(new Error('直链加载失败'));
        };

        video.addEventListener('loadeddata', onLoaded, { once: true });
        video.addEventListener('error', onError, { once: true });
        const timeoutId = window.setTimeout(() => {
          if (settled) return;
          settled = true;
          cleanup();
          reject(new Error('加载超时'));
        }, 10000);

        try {
          video.src = data.url;
          video.load();
        } catch (err) {
          settled = true;
          cleanup();
          reject(err instanceof Error ? err : new Error(String(err)));
        }
      });

      return true;
    } catch (error) {
      console.error('[链接刷新] 刷新失败:', error);
      setIsRefreshingUrl(false);

      // 如果是定时刷新失败，不显示错误（继续使用旧链接）
      if (isScheduled) {
        console.warn('[链接刷新] 定时刷新失败，继续使用旧链接');
        // 5分钟后再试一次
        setTimeout(() => {
          if (currentXiaoyaUrlRef.current && shouldEnableLinkRefresh()) {
            refreshXiaoyaUrl(undefined, undefined, true);
          }
        }, 5 * 60 * 1000);
        return false;
      }

      // 错误触发的刷新失败，如果还有重试次数，延迟后再试
      if (retryCountRef.current < 3) {
        console.log(`[链接刷新] 2秒后重试 (${retryCountRef.current}/3)`);
        setTimeout(() => {
          if (currentXiaoyaUrlRef.current && shouldEnableLinkRefresh()) {
            refreshXiaoyaUrl(undefined, undefined, false);
          }
        }, 2000);
      } else {
        setVideoError('链接刷新失败，请手动刷新页面');
        const { hls } = getPlaybackMedia(preferredHls, preferredVideo);
        try {
          hls?.destroy?.();
        } catch {
          // ignore
        }
      }

      return false;
    }
  };

  /**
   * 启动14分钟定时刷新器
   * xiaoya：始终启用；openlist：仅当 detail.refresh14m 为 true
   * 不依赖 hls 是否已就绪；到期时再取当前播放器实例
   */
  const startRefreshTimer = (preferredHls?: any, preferredVideo?: HTMLVideoElement) => {
    // 清除旧定时器
    if (refreshTimerRef.current) {
      clearTimeout(refreshTimerRef.current);
      refreshTimerRef.current = null;
    }

    // 无原始可刷新 URL 则跳过
    if (!currentXiaoyaUrlRef.current) {
      return;
    }

    if (!shouldEnableLinkRefresh()) {
      const isOpenlistPlayUrl = currentXiaoyaUrlRef.current.startsWith(
        '/api/openlist/play'
      );
      if (isOpenlistPlayUrl) {
        console.log('[定时刷新] OpenList 路径未开启 refresh14m，跳过');
      }
      linkRefreshEligibleRef.current = false;
      return;
    }

    // xiaoya：仅 m3u8 可启（由 shouldStartLinkRefreshTimer 写入 eligible）
    // openlist：eligible 在 refresh14m 判定时已置 true
    const isOpenlistPlayUrl = currentXiaoyaUrlRef.current.startsWith(
      '/api/openlist/play'
    );
    if (!isOpenlistPlayUrl && !linkRefreshEligibleRef.current) {
      console.log('[定时刷新] xiaoya 非 m3u8，跳过定时器（保持原逻辑）');
      return;
    }
    if (isOpenlistPlayUrl) {
      linkRefreshEligibleRef.current = true;
    }

    console.log('[定时刷新] 启动14分钟定时器');

    // 14分钟 = 840000毫秒
    refreshTimerRef.current = setTimeout(() => {
      console.log('[定时刷新] 14分钟到期，开始刷新');
      if (!currentXiaoyaUrlRef.current || !shouldEnableLinkRefresh()) {
        return;
      }
      // 优先用调用时传入的实例，否则从当前播放器取
      refreshXiaoyaUrl(preferredHls, preferredVideo, true);
    }, 14 * 60 * 1000);
  };

  /**
   * 清除刷新定时器
   */
  const clearRefreshTimer = () => {
    if (refreshTimerRef.current) {
      console.log('[定时刷新] 清除定时器');
      clearTimeout(refreshTimerRef.current);
      refreshTimerRef.current = null;
    }
  };

  // 更新视频地址
  const updateVideoUrl = async (
    detailData: SearchResult | null,
    episodeIndex: number
  ) => {
    // 重置刷新相关状态
    retryCountRef.current = 0;
    lastRefreshTimeRef.current = 0;
    currentXiaoyaUrlRef.current = ''; // 清空旧的原始URL
    linkRefreshEligibleRef.current = false;
    clearRefreshTimer(); // 清除旧的定时器
    isInitialLoadRef.current = true; // 重置为首次加载

    // 动态设置 referrer policy：不发送 Referer
    const existingMeta = document.querySelector('meta[name="referrer"]');
    if (!existingMeta) {
      const meta = document.createElement('meta');
      meta.name = 'referrer';
      meta.content = 'no-referrer';
      document.head.appendChild(meta);
    }

    if (
      !detailData ||
      !detailData.episodes ||
      episodeIndex >= detailData.episodes.length
    ) {
      // 这类源统一先走详情懒加载，如果 episodes 为空则跳过
      if (isLazyDetailSource(detailData?.source) && (!detailData?.episodes || detailData.episodes.length === 0)) {
        setPlaybackSourceBadge(null);
        return;
      }
      setPlaybackSourceBadge(null);
      setVideoUrl('');
      return;
    }

    const requestKey = `${detailData.source}|${detailData.id}|${episodeIndex}`;
    const isEpisodeSwitchRequest = lastVideoRequestKeyRef.current !== requestKey;
    lastVideoRequestKeyRef.current = requestKey;
    const requestSeq = ++videoUrlRequestSeqRef.current;

    let newUrl = detailData?.episodes[episodeIndex] || '';
    let nextPlaybackSourceBadge: PlaybackSourceBadge = null;
    const isXiaoyaLazyPlayUrl = newUrl.startsWith('/api/xiaoya/play');

    if (isEpisodeSwitchRequest && isXiaoyaLazyPlayUrl) {
      setVideoLoadingStage('episodeChanging');
      setIsVideoLoading(true);
      setVideoError(null);
      setCorsFailedUrl(null);

      if (artPlayerRef.current?.video) {
        try {
          const video = artPlayerRef.current.video as HTMLVideoElement;
          video.pause();
          video.removeAttribute('src');
          video.load();
        } catch (error) {
          console.warn('切集时清空旧视频源失败:', error);
        }
      }

      if (videoUrl) {
        setVideoUrl('');
      }
    }

    // 如果是小雅或 openlist 接口，先请求获取真实 URL
    const isSpecialLazyPlayUrl =
      isXiaoyaLazyPlayUrl ||
      newUrl.startsWith('/api/openlist/play') ||
      newUrl.startsWith('/api/netdisk/115/play') ||
      newUrl.startsWith('/api/netdisk/123/play') ||
      newUrl.startsWith('/api/netdisk/quark/play') ||
      newUrl.startsWith('/api/netdisk/uc/play') ||
      newUrl.startsWith('/api/netdisk/baidu/play') ||
      newUrl.startsWith('/api/source-script/play');

    if (isSpecialLazyPlayUrl) {
      try {
        // 保存原始 lazy URL（用于后续刷新）
        // xiaoya：始终可刷新；openlist：先保存，再以 play 响应的 refresh14m 最终裁定
        const originalLazyUrl = newUrl;
        if (
          originalLazyUrl.startsWith('/api/xiaoya/play') ||
          originalLazyUrl.startsWith('/api/openlist/play')
        ) {
          currentXiaoyaUrlRef.current = originalLazyUrl;
        }

        // 添加 format=json 参数
        const separator = newUrl.includes('?') ? '&' : '?';
        const fetchUrl = `${newUrl}${separator}format=json`;

        const response = await fetch(fetchUrl);
        const data = await response.json();
        if (requestSeq !== videoUrlRequestSeqRef.current) {
          return;
        }
        if (data.url) {
          newUrl = data.url;
          // play 响应可带回 refresh14m，覆盖 detail（配置热更新后仍一致）
          if (originalLazyUrl.startsWith('/api/openlist/play')) {
            const refresh14m =
              typeof data.refresh14m === 'boolean'
                ? data.refresh14m
                : Boolean(detailData?.refresh14m);
            if (detailData) {
              detailData.refresh14m = refresh14m;
            }
            if (detailRef.current?.source === 'openlist') {
              detailRef.current.refresh14m = refresh14m;
            }
            // 未开启续期时清空，避免误启定时器
            currentXiaoyaUrlRef.current = refresh14m ? originalLazyUrl : '';
          }
          // 保存清晰度列表
          if (data.qualities && data.qualities.length > 0) {
            setVideoQualities(data.qualities);
          } else {
            setVideoQualities([]);
          }

          // 拿到真实播放地址后立刻启动 14 分钟续期（避免仅依赖 MANIFEST_PARSED）
          // xiaoya：仅 m3u8；openlist：refresh14m 即可（签名链常无扩展名）
          if (
            currentXiaoyaUrlRef.current &&
            shouldStartLinkRefreshTimer(newUrl)
          ) {
            isInitialLoadRef.current = false;
            startRefreshTimer();
          }
        } else if (originalLazyUrl.startsWith('/api/openlist/play')) {
          // 未拿到 url 时不保留 lazy url，避免无效续期
          currentXiaoyaUrlRef.current = '';
        }
      } catch (error) {
        if (requestSeq !== videoUrlRequestSeqRef.current) {
          return;
        }
        console.error('获取播放链接失败:', error);
        setVideoQualities([]);
        currentXiaoyaUrlRef.current = ''; // 获取失败，清空
      }
    } else {
      // 非小雅/openlist 源，清空清晰度列表
      setVideoQualities([]);
    }

    // 检查是否有 File System API 本地下载的文件
    const episodeTitle = detailData?.episodes_titles?.[episodeIndex] || `第${episodeIndex + 1}集`;
    const fileSystemCheck = await checkFileSystemDownload(
      episodeTitle,
      currentSource || undefined,
      currentId || undefined,
      episodeIndex
    );
    if (requestSeq !== videoUrlRequestSeqRef.current) {
      return;
    }

    if (fileSystemCheck.hasLocal && fileSystemCheck.dirHandle) {
      // 使用本地文件播放
      try {
        cleanupLocalPlaybackBlobUrls();
        // 读取 m3u8 文件
        const fileHandle = await fileSystemCheck.dirHandle.getFileHandle('playlist.m3u8', { create: false });
        const file = await fileHandle.getFile();
        const content = await file.text();

        // 解析 m3u8 文件，为每个 ts 文件创建 Blob URL
        const lines = content.split('\n');
        const modifiedLines: string[] = [];
        const blobUrls: string[] = []; // 保存 Blob URL 以便后续清理

        for (const line of lines) {
          const trimmedLine = line.trim();

          // 如果是 ts 文件
          if (trimmedLine.endsWith('.ts')) {
            try {
              // 读取 ts 文件
              const tsFileHandle = await fileSystemCheck.dirHandle.getFileHandle(trimmedLine, { create: false });
              const tsFile = await tsFileHandle.getFile();

              // 创建 Blob URL
              const blobUrl = URL.createObjectURL(tsFile);
              blobUrls.push(blobUrl);

              // 替换为 Blob URL
              modifiedLines.push(line.replace(trimmedLine, blobUrl));
            } catch (error) {
              console.error(`读取 ts 文件失败: ${trimmedLine}`, error);
              modifiedLines.push(line);
            }
          }
          // 如果是加密密钥
          else if (trimmedLine.includes('key.key')) {
            try {
              const keyFileHandle = await fileSystemCheck.dirHandle.getFileHandle('key.key', { create: false });
              const keyFile = await keyFileHandle.getFile();
              const keyBlobUrl = URL.createObjectURL(keyFile);
              blobUrls.push(keyBlobUrl);
              modifiedLines.push(line.replace('key.key', keyBlobUrl));
            } catch (error) {
              console.error('读取密钥文件失败:', error);
              modifiedLines.push(line);
            }
          }
          else {
            modifiedLines.push(line);
          }
        }

        // 创建修改后的 m3u8 的 Blob URL
        const modifiedContent = modifiedLines.join('\n');
        const m3u8Blob = new Blob([modifiedContent], { type: 'application/vnd.apple.mpegurl' });
        newUrl = URL.createObjectURL(m3u8Blob);
        nextPlaybackSourceBadge = 'local';

        // 保存 Blob URLs 到 window，以便在切换视频时清理
        (window as any).__localFileBlobUrls = blobUrls;

        console.log('使用 File System API 本地文件播放（Blob URL 模式）:', episodeTitle);
      } catch (error) {
        console.error('读取本地文件失败:', error);
      }
    }

    let indexedDBCheck: Awaited<ReturnType<typeof getIndexedDBVideoPlaybackUrl>> = { hasLocal: false };

    // 如果没有 File System API 本地文件，检查 IndexedDB 应用内离线缓存
    if (!fileSystemCheck.hasLocal && currentSource && currentId) {
      indexedDBCheck = await getIndexedDBVideoPlaybackUrl(
        currentSource,
        currentId,
        episodeIndex,
        { preferServiceWorker: true }
      );
      if (requestSeq !== videoUrlRequestSeqRef.current) {
        indexedDBCheck.objectUrls?.forEach((url) => URL.revokeObjectURL(url));
        return;
      }

      if (indexedDBCheck.hasLocal && indexedDBCheck.url) {
        cleanupLocalPlaybackBlobUrls();
        if (indexedDBCheck.objectUrls?.length) {
          (window as any).__localFileBlobUrls = indexedDBCheck.objectUrls;
        }
        newUrl = indexedDBCheck.url;
        nextPlaybackSourceBadge = 'local';
        console.log(
          `使用 IndexedDB 本地缓存播放（${indexedDBCheck.mode === 'service-worker' ? 'Service Worker' : 'Blob 降级'} 模式）:`,
          episodeTitle
        );
      }
    }

    // 如果没有 File System API / IndexedDB 本地文件，检查服务器端本地下载
    if (!fileSystemCheck.hasLocal && !indexedDBCheck.hasLocal) {
      const hasLocalFile = await checkLocalDownload(currentSource, currentId, episodeIndex);
      if (requestSeq !== videoUrlRequestSeqRef.current) {
        return;
      }

      if (hasLocalFile) {
        // 使用本地代理接口,URL以.m3u8结尾以便Artplayer自动识别
        newUrl = `/api/offline-download/local/${currentSource}/${currentId}/${episodeIndex}/playlist.m3u8`;
        nextPlaybackSourceBadge = 'offline';
        console.log('使用服务器端本地下载文件播放:', newUrl);
      } else {
        const isM3u8 = newUrl.toLowerCase().includes('.m3u') || !newUrl.toLowerCase().match(/\.(mp4|flv|webm|mkv|avi|mov)(\?.*)?$/);

        if (sourceProxyMode && newUrl && isM3u8) {
          // 如果视频源启用了代理模式,且不是本地下载,则通过代理播放
          newUrl = `/api/proxy/vod/m3u8?url=${encodeURIComponent(newUrl)}&source=${encodeURIComponent(currentSource)}`;
          console.log('使用代理模式播放:', newUrl);
        } else if (currentSource === 'directplay' && newUrl && isM3u8) {
          // 直链播放模式：检查 localStorage 是否记录了该域名需要代理
          if (isDirectplayDomainProxied(newUrl)) {
            const tokenParam = proxyToken ? `&token=${encodeURIComponent(proxyToken)}` : '';
            newUrl = `/api/proxy-m3u8?url=${encodeURIComponent(newUrl)}&source=directplay${tokenParam}`;
            console.log('直链播放（域名已记忆）使用代理模式:', newUrl);
          } else {
            console.log('直链播放默认直连模式，不使用代理:', newUrl);
          }
        } else if (!isM3u8) {
          console.log('非 m3u8 格式，豁免代理框架，直接播放原始URL:', newUrl);
        }
      }
    }

    if (isEpisodeSwitchRequest || newUrl !== videoUrl) {
      if (requestSeq !== videoUrlRequestSeqRef.current) {
        return;
      }
      setVideoUrl(newUrl);
    }
    setPlaybackSourceBadge(nextPlaybackSourceBadge);
  };

  // 处理下载指定集数（支持批量下载）
  const handleDownloadEpisode = async (episodeIndexes: number[], offlineMode = false) => {
    if (!detail || !detail.episodes || episodeIndexes.length === 0) {
      if (artPlayerRef.current) {
        artPlayerRef.current.notice.show = '无法获取视频地址';
      }
      return;
    }

    const tokenParam = proxyToken ? `&token=${encodeURIComponent(proxyToken)}` : '';
    const origin = `${window.location.protocol}//${window.location.host}`;

    let successCount = 0;
    let failCount = 0;

    // 批量处理下载
    for (const episodeIndex of episodeIndexes) {
      if (episodeIndex >= detail.episodes.length) {
        failCount++;
        continue;
      }

      const episodeUrl = detail.episodes[episodeIndex];

      // 离线下载模式：无论是否开启去广告，都走非去广告逻辑
      const proxyUrl = offlineMode
        ? episodeUrl  // 离线下载不使用代理，直接使用原始URL
        : (externalPlayerAdBlock
          ? `${origin}/api/proxy-m3u8?url=${encodeURIComponent(episodeUrl)}&source=${encodeURIComponent(currentSource)}${tokenParam}`
          : episodeUrl);

      const isM3u8 = episodeUrl.toLowerCase().includes('.m3u8') || episodeUrl.toLowerCase().includes('/m3u8/');

      if (offlineMode && isM3u8) {
        // 离线下载模式 - 调用服务器API
        try {
          const downloadTitle = `${videoTitle}_第${episodeIndex + 1}集`;
          const response = await fetch('/api/offline-download', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json',
            },
            body: JSON.stringify({
              source: currentSource,
              videoId: currentId,
              episodeIndex,
              title: downloadTitle,
              m3u8Url: proxyUrl,
              metadata: detail ? {
                videoTitle: detail.title,
                cover: detail.poster,
                description: detail.desc,
                year: detail.year,
                rating: undefined, // SearchResult 没有 rating 字段
                totalEpisodes: detail.episodes?.length,
              } : undefined,
            }),
          });

          const data = await response.json();

          if (response.ok) {
            successCount++;
          } else {
            console.error(`离线下载任务创建失败 (第${episodeIndex + 1}集):`, data.error);
            failCount++;
          }
        } catch (error) {
          console.error(`离线下载任务创建失败 (第${episodeIndex + 1}集):`, error);
          failCount++;
        }
      } else if (isM3u8) {
        // M3U8格式 - 使用新的下载器，TS 格式
        try {
          const downloadTitle = `${videoTitle}_第${episodeIndex + 1}集`;
          await addDownloadTask(proxyUrl, downloadTitle, 'TS', {
            source: currentSource || undefined,
            videoId: currentId || undefined,
            episodeIndex,
          });
          successCount++;
        } catch (error) {
          console.error(`添加下载任务失败 (第${episodeIndex + 1}集):`, error);
          failCount++;
        }
      } else {
        // 普通视频格式 - 直接下载
        try {
          const a = document.createElement('a');
          a.href = proxyUrl;
          a.download = `${videoTitle}_第${episodeIndex + 1}集.mp4`;
          a.target = '_blank';
          document.body.appendChild(a);
          a.click();
          document.body.removeChild(a);
          successCount++;
          // 添加延迟避免浏览器阻止多个下载
          await new Promise(resolve => setTimeout(resolve, 300));
        } catch (error) {
          console.error(`下载失败 (第${episodeIndex + 1}集):`, error);
          failCount++;
        }
      }
    }

    // 显示结果通知
    if (artPlayerRef.current) {
      if (failCount === 0) {
        artPlayerRef.current.notice.show = offlineMode
          ? `已创建 ${successCount} 个离线下载任务！`
          : `已添加 ${successCount} 个下载任务！`;
      } else if (successCount === 0) {
        artPlayerRef.current.notice.show = '下载失败，请重试';
      } else {
        artPlayerRef.current.notice.show = `成功 ${successCount} 个，失败 ${failCount} 个`;
      }
    }
  };

  const ensureVideoSource = (video: HTMLVideoElement | null, url: string) => {
    if (!video || !url) return;
    const sources = Array.from(video.getElementsByTagName('source'));
    const isHlsJsActive = !!(video as any).hls;
    const userAgent = typeof navigator !== 'undefined' ? navigator.userAgent : '';
    const isIOSWebKit =
      /iPad|iPhone|iPod/i.test(userAgent) ||
      (/Macintosh/i.test(userAgent) &&
        typeof navigator !== 'undefined' &&
        navigator.maxTouchPoints > 1);
    const isSafari =
      isIOSWebKit ||
      (/Safari/i.test(userAgent) &&
        !/Chrome|Chromium|Edg|OPR|Android/i.test(userAgent));
    const isHlsLikeSource =
      /\.m3u8?($|\?)/i.test(url) ||
      url.includes('/api/proxy-m3u8') ||
      url.includes('/api/proxy/vod/m3u8');

    if (isSafari && isHlsJsActive && isHlsLikeSource) {
      // HLS 由 hls.js 接管时，不能再给 <video> 塞原始 m3u8 source，
      // 否则 Safari 可能切回原生 HLS，和 MSE/hls.js 抢同一个播放器。
      sources.forEach((s) => s.remove());
    } else {
      const existed = sources.some((s) => s.src === url);
      if (!existed) {
        // 移除旧的 source，保持唯一
        sources.forEach((s) => s.remove());
        const sourceEl = document.createElement('source');
        sourceEl.src = url;
        video.appendChild(sourceEl);
      }
    }

    // 始终允许远程播放（AirPlay / Cast）
    video.disableRemotePlayback = false;
    // 如果曾经有禁用属性，移除之
    if (video.hasAttribute('disableRemotePlayback')) {
      video.removeAttribute('disableRemotePlayback');
    }

    // 确保 playsinline 属性存在（iOS 兼容性）
    video.setAttribute('playsinline', 'true');
    video.setAttribute('webkit-playsinline', 'true');
    // 使用 property 方式也设置一次，确保兼容性
    (video as any).playsInline = true;
    (video as any).webkitPlaysInline = true;

    // openlist/emby/xiaoya/netdisk：CORS 模式加载，需配套「moontvplus 扩展」注入 ACAO 后 Anime4K 才能读帧
    applyVideoCrossOrigin(video, currentSourceRef.current);
  };

  // Wake Lock 相关函数
  const requestWakeLock = async () => {
    try {
      if ('wakeLock' in navigator) {
        wakeLockRef.current = await (navigator as any).wakeLock.request(
          'screen'
        );
        console.log('Wake Lock 已启用');
      }
    } catch (err) {
      console.warn('Wake Lock 请求失败:', err);
    }
  };

  const releaseWakeLock = async () => {
    try {
      if (wakeLockRef.current) {
        await wakeLockRef.current.release();
        wakeLockRef.current = null;
        console.log('Wake Lock 已释放');
      }
    } catch (err) {
      console.warn('Wake Lock 释放失败:', err);
    }
  };

  // 清理播放器资源的统一函数
  const cleanupPlayer = async () => {
    revokeCustomSubtitle();

    // 清除刷新定时器
    clearRefreshTimer();

    // 先清理Anime4K，避免GPU纹理错误
    await cleanupAnime4K();

    if (artPlayerRef.current) {
      try {
        // 在销毁前先移除弹幕显示/隐藏事件监听器，避免 destroy 时触发 hide 事件导致状态被错误保存
        if (artPlayerRef.current) {
          artPlayerRef.current.off('artplayerPluginDanmuku:show');
          artPlayerRef.current.off('artplayerPluginDanmuku:hide');
        }

        // 在销毁前从弹幕插件读取最新配置并保存
        if (danmakuPluginRef.current?.option && artPlayerRef.current.storage) {
          // 获取当前弹幕设置的快照，避免循环引用
          const currentDanmakuSettings = danmakuSettingsRef.current;
          const danmakuPluginOption = danmakuPluginRef.current.option;

          const currentSettings = {
            ...currentDanmakuSettings,
            opacity: danmakuPluginOption.opacity || currentDanmakuSettings.opacity,
            fontSize: danmakuPluginOption.fontSize || currentDanmakuSettings.fontSize,
            speed: danmakuPluginOption.speed || currentDanmakuSettings.speed,
            marginTop: (danmakuPluginOption.margin && danmakuPluginOption.margin[0]) ?? currentDanmakuSettings.marginTop,
            marginBottom: (danmakuPluginOption.margin && danmakuPluginOption.margin[1]) ?? currentDanmakuSettings.marginBottom,
          };

          // 保存到 localStorage 和 art.storage
          saveDanmakuSettings(currentSettings);
          artPlayerRef.current.storage.set('danmaku_settings', currentSettings);

          console.log('播放器销毁前保存弹幕设置:', currentSettings);
        }

        // 销毁 HLS 实例
        if (artPlayerRef.current.video && artPlayerRef.current.video.hls) {
          artPlayerRef.current.video.hls.destroy();
        }

        // 销毁 ArtPlayer 实例
        artPlayerRef.current.destroy();
        artPlayerRef.current = null;

        // 清空 DOM 容器，确保没有残留元素
        if (artRef.current) {
          artRef.current.innerHTML = '';
        }

        console.log('播放器资源已清理');
      } catch (err) {
        console.warn('清理播放器资源时出错:', err);
        artPlayerRef.current = null;
        // 即使出错也要清空容器
        if (artRef.current) {
          artRef.current.innerHTML = '';
        }
      }
    }
  };

  // 初始化Anime4K超分
  const initAnime4K = async () => {
    if (!artPlayerRef.current?.video) return;

    let outputCanvas: HTMLCanvasElement | null = null; // 在外层声明，以便错误处理中清理

    try {
      if (anime4kRef.current) {
        anime4kRef.current.controller?.stop?.();
        anime4kRef.current = null;
        // 等待旧实例完全停止，避免双重渲染
        await new Promise(resolve => setTimeout(resolve, 100));
      }

      const video = artPlayerRef.current.video as HTMLVideoElement;

      // 等待视频元数据加载完成
      if (!video.videoWidth || !video.videoHeight) {
        console.warn('视频尺寸未就绪，等待loadedmetadata事件');
        await new Promise<void>((resolve) => {
          const handler = () => {
            video.removeEventListener('loadedmetadata', handler);
            resolve();
          };
          video.addEventListener('loadedmetadata', handler);
          // 如果已经加载过了，立即resolve
          if (video.videoWidth && video.videoHeight) {
            video.removeEventListener('loadedmetadata', handler);
            resolve();
          }
        });
      }

      // 再次检查视频尺寸
      if (!video.videoWidth || !video.videoHeight) {
        throw new Error('无法获取视频尺寸');
      }

      // 使用用户选择的超分倍数
      const scale = anime4kScaleRef.current;

      // 创建输出canvas（显示给用户的）
      outputCanvas = document.createElement('canvas');
      const container = artPlayerRef.current.template.$video.parentElement;

      outputCanvas.width = Math.floor(video.videoWidth * scale); // 确保是整数
      outputCanvas.height = Math.floor(video.videoHeight * scale);

      // 验证outputCanvas尺寸
      console.log('输出Canvas尺寸:', outputCanvas.width, 'x', outputCanvas.height);
      if (!outputCanvas.width || !outputCanvas.height ||
        !isFinite(outputCanvas.width) || !isFinite(outputCanvas.height)) {
        throw new Error(`outputCanvas尺寸无效: ${outputCanvas.width}x${outputCanvas.height}, scale: ${scale}`);
      }

      outputCanvas.style.position = 'absolute';
      outputCanvas.style.top = '0';
      outputCanvas.style.left = '0';
      outputCanvas.style.width = '100%';
      outputCanvas.style.height = '100%';
      outputCanvas.style.objectFit = 'contain';
      outputCanvas.style.cursor = 'pointer';
      outputCanvas.style.zIndex = '1';
      // 确保canvas背景透明，避免Firefox中的渲染问题
      outputCanvas.style.backgroundColor = 'transparent';

      outputCanvas.addEventListener('click', () => {
        if (artPlayerRef.current) {
          artPlayerRef.current.toggle();
        }
      });
      outputCanvas.addEventListener('dblclick', () => {
        if (artPlayerRef.current) {
          artPlayerRef.current.fullscreen = !artPlayerRef.current.fullscreen;
        }
      });

      // 隐藏原始video元素（使用opacity而不是display:none以保持视频解码）
      // Firefox在display:none时可能会停止视频解码，导致黑屏
      video.style.opacity = '0';
      video.style.pointerEvents = 'none';
      video.style.position = 'absolute';
      video.style.zIndex = '-1';

      // 插入outputCanvas到容器
      container.insertBefore(outputCanvas, video);

      // 动态导入 anime4k-webgpu 及对应的模式
      const { ModeA, ModeB, ModeC, ModeAA, ModeBB, ModeCA } = await import('anime4k-webgpu');

      let ModeClass: any;
      const modeName = anime4kModeRef.current;

      switch (modeName) {
        case 'ModeA':
          ModeClass = ModeA;
          break;
        case 'ModeB':
          ModeClass = ModeB;
          break;
        case 'ModeC':
          ModeClass = ModeC;
          break;
        case 'ModeAA':
          ModeClass = ModeAA;
          break;
        case 'ModeBB':
          ModeClass = ModeBB;
          break;
        case 'ModeCA':
          ModeClass = ModeCA;
          break;
        default:
          ModeClass = ModeA;
      }

      // 使用自管理的 WebGPU 渲染器。内部自动处理各浏览器的帧源差异：
      // 直接从 <video> 拷贝（Chrome/Edge），或退回 createImageBitmap 中转（Firefox）。
      console.log('开始初始化Anime4K渲染器...');
      console.log('视频尺寸:', video.videoWidth, 'x', video.videoHeight);
      console.log('输出Canvas尺寸:', outputCanvas.width, 'x', outputCanvas.height);

      const controller = await createAnime4KRenderer({
        video,
        canvas: outputCanvas,
        scale,
        pipelineClass: ModeClass,
      });
      console.log('Anime4K渲染器初始化成功');

      anime4kRef.current = {
        controller,
        canvas: outputCanvas,
      };
      syncAnime4KCanvasFlip();

      console.log('Anime4K超分已启用，模式:', anime4kModeRef.current, '倍数:', scale);
      if (artPlayerRef.current) {
        artPlayerRef.current.notice.show = `超分已启用 (${anime4kModeRef.current}, ${scale}x)`;
      }
    } catch (err) {
      console.error('初始化Anime4K失败:', err);
      if (artPlayerRef.current) {
        artPlayerRef.current.notice.show = '超分启用失败：' + (err instanceof Error ? err.message : '未知错误');
      }

      // 移除outputCanvas（如果已创建）
      if (outputCanvas && outputCanvas.parentNode) {
        outputCanvas.parentNode.removeChild(outputCanvas);
      }

      // 恢复video显示
      if (artPlayerRef.current?.video) {
        artPlayerRef.current.video.style.opacity = '1';
        artPlayerRef.current.video.style.pointerEvents = 'auto';
        artPlayerRef.current.video.style.position = '';
        artPlayerRef.current.video.style.zIndex = '';
      }
    }
  };

  // 清理Anime4K
  const cleanupAnime4K = async () => {
    if (anime4kRef.current) {
      try {
        // 停止渲染循环并释放 WebGPU 资源
        anime4kRef.current.controller?.stop?.();

        // 移除canvas
        if (anime4kRef.current.canvas && anime4kRef.current.canvas.parentNode) {
          anime4kRef.current.canvas.parentNode.removeChild(anime4kRef.current.canvas);
        }

        anime4kRef.current = null;

        // 恢复原始video显示
        if (artPlayerRef.current?.video) {
          artPlayerRef.current.video.style.opacity = '1';
          artPlayerRef.current.video.style.pointerEvents = 'auto';
          artPlayerRef.current.video.style.position = '';
          artPlayerRef.current.video.style.zIndex = '';
        }

        console.log('Anime4K已清理');
      } catch (err) {
        console.warn('清理Anime4K时出错:', err);
      }
    }
  };

  // 切换Anime4K状态
  const toggleAnime4K = async (enabled: boolean) => {
    try {
      if (enabled) {
        await initAnime4K();
      } else {
        await cleanupAnime4K();
      }
      setAnime4kEnabled(enabled);
      localStorage.setItem('enable_anime4k', String(enabled));
    } catch (err) {
      console.error('切换超分状态失败:', err);
    }
  };

  // 更改Anime4K模式
  const changeAnime4KMode = async (mode: string) => {
    try {
      setAnime4kMode(mode);
      localStorage.setItem('anime4k_mode', mode);

      if (anime4kEnabledRef.current) {
        await cleanupAnime4K();
        await initAnime4K();
      }
    } catch (err) {
      console.error('更改超分模式失败:', err);
    }
  };

  // 更改Anime4K分辨率倍数
  const changeAnime4KScale = async (scale: number) => {
    try {
      setAnime4kScale(scale);
      localStorage.setItem('anime4k_scale', scale.toString());

      if (anime4kEnabledRef.current) {
        await cleanupAnime4K();
        await initAnime4K();
      }
    } catch (err) {
      console.error('更改超分倍数失败:', err);
    }
  };

  function filterAdsFromM3U8(type: string, m3u8Content: string): string {
    // 尝试使用缓存的自定义去广告代码
    if (customAdFilterCodeRef.current && customAdFilterCodeRef.current.trim()) {
      try {
        // 移除 TypeScript 类型注解，转换为纯 JavaScript
        const jsCode = customAdFilterCodeRef.current
          // 移除函数参数的类型注解：name: type
          .replace(/(\w+)\s*:\s*(string|number|boolean|any|void|never|unknown|object)\s*([,)])/g, '$1$3')
          // 移除函数返回值类型注解：): type {
          .replace(/\)\s*:\s*(string|number|boolean|any|void|never|unknown|object)\s*\{/g, ') {')
          // 移除变量声明的类型注解：const name: type =
          .replace(/(const|let|var)\s+(\w+)\s*:\s*(string|number|boolean|any|void|never|unknown|object)\s*=/g, '$1 $2 =');

        // 创建并执行自定义函数
        const customFunction = new Function('type', 'm3u8Content',
          jsCode + '\nreturn filterAdsFromM3U8(type, m3u8Content);'
        );
        return customFunction(type, m3u8Content);
      } catch (err) {
        console.error('执行自定义去广告代码失败，使用默认规则:', err);
        // 如果自定义代码执行失败，继续使用默认规则
      }
    }

    // 默认去广告规则
    if (!m3u8Content) return '';

    // 广告关键字列表
    const adKeywords = [
      'sponsor',
      '/ad/',
      '/ads/',
      'advert',
      'advertisement',
      '/adjump',
      'redtraffic'
    ];

    // 按行分割M3U8内容
    const lines = m3u8Content.split('\n');
    const filteredLines = [];

    let i = 0;
    while (i < lines.length) {
      const line = lines[i];

      // 跳过 #EXT-X-DISCONTINUITY 标识
      if (line.includes('#EXT-X-DISCONTINUITY')) {
        i++;
        continue;
      }

      // 如果是 EXTINF 行，检查下一行 URL 是否包含广告关键字
      if (line.includes('#EXTINF:')) {
        // 检查下一行 URL 是否包含广告关键字
        if (i + 1 < lines.length) {
          const nextLine = lines[i + 1];
          const containsAdKeyword = adKeywords.some(keyword =>
            nextLine.toLowerCase().includes(keyword.toLowerCase())
          );

          if (containsAdKeyword) {
            // 跳过 EXTINF 行和 URL 行
            i += 2;
            continue;
          }
        }
      }

      // 保留当前行
      filteredLines.push(line);
      i++;
    }

    return filteredLines.join('\n');
  }

  // 跳过片头片尾配置相关函数
  const handleSkipConfigChange = async (newConfig: {
    enable: boolean;
    intro_time: number;
    outro_time: number;
  }) => {
    if (!currentSourceRef.current || !currentIdRef.current) return;

    try {
      setSkipConfig(newConfig);
      if (!newConfig.enable && !newConfig.intro_time && !newConfig.outro_time) {
        await deleteSkipConfig(currentSourceRef.current, currentIdRef.current);

        // 安全地更新播放器设置，仅在播放器存在时执行
        if (artPlayerRef.current && artPlayerRef.current.setting) {
          try {
            artPlayerRef.current.setting.update({
              name: '跳过片头片尾',
              html: '跳过片头片尾',
              switch: skipConfigRef.current.enable,
              onSwitch: function (item: any) {
                const newConfig = {
                  ...skipConfigRef.current,
                  enable: !item.switch,
                };
                handleSkipConfigChange(newConfig);
                return !item.switch;
              },
            });
            artPlayerRef.current.setting.update({
              name: '跳过配置',
              html: '跳过配置',
              icon: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="5" cy="12" r="2" fill="#ffffff"/><path d="M9 12L15 12" stroke="#ffffff" stroke-width="2"/><circle cx="19" cy="12" r="2" fill="#ffffff"/></svg>',
              tooltip:
                skipConfigRef.current.intro_time === 0 && skipConfigRef.current.outro_time === 0
                  ? '设置跳过配置'
                  : `片头: ${formatTime(skipConfigRef.current.intro_time)} | 片尾: ${formatTime(Math.abs(skipConfigRef.current.outro_time))}`,
            });
          } catch (settingErr) {
            console.warn('更新播放器设置失败:', settingErr);
          }
        }
      } else {
        await saveSkipConfig(
          currentSourceRef.current,
          currentIdRef.current,
          newConfig
        );
      }
      console.log('跳过片头片尾配置已保存:', newConfig);
    } catch (err) {
      console.error('保存跳过片头片尾配置失败:', err);
    }
  };

  const formatTime = (seconds: number): string => {
    if (seconds === 0) return '00:00';

    const hours = Math.floor(seconds / 3600);
    const minutes = Math.floor((seconds % 3600) / 60);
    const remainingSeconds = Math.round(seconds % 60);

    if (hours === 0) {
      // 不到一小时，格式为 00:00
      return `${minutes.toString().padStart(2, '0')}:${remainingSeconds
        .toString()
        .padStart(2, '0')}`;
    } else {
      // 超过一小时，格式为 00:00:00
      return `${hours.toString().padStart(2, '0')}:${minutes
        .toString()
        .padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`;
    }
  };

  // 创建自定义 HLS loader 的工厂函数
  const createCustomHlsLoader = (HlsLib: any) => {
    return class CustomHlsJsLoader extends HlsLib.DefaultConfig.loader {
      constructor(config: any) {
        super(config);
        const load = this.load.bind(this);
        this.load = function (context: any, config: any, callbacks: any) {
          // 拦截manifest和level请求
          if (
            (context as any).type === 'manifest' ||
            (context as any).type === 'level'
          ) {
            const onSuccess = callbacks.onSuccess;
            callbacks.onSuccess = function (
              response: any,
              stats: any,
              context: any
            ) {
              // 如果是m3u8文件，处理内容以移除广告分段
              if (response.data && typeof response.data === 'string') {
                // 过滤掉广告段 - 实现更精确的广告过滤逻辑
                response.data = filterAdsFromM3U8(
                  currentSourceRef.current,
                  response.data
                );
              }
              return onSuccess(response, stats, context, null);
            };
          }
          // 执行原始load方法
          load(context, config, callbacks);
        };
      }
    };
  };

  // 当集数索引变化时自动更新视频地址
  useEffect(() => {
    updateVideoUrl(detail, currentEpisodeIndex);
  }, [detail, currentEpisodeIndex]);

  // 进入页面时直接获取全部源信息
  useEffect(() => {
    const fetchSourceDetail = async (
      source: string,
      id: string,
      title: string,
      fileNameParam?: string
    ): Promise<SearchResult[]> => {
      try {
        let url = appendSpecialSourceParam(`/api/source-detail?source=${source}&id=${id}&title=${encodeURIComponent(title)}`);
        // 如果有fileName参数（小雅源），添加到URL
        if (fileNameParam) {
          url += `&fileName=${encodeURIComponent(fileNameParam)}`;
        }
        const detailResponse = await fetch(url);
        if (!detailResponse.ok) {
          throw new Error('获取视频详情失败');
        }
        const detailData = (await detailResponse.json()) as SearchResult;
        const sourcesWithCorrections = applyCorrectionsToSources([detailData]);
        setAvailableSources(sourcesWithCorrections);
        return sourcesWithCorrections;
      } catch (err) {
        console.error('获取视频详情失败:', err);
        return [];
      } finally {
        setSourceSearchLoading(false);
      }
    };

    // 规范化标题用于聚合（去除特殊符号、括号、空格和全角空格）
    const normalizeTitle = (title: string) => {
      return title
        .replace(/[\s\u3000]/g, '') // 去除空格和全角空格
        .replace(/[()（）[\]【】{}「」『』<>《》]/g, '') // 去除各种括号
        .replace(/[^\w\u4e00-\u9fa5]/g, ''); // 去除特殊符号，保留字母、数字、下划线和中文
    };

    // 辅助函数：获取视频类型
    const getType = (item: SearchResult): 'movie' | 'tv' => {
      // 1. Emby 和 OpenList 源：使用 type_name（基于 TMDB，最可靠）
      if (item.source === 'emby' || item.source?.startsWith('emby_') || item.source === 'openlist') {
        return item.type_name === '电影' ? 'movie' : 'tv';
      }

      // 2. API 采集源：综合判断
      const typeName = item.type_name?.toLowerCase() || '';

      // 2.1 明确包含"电影"或"movie"或"片"的，判断为电影
      if (typeName.includes('电影') || typeName.includes('movie') ||
        typeName.endsWith('片') && !typeName.includes('动漫')) {
        return 'movie';
      }

      // 2.2 包含"剧"、"动漫"、"综艺"等关键词的，判断为剧集
      if (typeName.includes('剧') || typeName.includes('动漫') ||
        typeName.includes('综艺') || typeName.includes('anime')) {
        return 'tv';
      }

      // 2.3 检查 episodes_titles：如果包含"第X集"，判断为剧集
      if (item.episodes_titles && item.episodes_titles.length > 0) {
        const firstTitle = item.episodes_titles[0] || '';
        if (/第\d+集|第\d+话|EP?\d+/i.test(firstTitle)) {
          return 'tv';
        }
      }

      // 2.4 兜底：使用 episodes.length（最不可靠）
      return item.episodes.length === 1 ? 'movie' : 'tv';
    };


    const buildFallbackRecommendations = (items: SearchResult[], query: string): PlayFallbackRecommendation[] => {
      const typedItems = searchType ? items.filter((item) => getType(item) === searchType) : items;
      const preliminaryMap = new Map<string, SearchResult[]>();

      typedItems.forEach((item) => {
        const preliminaryKey = `${normalizeTitle(item.title).toLowerCase()}-${getType(item)}`;
        const group = preliminaryMap.get(preliminaryKey) || [];
        group.push(item);
        preliminaryMap.set(preliminaryKey, group);
      });

      const finalRecommendations: PlayFallbackRecommendation[] = [];

      preliminaryMap.forEach((group, preliminaryKey) => {
        const withYear = new Map<string, SearchResult[]>();
        const withoutYear: SearchResult[] = [];

        group.forEach((item) => {
          if (item.year && item.year.trim() !== '' && item.year !== 'unknown' && /^\d{4}$/.test(item.year)) {
            const yearGroup = withYear.get(item.year) || [];
            yearGroup.push(item);
            withYear.set(item.year, yearGroup);
          } else {
            withoutYear.push(item);
          }
        });

        const emitGroup = (groupKey: string, mergedGroup: SearchResult[]) => {
          const sourceNames = Array.from(new Set(mergedGroup.map((item) => item.source_name).filter(Boolean)));
          const episodeCountMap = new Map<number, number>();
          const doubanCountMap = new Map<number, number>();

          mergedGroup.forEach((item) => {
            const episodeCount = item.episodes?.length || 0;
            if (episodeCount > 0) {
              episodeCountMap.set(episodeCount, (episodeCountMap.get(episodeCount) || 0) + 1);
            }
            if (item.douban_id && item.douban_id > 0) {
              doubanCountMap.set(item.douban_id, (doubanCountMap.get(item.douban_id) || 0) + 1);
            }
          });

          let episodes = 0;
          let episodeVotes = 0;
          episodeCountMap.forEach((votes, count) => {
            if (votes > episodeVotes) {
              episodeVotes = votes;
              episodes = count;
            }
          });

          let doubanId: number | undefined;
          let doubanVotes = 0;
          doubanCountMap.forEach((votes, id) => {
            if (votes > doubanVotes) {
              doubanVotes = votes;
              doubanId = id;
            }
          });

          const representative = mergedGroup.slice().sort((a, b) => {
            const aPoster = a.poster ? 1 : 0;
            const bPoster = b.poster ? 1 : 0;
            if (bPoster !== aPoster) return bPoster - aPoster;
            return (b.weight ?? 0) - (a.weight ?? 0);
          })[0];

          finalRecommendations.push({
            key: groupKey,
            item: representative,
            episodes: episodes || undefined,
            sourceNames,
            doubanId,
          });
        };

        if (withYear.size > 0) {
          withYear.forEach((yearGroup, year) => {
            emitGroup(`${preliminaryKey}-${year}`, [...yearGroup, ...withoutYear]);
          });
        } else if (withoutYear.length > 0) {
          emitGroup(`${preliminaryKey}-unknown`, withoutYear);
        }
      });

      const normalizedQuery = normalizeTitle(query).toLowerCase();

      return finalRecommendations
        .sort((a, b) => {
          const aContains = normalizeTitle(a.item.title).toLowerCase().includes(normalizedQuery) ? 1 : 0;
          const bContains = normalizeTitle(b.item.title).toLowerCase().includes(normalizedQuery) ? 1 : 0;
          if (bContains !== aContains) return bContains - aContains;
          if (b.sourceNames.length !== a.sourceNames.length) return b.sourceNames.length - a.sourceNames.length;
          return (b.item.weight ?? 0) - (a.item.weight ?? 0);
        })
        .slice(0, 12);
    };

    const readSearchCache = (query: string): SearchCachePayload | null => {
      if (typeof window === 'undefined' || !query.trim()) {
        return null;
      }

      try {
        const cacheKey = `search_cache_${query.trim()}${isSpecialSourcesEnabledOnDevice() ? '_special' : ''}`;
        const cached = sessionStorage.getItem(cacheKey);
        if (!cached) return null;

        const parsed = JSON.parse(cached) as SearchCachePayload;
        if (
          (parsed?.status === 'complete' || parsed?.status === 'partial') &&
          Array.isArray(parsed.results)
        ) {
          return parsed;
        }
      } catch (error) {
        console.error('[Play] 读取缓存失败:', error);
      }
      return null;
    };

    const writeCompleteSearchCache = (query: string, results: SearchResult[]) => {
      if (typeof window === 'undefined' || !query.trim()) return;

      try {
        const cacheKey = `search_cache_${query.trim()}${isSpecialSourcesEnabledOnDevice() ? '_special' : ''}`;
        const payload: SearchCachePayload = {
          status: 'complete',
          results,
          query: query.trim(),
          updatedAt: Date.now(),
        };
        sessionStorage.setItem(cacheKey, JSON.stringify(payload));
      } catch (error) {
        console.error('[Play] 写入缓存失败:', error);
      }
    };

    const filterSourcesForCurrentVideo = (items: SearchResult[]): SearchResult[] => {
      return items.filter(
        (result: SearchResult) =>
          normalizeTitle(result.title).toLowerCase() ===
          normalizeTitle(videoTitleRef.current).toLowerCase() &&
          (videoYearRef.current
            ? result.year.toLowerCase() === videoYearRef.current.toLowerCase() ||
              !result.year ||
              result.year.trim() === '' ||
              result.year === 'unknown' ||
              !/^\d{4}$/.test(result.year)
            : true) &&
          (searchType
            ? getType(result) === searchType
            : true)
      );
    };

    const fetchSourcesData = async (query: string): Promise<SearchResult[]> => {
      // 根据搜索词获取全部源信息
      setHasCompletedSearchRequest(false);
      setFallbackRecommendations([]);

      let fallbackCachedResults: SearchResult[] = [];

      try {
        const cachedPayload = readSearchCache(query);
        if (cachedPayload) {
          console.log(`[Play] 使用 sessionStorage ${cachedPayload.status === 'partial' ? '临时' : '完整'}缓存的搜索结果`);
          setFallbackRecommendations(buildFallbackRecommendations(cachedPayload.results, query));

          const cachedResults = filterSourcesForCurrentVideo(cachedPayload.results);
          fallbackCachedResults = cachedResults;
          setAvailableSources(applyCorrectionsToSources(cachedResults));

          if (cachedPayload.status === 'complete') {
            setHasCompletedSearchRequest(true);
            return cachedResults;
          }
        }

        // 没有缓存或只有 partial 缓存时，重新请求完整搜索结果
        const response = await fetch(
          appendSpecialSourceParam(`/api/search?q=${encodeURIComponent(query.trim())}`)
        );
        if (!response.ok) {
          throw new Error('搜索失败');
        }
        const data = await response.json();
        const allResults = (data.results || []) as SearchResult[];

        writeCompleteSearchCache(query, allResults);
        setHasCompletedSearchRequest(true);
        setFallbackRecommendations(buildFallbackRecommendations(allResults, query));

        const results = filterSourcesForCurrentVideo(allResults);
        setAvailableSources(applyCorrectionsToSources(results));
        return results;
      } catch (err) {
        setSourceSearchError(err instanceof Error ? err.message : '搜索失败');
        if (fallbackCachedResults.length > 0) {
          return fallbackCachedResults;
        }
        setAvailableSources([]);
        return [];
      } finally {
        setSourceSearchLoading(false);
      }
    };

    const getCachedSourcesData = (query: string): SearchResult[] => {
      const cachedPayload = readSearchCache(query);
      if (!cachedPayload) {
        return [];
      }

      return applyCorrectionsToSources(
        filterSourcesForCurrentVideo(cachedPayload.results)
      );
    };

    const initAll = async () => {
      if (currentSource === 'directplay') {
        if (!currentId) {
          setError('缺少直链地址');
          setLoading(false);
          return;
        }

        setLoading(true);
        setLoadingStage('fetching');
        setLoadingMessage('🎬 正在准备直链播放...');

        let directUrl = '';
        try {
          directUrl = base58Decode(currentId);
        } catch (decodeError) {
          console.error('直链地址解析失败:', decodeError);
          setError('直链地址解析失败');
          setLoading(false);
          return;
        }

        const directDetail: SearchResult = {
          id: currentId,
          title: '直链播放',
          poster: '',
          episodes: [directUrl],
          episodes_titles: ['直链'],
          source: 'directplay',
          source_name: '直链',
          class: '',
          year: '',
          desc: '',
          type_name: '',
          douban_id: 0,
        };

        setNeedPrefer(false);
        setCurrentSource('directplay');
        setCurrentId(currentId);
        setVideoTitle('直链播放');
        setVideoYear('');
        setVideoCover('');
        setVideoDoubanId(0);
        setCorrectedDesc('');
        setDetail(directDetail);
        setSourceProxyMode(false);
        setAvailableSources([directDetail]);
        setCurrentEpisodeIndex(0);
        setSourceSearchError(null);
        setSourceSearchLoading(false);
        setBackgroundSourcesLoading(false);

        const newUrl = new URL(window.location.href);
        newUrl.searchParams.set('source', 'directplay');
        newUrl.searchParams.set('id', currentId);
        newUrl.searchParams.delete('prefer');
        newUrl.searchParams.delete('fileName');
        window.history.replaceState({}, '', newUrl.toString());

        setLoadingStage('ready');
        setLoadingMessage('✨ 准备就绪，即将开始播放...');
        setTimeout(() => {
          setLoading(false);
        }, 500);
        return;
      }

      if (!currentSource && !currentId && !videoTitle && !searchTitle) {
        setError('缺少必要参数');
        setLoading(false);
        return;
      }
      setLoading(true);
      setLoadingStage(currentSource && currentId ? 'fetching' : 'searching');
      setLoadingMessage(
        currentSource && currentId
          ? '🎬 正在获取视频详情...'
          : '🔍 正在搜索播放源...'
      );

      // 如果已经有了source和id，优先通过单个详情接口快速获取
      let detailData: SearchResult | null = null;
      let sourcesInfo: SearchResult[] = [];

      if (currentSource && currentId) {
        const cachedSources = getCachedSourcesData(searchTitle || videoTitle);
        const cachedTarget = cachedSources.find(
          (source) => source.source === currentSource && source.id === currentId
        );

        if (cachedTarget?.episodes?.length) {
          detailData = cachedTarget;
          sourcesInfo = cachedSources;
          setAvailableSources(cachedSources);
          setSourceSearchLoading(false);
        } else {
          // 先快速获取当前源的详情
          try {
            // currentSource 已经是完整格式（如 'emby_wumei'）
            // 如果是小雅源且有fileName参数，传递给API
            const currentSourceDetail = await fetchSourceDetail(
              currentSource,
              currentId,
              searchTitle || videoTitle,
              currentSource === 'xiaoya' ? fileName : undefined
            );
            if (currentSourceDetail.length > 0) {
              detailData = currentSourceDetail[0];
              sourcesInfo = currentSourceDetail;
            }
          } catch (err) {
            console.error('获取当前源详情失败:', err);
          }
        }

        // 异步获取其他源信息，不阻塞播放
        setBackgroundSourcesLoading(true);
        fetchSourcesData(searchTitle || videoTitle).then((sources) => {
          // 合并当前源和搜索到的其他源
          const allSources = [...sourcesInfo];
          sources.forEach((source) => {
            // 避免重复添加当前源
            if (!(source.source === currentSource && source.id === currentId)) {
              allSources.push(source);
            }
          });
          setAvailableSources(applyCorrectionsToSources(allSources));
          setBackgroundSourcesLoading(false);
        }).catch((err) => {
          console.error('异步获取其他源失败:', err);
          setBackgroundSourcesLoading(false);
        });
      } else {
        // 没有source和id，正常搜索流程
        sourcesInfo = await fetchSourcesData(searchTitle || videoTitle);
      }

      if (!detailData && sourcesInfo.length === 0) {
        setError('未找到匹配结果');
        setLoading(false);
        return;
      }

      if (!detailData) {
        detailData = sourcesInfo[0];
      }
      // 指定源和id且无需优选
      if (currentSource && currentId && !needPreferRef.current) {
        const target = sourcesInfo.find(
          (source) => source.source === currentSource && source.id === currentId
        );
        if (target) {
          detailData = target;

          // 这类源统一通过详情接口补全播放数据
          if (isLazyDetailSource(detailData.source) && (!detailData.episodes || detailData.episodes.length === 0)) {
            console.log('[Play] Fetching lazy detail for selected source...');
            // currentSource 已经是完整格式
            const detailSources = await fetchSourceDetail(currentSource, currentId, searchTitle || videoTitle);
            if (detailSources.length > 0) {
              detailData = detailSources[0];
            }
          }
        } else {
          setError('未找到匹配结果');
          setLoading(false);
          return;
        }
      }

      // 未指定源和 id 或需要优选，且开启优选开关
      if (
        (!currentSource || !currentId || needPreferRef.current) &&
        optimizationEnabled
      ) {
        setLoadingStage('preferring');
        setLoadingMessage('⚡ 正在优选最佳播放源...');

        // 过滤掉 openlist、所有 emby 源和 xiaoya 源，它们不参与测速
        const sourcesToTest = sourcesInfo.filter(s => {
          // 检查是否为 openlist
          if (s.source === 'openlist') return false;

          // 检查是否为 emby 源（包括 emby 和 emby_xxx 格式）
          if (s.source === 'emby' || s.source.startsWith('emby_')) return false;

          // 检查是否为 xiaoya 源
          if (s.source === 'xiaoya') return false;

          // 脚本源详情懒加载，不参与测速
          if (s.source.startsWith('script:')) return false;

          return true;
        });

        const excludedSources = sourcesInfo.filter(s =>
          s.source === 'openlist' ||
          s.source === 'emby' ||
          s.source.startsWith('emby_') ||
          s.source === 'xiaoya' ||
          s.source.startsWith('script:')
        );

        if (sourcesToTest.length > 0) {
          detailData = await preferBestSource(sourcesToTest);
        } else if (excludedSources.length > 0) {
          // 如果只有懒加载详情的源，直接使用第一个
          detailData = excludedSources[0];
        } else {
          detailData = sourcesInfo[0];
        }
      }

      console.log(detailData.source, detailData.id);

      // 这类源统一通过详情接口补全播放数据
      if (isLazyDetailSource(detailData.source) && (!detailData.episodes || detailData.episodes.length === 0)) {
        console.log('[Play] Fetching lazy detail after source selection...');
        const detailSources = await fetchSourceDetail(detailData.source, detailData.id, detailData.title || videoTitleRef.current);
        if (detailSources.length > 0) {
          detailData = detailSources[0];
        }
      }

      setNeedPrefer(false);
      // 直接使用 detailData.source（已经是完整格式）
      setCurrentSource(detailData.source);
      setCurrentId(detailData.id);

      // 如果是小雅源，检查并应用纠错信息
      if (detailData.source === 'xiaoya') {
        const correction = getXiaoyaCorrection(detailData.source, detailData.id);
        if (correction) {
          console.log('发现小雅源纠错信息，正在应用...', correction);
          detailData = applyCorrection(detailData, correction);
          // 同时设置纠错后的描述
          if (correction.overview) {
            setCorrectedDesc(correction.overview);
          }
        }
      }

      // 更新所有相关状态（在应用纠错信息之后）
      setVideoYear(detailData.year);
      setVideoTitle(detailData.title || videoTitleRef.current);
      setVideoCover(detailData.poster);
      setVideoDoubanId(detailData.douban_id || 0);

      setDetail(detailData);
      setSourceProxyMode(detailData.proxyMode || false); // 从 detail 数据中读取代理模式
      if (currentEpisodeIndex >= detailData.episodes.length) {
        setCurrentEpisodeIndex(0);
      }

      // 规范URL参数
      const newUrl = new URL(window.location.href);
      newUrl.searchParams.set('source', detailData.source);
      newUrl.searchParams.set('id', detailData.id);
      newUrl.searchParams.set('year', detailData.year);
      newUrl.searchParams.set('title', detailData.title);
      newUrl.searchParams.delete('prefer');
      // 只有当元数据不是从文件获取时，才删除fileName参数
      if (detailData.metadataSource !== 'file') {
        newUrl.searchParams.delete('fileName');
      }
      window.history.replaceState({}, '', newUrl.toString());

      setLoadingStage('ready');
      setLoadingMessage('✨ 准备就绪，即将开始播放...');

      // 加载播放记录
      try {
        const detailEpisodeProgressContentKey = buildEpisodeProgressContentKey({
          doubanId: detailData.douban_id,
          tmdbId: detailData.tmdb_id,
          title: initialEpisodeProgressTitle,
          year: initialEpisodeProgressYear,
          searchType,
        });
        const allRecords = await getAllPlayRecords();
        const key = generateStorageKey(detailData.source, detailData.id);
        const record = allRecords[key];

        // 确定初始集数索引
        let initialIndex = 0;
        let shouldResumeTime = false;

        if (record) {
          // 有播放记录
          const recordIndex = record.index - 1;
          const recordTime = record.play_time;

          // 如果有initialEpisodeIndex（用户从文件点击进入）
          if (detailData.initialEpisodeIndex !== undefined) {
            // 如果播放记录的集数和点击的文件集数一致，则使用播放记录的时间
            if (recordIndex === detailData.initialEpisodeIndex) {
              initialIndex = recordIndex;
              shouldResumeTime = true;
              resumeTimeRef.current = recordTime;
              console.log('[Play] 播放记录集数与点击文件一致，恢复播放进度:', recordTime);
            } else {
              // 否则使用点击的文件集数，从头开始播放
              initialIndex = detailData.initialEpisodeIndex;
              const localEpisodeTime = loadLocalEpisodeProgress(
                detailEpisodeProgressContentKey,
                initialIndex
              );
              resumeTimeRef.current = localEpisodeTime;
              console.log('[Play] 使用点击的文件集数:', initialIndex);
            }
          } else {
            // 没有initialEpisodeIndex，使用播放记录
            initialIndex = recordIndex;
            shouldResumeTime = true;
            resumeTimeRef.current = recordTime;
            console.log('[Play] 使用播放记录集数:', initialIndex);
          }
        } else {
          // 没有播放记录
          if (detailData.initialEpisodeIndex !== undefined) {
            // 使用点击的文件集数
            initialIndex = detailData.initialEpisodeIndex;
            resumeTimeRef.current = loadLocalEpisodeProgress(
              detailEpisodeProgressContentKey,
              initialIndex
            );
            console.log('[Play] 没有播放记录，使用点击的文件集数:', initialIndex);
          } else {
            // 默认从第0集开始
            initialIndex = 0;
            resumeTimeRef.current = loadLocalEpisodeProgress(
              detailEpisodeProgressContentKey,
              initialIndex
            );
            console.log('[Play] 没有播放记录，从第0集开始');
          }
        }

        // 更新当前选集索引
        if (initialIndex < detailData.episodes.length && initialIndex >= 0) {
          setCurrentEpisodeIndex(initialIndex);
          currentEpisodeIndexRef.current = initialIndex;
        }
      } catch (err) {
        console.error('读取播放记录失败:', err);
      }

      // 短暂延迟让用户看到完成状态
      setTimeout(() => {
        setLoading(false);
      }, 1000);
    };

    initAll();
  }, []);

  // 跳过片头片尾配置处理
  useEffect(() => {
    // 仅在初次挂载时检查跳过片头片尾配置
    const initSkipConfig = async () => {
      if (!currentSource || !currentId) return;

      try {
        const config = await getSkipConfig(currentSource, currentId);
        if (config) {
          setSkipConfig(config);
        }
      } catch (err) {
        console.error('读取跳过片头片尾配置失败:', err);
      }
    };

    initSkipConfig();
  }, []);

  // 监听 URL 参数变化，处理换源和换视频（用于房员跟随房主操作）
  useEffect(() => {
    const urlSource = normalizeNetdiskSource(searchParams.get('source'));
    const urlId = searchParams.get('id');

    // 只在URL参数存在且与当前状态不同时才处理
    if (urlSource && urlId && (urlSource !== currentSource || urlId !== currentId)) {
      // 检查新的source和id是否在可用源列表中
      // 如果 availableSources 还是空的，说明数据还在加载中，不做处理
      if (availableSources.length === 0) {
        return;
      }

      const targetSource = availableSources.find(
        (source) => source.source === urlSource && source.id === urlId
      );

      if (targetSource) {
        // 记录当前播放进度
        const currentPlayTime = artPlayerRef.current?.currentTime || 0;

        // 获取URL中的episode参数
        const episodeParam = searchParams.get('episode');
        const targetEpisode = episodeParam ? parseInt(episodeParam, 10) - 1 : 0;

        // 更新视频源信息（urlSource 已经是完整格式）
        setCurrentSource(urlSource);
        setCurrentId(urlId);
        setVideoTitle(targetSource.title);
        setVideoYear(targetSource.year);
        setVideoCover(targetSource.poster);
        setVideoDoubanId(targetSource.douban_id || 0);
        setDetail(targetSource);
        setSourceProxyMode(targetSource.proxyMode || false); // 从 detail 数据中读取代理模式

        // 更新集数
        if (targetEpisode >= 0 && targetEpisode < targetSource.episodes.length) {
          setCurrentEpisodeIndex(targetEpisode);

          // 如果是同一集,保存播放进度以便恢复
          if (targetEpisode === currentEpisodeIndex && currentPlayTime > 1) {
            resumeTimeRef.current = currentPlayTime;
          } else {
            resumeTimeRef.current = null;
          }
        }
      } else {
        // 如果新源不在可用列表中,强制刷新页面重新加载
        window.location.reload();
      }
    }
  }, [searchParams, currentSource, currentId, availableSources, currentEpisodeIndex]);

  // 监听 detail 和 currentEpisodeIndex 变化，自动获取视频信息
  useEffect(() => {
    if (detail && detail.episodes && detail.episodes.length > 0) {
      fetchCurrentSourceVideoInfo();
    }
  }, [detail, currentEpisodeIndex]);

  // 监听 detail 和 currentEpisodeIndex 变化，动态更新字幕
  useEffect(() => {
    if (!artPlayerRef.current || !detail) return;

    revokeCustomSubtitle();
    const currentSubtitles = (detail.subtitles?.[currentEpisodeIndex] || []) as SourceSubtitleItem[];

    // 如果有字幕，更新播放器字幕
    if (currentSubtitles.length > 0) {
      currentSubtitleLabelRef.current = currentSubtitles[0].label;
      void switchSourceSubtitle(currentSubtitles[0]).catch((error) => {
        console.warn('[Subtitle] 源字幕加载失败:', error);
        artPlayerRef.current.subtitle.show = false;
        currentSubtitleLabelRef.current = '关闭';
      });
    } else {
      artPlayerRef.current.subtitle.show = false;
      currentSubtitleLabelRef.current = '关闭';
    }

    updateSubtitleSetting();
  }, [detail, currentEpisodeIndex]);

  const getSourceSwitchResumeTime = async (
    episodeIndex: number,
    currentPlayTime: number
  ): Promise<number | null> => {
    if (currentPlayTime > 1) {
      return currentPlayTime;
    }

    if (!currentSourceRef.current || !currentIdRef.current) {
      return null;
    }

    try {
      const allRecords = await getAllPlayRecords();
      const currentRecord = allRecords[
        generateStorageKey(currentSourceRef.current, currentIdRef.current)
      ];

      if (
        currentRecord &&
        currentRecord.index - 1 === episodeIndex &&
        currentRecord.play_time > 1
      ) {
        return currentRecord.play_time;
      }
    } catch (error) {
      console.warn('[Play] Failed to read source-switch play record:', error);
    }

    return loadLocalEpisodeProgress(
      episodeProgressContentKey,
      episodeIndex
    );
  };

  // 处理换源
  const handleSourceChange = async (
    newSource: string,
    newId: string,
    newTitle: string
  ) => {
    try {
      // 标记正在换源，防止 title 变化触发页面刷新
      isSourceChangingRef.current = true;

      // 显示换源加载状态
      setVideoLoadingStage('sourceChanging');
      setIsVideoLoading(true);
      setVideoError(null);
      setCorsFailedUrl(null);
      proxyAttemptedRef.current = false;

      // 记录当前播放进度（仅在同一集数切换时恢复）
      const currentPlayTime = artPlayerRef.current?.currentTime || 0;
      console.log('换源前当前播放时间:', currentPlayTime);

      // 清除并设置下一个跳过片头片尾配置
      if (currentSourceRef.current && currentIdRef.current) {
        try {
          await deleteSkipConfig(
            currentSourceRef.current,
            currentIdRef.current
          );
          await saveSkipConfig(newSource, newId, skipConfigRef.current);
        } catch (err) {
          console.error('清除跳过片头片尾配置失败:', err);
        }
      }

      let newDetail: SearchResult | undefined = availableSources.find(
        (source) => source.source === newSource && source.id === newId
      );
      if (!newDetail) {
        setError('未找到匹配结果');
        return;
      }

      // 这类源统一通过详情接口补全播放数据
      if (isLazyDetailSource(newDetail.source) && (!newDetail.episodes || newDetail.episodes.length === 0)) {
        try {
          const detailResponse = await fetch(appendSpecialSourceParam(`/api/source-detail?source=${newSource}&id=${newId}&title=${encodeURIComponent(newTitle)}`));
          if (detailResponse.ok) {
            const detailData = await detailResponse.json();
            if (!detailData) {
              throw new Error('获取的详情数据为空');
            }
            newDetail = detailData;
          } else {
            throw new Error('获取视频详情失败');
          }
        } catch (err) {
          console.error('获取视频详情失败:', err);
          setIsVideoLoading(false);
          setError('获取视频详情失败，请重试');
          return;
        }
      }

      // 再次确认 newDetail 不为空（类型守卫）
      if (!newDetail) {
        setError('视频详情数据无效');
        return;
      }

      const newEpisodeProgressContentKey = buildEpisodeProgressContentKey({
        doubanId: newDetail.douban_id,
        tmdbId: newDetail.tmdb_id,
        title: initialEpisodeProgressTitle,
        year: initialEpisodeProgressYear,
        searchType,
      });

      // 尝试跳转到当前正在播放的集数
      const previousEpisodeIndex = currentEpisodeIndexRef.current;
      const previousSource = currentSourceRef.current;
      const previousId = currentIdRef.current;
      let targetIndex = previousEpisodeIndex;

      // 如果新源的集数跟旧源的集数不一致，清除当前剧集的所有弹幕缓存
      const oldEpisodeCount = detail?.episodes?.length || 0;
      const newEpisodeCount = newDetail.episodes?.length || 0;
      if (oldEpisodeCount > 0 && newEpisodeCount > 0 && oldEpisodeCount !== newEpisodeCount) {
        const titleForCache = detail?.title || videoTitle;
        console.log(`换源集数不一致 (${oldEpisodeCount} -> ${newEpisodeCount})，清除弹幕缓存: ${titleForCache}`);
        clearDanmakuCacheByTitle(titleForCache).catch((err) => {
          console.error('清除弹幕缓存失败:', err);
        });
      }

      // 如果当前集数超出新源的范围，则跳转到第一集
      if (!newDetail.episodes || targetIndex >= newDetail.episodes.length) {
        targetIndex = 0;
      }

      const isSameEpisodeSwitch = targetIndex === previousEpisodeIndex;
      const resumeTime = isSameEpisodeSwitch
        ? await getSourceSwitchResumeTime(previousEpisodeIndex, currentPlayTime)
        : loadLocalEpisodeProgress(
            newEpisodeProgressContentKey,
            targetIndex
          );
      resumeTimeRef.current = resumeTime;

      // 更新URL参数（不刷新页面）
      const newUrl = new URL(window.location.href);
      newUrl.searchParams.set('source', newSource);
      newUrl.searchParams.set('id', newId);
      newUrl.searchParams.set('year', newDetail.year);
      newUrl.searchParams.set('title', newDetail.title || newTitle);
      window.history.replaceState({}, '', newUrl.toString());

      // 如果是小雅源，检查并应用纠错信息
      let finalTitle = newDetail.title || newTitle;
      let finalCover = newDetail.poster;
      let finalDesc = '';

      if (newDetail.source === 'xiaoya') {
        const correction = getXiaoyaCorrection(newDetail.source, newDetail.id);
        if (correction) {
          console.log('换源到小雅源，发现纠错信息，正在应用...', correction);
          if (correction.title) {
            finalTitle = correction.title;
          }
          if (correction.posterPath) {
            finalCover = processImageUrl(getTMDBImageUrl(correction.posterPath));
          }
          if (correction.overview) {
            finalDesc = correction.overview;
          }
          // 应用纠错信息到 newDetail
          newDetail = applyCorrection(newDetail, correction);
        }
      }

      setVideoTitle(finalTitle);
      setVideoYear(newDetail.year);
      setVideoCover(finalCover);
      setCorrectedDesc(finalDesc);
      setVideoDoubanId(newDetail.douban_id || 0);

      if (isSameEpisodeSwitch && resumeTime && resumeTime > 1) {
        const currentDuration = artPlayerRef.current?.duration || 0;
        saveLocalEpisodeProgress(
          newEpisodeProgressContentKey,
          targetIndex,
          resumeTime,
          currentDuration
        );

        try {
          const migratedRecord = {
            title: finalTitle,
            source_name: newDetail.source_name || '',
            year: newDetail.year || '',
            cover: finalCover || '',
            index: targetIndex + 1,
            total_episodes: newDetail.episodes?.length || 1,
            play_time: Math.floor(resumeTime),
            total_time: Math.floor(currentDuration),
            save_time: Date.now(),
            search_title: searchTitle,
          };

          if (previousSource && previousId) {
            await migratePlayRecord(
              previousSource,
              previousId,
              newSource,
              newId,
              migratedRecord
            );
          } else {
            await savePlayRecord(newSource, newId, migratedRecord);
          }
        } catch (error) {
          console.warn('[Play] Failed to migrate source-switch play record:', error);
        }
      }

      // newSource 已经是完整格式
      setCurrentSource(newSource);
      setCurrentId(newId);
      setDetail(newDetail);
      setSourceProxyMode(newDetail.proxyMode || false); // 从 detail 数据中读取代理模式
      setCurrentEpisodeIndex(targetIndex);
    } catch (err) {
      // 隐藏换源加载状态
      setIsVideoLoading(false);
      setError(err instanceof Error ? err.message : '换源失败');
    }
  };

  useEffect(() => {
    document.addEventListener('keydown', handleKeyboardShortcuts);
    return () => {
      document.removeEventListener('keydown', handleKeyboardShortcuts);
    };
  }, []);

  // ---------------------------------------------------------------------------
  // 集数切换
  // ---------------------------------------------------------------------------
  const saveCurrentEpisodeLocalProgressOnly = () => {
    if (!artPlayerRef.current) {
      return;
    }

    const currentTime = artPlayerRef.current.currentTime || 0;
    const duration = artPlayerRef.current.duration || 0;

    if (currentTime < 1 || !duration) {
      return;
    }

    try {
      saveLocalEpisodeProgress(
        episodeProgressContentKey,
        currentEpisodeIndexRef.current,
        currentTime,
        duration
      );
    } catch (error) {
      console.warn('[Play] Failed to save local episode progress before episode switch:', error);
    }
  };

  const primeEpisodeResumeState = (targetEpisodeIndex: number) => {
    if (!currentSourceRef.current || !currentIdRef.current) {
      resumeTimeRef.current = null;
      return;
    }

    // 切集路径只读取本地单集进度，避免阻塞式读取全局播放记录/远端数据库。
    // 首次进入页面的全局播放记录恢复逻辑保持不变。
    resumeTimeRef.current = loadLocalEpisodeProgress(
      episodeProgressContentKey,
      targetEpisodeIndex
    );
  };

  const prepareEpisodeSwitch = () => {
    if (artPlayerRef.current) {
      lastPlaybackRateRef.current =
        artPlayerRef.current.playbackRate || lastPlaybackRateRef.current;
      lastVolumeRef.current =
        artPlayerRef.current.volume || lastVolumeRef.current;
      playbackRateRestoreWindowUntilRef.current = Date.now() + 8000;

      saveCurrentEpisodeLocalProgressOnly();
    }

    suppressPlayRecordJumpOnNextEpisodeChangeRef.current = true;
    setVideoLoadingStage('episodeChanging');
    setIsVideoLoading(true);
    setVideoError(null);
  };

  // 处理集数切换
  const handleEpisodeChange = async (episodeNumber: number) => {
    if (episodeNumber < 0 || episodeNumber >= totalEpisodes) {
      return;
    }

    if (episodeNumber === currentEpisodeIndexRef.current) {
      return;
    }

    prepareEpisodeSwitch();
    primeEpisodeResumeState(episodeNumber);
    setCurrentEpisodeIndex(episodeNumber);
  };

  const handlePreviousEpisode = async () => {
    const d = detailRef.current;
    const idx = currentEpisodeIndexRef.current;
    if (d && d.episodes && idx > 0) {
      const targetIndex = idx - 1;
      prepareEpisodeSwitch();
      primeEpisodeResumeState(targetIndex);
      setCurrentEpisodeIndex(targetIndex);
    }
  };

  // 检查集数是否被过滤
  const isEpisodeFilteredByTitle = (title: string): boolean => {
    return isEpisodeHiddenByFilter(title, episodeFilterConfigRef.current);
  };

  const handleNextEpisode = async () => {
    const d = detailRef.current;
    const idx = currentEpisodeIndexRef.current;

    if (!d || !d.episodes || idx >= d.episodes.length - 1) {
      return;
    }

    // 查找下一个未被过滤的集数
    let nextIdx = idx + 1;
    while (nextIdx < d.episodes.length) {
      const episodeTitle = d.episodes_titles?.[nextIdx];
      const isFiltered = episodeTitle && isEpisodeFilteredByTitle(episodeTitle);

      if (!isFiltered) {
        prepareEpisodeSwitch();
        primeEpisodeResumeState(nextIdx);
        setCurrentEpisodeIndex(nextIdx);
        return;
      }
      nextIdx++;
    }

    // 所有后续集数都被屏蔽
    if (artPlayerRef.current) {
      artPlayerRef.current.notice.show = '后续集数均已屏蔽';
      artPlayerRef.current.pause();
    }
  };

  // ---------------------------------------------------------------------------
  // 弹幕处理函数
  // ---------------------------------------------------------------------------

  /**
   * 智能过滤弹幕源：优先匹配年份和标题完全相同的源
   * @param animes 所有搜索到的弹幕源
   * @param videoTitle 视频标题
   * @param videoYear 视频年份（如 "2024"）
   * @returns 过滤后的弹幕源列表
   */
  const filterDanmakuSources = (
    animes: DanmakuAnime[],
    videoTitle: string,
    videoYear?: string
  ): DanmakuAnime[] => {
    if (animes.length <= 1) return animes;

    // 标准化标题：移除空格、全角转半角
    const normalizeTitle = (title: string): string => {
      return title
        .replace(/\s+/g, '')
        .replace(/[\uff01-\uff5e]/g, (ch) => String.fromCharCode(ch.charCodeAt(0) - 0xfee0))
        .toLowerCase();
    };

    // 从日期字符串中提取年份（如 "2024-01" -> "2024"）
    const extractYear = (dateStr?: string): string | null => {
      if (!dateStr) return null;
      const match = dateStr.match(/^(\d{4})/);
      return match ? match[1] : null;
    };

    const normalizedVideoTitle = normalizeTitle(videoTitle);

    // 第一步：尝试同时匹配年份和标题
    if (videoYear) {
      const exactMatches = animes.filter((anime) => {
        const animeYear = extractYear(anime.startDate);
        const normalizedAnimeTitle = normalizeTitle(anime.animeTitle);
        return animeYear === videoYear && normalizedAnimeTitle === normalizedVideoTitle;
      });

      if (exactMatches.length > 0) {
        console.log(`[弹幕匹配] 找到 ${exactMatches.length} 个年份和标题完全匹配的源`);
        return exactMatches;
      }
    }

    // 第二步：如果没有完全匹配，尝试只匹配标题
    const titleMatches = animes.filter((anime) => {
      const normalizedAnimeTitle = normalizeTitle(anime.animeTitle);
      return normalizedAnimeTitle === normalizedVideoTitle;
    });

    if (titleMatches.length > 0) {
      console.log(`[弹幕匹配] 找到 ${titleMatches.length} 个标题完全匹配的源`);
      return titleMatches;
    }

    // 第三步：如果只匹配年份
    if (videoYear) {
      const yearMatches = animes.filter((anime) => {
        const animeYear = extractYear(anime.startDate);
        return animeYear === videoYear;
      });

      if (yearMatches.length > 0) {
        console.log(`[弹幕匹配] 找到 ${yearMatches.length} 个年份匹配的源`);
        return yearMatches;
      }
    }

    // 如果都没有匹配，返回所有源
    console.log('[弹幕匹配] 未找到精确匹配，返回所有源');
    return animes;
  };

  // 匹配弹幕集数：优先根据集数标题中的数字匹配，降级到索引匹配
  const matchDanmakuEpisode = (
    currentEpisodeIndex: number,
    danmakuEpisodes: Array<{ episodeId: number; episodeTitle: string }>,
    videoEpisodeTitle?: string
  ) => {
    if (!danmakuEpisodes.length) return null;

    const extractEpisodeNumber = (title: string): number | null => {
      if (!title) return null;

      // 优先匹配 Emby 格式：S01E01, S02E09 等
      const embyMatch = title.match(/[Ss]\d+[Ee](\d+)/);
      if (embyMatch) {
        return parseInt(embyMatch[1], 10);
      }

      // 降级到原本的策略：纯数字或"第X集/话"格式
      const match = title.match(/^(\d+)$|第?\s*(\d+)\s*[集话話]?/);
      return match ? parseInt(match[1] || match[2], 10) : null;
    };

    if (videoEpisodeTitle) {
      const episodeNum = extractEpisodeNumber(videoEpisodeTitle);
      if (episodeNum !== null) {
        for (const ep of danmakuEpisodes) {
          const danmakuNum = extractEpisodeNumber(ep.episodeTitle);
          if (danmakuNum === episodeNum) {
            console.log(`[弹幕匹配] 根据集数标题匹配: ${videoEpisodeTitle} -> ${ep.episodeTitle}`);
            return ep;
          }
        }
      }
    }

    const index = Math.min(currentEpisodeIndex, danmakuEpisodes.length - 1);
    console.log(`[弹幕匹配] 降级到索引匹配: 索引 ${currentEpisodeIndex} -> ${danmakuEpisodes[index].episodeTitle}`);
    return danmakuEpisodes[index];
  };

  // 加载弹幕到播放器
  const loadDanmaku = async (episodeId: number, metadata?: {
    animeId?: number;
    animeTitle?: string;
    episodeTitle?: string;
    searchKeyword?: string;
    danmakuCount?: number;
    bypassCache?: boolean;
  }) => {
    if (!danmakuPluginRef.current) {
      console.warn('弹幕插件未初始化');
      return;
    }

    // 防止重复加载同一个 episodeId
    if (loadingDanmakuEpisodeIdRef.current === episodeId) {
      console.log(`[弹幕加载] 跳过重复加载: episodeId=${episodeId}`);
      return;
    }

    loadingDanmakuEpisodeIdRef.current = episodeId;
    setDanmakuLoading(true);

    try {
      // 先清空当前弹幕（使用 reset 方法，不触发显示/隐藏事件）
      danmakuPluginRef.current.reset();
      // 强制清空屏幕上的弹幕
      danmakuPluginRef.current.config({ danmuku: [] });
      danmakuPluginRef.current.load();
      setDanmakuCount(0);

      // 获取弹幕数据（使用 title + episodeIndex 缓存）
      const title = videoTitleRef.current;
      const episodeIndex = currentEpisodeIndex;

      console.log(`[弹幕加载] episodeId=${episodeId}, title="${title}", episodeIndex=${episodeIndex}`);

      const comments = await getDanmakuById(
        episodeId,
        title,
        episodeIndex,
        { bypassCache: metadata?.bypassCache === true },
        metadata
      );

      if (comments.length === 0) {
        console.warn('未获取到弹幕数据');
        setDanmakuLoading(false);
        loadingDanmakuEpisodeIdRef.current = null;
        return;
      }

      // 转换弹幕格式
      let danmakuData = convertDanmakuFormat(comments);

      // 手动应用过滤规则（因为缓存的弹幕不会经过播放器的 filter 函数）
      const filterConfig = danmakuFilterConfigRef.current;
      if (filterConfig && filterConfig.rules.length > 0) {
        const originalCount = danmakuData.length;
        danmakuData = danmakuData.filter((danmu) => {
          for (const rule of filterConfig.rules) {
            // 跳过未启用的规则
            if (!rule.enabled) continue;

            try {
              if (rule.type === 'normal') {
                // 普通模式：字符串包含匹配
                if (danmu.text.includes(rule.keyword)) {
                  return false;
                }
              } else if (rule.type === 'regex') {
                // 正则模式：正则表达式匹配
                if (new RegExp(rule.keyword).test(danmu.text)) {
                  return false;
                }
              }
            } catch (e) {
              console.error('弹幕过滤规则错误:', e);
            }
          }
          return true;
        });
        const filteredCount = originalCount - danmakuData.length;
        if (filteredCount > 0) {
          console.log(`弹幕过滤: 原始 ${originalCount} 条，过滤 ${filteredCount} 条，剩余 ${danmakuData.length} 条`);
        }
      }

      // 应用弹幕数量限制
      const maxCount = typeof window !== 'undefined' ? parseInt(localStorage.getItem('danmakuMaxCount') || '0', 10) : 0;
      let calculatedOriginalCount = 0;
      if (maxCount > 0 && danmakuData.length > maxCount) {
        const originalCount = danmakuData.length;
        const step = danmakuData.length / maxCount;
        const limitedData = [];
        for (let i = 0; i < maxCount; i++) {
          limitedData.push(danmakuData[Math.floor(i * step)]);
        }
        danmakuData = limitedData;
        calculatedOriginalCount = originalCount;
        setDanmakuOriginalCount(originalCount);
        console.log(`弹幕数量限制: 原始 ${originalCount} 条，限制到 ${danmakuData.length} 条`);
      } else {
        setDanmakuOriginalCount(0);
      }

      // 加载弹幕到插件，同时应用当前的弹幕设置
      const currentSettings = danmakuSettingsRef.current;
      danmakuPluginRef.current.config({
        danmuku: danmakuData,
        speed: currentSettings.speed,
        opacity: currentSettings.opacity,
        fontSize: currentSettings.fontSize,
        margin: [currentSettings.marginTop, currentSettings.marginBottom],
        synchronousPlayback: currentSettings.synchronousPlayback,
      });
      danmakuPluginRef.current.load();

      // 根据保存的显示状态来决定显示或隐藏弹幕
      const savedDisplayState = loadDanmakuDisplayState();
      if (savedDisplayState === false) {
        danmakuPluginRef.current.hide();
      } else {
        danmakuPluginRef.current.show();
      }

      setDanmakuCount(danmakuData.length);
      console.log(`弹幕加载成功，共 ${danmakuData.length} 条`);

      // 更新当前选择状态，包含弹幕数量
      if (metadata) {
        setCurrentDanmakuSelection({
          animeId: metadata.animeId || 0,
          episodeId: episodeId,
          animeTitle: metadata.animeTitle || '',
          episodeTitle: metadata.episodeTitle || '',
          searchKeyword: metadata.searchKeyword,
          danmakuCount: danmakuData.length,
          danmakuOriginalCount: calculatedOriginalCount > 0 ? calculatedOriginalCount : undefined,
        });
      }

      // 延迟一下让用户看到弹幕数量
      await new Promise((resolve) => setTimeout(resolve, 1500));
    } catch (error) {
      console.error('加载弹幕失败:', error);
      setDanmakuCount(0);
    } finally {
      setDanmakuLoading(false);
      loadingDanmakuEpisodeIdRef.current = null;
    }
  };

  // 预加载下一集弹幕（完全复制 loadDanmakuForCurrentEpisode 的逻辑）
  const preloadNextEpisodeDanmaku = async () => {
    try {
      if (isDirectPlay) return;
      if (isDanmakuAutoLoadDisabled()) return;

      const title = videoTitleRef.current;
      if (!title) {
        return;
      }

      const currentIdx = currentEpisodeIndexRef.current;
      const nextEpisodeIndex = currentIdx + 1;

      // 1. 检查是否有下一集
      const episodes = detailRef.current?.episodes;
      if (!episodes || nextEpisodeIndex >= episodes.length) {
        return;
      }

      // 2. 检查缓存是否已存在
      const cachedData = await getDanmakuFromCache(title, nextEpisodeIndex);
      if (cachedData && cachedData.comments.length > 0) {
        return;
      }

      // 3. 检查是否有手动选择的剧集 ID
      const manualEpisodeId = getManualDanmakuSelection(title, nextEpisodeIndex);
      if (manualEpisodeId) {
        try {
          await getDanmakuById(manualEpisodeId, title, nextEpisodeIndex);
          return;
        } catch (error) {
          // 继续执行后续逻辑
        }
      }

      // 4. 尝试使用保存的动漫ID自动匹配剧集
      const savedAnimeId = getDanmakuAnimeId(title);
      if (savedAnimeId) {
        try {
          const episodesResult = await getEpisodes(savedAnimeId);

          if (episodesResult.success && episodesResult.bangumi.episodes.length > 0) {
            const nextVideoEpTitle = detailRef.current?.episodes_titles?.[nextEpisodeIndex];
            const episode = matchDanmakuEpisode(nextEpisodeIndex, episodesResult.bangumi.episodes, nextVideoEpTitle);

            if (episode) {
              await getDanmakuById(
                episode.episodeId,
                title,
                nextEpisodeIndex,
                undefined,
                {
                  animeId: savedAnimeId,
                  animeTitle: episodesResult.bangumi.animeTitle,
                  episodeTitle: episode.episodeTitle,
                }
              );
              return;
            }
          }
        } catch (error) {
          // 继续执行后续逻辑
        }
      }

      // 5. 执行自动搜索弹幕
      const savedKeyword = getDanmakuSearchKeyword(title);
      const searchKeyword = savedKeyword || title;

      const searchResult = await searchAnime(searchKeyword);
      if (!searchResult.success || searchResult.animes.length === 0) {
        return;
      }

      // 应用智能过滤
      const videoYear = detailRef.current?.year;
      const filteredAnimes = filterDanmakuSources(searchResult.animes, title, videoYear);

      if (filteredAnimes.length === 0) {
        return;
      }

      // 检查是否有记忆的选择
      let selectedAnime = filteredAnimes[0];
      if (filteredAnimes.length > 1) {
        const rememberedIndex = getDanmakuSourceIndex(title);
        if (rememberedIndex !== null && rememberedIndex < filteredAnimes.length) {
          selectedAnime = filteredAnimes[rememberedIndex];
        }
      }

      // 获取剧集列表并匹配
      const episodesResult = await getEpisodes(selectedAnime.animeId);
      if (episodesResult.success && episodesResult.bangumi.episodes.length > 0) {
        const nextVideoEpTitle = detailRef.current?.episodes_titles?.[nextEpisodeIndex];
        const episode = matchDanmakuEpisode(nextEpisodeIndex, episodesResult.bangumi.episodes, nextVideoEpTitle);

        if (episode) {
          await getDanmakuById(
            episode.episodeId,
            title,
            nextEpisodeIndex,
            undefined,
            {
              animeId: selectedAnime.animeId,
              animeTitle: selectedAnime.animeTitle,
              episodeTitle: episode.episodeTitle,
              searchKeyword: searchKeyword,
            }
          );
        }
      }
    } catch (error) {
      // 静默处理失败
    }
  };

  // 处理上传弹幕
  const handleUploadDanmaku = async (comments: DanmakuComment[]) => {
    setDanmakuLoading(true);

    try {
      // 缓存到IndexedDB
      const title = videoTitleRef.current;
      const episodeIndex = currentEpisodeIndexRef.current;
      if (title) {
        const { saveDanmakuToCache } = await import('@/lib/danmaku/cache');
        await saveDanmakuToCache(title, episodeIndex, comments);
      }

      // 转换弹幕格式
      let danmakuData = convertDanmakuFormat(comments);

      // 应用过滤规则
      const filterConfig = danmakuFilterConfigRef.current;
      if (filterConfig && filterConfig.rules.length > 0) {
        danmakuData = danmakuData.filter((danmu) => {
          for (const rule of filterConfig.rules) {
            if (!rule.enabled) continue;
            try {
              if (rule.type === 'normal') {
                if (danmu.text.includes(rule.keyword)) return false;
              } else if (rule.type === 'regex') {
                if (new RegExp(rule.keyword).test(danmu.text)) return false;
              }
            } catch (e) {
              console.error('弹幕过滤规则错误:', e);
            }
          }
          return true;
        });
      }

      // 应用弹幕数量限制
      const maxCount = typeof window !== 'undefined' ? parseInt(localStorage.getItem('danmakuMaxCount') || '0', 10) : 0;
      if (maxCount > 0 && danmakuData.length > maxCount) {
        const originalCount = danmakuData.length;
        const step = danmakuData.length / maxCount;
        const limitedData = [];
        for (let i = 0; i < maxCount; i++) {
          limitedData.push(danmakuData[Math.floor(i * step)]);
        }
        danmakuData = limitedData;
        setDanmakuOriginalCount(originalCount);
        console.log(`弹幕数量限制: 原始 ${originalCount} 条，限制到 ${danmakuData.length} 条`);
      } else {
        setDanmakuOriginalCount(0);
      }

      // 加载弹幕到播放器（使用 reset 方法清空，不触发显示/隐藏事件）
      if (danmakuPluginRef.current) {
        danmakuPluginRef.current.reset();

        const currentSettings = danmakuSettingsRef.current;
        danmakuPluginRef.current.config({
          danmuku: danmakuData,
          speed: currentSettings.speed,
          opacity: currentSettings.opacity,
          fontSize: currentSettings.fontSize,
          margin: [currentSettings.marginTop, currentSettings.marginBottom],
          synchronousPlayback: currentSettings.synchronousPlayback,
        });
        danmakuPluginRef.current.load();

        // 触发自定义事件通知热力图更新
        if (artPlayerRef.current) {
          artPlayerRef.current.emit('danmaku:loaded');
        }

        // 根据保存的显示状态来决定显示或隐藏弹幕
        const savedDisplayState = loadDanmakuDisplayState();
        if (savedDisplayState === false) {
          danmakuPluginRef.current.hide();
        } else {
          danmakuPluginRef.current.show();
        }
      }

      setDanmakuCount(danmakuData.length);
      if (artPlayerRef.current) {
        artPlayerRef.current.notice.show = `上传成功，共 ${danmakuData.length} 条弹幕`;
      }

      await new Promise((resolve) => setTimeout(resolve, 1500));
    } catch (error) {
      console.error('上传弹幕失败:', error);
      if (artPlayerRef.current) {
        artPlayerRef.current.notice.show = '弹幕加载失败';
      }
    } finally {
      setDanmakuLoading(false);
    }
  };

  // 处理弹幕选择
  const handleDanmakuSelect = async (selection: DanmakuSelection, isManual = false) => {
    console.log(`[弹幕选择] isManual=${isManual}, selection:`, selection);
    setCurrentDanmakuSelection(selection);

    // 只有手动选择时才保存到 sessionStorage
    if (isManual) {
      const title = videoTitleRef.current;
      const episodeIndex = currentEpisodeIndexRef.current;
      if (title && episodeIndex >= 0) {
        saveManualDanmakuSelection(title, episodeIndex, selection.episodeId);

        // 保存用户手动选择的动漫ID（用于换集时自动匹配）
        saveDanmakuAnimeId(title, selection.animeId);

        // 保存搜索关键词（如果有的话）
        if (selection.searchKeyword) {
          saveDanmakuSearchKeyword(title, selection.searchKeyword);
          console.log(`[弹幕记忆] 保存手动搜索关键词: ${selection.searchKeyword}`);
        }
      }
    }

    // 加载弹幕，传递元信息
    await loadDanmaku(selection.episodeId, {
      animeId: selection.animeId,
      animeTitle: selection.animeTitle,
      episodeTitle: selection.episodeTitle,
      searchKeyword: selection.searchKeyword,
      danmakuCount: selection.danmakuCount,
      bypassCache: isManual,
    });
  };

  // 处理用户选择弹幕源
  const handleDanmakuSourceSelect = async (selectedAnime: DanmakuAnime, selectedIndex?: number, isManualSearch = false) => {
    setShowDanmakuSourceSelector(false);

    try {
      const title = videoTitleRef.current;
      console.log('[弹幕] 用户选择弹幕源 - 视频:', title, '弹幕源:', selectedAnime.animeTitle);

      // 如果提供了下标，保存到 sessionStorage
      if (selectedIndex !== undefined && title) {
        saveDanmakuSourceIndex(title, selectedIndex);
      }

      // 获取剧集列表
      const episodesResult = await getEpisodes(selectedAnime.animeId);

      if (
        episodesResult.success &&
        episodesResult.bangumi.episodes.length > 0
      ) {
        // 根据当前集数选择对应的弹幕
        const currentEp = currentEpisodeIndexRef.current;
        const videoEpTitle = detailRef.current?.episodes_titles?.[currentEp];
        const episode = matchDanmakuEpisode(currentEp, episodesResult.bangumi.episodes, videoEpTitle);

        if (episode) {
          const selection: DanmakuSelection = {
            animeId: selectedAnime.animeId,
            episodeId: episode.episodeId,
            animeTitle: selectedAnime.animeTitle,
            episodeTitle: episode.episodeTitle,
          };

          // 设置剧集列表
          setDanmakuEpisodesList(episodesResult.bangumi.episodes);

          console.log('用户选择弹幕源:', selection);

          // 通过统一的 handleDanmakuSelect 处理弹幕加载
          // 只有从弹幕面板手动搜索选择时才标记为手动选择
          await handleDanmakuSelect(selection, isManualSearch);
        }
      } else {
        console.warn('未找到剧集信息');
      }
    } catch (error) {
      console.error('加载弹幕失败:', error);
    }
  };

  // 手动重新选择弹幕源（忽略记忆）- 保留供将来使用
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  const _handleReselectDanmakuSource = async () => {
    const title = videoTitleRef.current;
    if (!title) {
      console.warn('视频标题为空，无法搜索弹幕');
      return;
    }

    console.log('[弹幕] 用户手动重新选择弹幕源 - 视频:', title);
    setDanmakuLoading(true);

    try {
      const searchResult = await searchAnime(title);

      if (searchResult.success && searchResult.animes.length > 0) {
        // 应用智能过滤：优先匹配年份和标题
        const videoYear = detailRef.current?.year;
        const filteredAnimes = filterDanmakuSources(
          searchResult.animes,
          title,
          videoYear
        );

        // 如果有多个匹配结果，让用户选择
        if (filteredAnimes.length > 1) {
          console.log(`[弹幕] 找到 ${filteredAnimes.length} 个弹幕源`);
          setDanmakuMatches(filteredAnimes);
          setShowDanmakuSourceSelector(true);
          setDanmakuLoading(false);
          return;
        }

        // 只有一个结果，直接使用
        const anime = filteredAnimes[0];
        await handleDanmakuSourceSelect(anime);
      } else {
        console.warn('[弹幕] 未找到匹配的弹幕');
        if (artPlayerRef.current) {
          artPlayerRef.current.notice.show = '未找到匹配的弹幕源';
        }
        setDanmakuLoading(false);
      }
    } catch (error) {
      console.error('[弹幕] 搜索失败:', error);
      setDanmakuLoading(false);
    }
  };

  // 自动搜索并加载弹幕
  const autoSearchDanmaku = async () => {
    if (isDirectPlay) return;
    const disableAutoLoad = isDanmakuAutoLoadDisabled();
    if (disableAutoLoad) return;

    const title = videoTitleRef.current;
    if (!title) {
      console.warn('视频标题为空，无法自动搜索弹幕');
      return;
    }

    const currentEpisodeIndex = currentEpisodeIndexRef.current;
    console.log('[弹幕] 开始加载弹幕 - 视频标题:', title, '集数:', currentEpisodeIndex);

    // 先尝试从 IndexedDB 缓存加载
    try {
      const cachedData = await getDanmakuFromCache(title, currentEpisodeIndex);
      if (cachedData && cachedData.comments.length > 0) {
        console.log(`[弹幕] 使用缓存: title="${title}", episodeIndex=${currentEpisodeIndex}, 数量=${cachedData.comments.length}`);

        // 直接加载缓存的弹幕，不需要调用 API
        if (!danmakuPluginRef.current) {
          console.warn('弹幕插件未初始化');
          return;
        }

        setDanmakuLoading(true);

        // 转换弹幕格式
        let danmakuData = convertDanmakuFormat(cachedData.comments);

        // 手动应用过滤规则
        const filterConfig = danmakuFilterConfigRef.current;
        if (filterConfig && filterConfig.rules.length > 0) {
          const originalCount = danmakuData.length;
          danmakuData = danmakuData.filter((danmu) => {
            for (const rule of filterConfig.rules) {
              if (!rule.enabled) continue;
              try {
                if (rule.type === 'normal') {
                  if (danmu.text.includes(rule.keyword)) {
                    return false;
                  }
                } else if (rule.type === 'regex') {
                  if (new RegExp(rule.keyword).test(danmu.text)) {
                    return false;
                  }
                }
              } catch (e) {
                console.error('弹幕过滤规则错误:', e);
              }
            }
            return true;
          });
          const filteredCount = originalCount - danmakuData.length;
          if (filteredCount > 0) {
            console.log(`弹幕过滤: 原始 ${originalCount} 条，过滤 ${filteredCount} 条，剩余 ${danmakuData.length} 条`);
          }
        }

        // 应用弹幕数量限制
        const maxCount = typeof window !== 'undefined' ? parseInt(localStorage.getItem('danmakuMaxCount') || '0', 10) : 0;
        let calculatedOriginalCount = 0;
        if (maxCount > 0 && danmakuData.length > maxCount) {
          const originalCount = danmakuData.length;
          const step = danmakuData.length / maxCount;
          const limitedData = [];
          for (let i = 0; i < maxCount; i++) {
            limitedData.push(danmakuData[Math.floor(i * step)]);
          }
          danmakuData = limitedData;
          calculatedOriginalCount = originalCount;
          setDanmakuOriginalCount(originalCount);
          console.log(`弹幕数量限制: 原始 ${originalCount} 条，限制到 ${danmakuData.length} 条`);
        } else {
          // 没有应用限制，不显示原始数量
          setDanmakuOriginalCount(0);
        }

        // 加载弹幕到插件
        const currentSettings = danmakuSettingsRef.current;
        danmakuPluginRef.current.config({
          danmuku: danmakuData,
          speed: currentSettings.speed,
          opacity: currentSettings.opacity,
          fontSize: currentSettings.fontSize,
          margin: [currentSettings.marginTop, currentSettings.marginBottom],
          synchronousPlayback: currentSettings.synchronousPlayback,
        });
        danmakuPluginRef.current.load();

        // 触发自定义事件通知热力图更新
        if (artPlayerRef.current) {
          artPlayerRef.current.emit('danmaku:loaded');
        }

        // 根据保存的显示状态来决定显示或隐藏弹幕
        const savedDisplayState = loadDanmakuDisplayState();
        if (savedDisplayState === false) {
          danmakuPluginRef.current.hide();
        } else {
          danmakuPluginRef.current.show();
        }

        setDanmakuCount(danmakuData.length);
        console.log(`[弹幕] 缓存加载成功，共 ${danmakuData.length} 条`);

        // 更新当前选择状态（使用实时计算的数量）
        if (cachedData.metadata) {
          setCurrentDanmakuSelection({
            animeId: cachedData.metadata.animeId || 0,
            episodeId: cachedData.metadata.episodeId || 0,
            animeTitle: cachedData.metadata.animeTitle || '',
            episodeTitle: cachedData.metadata.episodeTitle || '',
            searchKeyword: cachedData.metadata.searchKeyword,
            danmakuCount: danmakuData.length,
            danmakuOriginalCount: calculatedOriginalCount > 0 ? calculatedOriginalCount : undefined,
          });
        }

        // 延迟一下让用户看到弹幕数量
        await new Promise((resolve) => setTimeout(resolve, 1500));
        setDanmakuLoading(false);

        return; // 使用缓存成功，直接返回
      }
    } catch (error) {
      console.error('[弹幕] 读取缓存失败:', error);
    }

    // 没有缓存，执行自动搜索弹幕
    console.log('[弹幕] 缓存未命中，开始搜索');
    setDanmakuLoading(true);

    // 优先使用保存的搜索关键词，否则使用视频标题
    const savedKeyword = getDanmakuSearchKeyword(title);
    const searchKeyword = savedKeyword || title;
    console.log(`[弹幕] 搜索关键词: ${searchKeyword}${savedKeyword ? ' (使用保存的关键词)' : ' (使用视频标题)'}`);

    try {
      const searchResult = await searchAnime(searchKeyword);

      if (searchResult.success && searchResult.animes.length > 0) {
        // 应用智能过滤：优先匹配年份和标题
        const videoYear = detailRef.current?.year;
        const filteredAnimes = filterDanmakuSources(
          searchResult.animes,
          title,
          videoYear
        );

        // 如果有多个匹配结果，让用户选择
        if (filteredAnimes.length > 1) {
          console.log(`找到 ${filteredAnimes.length} 个弹幕源，等待用户选择`);
          setDanmakuMatches(filteredAnimes);
          setCurrentSearchKeyword(searchKeyword); // 保存当前搜索关键词
          setShowDanmakuSourceSelector(true);
          setDanmakuLoading(false);
          if (artPlayerRef.current) {
            artPlayerRef.current.notice.show = `找到 ${filteredAnimes.length} 个弹幕源，请选择`;
          }
          return;
        }

        // 只有一个结果，直接使用
        const anime = filteredAnimes[0];

        // 获取剧集列表
        const episodesResult = await getEpisodes(anime.animeId);

        if (
          episodesResult.success &&
          episodesResult.bangumi.episodes.length > 0
        ) {
          // 根据当前集数选择对应的弹幕
          const currentEp = currentEpisodeIndexRef.current;
          const videoEpTitle = detailRef.current?.episodes_titles?.[currentEp];
          const episode = matchDanmakuEpisode(currentEp, episodesResult.bangumi.episodes, videoEpTitle);

          if (episode) {
            const selection: DanmakuSelection = {
              animeId: anime.animeId,
              episodeId: episode.episodeId,
              animeTitle: anime.animeTitle,
              episodeTitle: episode.episodeTitle,
            };

            // 设置剧集列表
            setDanmakuEpisodesList(episodesResult.bangumi.episodes);

            console.log('自动搜索弹幕成功:', selection);

            // 通过统一的 handleDanmakuSelect 处理弹幕加载
            await handleDanmakuSelect(selection);
          }
        } else {
          console.warn('未找到剧集信息');
          if (artPlayerRef.current) {
            artPlayerRef.current.notice.show = '弹幕加载失败：未找到剧集信息';
          }
        }
      } else {
        console.warn('未找到匹配的弹幕');
        if (artPlayerRef.current) {
          artPlayerRef.current.notice.show = '未找到匹配的弹幕，可在弹幕选项卡手动搜索';
        }
      }
    } catch (error) {
      console.error('自动搜索弹幕失败:', error);
      if (artPlayerRef.current) {
        artPlayerRef.current.notice.show = '弹幕加载失败，请检查网络或稍后重试';
      }
    } finally {
      setDanmakuLoading(false);
    }
  };

  // ---------------------------------------------------------------------------
  // 键盘快捷键
  // ---------------------------------------------------------------------------
  // 处理全局快捷键
  const handleKeyboardShortcuts = (e: KeyboardEvent) => {
    // 忽略输入框中的按键事件
    if (
      (e.target as HTMLElement).tagName === 'INPUT' ||
      (e.target as HTMLElement).tagName === 'TEXTAREA'
    )
      return;

    // Alt + 左箭头 = 上一集
    if (e.altKey && e.key === 'ArrowLeft') {
      if (detailRef.current && currentEpisodeIndexRef.current > 0) {
        handlePreviousEpisode();
        e.preventDefault();
      }
    }

    // Alt + 右箭头 = 下一集
    if (e.altKey && e.key === 'ArrowRight') {
      const d = detailRef.current;
      const idx = currentEpisodeIndexRef.current;
      if (d && idx < d.episodes.length - 1) {
        handleNextEpisode();
        e.preventDefault();
      }
    }

    // P = 使用当前配置快捷快进
    if (!e.altKey && e.key.toLowerCase() === 'p') {
      if (seekQuickForward()) {
        e.preventDefault();
      }
    }

    // 左箭头 = 快退
    if (!e.altKey && e.key === 'ArrowLeft') {
      if (artPlayerRef.current && artPlayerRef.current.currentTime > 5) {
        artPlayerRef.current.currentTime -= 10;
        e.preventDefault();
      }
    }

    // 右箭头 = 快进
    if (!e.altKey && e.key === 'ArrowRight') {
      if (
        artPlayerRef.current &&
        artPlayerRef.current.currentTime < artPlayerRef.current.duration - 5
      ) {
        artPlayerRef.current.currentTime += 10;
        e.preventDefault();
      }
    }

    // 上箭头 = 音量+
    if (e.key === 'ArrowUp') {
      if (artPlayerRef.current && artPlayerRef.current.volume < 1) {
        artPlayerRef.current.volume =
          Math.round((artPlayerRef.current.volume + 0.1) * 10) / 10;
        artPlayerRef.current.notice.show = `音量: ${Math.round(
          artPlayerRef.current.volume * 100
        )}`;
        e.preventDefault();
      }
    }

    // 下箭头 = 音量-
    if (e.key === 'ArrowDown') {
      if (artPlayerRef.current && artPlayerRef.current.volume > 0) {
        artPlayerRef.current.volume =
          Math.round((artPlayerRef.current.volume - 0.1) * 10) / 10;
        artPlayerRef.current.notice.show = `音量: ${Math.round(
          artPlayerRef.current.volume * 100
        )}`;
        e.preventDefault();
      }
    }

    // 空格 = 播放/暂停
    if (e.key === ' ') {
      if (artPlayerRef.current) {
        artPlayerRef.current.toggle();
        e.preventDefault();
      }
    }

    // 小键盘 + = 倍速+
    if (e.code === 'NumpadAdd') {
      if (adjustPlaybackRateByStep(1)) {
        e.preventDefault();
      }
    }

    // 小键盘 - = 倍速-
    if (e.code === 'NumpadSubtract') {
      if (adjustPlaybackRateByStep(-1)) {
        e.preventDefault();
      }
    }

    // 小键盘 / = 恢复 1x
    if (e.code === 'NumpadDivide') {
      if (resetPlaybackRate()) {
        e.preventDefault();
      }
    }

    // f 键 = 切换全屏
    if (e.key === 'f' || e.key === 'F') {
      if (artPlayerRef.current) {
        artPlayerRef.current.fullscreen = !artPlayerRef.current.fullscreen;
        e.preventDefault();
      }
    }
  };

  // ---------------------------------------------------------------------------
  // 播放记录相关
  // ---------------------------------------------------------------------------
  // 保存播放进度
  const saveCurrentPlayProgress = async () => {
    if (
      !artPlayerRef.current ||
      !currentSourceRef.current ||
      !currentIdRef.current ||
      !videoTitleRef.current ||
      !detailRef.current?.source_name
    ) {
      return;
    }

    const player = artPlayerRef.current;
    const currentTime = player.currentTime || 0;
    const duration = player.duration || 0;
    const playTime = Math.floor(currentTime);

    // 如果播放时间太短（少于5秒）或者视频时长无效，不保存
    if (currentTime < 1 || !duration) {
      return;
    }

    if (lastSavedPlayTimeRef.current === playTime) {
      return;
    }

    try {
      saveLocalEpisodeProgress(
        episodeProgressContentKey,
        currentEpisodeIndexRef.current,
        currentTime,
        duration
      );

      await savePlayRecord(currentSourceRef.current, currentIdRef.current, {
        title: videoTitleRef.current,
        source_name: detailRef.current?.source_name || '',
        year: detailRef.current?.year,
        cover: detailRef.current?.poster || '',
        index: currentEpisodeIndexRef.current + 1, // 转换为1基索引
        total_episodes: detailRef.current?.episodes.length || 1,
        play_time: playTime,
        total_time: Math.floor(duration),
        save_time: Date.now(),
        search_title: searchTitle,
        is_anime: isAnimeCategoryText(
          detailRef.current?.type_name,
          detailRef.current?.class
        ),
      });

      lastSavedPlayTimeRef.current = playTime;
      lastSaveTimeRef.current = Date.now();
      console.log('播放进度已保存:', {
        title: videoTitleRef.current,
        episode: currentEpisodeIndexRef.current + 1,
        year: detailRef.current?.year,
        progress: `${Math.floor(currentTime)}/${Math.floor(duration)}`,
      });
    } catch (err) {
      console.error('保存播放进度失败:', err);
    }
  };

  useEffect(() => {
    // 页面即将卸载时保存播放进度和清理资源
    const handleBeforeUnload = () => {
      saveCurrentPlayProgress();
      releaseWakeLock();
      cleanupPlayer();
    };

    // 页面可见性变化时保存播放进度和释放 Wake Lock
    const handleVisibilityChange = () => {
      if (document.visibilityState === 'hidden') {
        saveCurrentPlayProgress();
        releaseWakeLock();
      } else if (document.visibilityState === 'visible') {
        // 页面重新可见时，如果正在播放则重新请求 Wake Lock
        if (artPlayerRef.current && !artPlayerRef.current.paused) {
          requestWakeLock();
        }
      }
    };

    // 添加事件监听器
    window.addEventListener('beforeunload', handleBeforeUnload);
    document.addEventListener('visibilitychange', handleVisibilityChange);

    return () => {
      // 清理事件监听器
      window.removeEventListener('beforeunload', handleBeforeUnload);
      document.removeEventListener('visibilitychange', handleVisibilityChange);
    };
  }, [currentEpisodeIndex, detail]);

  // 清理定时器
  useEffect(() => {
    return () => {
      if (saveIntervalRef.current) {
        clearInterval(saveIntervalRef.current);
      }
    };
  }, []);

  // ---------------------------------------------------------------------------
  // 收藏相关
  // ---------------------------------------------------------------------------
  // 每当 source 或 id 变化时检查收藏状态
  useEffect(() => {
    if (!currentSource || !currentId) return;
    (async () => {
      try {
        const fav = await isFavorited(currentSource, currentId);
        setFavorited(fav);
      } catch (err) {
        console.error('检查收藏状态失败:', err);
      }
    })();
  }, [currentSource, currentId]);

  // 监听收藏数据更新事件
  useEffect(() => {
    if (!currentSource || !currentId) return;

    const unsubscribe = subscribeToDataUpdates(
      'favoritesUpdated',
      (favorites: Record<string, any>) => {
        const key = generateStorageKey(currentSource, currentId);
        const isFav = !!favorites[key];
        setFavorited(isFav);
      }
    );

    return unsubscribe;
  }, [currentSource, currentId]);

  // 切换收藏
  const handleToggleFavorite = async () => {
    if (
      !videoTitleRef.current ||
      !detailRef.current ||
      !currentSourceRef.current ||
      !currentIdRef.current
    )
      return;

    try {
      if (favorited) {
        // 如果已收藏，删除收藏
        await deleteFavorite(currentSourceRef.current, currentIdRef.current);
        setFavorited(false);
      } else {
        // 如果未收藏，添加收藏
        await saveFavorite(currentSourceRef.current, currentIdRef.current, {
          title: videoTitleRef.current,
          source_name: detailRef.current?.source_name || '',
          year: detailRef.current?.year || 'unknown',
          cover: detailRef.current?.poster || '',
          total_episodes: detailRef.current?.episodes.length || 1,
          save_time: Date.now(),
          search_title: searchTitle,
          is_completed: getSeriesStatus(detailRef.current) === 'completed',
          vod_remarks: detailRef.current?.vod_remarks,
        });
        setFavorited(true);
      }
    } catch (err) {
      console.error('切换收藏失败:', err);
    }
  };

  // 纠错成功后的回调
  const handleCorrectSuccess = () => {
    if (!detail || detail.source !== 'xiaoya') return;

    // 从 localStorage 读取纠错信息
    const correction = getXiaoyaCorrection(detail.source, detail.id);
    if (correction) {
      console.log('应用纠错信息:', correction);

      // 只更新显示相关的状态，不更新 detail（避免触发其他 useEffect）
      if (correction.title) {
        setVideoTitle(correction.title);
      }
      if (correction.posterPath) {
        const fullPosterUrl = processImageUrl(getTMDBImageUrl(correction.posterPath));
        setVideoCover(fullPosterUrl);
      }
      if (correction.overview) {
        setCorrectedDesc(correction.overview);
      }
      if (correction.doubanId) {
        const doubanIdNum = typeof correction.doubanId === 'string'
          ? parseInt(correction.doubanId, 10)
          : correction.doubanId;
        setVideoDoubanId(doubanIdNum);
      }

      // 更新 detailRef，这样其他地方使用 detailRef 时能获取到最新信息
      if (detailRef.current) {
        detailRef.current = applyCorrection(detailRef.current, correction);
      }

      // 更新 availableSources 中的小雅源信息
      setAvailableSources(prevSources => applyCorrectionsToSources(prevSources));

      console.log('已应用纠错信息');
    }
  };

  useEffect(() => {
    if (
      !videoUrl ||
      loading ||
      currentEpisodeIndex === null ||
      !artRef.current
    ) {
      return;
    }

    // 这类源会先异步补全详情，如果 episodes 为空则跳过
    if (isLazyDetailSource(currentSource || detail?.source) && (!detail || !detail.episodes || detail.episodes.length === 0)) {
      return;
    }

    // 确保选集索引有效
    if (
      !detail ||
      !detail.episodes ||
      currentEpisodeIndex >= detail.episodes.length ||
      currentEpisodeIndex < 0
    ) {
      setError(`选集索引无效，当前共 ${totalEpisodes} 集`);
      return;
    }

    if (!videoUrl) {
      setError('视频地址无效');
      return;
    }
    console.log(videoUrl);

    // 检测是否为WebKit浏览器
    const isWebkit =
      typeof window !== 'undefined' &&
      typeof (window as any).webkitConvertPointFromNodeToPage === 'function';

    // 检测是否为 iOS 设备（iPhone、iPad、iPod）
    const isIOS = (() => {
      if (typeof window === 'undefined') return false;

      const ua = navigator.userAgent;

      // 排除 Windows Phone（它的 UA 中也包含 iPhone）
      if ((window as any).MSStream) return false;

      // 方法1：检测 UA 中的 iOS 设备标识
      if (/iPad|iPhone|iPod/.test(ua)) {
        console.log('[设备检测] iOS 设备（通过 UA）:', ua);
        return true;
      }

      // 方法2：检测 iPad（iOS 13+ 桌面模式）
      // 条件：UA 包含 Mac + 支持触摸 + 不是 Windows/Linux
      const isMacUA = ua.includes('Mac OS X');
      const hasTouch = 'ontouchend' in document;
      const isNotWindows = !ua.includes('Windows');
      const isNotLinux = !ua.includes('Linux');

      if (isMacUA && hasTouch && isNotWindows && isNotLinux) {
        console.log('[设备检测] iPad 桌面模式:', { ua, hasTouch });
        return true;
      }

      console.log('[设备检测] 非 iOS 设备:', { ua, hasTouch });
      return false;
    })();

    // 辅助函数：检测代理 URL 是否需要显式声明 m3u8 类型
    // Artplayer 通过 URL 扩展名自动检测类型，但代理 URL（如 /api/proxy-m3u8?url=...）没有 .m3u8 扩展名
    const getVideoType = (url: string): string | undefined => {
      if (!url) return undefined;
      // 如果 URL 路径中已包含 .m3u8 扩展名，Artplayer 可自动检测，无需显式设置
      const urlPath = url.split('?')[0];
      if (urlPath.includes('.m3u8')) return undefined;
      // 代理 URL 返回的是 m3u8 内容，需要显式声明类型
      if (url.includes('/api/proxy-m3u8') || url.includes('/api/proxy/vod/m3u8')) {
        return 'm3u8';
      }
      return undefined;
    };

    // 非WebKit浏览器且播放器已存在，使用switch方法切换
    if (!isWebkit && artPlayerRef.current) {
      // 显式设置类型，确保代理 URL 能被 HLS.js 正确处理
      const videoType = getVideoType(videoUrl);
      if (videoType) {
        artPlayerRef.current.option.type = videoType;
      } else {
        artPlayerRef.current.option.type = '';
      }
      // switch 前先对齐 crossOrigin，避免私人影库直链以非 CORS 模式缓存后无法超分
      if (artPlayerRef.current?.video) {
        applyVideoCrossOrigin(
          artPlayerRef.current.video as HTMLVideoElement,
          currentSourceRef.current
        );
      }
      artPlayerRef.current.switch = videoUrl;
      artPlayerRef.current.title = `${videoTitle} - ${playerEpisodeLabel}`;
      artPlayerRef.current.poster = videoCover;
      if (artPlayerRef.current?.video) {
        ensureVideoSource(
          artPlayerRef.current.video as HTMLVideoElement,
          videoUrl
        );
      }
      return;
    }

    // WebKit浏览器或首次创建：销毁之前的播放器实例并创建新的
    // 异步初始化播放器
    const initPlayer = async () => {
      try {
        // 先清理旧播放器实例
        if (artPlayerRef.current) {
          await cleanupPlayer();
        }

        // iOS需要等待DOM完全清理
        await new Promise(resolve => setTimeout(resolve, 100));

        // 双重检查：如果旧播放器仍然存在，再次清理
        if (artPlayerRef.current) {
          console.warn('旧播放器仍存在，再次清理');
          await cleanupPlayer();
          await new Promise(resolve => setTimeout(resolve, 100));
        }

        // 再次确保容器为空
        if (artRef.current) {
          artRef.current.innerHTML = '';
        }

        // 动态导入播放器库
        const [ArtplayerModule, HlsModule, DanmukuPlugin, AutoThumbnailPlugin] = await Promise.all([
          import('artplayer'),
          import('hls.js'),
          import('artplayer-plugin-danmuku'),
          import('artplayer-plugin-auto-thumbnail'),
        ]);

        const Artplayer = ArtplayerModule.default;
        const Hls = HlsModule.default;
        const artplayerPluginDanmuku = DanmukuPlugin.default as any;
        const artplayerPluginAutoThumbnail = AutoThumbnailPlugin.default as any;
        const playerTimeouts = new Set<number>();
        const clearTrackedTimeout = (timeoutId: number | null) => {
          if (timeoutId == null) {
            return;
          }

          window.clearTimeout(timeoutId);
          playerTimeouts.delete(timeoutId);
        };
        const schedulePlayerTimeout = (callback: () => void, delay: number) => {
          const timeoutId = window.setTimeout(() => {
            playerTimeouts.delete(timeoutId);
            callback();
          }, delay);
          playerTimeouts.add(timeoutId);
          return timeoutId;
        };
        const clearPlayerTimeouts = () => {
          playerTimeouts.forEach((timeoutId) => {
            window.clearTimeout(timeoutId);
          });
          playerTimeouts.clear();
        };

        const syncPlaybackPitch = () => {
          if (!isWebkit || !artPlayerRef.current?.video) {
            return;
          }

          const video = artPlayerRef.current.video as HTMLVideoElement & {
            webkitPreservesPitch?: boolean;
          };
          const shouldPreservePitch = true;

          if ('preservesPitch' in video) {
            video.preservesPitch = shouldPreservePitch;
          }
          if ('webkitPreservesPitch' in video) {
            video.webkitPreservesPitch = shouldPreservePitch;
          }
        };

        const shouldRescueWebkitHls = (
          video: HTMLVideoElement & {
            hls?: {
              detachMedia?: () => void;
              attachMedia?: (video: HTMLVideoElement) => void;
              startLoad?: (startPosition?: number) => void;
              bufferController?: {
                mediaSource?: {
                  readyState?: string;
                };
              };
            };
          }
        ) => {
          const hls = video.hls;
          if (!hls) {
            return false;
          }

          let hasBufferedData = false;
          try {
            hasBufferedData = video.buffered.length > 0;
          } catch {
            hasBufferedData = false;
          }

          if (video.readyState > 0 || hasBufferedData) {
            return false;
          }

          const currentSrc = video.currentSrc || video.src || '';
          const mediaSourceState = hls.bufferController?.mediaSource?.readyState || '';
          const usingBlobMsePath = currentSrc.startsWith('blob:') && mediaSourceState !== 'closed';

          return !usingBlobMsePath;
        };

        const rescueWebkitHlsBootstrap = (
          reason: string,
          retryDelays: number[] = [1500, 3500, 6000]
        ) => {
          if (!isWebkit || !artPlayerRef.current?.video) {
            return;
          }

          const video = artPlayerRef.current.video as HTMLVideoElement & {
            hls?: {
              detachMedia?: () => void;
              attachMedia?: (video: HTMLVideoElement) => void;
              startLoad?: (startPosition?: number) => void;
            };
          };

          retryDelays.forEach((delay) => {
            schedulePlayerTimeout(() => {
              if (!artPlayerRef.current || artPlayerRef.current.video !== video) {
                return;
              }

              const hls = video.hls;
              if (!shouldRescueWebkitHls(video)) {
                return;
              }

              console.warn(
                `[HLS] Safari bootstrap rescue triggered (${reason}, ${delay}ms)`
              );

              try {
                hls.detachMedia?.();
                hls.attachMedia?.(video);
                hls.startLoad?.(-1);
                video.play().catch((error) => {
                  console.warn('[HLS] Safari rescue play failed:', error);
                });
              } catch (error) {
                console.warn('[HLS] Safari bootstrap rescue failed:', error);
              }
            }, delay);
          });
        };

        // 创建自定义 HLS loader
        const CustomHlsJsLoader = createCustomHlsLoader(Hls);

        // 创建新的播放器实例
        Artplayer.PLAYBACK_RATE = PLAYBACK_RATE_OPTIONS;
        Artplayer.USE_RAF = true;

        // 获取当前集的字幕
        const currentSubtitles = (detailRef.current?.subtitles?.[currentEpisodeIndex] || []) as SourceSubtitleItem[];
        const defaultSubtitle = currentSubtitles[0];
        const shouldUseNativeInitialSubtitle = !!defaultSubtitle && !isAdvancedSourceSubtitle(defaultSubtitle);
        const savedSubtitleSize = typeof window !== 'undefined' ? localStorage.getItem('subtitleSize') || '2em' : '2em';
        currentSubtitleLabelRef.current = defaultSubtitle?.label || '关闭';

        artPlayerRef.current = new Artplayer({
          container: artRef.current!,
          url: videoUrl,
          ...(getVideoType(videoUrl) ? { type: getVideoType(videoUrl) } : {}),
          poster: videoCover,
          volume: 0.7,
          isLive: false,
          muted: false,
          autoplay: true,
          pip: true,
          autoSize: false,
          autoMini: false,
          screenshot: true,
          setting: true,
          loop: false,
          flip: true,
          playbackRate: true,
          aspectRatio: false,
          fullscreen: !isIOS,  // iOS 禁用原生全屏按钮，避免触发系统播放器
          fullscreenWeb: true,  // 保留网页全屏按钮（所有平台）
          ...(shouldUseNativeInitialSubtitle ? {
            subtitle: {
              url: defaultSubtitle!.url,
              type: 'vtt',
              style: {
                color: '#fff',
                fontSize: savedSubtitleSize,
              },
              encoding: 'utf-8',
            }
          } : {}),
          subtitleOffset: false,
          miniProgressBar: false,
          mutex: true,
          playsInline: true,
          autoPlayback: false,
          airplay: true,
          theme: '#22c55e',
          lang: 'zh-cn',
          hotkey: false,
          fastForward: true,
          autoOrientation: true,
          lock: true,
          ...(videoQualities.length > 0 ? {
            quality: videoQualities.map((q, index) => ({
              default: index === 0,
              html: q.name,
              url: q.url,
            })),
          } : {}),
          moreVideoAttr: {
            playsInline: true,
            'webkit-playsinline': 'true',
            referrerpolicy: 'no-referrer',
            // 私人影库跨域直链：配合同级 moontvplus-extension 注入 ACAO，供 Anime4K 读帧
            ...(needsPrivateSourceCrossOrigin(currentSourceRef.current)
              ? { crossOrigin: 'anonymous' }
              : {}),
          } as any,
          // HLS 支持配置
          customType: {
            m3u8: function (video: HTMLVideoElement, url: string) {
              if (!Hls) {
                console.error('HLS.js 未加载');
                return;
              }

              if (video.hls) {
                video.hls.destroy();
              }

              // 每次创建HLS实例时，都读取最新的blockAdEnabled状态
              const shouldUseCustomLoader = blockAdEnabledRef.current;

              // 从localStorage读取缓冲策略
              const bufferStrategy = typeof window !== 'undefined'
                ? localStorage.getItem('bufferStrategy') || 'medium'
                : 'medium';

              // 根据缓冲策略配置不同的缓冲参数
              const getBufferConfig = (strategy: string) => {
                switch (strategy) {
                  case 'low':
                    return {
                      maxBufferLength: 15,
                      backBufferLength: 15,
                      maxBufferSize: 30 * 1000 * 1000, // ~30MB
                    };
                  case 'medium':
                    return {
                      maxBufferLength: 30,
                      backBufferLength: 30,
                      maxBufferSize: 60 * 1000 * 1000, // ~60MB
                    };
                  case 'high':
                    return {
                      maxBufferLength: 60,
                      backBufferLength: 40,
                      maxBufferSize: 120 * 1000 * 1000, // ~120MB
                    };
                  case 'ultra':
                    return {
                      maxBufferLength: 120,
                      backBufferLength: 60,
                      maxBufferSize: 240 * 1000 * 1000, // ~240MB
                    };
                  default:
                    return {
                      maxBufferLength: 30,
                      backBufferLength: 30,
                      maxBufferSize: 60 * 1000 * 1000,
                    };
                }
              };

              const bufferConfig = getBufferConfig(bufferStrategy);

              // 选择合适的 Loader
              let loaderClass;
              if (shouldUseCustomLoader) {
                // 使用自定义广告过滤 Loader
                loaderClass = CustomHlsJsLoader;
              } else {
                // 使用默认 Loader
                loaderClass = Hls.DefaultConfig.loader;
              }

              const hls = new Hls({
                debug: false, // 关闭日志
                enableWorker: true, // WebWorker 解码，降低主线程压力
                // 点播播放不需要 LL-HLS，小缓冲在 Safari 高倍速下更容易抖动。
                lowLatencyMode: false,
                autoStartLoad: true,

                /* 缓冲/内存相关 - 根据用户设置的缓冲策略动态调整 */
                maxBufferLength: bufferConfig.maxBufferLength, // 前向缓冲长度
                backBufferLength: bufferConfig.backBufferLength, // 已播放内容保留长度
                maxBufferSize: bufferConfig.maxBufferSize, // 最大缓冲大小

                /* 自定义loader */
                loader: loaderClass as any,
              });

              const kickStartHlsPlayback = () => {
                try {
                  hls.startLoad(-1);
                } catch (error) {
                  console.warn('[HLS] startLoad failed:', error);
                }

                if (!video.paused) {
                  video.play().catch((error) => {
                    console.warn('[HLS] play after attach failed:', error);
                  });
                }
              };

              hls.on(Hls.Events.MEDIA_ATTACHED, () => {
                kickStartHlsPlayback();
              });

              hls.loadSource(url);
              hls.attachMedia(video);
              video.hls = hls;

              if (isWebkit) {
                schedulePlayerTimeout(() => {
                  if (!shouldRescueWebkitHls(video)) {
                    return;
                  }

                  console.warn('[HLS] Safari attach watchdog triggered, forcing reattach');
                  try {
                    hls.detachMedia();
                    hls.attachMedia(video);
                    kickStartHlsPlayback();
                  } catch (error) {
                    console.warn('[HLS] Safari attach reattach failed:', error);
                  }
                }, 3000);
              }

              ensureVideoSource(video, url);

              // 额外确保 iOS 内联播放属性（防止全屏时使用系统播放器）
              video.setAttribute('playsinline', 'true');
              video.setAttribute('webkit-playsinline', 'true');
              (video as any).playsInline = true;
              (video as any).webkitPlaysInline = true;

              // 监听Manifest加载完成事件，启动xiaoya链接定时刷新
              hls.on(Hls.Events.MANIFEST_PARSED, () => {
                console.log('[HLS] Manifest解析完成');

                const player = artPlayerRef.current;
                if (video.paused && (player?.option.autoplay || player?.loading)) {
                  try {
                    Promise.resolve(player?.play?.()).catch((error) => {
                      console.warn('[HLS] play after manifest parsed failed:', error);
                    });
                  } catch (error) {
                    console.warn('[HLS] play after manifest parsed failed:', error);
                  }
                }

                // 兜底：若 updateVideoUrl 时尚未启定时器，在 manifest 解析后再启
                // xiaoya：仅 m3u8；openlist：refresh14m 即可（此回调本身已在 HLS 路径）
                if (
                  isInitialLoadRef.current &&
                  currentXiaoyaUrlRef.current &&
                  shouldStartLinkRefreshTimer(url)
                ) {
                  isInitialLoadRef.current = false;
                  startRefreshTimer(hls, video);
                }
              });

              hls.on(Hls.Events.ERROR, function (event: any, data: any) {
                console.error('HLS Error:', event, data);
                if (data.fatal) {
                  switch (data.type) {
                    case Hls.ErrorTypes.NETWORK_ERROR:
                      // 检查是否是 manifest 加载错误（通常是 403/404/CORS 错误）
                      if (data.details === 'manifestLoadError') {
                        console.log('Manifest 加载失败：可能是 403/404 或 CORS 错误');

                        const statusCode = data.response?.code || data.response?.status;

                        // 如果是403且是xiaoya源的m3u8，尝试自动刷新
                        if (statusCode === 403 && currentXiaoyaUrlRef.current) {
                          const isM3u8 = url.includes('.m3u8') || url.includes('m3u8');
                          if (isM3u8) {
                            console.log('[HLS错误] 检测到403，尝试刷新链接');
                            refreshXiaoyaUrl(hls, video, false);
                            return; // 不执行后续的错误处理
                          }
                        }

                        // 原有的错误处理逻辑
                        hls.destroy();
                        if (statusCode === 403) {
                          setVideoError('访问被拒绝 (403)');
                        } else if (statusCode === 404) {
                          setVideoError('视频不存在 (404)');
                        } else if (statusCode === 415) {
                          setVideoError('视频格式不兼容 (415)');
                        } else if (statusCode) {
                          setVideoError(`HTTP ${statusCode} 错误`);
                        } else {
                          // CORS 错误或其他网络错误
                          // 如果是直链直连模式（URL 不含代理前缀），记录原始 URL 以便用户一键启用代理
                          if (currentSourceRef.current === 'directplay' && !url.includes('/api/proxy-m3u8') && !url.includes('/api/proxy/vod/m3u8')) {
                            setCorsFailedUrl(url);
                          }
                          setVideoError('无法访问视频源（可能是跨域限制或访问被拒绝）');
                        }
                        return;
                      }
                      // 检查其他 HTTP 错误状态码
                      {
                        const statusCode = data.response?.code || data.response?.status;
                        if (statusCode && statusCode >= 400) {
                          console.log(`HTTP ${statusCode} 错误`);
                          hls.destroy();
                          setVideoError(`HTTP ${statusCode} 错误`);
                          return;
                        }
                      }
                      console.log('网络错误，尝试恢复...');
                      hls.startLoad();
                      break;
                    case Hls.ErrorTypes.MEDIA_ERROR:
                      console.log('媒体错误，尝试恢复...');
                      hls.recoverMediaError();
                      break;
                    default:
                      console.log('无法恢复的错误');
                      hls.destroy();
                      setVideoError('视频加载错误');
                      break;
                  }
                }
              });
            },
          },
          plugins: [
            artplayerPluginAutoThumbnail({
              url: videoUrl,
              width: 160,
              number: 100,
              scale: 1,
            }),
            artplayerPluginDanmuku({
              danmuku: [],
              speed: danmakuSettingsRef.current.speed,
              opacity: danmakuSettingsRef.current.opacity,
              fontSize: danmakuSettingsRef.current.fontSize,
              color: '#FFFFFF',
              mode: 0,
              margin: [danmakuSettingsRef.current.marginTop, danmakuSettingsRef.current.marginBottom],
              antiOverlap: true,
              synchronousPlayback: danmakuSettingsRef.current.synchronousPlayback,
              emitter: false,
              heatmap: false, // 禁用 artplayer 自带热力图，使用自定义热力图
              // 主题
              theme: 'dark',
              // 根据保存的显示状态设置初始可见性
              visible: danmakuDisplayStateRef.current,
              filter: (danmu: any) => {
                // 应用过滤规则
                const filterConfig = danmakuFilterConfigRef.current;
                if (filterConfig && filterConfig.rules.length > 0) {
                  for (const rule of filterConfig.rules) {
                    // 跳过未启用的规则
                    if (!rule.enabled) continue;

                    try {
                      if (rule.type === 'normal') {
                        // 普通模式：字符串包含匹配
                        if (danmu.text.includes(rule.keyword)) {
                          return false;
                        }
                      } else if (rule.type === 'regex') {
                        // 正则模式：正则表达式匹配
                        if (new RegExp(rule.keyword).test(danmu.text)) {
                          return false;
                        }
                      }
                    } catch (e) {
                      console.error('弹幕过滤规则错误:', e);
                    }
                  }
                }
                return true;
              },
            }),
          ],
          icons: {
            loading:
              '<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MCIgaGVpZ2h0PSI1MCIgdmlld0JveD0iMCAwIDUwIDUwIj48cGF0aCBkPSJNMjUuMjUxIDYuNDYxYy0xMC4zMTggMC0xOC42ODMgOC4zNjUtMTguNjgzIDE4LjY4M2g0LjA2OGMwLTguMDcgNi41NDUtMTQuNjE1IDE0LjYxNS0xNC42MTVWNi40NjF6IiBmaWxsPSIjMDA5Njg4Ij48YW5pbWF0ZVRyYW5zZm9ybSBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iIGF0dHJpYnV0ZVR5cGU9IlhNTCIgZHVyPSIxcyIgZnJvbT0iMCAyNSAyNSIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIHRvPSIzNjAgMjUgMjUiIHR5cGU9InJvdGF0ZSIvPjwvcGF0aD48L3N2Zz4=">',
          },
          settings: [
            {
              html: '去广告',
              icon: '<text x="50%" y="50%" font-size="20" font-weight="bold" text-anchor="middle" dominant-baseline="middle" fill="#ffffff">AD</text>',
              tooltip: blockAdEnabled ? '已开启' : '已关闭',
              onClick() {
                const newVal = !blockAdEnabled;
                try {
                  localStorage.setItem('enable_blockad', String(newVal));
                  if (artPlayerRef.current) {
                    resumeTimeRef.current = artPlayerRef.current.currentTime;
                    if (
                      artPlayerRef.current.video &&
                      artPlayerRef.current.video.hls
                    ) {
                      artPlayerRef.current.video.hls.destroy();
                    }
                    artPlayerRef.current.destroy();
                    artPlayerRef.current = null;
                  }
                  setBlockAdEnabled(newVal);
                } catch (_) {
                  // ignore
                }
                return newVal ? '当前开启' : '当前关闭';
              },
            },
            {
              html: '弹幕过滤',
              icon: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" fill="#ffffff"/><path d="M8 12h8" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/></svg>',
              tooltip: '配置弹幕过滤规则',
              onClick() {
                // 如果播放器处于全屏状态，先退出全屏
                if (artPlayerRef.current && artPlayerRef.current.fullscreen) {
                  artPlayerRef.current.fullscreen = false;
                  // 延迟一下再显示弹窗，确保全屏退出动画完成
                  setTimeout(() => {
                    setShowDanmakuFilterSettings(true);
                  }, 300);
                } else {
                  setShowDanmakuFilterSettings(true);
                }
                return '打开设置';
              },
            },
            // 热力图开关（仅在未禁用时显示）
            ...(!danmakuHeatmapDisabledRef.current ? [{
              name: '弹幕热力',
              html: '弹幕热力',
              icon: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 13h2v-2H3v2zm0 4h2v-2H3v2zm0-8h2V7H3v2zm4 4h14v-2H7v2zm0 4h14v-2H7v2zM7 7v2h14V7H7z" fill="#ffffff"/></svg>',
              switch: danmakuHeatmapEnabledRef.current,
              onSwitch: function (item: any) {
                const newVal = !item.switch;
                try {
                  localStorage.setItem('danmaku_heatmap_enabled', String(newVal));
                  setDanmakuHeatmapEnabled(newVal);
                  console.log('弹幕热力已', newVal ? '开启' : '关闭');
                } catch (err) {
                  console.error('切换弹幕热力失败:', err);
                }
                return newVal;
              },
            }] : []),
            ...(webGPUSupported ? [
              {
                name: 'Anime4K超分',
                html: 'Anime4K超分',
                icon: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 2L2 7v10c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V7l-10-5zm0 18c-4 0-7-3-7-7V9l7-3.5L19 9v4c0 4-3 7-7 7z" fill="#ffffff"/><path d="M10 12l2 2 4-4" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>',
                switch: anime4kEnabledRef.current,
                onSwitch: async function (item: any) {
                  const newVal = !item.switch;
                  await toggleAnime4K(newVal);
                  return newVal;
                },
              },
              {
                name: '超分模式',
                html: '超分模式',
                selector: [
                  {
                    html: 'ModeA (快速)',
                    value: 'ModeA',
                    default: anime4kModeRef.current === 'ModeA',
                  },
                  {
                    html: 'ModeB (平衡)',
                    value: 'ModeB',
                    default: anime4kModeRef.current === 'ModeB',
                  },
                  {
                    html: 'ModeC (质量)',
                    value: 'ModeC',
                    default: anime4kModeRef.current === 'ModeC',
                  },
                  {
                    html: 'ModeAA (增强快速)',
                    value: 'ModeAA',
                    default: anime4kModeRef.current === 'ModeAA',
                  },
                  {
                    html: 'ModeBB (增强平衡)',
                    value: 'ModeBB',
                    default: anime4kModeRef.current === 'ModeBB',
                  },
                  {
                    html: 'ModeCA (最高质量)',
                    value: 'ModeCA',
                    default: anime4kModeRef.current === 'ModeCA',
                  },
                ],
                onSelect: async function (item: any) {
                  await changeAnime4KMode(item.value);
                  return item.html;
                },
              },
              {
                name: '超分倍数',
                html: '超分倍数',
                selector: [
                  {
                    html: '1.5x',
                    value: '1.5',
                    default: anime4kScaleRef.current === 1.5,
                  },
                  {
                    html: '2.0x',
                    value: '2.0',
                    default: anime4kScaleRef.current === 2.0,
                  },
                  {
                    html: '3.0x',
                    value: '3.0',
                    default: anime4kScaleRef.current === 3.0,
                  },
                  {
                    html: '4.0x',
                    value: '4.0',
                    default: anime4kScaleRef.current === 4.0,
                  },
                ],
                onSelect: async function (item: any) {
                  await changeAnime4KScale(parseFloat(item.value));
                  return item.html;
                },
              }
            ] : []),
            {
              name: '跳过片头片尾',
              html: '跳过片头片尾',
              switch: skipConfigRef.current.enable,
              onSwitch: function (item) {
                const newConfig = {
                  ...skipConfigRef.current,
                  enable: !item.switch,
                };
                handleSkipConfigChange(newConfig);
                return !item.switch;
              },
            },
            {
              name: '快捷快进配置',
              html: '快捷快进配置',
              icon: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 5v14" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/><path d="m16 17 5-5-5-5" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M21 12H9" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/></svg>',
              tooltip: `${formatQuickForwardDuration(quickForwardSecondsRef.current)}`,
              onClick: async function () {
                const player = artPlayerRef.current;
                if (player?.fullscreen) {
                  player.fullscreen = false;
                  await new Promise(resolve => setTimeout(resolve, 300));
                }

                const existingDialog = document.querySelector('.quick-forward-settings-dialog');
                existingDialog?.remove();

                const container = document.createElement('div');
                container.className = 'quick-forward-settings-dialog';
                container.style.cssText = `
                  position: fixed;
                  inset: 0;
                  z-index: 10000;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  padding: 16px;
                  background: rgba(0, 0, 0, 0.6);
                  backdrop-filter: blur(3px);
                `;
                container.innerHTML = `
                  <div role="dialog" aria-modal="true" style="width: min(360px, 100%); background: #1f2937; color: #fff; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; padding: 20px; box-shadow: 0 16px 48px rgba(0,0,0,.45);">
                    <div style="font-size: 17px; font-weight: 600; margin-bottom: 8px;">快捷快进设置</div>
                    <div style="color: #9ca3af; font-size: 13px; line-height: 1.5; margin-bottom: 16px;">设置点击底部按钮或按 P 键时向前跳转的时间。</div>
                    <label for="quick-forward-input" style="display: block; color: #d1d5db; font-size: 13px; margin-bottom: 6px;">快进时长（秒）</label>
                    <input id="quick-forward-input" type="number" min="1" step="1" value="${quickForwardSecondsRef.current}" style="box-sizing: border-box; width: 100%; height: 40px; padding: 0 10px; border: 1px solid #4b5563; border-radius: 6px; background: #111827; color: #fff; font-size: 14px; outline: none;" />
                    <div style="display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px;">
                      <button type="button" data-action="cancel" style="height: 36px; padding: 0 14px; border: 0; border-radius: 6px; background: #374151; color: #fff; cursor: pointer;">取消</button>
                      <button type="button" data-action="confirm" style="height: 36px; padding: 0 14px; border: 0; border-radius: 6px; background: #0d9488; color: #fff; cursor: pointer;">保存</button>
                    </div>
                  </div>
                `;
                document.body.appendChild(container);

                const input = container.querySelector('#quick-forward-input') as HTMLInputElement;
                const cancelButton = container.querySelector('[data-action="cancel"]');
                const confirmButton = container.querySelector('[data-action="confirm"]');
                const cleanup = () => container.remove();
                const save = () => {
                  const nextSeconds = Number(input.value);
                  if (!Number.isFinite(nextSeconds) || nextSeconds <= 0) {
                    input.focus();
                    if (artPlayerRef.current) {
                      artPlayerRef.current.notice.show = '请输入大于 0 的有效秒数';
                    }
                    return;
                  }

                  const normalizedSeconds = Math.max(1, Math.round(nextSeconds));
                  setQuickForwardSeconds(normalizedSeconds);
                  quickForwardSecondsRef.current = normalizedSeconds;
                  localStorage.setItem('quickForwardSeconds', String(normalizedSeconds));
                  if (artPlayerRef.current) {
                    artPlayerRef.current.notice.show = `快捷快进已设置为${formatQuickForwardDuration(normalizedSeconds)}`;
                  }
                  cleanup();
                };

                cancelButton?.addEventListener('click', cleanup);
                confirmButton?.addEventListener('click', save);
                container.addEventListener('click', (event) => {
                  if (event.target === container) cleanup();
                });
                input.addEventListener('keydown', (event) => {
                  if (event.key === 'Enter') save();
                  if (event.key === 'Escape') cleanup();
                });
                input.focus();
                input.select();
                return '打开设置';
              },
            },
            {
              name: '跳过配置',
              html: '跳过配置',
              icon: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="5" cy="12" r="2" fill="#ffffff"/><path d="M9 12L15 12" stroke="#ffffff" stroke-width="2"/><circle cx="19" cy="12" r="2" fill="#ffffff"/></svg>',
              tooltip:
                skipConfigRef.current.intro_time === 0 && skipConfigRef.current.outro_time === 0
                  ? '设置跳过配置'
                  : `片头: ${formatTime(skipConfigRef.current.intro_time)} | 片尾: ${formatTime(Math.abs(skipConfigRef.current.outro_time))}`,
              onClick: async function () {
                const player = artPlayerRef.current;
                if (player) {
                  // 如果处于全屏状态，先退出全屏
                  if (player.fullscreen) {
                    player.fullscreen = false;
                    // 等待全屏退出动画完成
                    await new Promise(resolve => setTimeout(resolve, 300));
                  }

                  // 使用 ArtPlayer 的 prompt 功能创建输入弹窗
                  const currentIntro = skipConfigRef.current.intro_time || 0;
                  const currentOutro = Math.abs(skipConfigRef.current.outro_time) || 0;

                  // 创建一个自定义的提示框
                  const container = document.createElement('div');
                  container.style.cssText = `
                  position: fixed;
                  top: 50%;
                  left: 50%;
                  transform: translate(-50%, -50%);
                  background: rgba(0, 0, 0, 0.9);
                  padding: 20px;
                  border-radius: 8px;
                  z-index: 9999;
                  min-width: 300px;
                  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
                `;

                  container.innerHTML = `
                  <div style="color: white; margin-bottom: 15px; font-size: 16px; font-weight: bold; border-bottom: 1px solid #444; padding-bottom: 10px;">
                    跳过配置
                  </div>
                  <div style="color: #aaa; font-size: 13px; margin-bottom: 15px; line-height: 1.5;">
                    设置片头片尾跳过时间，到达时间自动跳过
                  </div>
                  <div style="margin-bottom: 10px;">
                    <label style="color: white; display: block; margin-bottom: 5px; font-size: 14px; font-weight: 500;">
                      片头时间 (秒)
                      <span style="color: #888; font-size: 12px; font-weight: normal; margin-left: 8px;">从视频开始跳过的时长</span>
                    </label>
                    <div style="display: flex; gap: 8px;">
                      <input id="intro-input" type="number" min="0" step="1" value="${currentIntro}" placeholder="如: 90"
                             style="flex: 1; padding: 8px; border-radius: 4px; border: 1px solid #444; background: #222; color: white; font-size: 14px;" />
                      <button id="set-intro-btn" style="padding: 8px 12px; border-radius: 4px; border: none; background: #007bff; color: white; cursor: pointer; font-size: 14px; white-space: nowrap;">
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="vertical-align: middle; margin-right: 4px;">
                          <circle cx="12" cy="12" r="10" stroke="white" stroke-width="2"/>
                          <path d="M12 6v6l4 4" stroke="white" stroke-width="2" stroke-linecap="round"/>
                        </svg>
                        当前时间
                      </button>
                    </div>
                  </div>
                  <div style="margin-bottom: 15px;">
                    <label style="color: white; display: block; margin-bottom: 5px; font-size: 14px; font-weight: 500;">
                      片尾时间 (秒)
                      <span style="color: #888; font-size: 12px; font-weight: normal; margin-left: 8px;">从视频结尾向前跳过的时长</span>
                    </label>
                    <div style="display: flex; gap: 8px;">
                      <input id="outro-input" type="number" min="0" step="1" value="${currentOutro}" placeholder="如: 120"
                             style="flex: 1; padding: 8px; border-radius: 4px; border: 1px solid #444; background: #222; color: white; font-size: 14px;" />
                      <button id="set-outro-btn" style="padding: 8px 12px; border-radius: 4px; border: none; background: #007bff; color: white; cursor: pointer; font-size: 14px; white-space: nowrap;">
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="vertical-align: middle; margin-right: 4px;">
                          <circle cx="12" cy="12" r="10" stroke="white" stroke-width="2"/>
                          <path d="M12 6v6l4 4" stroke="white" stroke-width="2" stroke-linecap="round"/>
                        </svg>
                        当前时间
                      </button>
                    </div>
                  </div>
                  <div style="background: rgba(0, 123, 255, 0.1); border-left: 3px solid #007bff; padding: 10px; margin-bottom: 15px; border-radius: 4px;">
                    <div style="color: #88c0ff; font-size: 12px; line-height: 1.6;">
                      <div style="margin-bottom: 4px;">💡 <strong>提示：</strong></div>
                      <div>• 点击"当前时间"可快速设置为播放位置</div>
                      <div>• 片头90秒表示跳过前1分30秒</div>
                      <div>• 片尾120秒表示跳过最后2分钟</div>
                    </div>
                  </div>
                  <div style="display: flex; gap: 10px; justify-content: flex-end; border-top: 1px solid #444; padding-top: 15px;">
                    <button id="cancel-btn" style="padding: 8px 16px; border-radius: 4px; border: none; background: #444; color: white; cursor: pointer; font-size: 14px; transition: background 0.2s;" onmouseover="this.style.background='#555'" onmouseout="this.style.background='#444'">取消</button>
                    <button id="clear-btn" style="padding: 8px 16px; border-radius: 4px; border: none; background: #d9534f; color: white; cursor: pointer; font-size: 14px; transition: background 0.2s;" onmouseover="this.style.background='#c9302c'" onmouseout="this.style.background='#d9534f'">清除</button>
                    <button id="confirm-btn" style="padding: 8px 16px; border-radius: 4px; border: none; background: #5cb85c; color: white; cursor: pointer; font-size: 14px; transition: background 0.2s;" onmouseover="this.style.background='#4cae4c'" onmouseout="this.style.background='#5cb85c'">确定</button>
                  </div>
                `;

                  document.body.appendChild(container);

                  const introInput = container.querySelector('#intro-input') as HTMLInputElement;
                  const outroInput = container.querySelector('#outro-input') as HTMLInputElement;
                  const setIntroBtn = container.querySelector('#set-intro-btn');
                  const setOutroBtn = container.querySelector('#set-outro-btn');
                  const cancelBtn = container.querySelector('#cancel-btn');
                  const clearBtn = container.querySelector('#clear-btn');
                  const confirmBtn = container.querySelector('#confirm-btn');

                  const cleanup = () => {
                    document.body.removeChild(container);
                  };

                  // 设置片头为当前时间
                  setIntroBtn?.addEventListener('click', () => {
                    const currentTime = player.currentTime || 0;
                    if (currentTime > 0) {
                      introInput.value = Math.floor(currentTime).toString();
                    }
                  });

                  // 设置片尾为当前时间到结束的时长
                  setOutroBtn?.addEventListener('click', () => {
                    if (player.duration && player.currentTime) {
                      const outroTime = player.duration - player.currentTime;
                      if (outroTime > 0) {
                        outroInput.value = Math.floor(outroTime).toString();
                      }
                    }
                  });

                  cancelBtn?.addEventListener('click', cleanup);

                  clearBtn?.addEventListener('click', () => {
                    handleSkipConfigChange({
                      enable: false,
                      intro_time: 0,
                      outro_time: 0,
                    });
                    cleanup();
                  });

                  confirmBtn?.addEventListener('click', () => {
                    const introTime = parseFloat(introInput.value) || 0;
                    const outroTime = parseFloat(outroInput.value) || 0;

                    const newConfig = {
                      ...skipConfigRef.current,
                      intro_time: introTime,
                      outro_time: outroTime > 0 ? -outroTime : 0,
                    };

                    handleSkipConfigChange(newConfig);
                    cleanup();
                  });

                  // 支持 Enter 键确认
                  const handleEnter = (e: KeyboardEvent) => {
                    if (e.key === 'Enter') {
                      confirmBtn?.dispatchEvent(new Event('click'));
                    } else if (e.key === 'Escape') {
                      cancelBtn?.dispatchEvent(new Event('click'));
                    }
                  };

                  introInput.addEventListener('keydown', handleEnter);
                  outroInput.addEventListener('keydown', handleEnter);
                }
                return '';
              },
            },
          ],
          // 控制栏配置
          controls: [
            {
              position: 'left',
              index: 40,
              html: `<i class="art-icon flex quick-forward-control"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 5v14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><path d="m16 17 5-5-5-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M21 12H9" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg></i>`,
              tooltip: '快捷快进',
              mounted: ($el: HTMLElement) => {
                $el.classList.add('quick-forward-control-wrapper');
                if (!document.getElementById('quick-forward-control-style')) {
                  const style = document.createElement('style');
                  style.id = 'quick-forward-control-style';
                  style.textContent = `
                    @media (max-width: 767px) and (orientation: portrait) {
                      .quick-forward-control-wrapper {
                        display: none !important;
                      }
                    }
                  `;
                  document.head.appendChild(style);
                }
              },
              click: function () {
                seekQuickForward();
              },
            },
            {
              position: 'left',
              index: 13,
              html: '<i class="art-icon flex"><svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z" fill="currentColor"/></svg></i>',
              tooltip: '播放下一集',
              click: function () {
                // 房员禁用下一集按钮
                if (playSync.shouldDisableControls) {
                  if (artPlayerRef.current) {
                    artPlayerRef.current.notice.show = '房员无法切换集数，请等待房主操作';
                  }
                  return;
                }
                handleNextEpisode();
              },
            },
            // iOS 设备上添加自定义全屏按钮（横屏和竖屏都显示）
            ...(isIOS ? [{
              position: 'right',
              index: 100,  // 大数字确保在设置按钮右边
              html: '<i class="art-icon ios-portrait-fullscreen"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" fill="currentColor"/></svg></i>',
              tooltip: '全屏',
              style: {
                color: '#fff',
              },
              mounted: function ($el: HTMLElement) {
                // 添加 CSS 样式：横屏和竖屏都显示
                const style = document.createElement('style');
                style.textContent = `
                /* iOS 自定义全屏按钮在所有方向都显示 */
                .ios-portrait-fullscreen {
                  display: inline-flex !important;
                }
                /* iOS 全屏选择对话框样式（遵循项目统一风格） */
                .ios-fullscreen-dialog {
                  position: fixed;
                  top: 0;
                  left: 0;
                  right: 0;
                  bottom: 0;
                  background: rgba(0, 0, 0, 0.6);
                  backdrop-filter: blur(4px);
                  z-index: 1000;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  padding: 16px;
                }
                .ios-fullscreen-dialog-content {
                  background: white;
                  border-radius: 16px;
                  max-width: 480px;
                  width: 100%;
                  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
                  overflow: hidden;
                }
                .dark .ios-fullscreen-dialog-content {
                  background: rgb(31, 41, 55);
                }

                /* 标题栏 */
                .ios-fullscreen-dialog-header {
                  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
                  padding: 20px 24px;
                }
                .ios-fullscreen-dialog-title {
                  font-size: 20px;
                  font-weight: 700;
                  color: white;
                  display: flex;
                  align-items: center;
                  gap: 10px;
                  margin-bottom: 6px;
                }
                .ios-fullscreen-dialog-title svg {
                  stroke: white;
                }
                .ios-fullscreen-dialog-subtitle {
                  font-size: 14px;
                  color: rgba(255, 255, 255, 0.9);
                  margin: 0;
                }

                /* 选项列表 */
                .ios-fullscreen-dialog-options {
                  padding: 16px;
                  display: flex;
                  flex-direction: column;
                  gap: 12px;
                }
                .ios-fullscreen-option {
                  display: flex;
                  align-items: center;
                  gap: 16px;
                  padding: 16px;
                  background: rgb(249, 250, 251);
                  border: 2px solid transparent;
                  border-radius: 12px;
                  cursor: pointer;
                  transition: all 0.2s;
                  text-align: left;
                }
                .dark .ios-fullscreen-option {
                  background: rgba(55, 65, 81, 0.5);
                }
                .ios-fullscreen-option:hover {
                  background: rgb(243, 244, 246);
                  border-color: #22c55e;
                  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.15);
                }
                .dark .ios-fullscreen-option:hover {
                  background: rgb(55, 65, 81);
                }
                .ios-fullscreen-option:active {
                  transform: scale(0.98);
                }

                /* 推荐选项 */
                .ios-fullscreen-option-recommended {
                  border-color: #22c55e;
                }

                /* 选项图标 */
                .ios-fullscreen-option-icon {
                  flex-shrink: 0;
                  width: 48px;
                  height: 48px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  background: white;
                  border-radius: 10px;
                  color: #22c55e;
                }
                .dark .ios-fullscreen-option-icon {
                  background: rgb(31, 41, 55);
                }
                .ios-fullscreen-option-recommended .ios-fullscreen-option-icon {
                  background: #22c55e;
                  color: white;
                }

                /* 选项内容 */
                .ios-fullscreen-option-content {
                  flex: 1;
                }
                .ios-fullscreen-option-title {
                  font-size: 16px;
                  font-weight: 600;
                  color: rgb(17, 24, 39);
                  margin-bottom: 4px;
                  display: flex;
                  align-items: center;
                  gap: 8px;
                }
                .dark .ios-fullscreen-option-title {
                  color: white;
                }
                .ios-fullscreen-option-badge {
                  display: inline-block;
                  padding: 2px 8px;
                  background: #22c55e;
                  color: white;
                  font-size: 12px;
                  font-weight: 500;
                  border-radius: 4px;
                }
                .ios-fullscreen-option-desc {
                  font-size: 13px;
                  color: rgb(107, 114, 128);
                  line-height: 1.4;
                }
                .dark .ios-fullscreen-option-desc {
                  color: rgb(156, 163, 175);
                }

                /* 箭头图标 */
                .ios-fullscreen-option-arrow {
                  flex-shrink: 0;
                  color: rgb(209, 213, 219);
                  transition: transform 0.2s;
                }
                .dark .ios-fullscreen-option-arrow {
                  color: rgb(75, 85, 99);
                }
                .ios-fullscreen-option:hover .ios-fullscreen-option-arrow {
                  transform: translateX(4px);
                  color: #22c55e;
                }

                /* 底部提示 */
                .ios-fullscreen-dialog-footer {
                  padding: 16px 24px;
                  background: rgb(249, 250, 251);
                  border-top: 1px solid rgb(229, 231, 235);
                  display: flex;
                  align-items: flex-start;
                  gap: 10px;
                  font-size: 12px;
                  color: rgb(107, 114, 128);
                  line-height: 1.5;
                }
                .dark .ios-fullscreen-dialog-footer {
                  background: rgba(17, 24, 39, 0.5);
                  border-top-color: rgb(55, 65, 81);
                  color: rgb(156, 163, 175);
                }
                .ios-fullscreen-dialog-footer svg {
                  flex-shrink: 0;
                  margin-top: 2px;
                  stroke: currentColor;
                }
              `;
                document.head.appendChild(style);
              },
              click: function () {
                if (!artPlayerRef.current) return;

                // 检测是否在 PWA 模式下
                const isPWA = window.matchMedia('(display-mode: standalone)').matches ||
                  window.matchMedia('(display-mode: fullscreen)').matches ||
                  (window.navigator as any).standalone === true;

                // 检查是否已经在原生全屏状态
                const isInNativeFullscreen = !!(document.fullscreenElement || (document as any).webkitFullscreenElement);

                // 如果已经在原生全屏状态，退出原生全屏
                if (isInNativeFullscreen) {
                  const exitFullscreen = (document as any).exitFullscreen ||
                    (document as any).webkitExitFullscreen ||
                    (document as any).mozCancelFullScreen ||
                    (document as any).msExitFullscreen;
                  if (exitFullscreen) {
                    try {
                      const result = exitFullscreen.call(document);
                      if (result && typeof result.catch === 'function') {
                        result.catch((err: Error) => console.error('退出全屏失败:', err));
                      }
                    } catch (err) {
                      console.error('退出全屏失败:', err);
                    }
                  }
                  return;
                }

                // 如果已经在网页全屏状态，退出网页全屏
                if (artPlayerRef.current.fullscreenWeb) {
                  artPlayerRef.current.fullscreenWeb = false;
                  return;
                }

                // 如果在 PWA 模式下，直接使用容器全屏（可以隐藏状态栏）
                if (isPWA) {
                  const container = artPlayerRef.current.template.$container;
                  if (container && container.webkitEnterFullscreen) {
                    container.webkitEnterFullscreen().catch((err: Error) => {
                      console.error('PWA 全屏失败:', err);
                      // 如果失败，降级使用网页全屏
                      artPlayerRef.current.fullscreenWeb = true;
                    });
                  } else {
                    // 不支持原生全屏，使用网页全屏
                    artPlayerRef.current.fullscreenWeb = true;
                  }
                  return;
                }

                // 非 PWA 模式：创建对话框（使用项目统一风格）
                const dialog = document.createElement('div');
                dialog.className = 'ios-fullscreen-dialog';
                dialog.innerHTML = `
                <div class="ios-fullscreen-dialog-content">
                  <!-- 标题栏 -->
                  <div class="ios-fullscreen-dialog-header">
                    <h3 class="ios-fullscreen-dialog-title">
                      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" stroke="currentColor" stroke-width="2" fill="none"/>
                      </svg>
                      选择全屏模式
                    </h3>
                    <p class="ios-fullscreen-dialog-subtitle">
                      由于 iOS 系统限制，原生全屏会使用系统播放器，将无法显示弹幕及使用部分播放器功能。网页全屏可能无法完全占满屏幕，但可保留所有功能。
                    </p>
                  </div>

                  <!-- 选项列表 -->
                  <div class="ios-fullscreen-dialog-options">
                    <!-- 网页全屏选项 -->
                    <button class="ios-fullscreen-option ios-fullscreen-option-recommended" data-action="web">
                      <div class="ios-fullscreen-option-icon">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <rect x="3" y="3" width="18" height="18" rx="2" stroke="currentColor" stroke-width="2"/>
                          <path d="M7 10h2v7H7zm4-3h2v10h-2zm4 6h2v4h-2z" fill="currentColor"/>
                        </svg>
                      </div>
                      <div class="ios-fullscreen-option-content">
                        <div class="ios-fullscreen-option-title">
                          网页全屏
                          <span class="ios-fullscreen-option-badge">推荐</span>
                        </div>
                        <div class="ios-fullscreen-option-desc">
                          保留弹幕、控制栏等所有功能
                        </div>
                      </div>
                      <svg class="ios-fullscreen-option-arrow" width="20" height="20" viewBox="0 0 24 24" fill="none">
                        <path d="M9 5l7 7-7 7" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                      </svg>
                    </button>

                    <!-- 原生全屏选项 -->
                    <button class="ios-fullscreen-option" data-action="native">
                      <div class="ios-fullscreen-option-icon">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" stroke="currentColor" stroke-width="2"/>
                        </svg>
                      </div>
                      <div class="ios-fullscreen-option-content">
                        <div class="ios-fullscreen-option-title">
                          原生全屏
                        </div>
                        <div class="ios-fullscreen-option-desc">
                          使用系统播放器，部分功能不可用
                        </div>
                      </div>
                      <svg class="ios-fullscreen-option-arrow" width="20" height="20" viewBox="0 0 24 24" fill="none">
                        <path d="M9 5l7 7-7 7" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                      </svg>
                    </button>
                  </div>

                  <!-- 底部提示 -->
                  <div class="ios-fullscreen-dialog-footer">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                      <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
                      <path d="M12 16v-4m0-4h.01" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                    </svg>
                    <span>将网站添加到主屏幕（PWA）后，网页全屏可以完全全屏</span>
                  </div>
                </div>
              `;

                // 添加到页面
                document.body.appendChild(dialog);

                // 点击背景关闭
                dialog.addEventListener('click', (e) => {
                  if (e.target === dialog) {
                    document.body.removeChild(dialog);
                  }
                });

                // 按钮点击事件
                const buttons = dialog.querySelectorAll('.ios-fullscreen-option');
                buttons.forEach(button => {
                  button.addEventListener('click', () => {
                    const action = button.getAttribute('data-action');

                    if (action === 'web') {
                      // 网页全屏
                      if (artPlayerRef.current) {
                        artPlayerRef.current.fullscreenWeb = true;
                      }
                    } else if (action === 'native') {
                      // 原生全屏（尝试使用浏览器的全屏 API）
                      if (artPlayerRef.current && artPlayerRef.current.template.$video) {
                        const videoElement = artPlayerRef.current.template.$video;
                        if (videoElement.requestFullscreen) {
                          videoElement.requestFullscreen();
                        } else if ((videoElement as any).webkitEnterFullscreen) {
                          (videoElement as any).webkitEnterFullscreen();
                        }
                      }
                    }

                    // 关闭对话框
                    document.body.removeChild(dialog);
                  });
                });
              },
            }] : []),
          ],
        });

        artPlayerRef.current.on('destroy', () => {
          clearPlayerTimeouts();
        });

        artPlayerRef.current.on('flip', syncAnime4KCanvasFlip);

        // 监听播放器事件
        artPlayerRef.current.on('ready', async () => {
          setError(null);

          rescueWebkitHlsBootstrap('player-ready');

          // 标记播放器已就绪，触发 usePlaySync 设置事件监听器
          setPlayerReady(true);
          console.log('[PlayPage] Player ready, triggering sync setup');

          // 应用进度条图标配置 - 尽早执行
          const applyProgressThumbConfig = () => {
            try {
              const config = (window as any).RUNTIME_CONFIG;

              if (!config || config.PROGRESS_THUMB_TYPE === 'default') {
                // 使用默认样式，移除自定义样式
                const oldStyle = document.getElementById('custom-progress-thumb-style');
                if (oldStyle) oldStyle.remove();
                return;
              }

              let thumbUrl = '';
              let thumbColor = '#22c55e'; // 默认绿色

              if (config.PROGRESS_THUMB_TYPE === 'preset' && config.PROGRESS_THUMB_PRESET_ID) {
                const presetConfig: Record<string, { url: string; color: string }> = {
                  renako: { url: '/icons/q/renako.png', color: '#ec4899' }, // 粉色
                  irena: { url: '/icons/q/irena.png', color: '#f8fafc' }, // 雪白色
                  emilia: { url: '/icons/q/emilia.png', color: '#f8fafc' }, // 雪白色
                };
                const preset = presetConfig[config.PROGRESS_THUMB_PRESET_ID];
                if (preset) {
                  thumbUrl = preset.url;
                  thumbColor = preset.color;
                }
              } else if (config.PROGRESS_THUMB_TYPE === 'custom' && config.PROGRESS_THUMB_CUSTOM_URL) {
                thumbUrl = config.PROGRESS_THUMB_CUSTOM_URL;
              }

              // 修改 ArtPlayer 的主题色
              if (artPlayerRef.current) {
                artPlayerRef.current.theme = thumbColor;
              }

              if (thumbUrl) {
                // 根据预设ID确定尺寸
                let width = '30px';
                let height = '30px';
                let marginLeft = '-15px';

                // renako 图标特殊处理（288x404比例，放大1.25倍）
                if (config.PROGRESS_THUMB_TYPE === 'preset' && config.PROGRESS_THUMB_PRESET_ID === 'renako') {
                  width = '26.875px'; // 21.5 * 1.25
                  height = '37.5px'; // 30 * 1.25
                  marginLeft = '-13.4375px'; // 10.75 * 1.25
                }

                // 动态设置背景图片
                const style = document.createElement('style');
                style.id = 'custom-progress-thumb-style';
                style.textContent = `
                /* 替换默认的进度条圆点为自定义图标 */
                .art-video-player .art-progress-indicator {
                  width: ${width} !important;
                  height: ${height} !important;
                  background-image: url('${thumbUrl}') !important;
                  background-size: contain !important;
                  background-repeat: no-repeat !important;
                  background-position: center !important;
                  background-color: transparent !important;
                  border-radius: 0 !important;
                  margin-left: ${marginLeft} !important;
                }
              `;

                // 移除旧样式
                const oldStyle = document.getElementById('custom-progress-thumb-style');
                if (oldStyle) oldStyle.remove();

                document.head.appendChild(style);
              }
            } catch (error) {
              console.error('[进度条图标] 应用配置失败:', error);
            }
          };

          applyProgressThumbConfig();

          // 添加字幕切换和本地字幕上传功能；ASS/SSA 需要播放器 ready 后挂载 JASSUB
          const readySubtitles = (detailRef.current?.subtitles?.[currentEpisodeIndexRef.current] || []) as SourceSubtitleItem[];
          const readyDefaultSubtitle = readySubtitles[0];
          if (readyDefaultSubtitle && isAdvancedSourceSubtitle(readyDefaultSubtitle)) {
            void switchSourceSubtitle(readyDefaultSubtitle)
              .catch((error) => {
                console.warn('[Subtitle] 高级字幕自动加载失败:', error);
                if (artPlayerRef.current) {
                  artPlayerRef.current.subtitle.show = false;
                }
                currentSubtitleLabelRef.current = '关闭';
              })
              .finally(updateSubtitleSetting);
          } else {
            updateSubtitleSetting();
          }

          // 添加字幕大小设置
          if (artPlayerRef.current) {
            const savedSubtitleSize = typeof window !== 'undefined' ? localStorage.getItem('subtitleSize') || '2em' : '2em';
            const defaultOption = savedSubtitleSize === '1em' ? '小' : savedSubtitleSize === '3em' ? '大' : savedSubtitleSize === '4em' ? '超大' : '中';

            artPlayerRef.current.setting.add({
              html: '字幕大小',
              selector: [
                { html: '小', size: '1em' },
                { html: '中', size: '2em' },
                { html: '大', size: '3em' },
                { html: '超大', size: '4em' },
              ],
              onSelect: function (item: any) {
                if (artPlayerRef.current) {
                  artPlayerRef.current.subtitle.style({
                    fontSize: item.size,
                  });
                  // 保存到 localStorage
                  if (typeof window !== 'undefined') {
                    localStorage.setItem('subtitleSize', item.size);
                  }
                }
                return item.html;
              },
              default: defaultOption,
            });
          }

          // 控制截图按钮在小屏幕竖屏时隐藏
          const updateScreenshotVisibility = () => {
            const screenshotBtn = document.querySelector('.art-control-screenshot') as HTMLElement;
            if (screenshotBtn) {
              const isPortrait = window.innerHeight > window.innerWidth;
              const isSmallScreen = window.innerWidth < 768;
              screenshotBtn.style.display = (isPortrait && isSmallScreen) ? 'none' : '';
            }
          };
          updateScreenshotVisibility();
          window.addEventListener('resize', updateScreenshotVisibility);
          artPlayerRef.current.on('fullscreen', updateScreenshotVisibility);
          artPlayerRef.current.on('fullscreenWeb', updateScreenshotVisibility);

          // iOS 设备：动态调整弹幕设置面板位置，避免被遮挡
          if (isIOS && artPlayerRef.current) {
            // 使用 MutationObserver 监听弹幕设置面板的显示
            let isAdjusting = false; // 防止重复调整的标记
            const observer = new MutationObserver(() => {
              if (isAdjusting) return; // 如果正在调整，跳过

              const panel = document.querySelector('.apd-config-panel') as HTMLElement;
              if (panel && panel.style.display !== 'none') {
                // 获取当前的 left 值
                const currentLeft = parseInt(panel.style.left || '0', 10);

                // 如果 left 值异常小（iOS 上只有 -5px），调整为正常值（-246px，比标准位置再往左 100px）
                if (currentLeft > -50) {
                  isAdjusting = true; // 设置标记，防止重复触发
                  const adjustedLeft = -246;
                  panel.style.left = `${adjustedLeft}px`;
                  console.log('[iOS] 已调整弹幕设置面板位置: 从', currentLeft, '调整为', adjustedLeft);

                  // 延迟重置标记
                  setTimeout(() => {
                    isAdjusting = false;
                  }, 100);
                }
              }
            });

            // 监听整个播放器容器的 DOM 变化
            if (artRef.current) {
              observer.observe(artRef.current, {
                childList: true,
                subtree: true,
                attributes: true,
                attributeFilter: ['style', 'class']
              });
            }

            // 清理函数
            artPlayerRef.current.on('destroy', () => {
              observer.disconnect();
            });
          }

          // iOS 设备：监听屏幕方向变化，自动调整全屏状态
          if (isIOS && artPlayerRef.current) {
            const handleOrientationChange = () => {
              if (!artPlayerRef.current) return;

              // 获取当前屏幕方向
              const isLandscape = window.matchMedia('(orientation: landscape)').matches;
              const isPortrait = window.matchMedia('(orientation: portrait)').matches;

              console.log('[iOS] 屏幕方向变化:', {
                isLandscape,
                isPortrait,
                fullscreenWeb: artPlayerRef.current.fullscreenWeb
              });

              // 如果在网页全屏状态下旋转到横屏，切换到正常全屏
              if (artPlayerRef.current.fullscreenWeb && isLandscape) {
                console.log('[iOS] 横屏模式：从网页全屏切换到正常全屏');
                // 先退出网页全屏
                artPlayerRef.current.fullscreenWeb = false;
                // 延迟一下再进入正常全屏，确保布局已更新
                setTimeout(() => {
                  if (artPlayerRef.current) {
                    artPlayerRef.current.fullscreenWeb = true;
                  }
                }, 100);
              }
            };

            // 监听屏幕方向变化
            window.addEventListener('orientationchange', handleOrientationChange);
            // 也监听 resize 事件（某些设备上更可靠）
            window.addEventListener('resize', handleOrientationChange);

            // 清理函数
            artPlayerRef.current.on('destroy', () => {
              window.removeEventListener('orientationchange', handleOrientationChange);
              window.removeEventListener('resize', handleOrientationChange);
            });
          }

          // 从 art.storage 读取弹幕设置并应用
          if (artPlayerRef.current) {
            const storedDanmakuSettings = artPlayerRef.current.storage.get('danmaku_settings');
            if (storedDanmakuSettings) {
              // 合并存储的设置到当前设置
              const mergedSettings = {
                ...danmakuSettingsRef.current,
                ...storedDanmakuSettings,
              };
              setDanmakuSettings(mergedSettings);
              saveDanmakuSettings(mergedSettings);
            }
          }

          // 保存弹幕插件引用
          if (artPlayerRef.current?.plugins?.artplayerPluginDanmuku) {
            danmakuPluginRef.current = artPlayerRef.current.plugins.artplayerPluginDanmuku;

            // 监听弹幕配置变化事件
            artPlayerRef.current.on('artplayerPluginDanmuku:config', () => {
              if (danmakuPluginRef.current?.option) {
                const newSettings = {
                  ...danmakuSettingsRef.current,
                  opacity: danmakuPluginRef.current.option.opacity || danmakuSettingsRef.current.opacity,
                  fontSize: danmakuPluginRef.current.option.fontSize || danmakuSettingsRef.current.fontSize,
                  speed: danmakuPluginRef.current.option.speed || danmakuSettingsRef.current.speed,
                  marginTop: (danmakuPluginRef.current.option.margin && danmakuPluginRef.current.option.margin[0]) ?? danmakuSettingsRef.current.marginTop,
                  marginBottom: (danmakuPluginRef.current.option.margin && danmakuPluginRef.current.option.margin[1]) ?? danmakuSettingsRef.current.marginBottom,
                };

                // 保存到 localStorage 和 art.storage
                setDanmakuSettings(newSettings);
                saveDanmakuSettings(newSettings);
                if (artPlayerRef.current?.storage) {
                  artPlayerRef.current.storage.set('danmaku_settings', newSettings);
                }

                console.log('弹幕设置已更新并保存:', newSettings);
              }
            });

            // 自动搜索并加载弹幕
            await autoSearchDanmaku();


            if (artPlayerRef.current) {
              // 监听弹幕显示/隐藏事件，保存开关状态到 localStorage
              artPlayerRef.current.on('artplayerPluginDanmuku:show', () => {
                danmakuDisplayStateRef.current = true;
                saveDanmakuDisplayState(true);
              });

              artPlayerRef.current.on('artplayerPluginDanmuku:hide', () => {
                danmakuDisplayStateRef.current = false;
                saveDanmakuDisplayState(false);
              });
            }

          }

          // 播放器就绪后，如果正在播放则请求 Wake Lock
          if (artPlayerRef.current && !artPlayerRef.current.paused) {
            requestWakeLock();
          }
        });

        // 监听播放状态变化，控制 Wake Lock
        artPlayerRef.current.on('play', () => {
          requestWakeLock();
        });

        artPlayerRef.current.on('pause', () => {
          releaseWakeLock();
          saveCurrentPlayProgress();
        });

        artPlayerRef.current.on('video:ended', () => {
          releaseWakeLock();
        });

        // 如果播放器初始化时已经在播放状态，则请求 Wake Lock
        if (artPlayerRef.current && !artPlayerRef.current.paused) {
          requestWakeLock();
        }

        artPlayerRef.current.on('video:volumechange', () => {
          lastVolumeRef.current = artPlayerRef.current.volume;
        });
        artPlayerRef.current.on('video:ratechange', () => {
          const currentRate = artPlayerRef.current.playbackRate;
          const shouldIgnoreSafariReset =
            isWebkit &&
            Date.now() < playbackRateRestoreWindowUntilRef.current &&
            Math.abs(currentRate - 1) < 0.01 &&
            lastPlaybackRateRef.current > 1;

          if (shouldIgnoreSafariReset) {
            // Safari 切集后可能偷偷回到 1x，这不是用户真实选择，不要覆盖记忆值。
            schedulePlayerTimeout(() => {
              if (
                artPlayerRef.current &&
                Math.abs(
                  artPlayerRef.current.playbackRate - lastPlaybackRateRef.current
                ) > 0.01
              ) {
                artPlayerRef.current.playbackRate = lastPlaybackRateRef.current;
              }
            }, 0);
            syncPlaybackPitch();
            return;
          }

          lastPlaybackRateRef.current = currentRate;
          persistPlaybackRate(currentRate);
          syncPlaybackPitch();
        });
        artPlayerRef.current.on('video:playing', () => {
          if (
            isWebkit &&
            Date.now() < playbackRateRestoreWindowUntilRef.current &&
            Math.abs(
              artPlayerRef.current.playbackRate - lastPlaybackRateRef.current
            ) > 0.01
          ) {
            artPlayerRef.current.playbackRate = lastPlaybackRateRef.current;
          }
        });

        // 监听网页全屏事件，控制导航栏显示隐藏
        artPlayerRef.current.on('fullscreenWeb', (isFullscreen: boolean) => {
          console.log('网页全屏状态变化:', isFullscreen);
          setIsWebFullscreen(isFullscreen);
        });

        // 添加自定义热力图到播放器控制层
        if (!danmakuHeatmapDisabledRef.current) {
          artPlayerRef.current.controls.add({
            name: 'custom-heatmap',
            position: 'top',
            html: '<canvas id="custom-heatmap-canvas" style="width: 100%; height: 100%; display: block;"></canvas>',
            style: {
              position: 'absolute',
              bottom: '5px',
              left: '0',
              height: '60px',
              pointerEvents: 'none',
              zIndex: '30',
              display: danmakuHeatmapEnabledRef.current ? 'block' : 'none',
            },
            mounted: ($el: HTMLElement) => {
              const canvas = $el.querySelector('#custom-heatmap-canvas') as HTMLCanvasElement;
              if (!canvas) {
                return;
              }

              // 根据实际显示尺寸和设备像素比设置 canvas 分辨率
              const updateCanvasSize = () => {
                const rect = canvas.getBoundingClientRect();
                const dpr = window.devicePixelRatio || 1;
                const newWidth = Math.round(rect.width * dpr);
                const newHeight = Math.round(rect.height * dpr);

                // 只在尺寸真正改变时才更新，避免闪烁
                if (canvas.width !== newWidth || canvas.height !== newHeight) {
                  canvas.width = newWidth;
                  canvas.height = newHeight;
                  return true; // 返回 true 表示尺寸已更新
                }
                return false; // 返回 false 表示尺寸未变化
              };

              // 动态获取进度条的实际位置并调整热力图
              const adjustHeatmapPosition = () => {
                const progressBar = document.querySelector('.art-control-progress') as HTMLElement;

                if (!progressBar) {
                  return;
                }

                if (!$el.parentElement) {
                  return;
                }

                if (progressBar && $el.parentElement) {
                  const rect = progressBar.getBoundingClientRect();
                  const parentRect = $el.parentElement.getBoundingClientRect();

                  // 调整热力图位置以完全匹配进度条
                  $el.style.left = `${rect.left - parentRect.left}px`;
                  $el.style.bottom = `${parentRect.bottom - rect.bottom + 5}px`;
                  $el.style.width = `${rect.width}px`;

                  // 更新 canvas 分辨率
                  updateCanvasSize();
                }
              };

              // 初始调整
              setTimeout(adjustHeatmapPosition, 500);

              // 监听进度条尺寸变化
              const progressBar = document.querySelector('.art-control-progress') as HTMLElement;
              let progressResizeObserver: ResizeObserver | null = null;
              if (progressBar && typeof ResizeObserver !== 'undefined') {
                progressResizeObserver = new ResizeObserver(() => {
                  adjustHeatmapPosition();
                  // 进度条长度变化时也需要重新计算和绘制热力图
                  setTimeout(updateHeatmapData, 100);
                });
                progressResizeObserver.observe(progressBar);
              }

              // 监听全屏状态变化
              if (artPlayerRef.current) {
                artPlayerRef.current.on('fullscreen', () => {
                  setTimeout(adjustHeatmapPosition, 300);
                });

                artPlayerRef.current.on('fullscreenWeb', () => {
                  setTimeout(adjustHeatmapPosition, 300);
                });
              }

              // 监听窗口大小变化
              const resizeHandler = () => {
                adjustHeatmapPosition();
              };
              window.addEventListener('resize', resizeHandler);

              let heatmapData: number[] = [];
              let isHovering = false;
              let hoverTime = 0;
              let tooltipEl: HTMLElement | null = null;

              // 监听热力图开关状态变化
              let lastEnabled = localStorage.getItem('danmaku_heatmap_enabled') === 'true';
              const updateVisibility = () => {
                const enabled = localStorage.getItem('danmaku_heatmap_enabled') === 'true';

                // 只在状态真正改变时才更新 DOM
                if (enabled !== lastEnabled) {
                  $el.style.display = enabled ? 'block' : 'none';

                  // 如果从关闭变为打开，重新调整位置和尺寸
                  if (enabled) {
                    setTimeout(() => {
                      adjustHeatmapPosition();
                      drawHeatmap();
                    }, 50);
                  }

                  lastEnabled = enabled;
                }
              };

              // 定期检查开关状态
              const visibilityInterval = setInterval(updateVisibility, 500);

              // 计算热力图数据（按视频长度的5%分段，使热力图更平滑）
              const calculateHeatmapData = (danmakuList: any[], duration: number) => {
                if (!duration || duration <= 0 || danmakuList.length === 0) {
                  return [];
                }

                // 按视频长度的5%分段，最少20段
                const segments = Math.max(20, Math.ceil(duration * 0.05));
                const segmentDuration = duration / segments;
                const heatData = new Array(segments).fill(0);

                danmakuList.forEach((danmaku: any) => {
                  const segmentIndex = Math.floor(danmaku.time / segmentDuration);
                  if (segmentIndex >= 0 && segmentIndex < segments) {
                    heatData[segmentIndex]++;
                  }
                });

                const maxCount = Math.max(...heatData, 1);
                return heatData.map((count: number) => count / maxCount);
              };

              // 绘制热力图
              const drawHeatmap = () => {
                // 检查热力图是否启用（与初始状态逻辑保持一致）
                const storedValue = localStorage.getItem('danmaku_heatmap_enabled');
                const enabled = storedValue !== null ? storedValue === 'true' : true; // 默认开启
                if (!enabled) {
                  // 热力图已关闭，跳过绘制
                  return;
                }

                if (!artPlayerRef.current) {
                  return;
                }

                if (heatmapData.length === 0) {
                  return;
                }

                const ctx = canvas.getContext('2d');
                if (!ctx) {
                  return;
                }

                const dpr = window.devicePixelRatio || 1;
                const width = canvas.width / dpr;
                const height = canvas.height / dpr;
                const duration = artPlayerRef.current.duration || 0;
                const currentTime = artPlayerRef.current.currentTime || 0;

                ctx.save();
                ctx.scale(dpr, dpr);
                ctx.clearRect(0, 0, width, height);

                const progressRatio = duration > 0 ? currentTime / duration : 0;
                const progressX = progressRatio * width;

                // 绘制未播放部分的曲线
                ctx.beginPath();
                ctx.moveTo(0, height);

                heatmapData.forEach((value: number, index: number) => {
                  const x = (index / heatmapData.length) * width;
                  const y = height - (value * height);

                  if (index === 0) {
                    ctx.lineTo(x, y);
                  } else {
                    // 使用二次贝塞尔曲线使线条平滑
                    const prevX = ((index - 1) / heatmapData.length) * width;
                    const prevY = height - (heatmapData[index - 1] * height);
                    const cpX = (prevX + x) / 2;
                    const cpY = (prevY + y) / 2;
                    ctx.quadraticCurveTo(prevX, prevY, cpX, cpY);
                    ctx.lineTo(x, y);
                  }
                });

                ctx.lineTo(width, height);
                ctx.closePath();
                ctx.fillStyle = 'rgba(128, 128, 128, 0.3)';
                ctx.fill();

                // 绘制已播放部分的曲线（深色）
                if (progressRatio > 0) {
                  ctx.save();
                  ctx.beginPath();
                  ctx.rect(0, 0, progressX, height);
                  ctx.clip();

                  ctx.beginPath();
                  ctx.moveTo(0, height);

                  heatmapData.forEach((value: number, index: number) => {
                    const x = (index / heatmapData.length) * width;
                    const y = height - (value * height);

                    if (index === 0) {
                      ctx.lineTo(x, y);
                    } else {
                      const prevX = ((index - 1) / heatmapData.length) * width;
                      const prevY = height - (heatmapData[index - 1] * height);
                      const cpX = (prevX + x) / 2;
                      const cpY = (prevY + y) / 2;
                      ctx.quadraticCurveTo(prevX, prevY, cpX, cpY);
                      ctx.lineTo(x, y);
                    }
                  });

                  ctx.lineTo(width, height);
                  ctx.closePath();
                  ctx.fillStyle = 'rgba(128, 128, 128, 0.6)';
                  ctx.fill();

                  ctx.restore();
                }

                ctx.restore();
              };

              // 格式化时间
              const formatTime = (seconds: number): string => {
                const h = Math.floor(seconds / 3600);
                const m = Math.floor((seconds % 3600) / 60);
                const s = Math.floor(seconds % 60);

                if (h > 0) {
                  return `${h}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`;
                }
                return `${m}:${s.toString().padStart(2, '0')}`;
              };

              // 获取弹幕密度
              const getDensity = (time: number): string => {
                if (heatmapData.length === 0 || !artPlayerRef.current) return '';
                const duration = artPlayerRef.current.duration || 0;
                if (duration <= 0) return '';

                // 按视频长度的5%分段
                const segments = Math.max(20, Math.ceil(duration * 0.05));
                const segmentDuration = duration / segments;
                const segmentIndex = Math.floor(time / segmentDuration);

                if (segmentIndex >= 0 && segmentIndex < heatmapData.length) {
                  const density = heatmapData[segmentIndex];
                  if (density < 0.2) return '低';
                  if (density < 0.5) return '中';
                  if (density < 0.8) return '高';
                  return '极高';
                }
                return '';
              };

              // 鼠标移动事件
              canvas.addEventListener('mousemove', (e: MouseEvent) => {
                if (!artPlayerRef.current) return;

                const rect = canvas.getBoundingClientRect();
                const x = e.clientX - rect.left;
                const percentage = x / rect.width;
                const duration = artPlayerRef.current.duration || 0;
                hoverTime = percentage * duration;
                isHovering = true;

                // 创建或更新提示框
                if (!tooltipEl) {
                  tooltipEl = document.createElement('div');
                  tooltipEl.style.cssText = `
                  position: absolute;
                  bottom: 100%;
                  transform: translateX(-50%);
                  margin-bottom: 8px;
                  padding: 4px 8px;
                  background: rgba(0, 0, 0, 0.8);
                  color: white;
                  font-size: 12px;
                  border-radius: 4px;
                  white-space: nowrap;
                  pointer-events: none;
                  z-index: 30;
                `;
                  $el.appendChild(tooltipEl);
                }

                tooltipEl.textContent = `${formatTime(hoverTime)} - 弹幕密度: ${getDensity(hoverTime)}`;
                tooltipEl.style.left = `${percentage * 100}%`;
                tooltipEl.style.display = 'block';
              });

              // 鼠标离开事件
              canvas.addEventListener('mouseleave', () => {
                isHovering = false;
                if (tooltipEl) {
                  tooltipEl.style.display = 'none';
                }
              });

              // 点击跳转
              canvas.addEventListener('click', (e: MouseEvent) => {
                if (!artPlayerRef.current) return;

                const rect = canvas.getBoundingClientRect();
                const x = e.clientX - rect.left;
                const percentage = x / rect.width;
                const duration = artPlayerRef.current.duration || 0;
                const time = percentage * duration;

                artPlayerRef.current.currentTime = time;
              });

              // 监听时间更新
              artPlayerRef.current.on('video:timeupdate', drawHeatmap);

              // 监听弹幕数据更新
              const updateHeatmapData = () => {
                if (!artPlayerRef.current) {
                  return;
                }

                if (!danmakuPluginRef.current) {
                  return;
                }

                const duration = artPlayerRef.current.duration || 0;

                // 直接从弹幕插件获取弹幕数据
                const danmakuList = danmakuPluginRef.current.option?.danmuku || [];

                if (danmakuList.length > 0 && duration > 0) {
                  heatmapData = calculateHeatmapData(danmakuList, duration);
                  // 立即绘制热力图
                  drawHeatmap();
                  // 强制再次绘制，确保显示
                  setTimeout(drawHeatmap, 100);
                }
              };

              artPlayerRef.current.on('video:loadedmetadata', updateHeatmapData);

              // 监听弹幕加载完成事件
              artPlayerRef.current.on('danmaku:loaded', () => {
                updateHeatmapData();
              });

              // 监听弹幕插件的配置变化
              if (danmakuPluginRef.current) {
                const originalConfig = danmakuPluginRef.current.config;
                danmakuPluginRef.current.config = function (...args: any[]) {
                  const result = originalConfig.apply(this, args);
                  setTimeout(updateHeatmapData, 100);
                  return result;
                };
              }

              // 使用轮询机制等待弹幕插件准备好（替代固定延迟）
              let pollAttempts = 0;
              const maxPollAttempts = 120; // 最多尝试 120 次（60 秒）
              const pollInterval = 500; // 每 500ms 检查一次

              const pollForDanmakuPlugin = () => {
                if (danmakuPluginRef.current && danmakuPluginRef.current.option?.danmuku) {
                  // 弹幕插件已准备好且有数据
                  updateHeatmapData();
                  return; // 成功，停止轮询
                }

                pollAttempts++;
                if (pollAttempts < maxPollAttempts) {
                  // 继续轮询
                  setTimeout(pollForDanmakuPlugin, pollInterval);
                }
              };

              // 开始轮询
              setTimeout(pollForDanmakuPlugin, 500);

              // 清理
              return () => {
                clearInterval(visibilityInterval);
                window.removeEventListener('resize', resizeHandler);
                if (progressResizeObserver) {
                  progressResizeObserver.disconnect();
                }
                if (tooltipEl && tooltipEl.parentNode) {
                  tooltipEl.parentNode.removeChild(tooltipEl);
                }
              };
            },
          });
        }

        // 添加全屏快进快退按钮
        artPlayerRef.current.layers.add({
          name: 'seek-buttons',
          html: `
          <div class="seek-buttons-container" style="display: none;">
            <button class="seek-button seek-backward" style="position: fixed; left: 20px; top: 40%; transform: translateY(-50%); width: 48px; height: 48px; background: rgba(0,0,0,0.7); border: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 9999; transition: opacity 0.2s;">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M11 18V6l-8.5 6 8.5 6zm.5-6l8.5 6V6l-8.5 6z" fill="white"/>
              </svg>
            </button>
            <button class="seek-button seek-forward" style="position: fixed; right: 20px; top: 40%; transform: translateY(-50%); width: 48px; height: 48px; background: rgba(0,0,0,0.7); border: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 9999; transition: opacity 0.2s;">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M4 18l8.5-6L4 6v12zm9-12v12l8.5-6L13 6z" fill="white"/>
              </svg>
            </button>
          </div>
        `,
          mounted: ($el: HTMLElement) => {
            const container = $el.querySelector('.seek-buttons-container') as HTMLElement;
            const backwardBtn = $el.querySelector('.seek-backward') as HTMLElement;
            const forwardBtn = $el.querySelector('.seek-forward') as HTMLElement;

            // 快退5秒
            backwardBtn.onclick = () => {
              if (artPlayerRef.current) {
                artPlayerRef.current.currentTime = Math.max(0, artPlayerRef.current.currentTime - 5);
              }
            };

            // 快进5秒
            forwardBtn.onclick = () => {
              if (artPlayerRef.current) {
                artPlayerRef.current.currentTime = Math.min(artPlayerRef.current.duration, artPlayerRef.current.currentTime + 5);
              }
            };

            // 监听全屏状态变化
            const updateVisibility = () => {
              const isFullscreen = artPlayerRef.current?.fullscreen || artPlayerRef.current?.fullscreenWeb || !!document.fullscreenElement;
              const isMobile = Math.min(window.innerWidth, window.innerHeight) < 768;
              const controlsVisible = !artPlayerRef.current?.template?.$player?.classList.contains('art-hide-cursor');

              if (container) {
                const shouldShow = isFullscreen && isMobile && controlsVisible;
                container.style.display = shouldShow ? 'block' : 'none';
              }
            };

            artPlayerRef.current.on('fullscreen', updateVisibility);
            artPlayerRef.current.on('fullscreenWeb', updateVisibility);
            document.addEventListener('fullscreenchange', updateVisibility);
            window.addEventListener('resize', updateVisibility);

            // 监听鼠标移动和视频事件来检测控件显示/隐藏
            artPlayerRef.current.on('video:timeupdate', updateVisibility);
            if (artPlayerRef.current.template?.$player) {
              const observer = new MutationObserver(updateVisibility);
              observer.observe(artPlayerRef.current.template.$player, {
                attributes: true,
                attributeFilter: ['class']
              });
            }

            updateVisibility();
          },
        });

        // 监听视频可播放事件，这时恢复播放进度更可靠
        artPlayerRef.current.on('video:canplay', () => {
          let restoredResumeTime = false;

          // 若存在需要恢复的播放进度，则跳转
          if (resumeTimeRef.current && resumeTimeRef.current > 0) {
            try {
              const duration = artPlayerRef.current.duration || 0;
              let target = resumeTimeRef.current;
              if (duration && target >= duration - 2) {
                target = Math.max(0, duration - 5);
              }
              artPlayerRef.current.currentTime = target;
              restoredResumeTime = true;
              console.log('成功恢复播放进度到:', resumeTimeRef.current);
            } catch (err) {
              console.warn('恢复播放进度失败:', err);
            }
          }
          resumeTimeRef.current = null;

          schedulePlayerTimeout(() => {
            if (!artPlayerRef.current) {
              return;
            }

            const restorePlaybackRate = () => {
              if (!artPlayerRef.current) {
                return;
              }

              if (
                Math.abs(
                  artPlayerRef.current.playbackRate - lastPlaybackRateRef.current
                ) > 0.01 &&
                isWebkit
              ) {
                artPlayerRef.current.playbackRate = lastPlaybackRateRef.current;
              }
            };

            if (
              Math.abs(artPlayerRef.current.volume - lastVolumeRef.current) > 0.01
            ) {
              artPlayerRef.current.volume = lastVolumeRef.current;
            }

            // Safari 在 seek 刚发生时立刻恢复 3x，容易卡进持续 seeking 状态。
            // 这里等 seek 稳定后再恢复倍速，避免恢复进度和变速互相打架。
            if (restoredResumeTime && isWebkit && artPlayerRef.current?.video) {
              const video = artPlayerRef.current.video as HTMLVideoElement;
              const applyRateAfterSeek = () => {
                restorePlaybackRate();
              };

              if (video.seeking) {
                const handleSeeked = () => {
                  clearTrackedTimeout(seekedTimeout);
                  applyRateAfterSeek();
                };
                const seekedTimeout = schedulePlayerTimeout(() => {
                  video.removeEventListener('seeked', handleSeeked);
                  applyRateAfterSeek();
                }, 300);

                video.addEventListener(
                  'seeked',
                  handleSeeked,
                  { once: true }
                );
              } else {
                restorePlaybackRate();
              }
            } else {
              restorePlaybackRate();
            }
            syncPlaybackPitch();
            artPlayerRef.current.notice.show = '';
          }, 0);

          // 隐藏换源加载状态
          setIsVideoLoading(false);
          setVideoError(null);
          setCorsFailedUrl(null);
        });

        // 监听视频播放事件，检查是否需要显示播放记录跳转按钮
        artPlayerRef.current.on('video:playing', () => {
          // 检查是否需要显示播放记录跳转按钮
          // 条件：当前播放时间 < 10秒 且 播放记录时间 > 10秒
          const checkPlayRecordJump = async () => {
            try {
              // 短剧不显示"上次播放到"提示（短剧单集太短，提示意义不大）
              if (searchParams.get('duanju') === '1') {
                playRecordJumpInitialCheckRef.current = false;
                return;
              }

              // 仅在进入播放后的首次检查时处理，避免本次会话新生成的记录触发恢复按钮
              if (!playRecordJumpInitialCheckRef.current) {
                return;
              }

              // 如果用户已经关闭过跳转按钮，不再显示
              if (playRecordJumpDismissedRef.current) {
                return;
              }

              const currentTime = artPlayerRef.current?.currentTime || 0;

              // 如果当前播放时间已经大于等于10秒，不显示跳转按钮
              if (currentTime >= 10) {
                // 标记已经进行过首次检查，避免切集后再显示
                playRecordJumpInitialCheckRef.current = false;
                if (playRecordJumpLayerRef.current) {
                  artPlayerRef.current.layers.remove('play-record-jump');
                  playRecordJumpLayerRef.current = null;
                }
                return;
              }

              // 获取播放记录
              const allRecords = await getAllPlayRecords();
              const key = generateStorageKey(
                currentSourceRef.current,
                currentIdRef.current
              );
              const record = allRecords[key];

              if (record) {
                const recordIndex = record.index - 1;
                const recordTime = record.play_time;

                // 检查是否是当前集数且播放记录时间大于10秒且当前时间小于10秒
                if (
                  recordIndex === currentEpisodeIndexRef.current &&
                  recordTime > 10 &&
                  currentTime < 10
                ) {
                  // 如果已经添加过，不重复添加
                  if (playRecordJumpLayerRef.current) {
                    return;
                  }

                  // 标记已经进行过首次检查
                  playRecordJumpInitialCheckRef.current = false;

                  // 格式化时间显示
                  const formatTime = (seconds: number): string => {
                    const h = Math.floor(seconds / 3600);
                    const m = Math.floor((seconds % 3600) / 60);
                    const s = Math.floor(seconds % 60);
                    if (h > 0) {
                      return `${h}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`;
                    }
                    return `${m}:${s.toString().padStart(2, '0')}`;
                  };

                  // 添加到播放器 layers
                  playRecordJumpLayerRef.current = artPlayerRef.current.layers.add({
                    name: 'play-record-jump',
                    html: `
                      <div id="play-record-jump-container" style="
                        position: absolute;
                        left: 16px;
                        bottom: 60px;
                        z-index: 20;
                        display: flex;
                        align-items: center;
                        gap: 8px;
                        padding: 8px 12px;
                        background-color: rgba(0, 0, 0, 0.75);
                        border-radius: 6px;
                        color: white;
                        font-size: 14px;
                        font-family: system-ui, -apple-system, sans-serif;
                        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
                        backdrop-filter: blur(4px);
                        pointer-events: auto;
                      ">
                        <span style="margin-right: 4px;">
                          上次播放到 ${formatTime(recordTime)}
                        </span>
                        <button id="play-record-jump-btn" style="
                          padding: 4px 12px;
                          background-color: rgba(255, 255, 255, 0.2);
                          border: 1px solid rgba(255, 255, 255, 0.3);
                          border-radius: 4px;
                          color: white;
                          font-size: 13px;
                          cursor: pointer;
                          transition: all 0.2s;
                          font-weight: 500;
                        ">
                          跳转
                        </button>
                        <button id="play-record-dismiss-btn" style="
                          padding: 4px 8px;
                          background-color: transparent;
                          border: none;
                          color: rgba(255, 255, 255, 0.7);
                          font-size: 18px;
                          cursor: pointer;
                          line-height: 1;
                          transition: color 0.2s;
                        " title="关闭">
                          ×
                        </button>
                      </div>
                    `,
                    style: {
                      position: 'absolute',
                      left: 0,
                      bottom: 0,
                      width: '100%',
                      height: '100%',
                      pointerEvents: 'none',
                    },
                  });

                  // 绑定事件
                  const jumpBtn = document.getElementById('play-record-jump-btn');
                  const dismissBtn = document.getElementById('play-record-dismiss-btn');

                  if (jumpBtn) {
                    jumpBtn.addEventListener('mouseenter', () => {
                      jumpBtn.style.backgroundColor = 'rgba(255, 255, 255, 0.3)';
                    });
                    jumpBtn.addEventListener('mouseleave', () => {
                      jumpBtn.style.backgroundColor = 'rgba(255, 255, 255, 0.2)';
                    });
                    jumpBtn.addEventListener('click', () => {
                      if (artPlayerRef.current) {
                        artPlayerRef.current.currentTime = recordTime;
                        artPlayerRef.current.notice.show = `已跳转到 ${formatTime(recordTime)}`;
                      }
                      playRecordJumpDismissedRef.current = true;
                      if (playRecordJumpLayerRef.current) {
                        artPlayerRef.current.layers.remove('play-record-jump');
                        playRecordJumpLayerRef.current = null;
                      }
                    });
                  }

                  if (dismissBtn) {
                    dismissBtn.addEventListener('mouseenter', () => {
                      dismissBtn.style.color = 'white';
                    });
                    dismissBtn.addEventListener('mouseleave', () => {
                      dismissBtn.style.color = 'rgba(255, 255, 255, 0.7)';
                    });
                    dismissBtn.addEventListener('click', () => {
                      playRecordJumpDismissedRef.current = true;
                      if (playRecordJumpLayerRef.current) {
                        artPlayerRef.current.layers.remove('play-record-jump');
                        playRecordJumpLayerRef.current = null;
                      }
                    });
                  }

                  console.log('[PlayRecordJump] 显示跳转按钮，当前时间:', currentTime, '记录时间:', recordTime);
                } else {
                  // 不满足显示条件，也标记为已检查过
                  playRecordJumpInitialCheckRef.current = false;
                }
              } else {
                // 没有播放记录，也标记为已检查过
                playRecordJumpInitialCheckRef.current = false;
              }
            } catch (err) {
              console.error('[PlayRecordJump] 检查播放记录失败:', err);
              // 即使出错也标记为已检查过
              playRecordJumpInitialCheckRef.current = false;
            }
          };

          // 延迟检查，确保播放器已经稳定
          setTimeout(checkPlayRecordJump, 500);
        });

        // 监听视频时间更新事件，实现跳过片头片尾
        artPlayerRef.current.on('video:timeupdate', () => {
          if (!skipConfigRef.current.enable) return;

          const currentTime = artPlayerRef.current.currentTime || 0;
          const duration = artPlayerRef.current.duration || 0;
          const now = Date.now();

          // 限制跳过检查频率为1.5秒一次
          if (now - lastSkipCheckRef.current < 1500) return;
          lastSkipCheckRef.current = now;

          // 跳过片头
          if (
            skipConfigRef.current.intro_time > 0 &&
            currentTime < skipConfigRef.current.intro_time
          ) {
            artPlayerRef.current.currentTime = skipConfigRef.current.intro_time;
            artPlayerRef.current.notice.show = `已跳过片头 (${formatTime(
              skipConfigRef.current.intro_time
            )})`;
          }

          // 跳过片尾
          if (
            skipConfigRef.current.outro_time < 0 &&
            duration > 0 &&
            currentTime >
            artPlayerRef.current.duration + skipConfigRef.current.outro_time
          ) {
            if (
              currentEpisodeIndexRef.current <
              (detailRef.current?.episodes?.length || 1) - 1
            ) {
              handleNextEpisode();
            } else {
              artPlayerRef.current.pause();
            }
            artPlayerRef.current.notice.show = `已跳过片尾 (${formatTime(
              skipConfigRef.current.outro_time
            )})`;
          }
        });

        artPlayerRef.current.on('error', (err: any) => {
          console.error('播放器错误:', err);
          // 如果已经成功播放过一段时间，忽略后续错误（可能是短暂网络波动）
          if (artPlayerRef.current && artPlayerRef.current.currentTime > 0) {
            return;
          }
          // 原生 <video> 播放失败（非 HLS.js 管理的场景，如无后缀的直链）
          // 需要触发播放失败 UI，否则会永远卡在"加载中"
          const currentUrl = artPlayerRef.current?.option?.url || videoUrl;
          const isUsingHls = currentUrl.includes('/api/proxy-m3u8') || currentUrl.includes('/api/proxy/vod/m3u8') || currentUrl.toLowerCase().includes('.m3u8') || currentUrl.toLowerCase().includes('.m3u');
          if (!isUsingHls) {
            // 非 HLS 场景下的原生视频错误，显示错误 UI
            if (proxyAttemptedRef.current) {
              // 代理已经尝试过（走了 415→直连 的路径），直连也失败了，不再提供代理按钮
              setVideoError('视频无法在浏览器中播放（已尝试代理，格式不兼容）');
            } else if (currentSourceRef.current === 'directplay' && !currentUrl.includes('/api/proxy-m3u8')) {
              setCorsFailedUrl(currentUrl);
              setVideoError('视频播放失败');
            } else {
              setVideoError('视频播放失败');
            }
          }
        });

        // 监听视频播放结束事件，自动播放下一集（房员禁用）
        artPlayerRef.current.on('video:ended', () => {
          // 房员禁用自动播放下一集
          if (playSync.shouldDisableControls) {
            console.log('[PlayPage] Member cannot auto-play next episode');
            if (artPlayerRef.current) {
              artPlayerRef.current.notice.show = '等待房主切换下一集';
            }
            return;
          }

          const d = detailRef.current;
          const idx = currentEpisodeIndexRef.current;

          if (!d || !d.episodes || idx >= d.episodes.length - 1) {
            return;
          }

          // 查找下一个未被过滤的集数
          let nextIdx = idx + 1;
          while (nextIdx < d.episodes.length) {
            const episodeTitle = d.episodes_titles?.[nextIdx];
            const isFiltered = episodeTitle && isEpisodeFilteredByTitle(episodeTitle);

            if (!isFiltered) {
              setTimeout(() => {
                setCurrentEpisodeIndex(nextIdx);
              }, 1000);
              return;
            }
            nextIdx++;
          }

          // 所有后续集数都被屏蔽
          if (artPlayerRef.current) {
            artPlayerRef.current.notice.show = '后续集数均已屏蔽，已自动停止';
          }
        });

        artPlayerRef.current.on('video:timeupdate', () => {
          const now = Date.now();
          let interval = 5000;
          if (process.env.NEXT_PUBLIC_STORAGE_TYPE === 'upstash') {
            interval = 20000;
          }
          if (now - lastSaveTimeRef.current > interval) {
            saveCurrentPlayProgress();
            lastSaveTimeRef.current = now;
          }

          // 下集预缓冲逻辑
          const nextEpisodePreCacheEnabled = typeof window !== 'undefined'
            ? localStorage.getItem('nextEpisodePreCache') === 'true'
            : false;

          if (nextEpisodePreCacheEnabled) {
            const currentTime = artPlayerRef.current?.currentTime || 0;
            const duration = artPlayerRef.current?.duration || 0;
            const progress = duration > 0 ? currentTime / duration : 0;

            // 检查是否已经到达90%播放进度
            if (duration > 0 && progress >= 0.9 && !nextEpisodePreCacheTriggeredRef.current) {
              // 标记已触发，防止重复执行
              nextEpisodePreCacheTriggeredRef.current = true;

              // 获取下一集信息
              const currentIdx = currentEpisodeIndexRef.current;
              const episodes = detailRef.current?.episodes;

              if (!episodes || currentIdx >= episodes.length - 1) {
                return;
              }

              const nextEpisodeIndex = currentIdx + 1;
              const nextEpisodeUrl = episodes[nextEpisodeIndex];

              if (!nextEpisodeUrl) {
                return;
              }

              // 使用 fetch 预加载资源，利用浏览器缓存
              const preloadNextEpisode = async () => {
                try {
                  // 判断是否是m3u8流
                  if (nextEpisodeUrl.includes('.m3u8') || nextEpisodeUrl.includes('m3u8')) {
                    // 1. 先fetch m3u8文件
                    const m3u8Response = await fetch(nextEpisodeUrl);
                    const m3u8Text = await m3u8Response.text();

                    // 2. 解析m3u8，提取ts分片URL
                    const lines = m3u8Text.split('\n');
                    const tsUrls: string[] = [];
                    const baseUrl = nextEpisodeUrl.substring(0, nextEpisodeUrl.lastIndexOf('/') + 1);

                    for (const line of lines) {
                      const trimmedLine = line.trim();
                      // 跳过注释和空行
                      if (!trimmedLine || trimmedLine.startsWith('#')) {
                        continue;
                      }
                      // 构建完整的ts URL
                      const tsUrl = trimmedLine.startsWith('http')
                        ? trimmedLine
                        : baseUrl + trimmedLine;
                      tsUrls.push(tsUrl);
                    }

                    // 3. 预加载前20个ts分片
                    const maxFragmentsToPreload = Math.min(20, tsUrls.length);

                    for (let i = 0; i < maxFragmentsToPreload; i++) {
                      try {
                        await fetch(tsUrls[i]);
                      } catch (err) {
                        // 静默处理分片加载失败
                      }
                    }
                  }
                } catch (error) {
                  // 静默处理预缓冲失败
                }
              };

              // 异步执行预缓冲
              preloadNextEpisode();
            }
          }

          // 下集弹幕预加载逻辑
          const nextEpisodeDanmakuPreloadEnabled = typeof window !== 'undefined'
            ? localStorage.getItem('nextEpisodeDanmakuPreload') === 'true'
            : false;

          if (nextEpisodeDanmakuPreloadEnabled) {
            const currentTime = artPlayerRef.current?.currentTime || 0;
            const duration = artPlayerRef.current?.duration || 0;
            const progress = duration > 0 ? currentTime / duration : 0;

            // 检查是否已经到达90%播放进度
            if (duration > 0 && progress >= 0.9 && !nextEpisodeDanmakuPreloadTriggeredRef.current) {
              // 标记已触发，防止重复执行
              nextEpisodeDanmakuPreloadTriggeredRef.current = true;

              // 异步执行弹幕预加载
              preloadNextEpisodeDanmaku();
            }
          }
        });

        if (artPlayerRef.current?.video) {
          ensureVideoSource(
            artPlayerRef.current.video as HTMLVideoElement,
            videoUrl
          );
        }
      } catch (err) {
        console.error('创建播放器失败:', err);
        setError('播放器初始化失败');
      }
    };

    // 调用异步初始化函数
    initPlayer();
  }, [videoUrl, loading, blockAdEnabled]);

  // 当组件卸载时清理定时器、Wake Lock 和播放器资源
  useEffect(() => {
    return () => {
      // 清理定时器
      if (saveIntervalRef.current) {
        clearInterval(saveIntervalRef.current);
      }

      // 释放 Wake Lock
      releaseWakeLock();

      // 清理Anime4K
      cleanupAnime4K();

      // 销毁播放器实例
      cleanupPlayer();
    };
  }, []);

  if (loading) {
    return (
      <PageLayout activePath='/play' hideNavigation={isWebFullscreen}>
        <div className='flex items-center justify-center min-h-screen bg-transparent'>
          <div className='text-center max-w-md mx-auto px-6'>
            {/* 动画影院图标 */}
            <div className='relative mb-8'>
              <div className='relative mx-auto w-24 h-24 bg-gradient-to-r from-green-500 to-emerald-600 rounded-2xl shadow-2xl flex items-center justify-center transform hover:scale-105 transition-transform duration-300'>
                <div className='text-white text-4xl'>
                  {loadingStage === 'searching' && '🔍'}
                  {loadingStage === 'preferring' && '⚡'}
                  {loadingStage === 'fetching' && '🎬'}
                  {loadingStage === 'ready' && '✨'}
                </div>
                {/* 旋转光环 */}
                <div className='absolute -inset-2 bg-gradient-to-r from-green-500 to-emerald-600 rounded-2xl opacity-20 animate-spin'></div>
              </div>

              {/* 浮动粒子效果 */}
              <div className='absolute top-0 left-0 w-full h-full pointer-events-none'>
                <div className='absolute top-2 left-2 w-2 h-2 bg-green-400 rounded-full animate-bounce'></div>
                <div
                  className='absolute top-4 right-4 w-1.5 h-1.5 bg-emerald-400 rounded-full animate-bounce'
                  style={{ animationDelay: '0.5s' }}
                ></div>
                <div
                  className='absolute bottom-3 left-6 w-1 h-1 bg-lime-400 rounded-full animate-bounce'
                  style={{ animationDelay: '1s' }}
                ></div>
              </div>
            </div>

            {/* 进度指示器 */}
            <div className='mb-6 w-80 mx-auto'>
              <div className='flex justify-center space-x-2 mb-4'>
                <div
                  className={`w-3 h-3 rounded-full transition-all duration-500 ${loadingStage === 'searching' || loadingStage === 'fetching'
                    ? 'bg-green-500 scale-125'
                    : loadingStage === 'preferring' ||
                      loadingStage === 'ready'
                      ? 'bg-green-500'
                      : 'bg-gray-300'
                    }`}
                ></div>
                <div
                  className={`w-3 h-3 rounded-full transition-all duration-500 ${loadingStage === 'preferring'
                    ? 'bg-green-500 scale-125'
                    : loadingStage === 'ready'
                      ? 'bg-green-500'
                      : 'bg-gray-300'
                    }`}
                ></div>
                <div
                  className={`w-3 h-3 rounded-full transition-all duration-500 ${loadingStage === 'ready'
                    ? 'bg-green-500 scale-125'
                    : 'bg-gray-300'
                    }`}
                ></div>
              </div>

              {/* 进度条 */}
              <div className='w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2 overflow-hidden'>
                <div
                  className='h-full bg-gradient-to-r from-green-500 to-emerald-600 rounded-full transition-all duration-1000 ease-out'
                  style={{
                    width:
                      loadingStage === 'searching' ||
                        loadingStage === 'fetching'
                        ? '33%'
                        : loadingStage === 'preferring'
                          ? '66%'
                          : '100%',
                  }}
                ></div>
              </div>
            </div>

            {/* 加载消息 */}
            <div className='space-y-2'>
              <p className='text-xl font-semibold text-gray-800 dark:text-gray-200 animate-pulse'>
                {loadingMessage}
              </p>
            </div>
          </div>
        </div>
      </PageLayout>
    );
  }

  if (error) {
    return (
      <PageLayout activePath='/play' hideNavigation={isWebFullscreen}>
        <div className='flex min-h-screen w-full items-center justify-center overflow-x-hidden bg-transparent px-4 py-6'>
          <div className='flex w-full flex-col items-center'>
            <div className='w-full max-w-md text-center'>
              {/* 错误图标 */}
              <div className='relative mb-8'>
                <div className='relative mx-auto flex h-24 w-24 items-center justify-center rounded-2xl bg-gradient-to-r from-red-500 to-orange-500 shadow-2xl transition-transform duration-300 hover:scale-105'>
                  <div className='text-4xl text-white'>😵</div>
                  {/* 脉冲效果 */}
                  <div className='absolute -inset-2 animate-pulse rounded-2xl bg-gradient-to-r from-red-500 to-orange-500 opacity-20'></div>
                </div>

                {/* 浮动错误粒子 */}
                <div className='pointer-events-none absolute left-0 top-0 h-full w-full'>
                  <div className='absolute left-2 top-2 h-2 w-2 animate-bounce rounded-full bg-red-400'></div>
                  <div
                    className='absolute right-4 top-4 h-1.5 w-1.5 animate-bounce rounded-full bg-orange-400'
                    style={{ animationDelay: '0.5s' }}
                  ></div>
                  <div
                    className='absolute bottom-3 left-6 h-1 w-1 animate-bounce rounded-full bg-yellow-400'
                    style={{ animationDelay: '1s' }}
                  ></div>
                </div>
              </div>

              {/* 错误信息 */}
              <div className='mb-8 space-y-4'>
                <h2 className='text-2xl font-bold text-gray-800 dark:text-gray-200'>
                  哎呀，出现了一些问题
                </h2>
                <div className='rounded-lg border border-red-200 bg-red-50 p-4 dark:border-red-800 dark:bg-red-900/20'>
                  <p className='font-medium text-red-600 dark:text-red-400'>
                    {error}
                  </p>
                </div>
                <p className='text-sm text-gray-500 dark:text-gray-400'>
                  请检查网络连接或尝试刷新页面
                </p>
              </div>

              {/* 操作按钮 */}
              <div className='space-y-3'>
                <button
                  onClick={() =>
                    videoTitle
                      ? router.push(`/search?q=${encodeURIComponent(videoTitle)}`)
                      : router.back()
                  }
                  className='w-full rounded-xl bg-gradient-to-r from-green-500 to-emerald-600 px-6 py-3 font-medium text-white shadow-lg transition-all duration-200 hover:scale-105 hover:from-green-600 hover:to-emerald-700 hover:shadow-xl'
                >
                  {videoTitle ? '🔍 返回搜索' : '← 返回上页'}
                </button>

                <button
                  onClick={() => window.location.reload()}
                  className='w-full rounded-xl bg-gray-100 px-6 py-3 font-medium text-gray-700 transition-colors duration-200 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600'
                >
                  🔄 重新尝试
                </button>
              </div>
            </div>

            {hasCompletedSearchRequest && fallbackRecommendations.length > 0 && (
              <div className='mt-4 w-full max-w-[calc(100vw-2rem)] overflow-hidden rounded-xl border border-gray-200 bg-white/70 p-3 text-left dark:border-gray-700 dark:bg-gray-800/70 sm:max-w-3xl lg:max-w-5xl'>
                <div className='mb-3 flex items-center gap-2'>
                  <Sparkles className='h-4 w-4 flex-shrink-0 text-amber-500' />
                  <h3 className='text-sm font-semibold text-gray-800 dark:text-gray-200'>
                    也许你想看
                  </h3>
                </div>
                <div
                  ref={fallbackRecommendationsRowRef}
                  className='w-full overflow-x-auto overflow-y-hidden pb-1 cursor-grab active:cursor-grabbing'
                  onWheel={handleFallbackRecommendationsWheel}
                  onMouseDown={handleFallbackRecommendationsMouseDown}
                  onMouseMove={handleFallbackRecommendationsMouseMove}
                  onMouseUp={stopFallbackRecommendationsDragging}
                  onMouseLeave={stopFallbackRecommendationsDragging}
                >
                  <div className='inline-flex gap-2.5 sm:gap-3'>
                    {fallbackRecommendations.map((recommendation) => (
                      <div
                        key={recommendation.key}
                        className='w-[118px] min-w-[118px] flex-shrink-0 sm:w-[150px] sm:min-w-[150px]'
                      >
                        <VideoCard
                          title={recommendation.item.title}
                          query={searchTitle || videoTitle}
                          poster={recommendation.item.poster}
                          episodes={recommendation.episodes}
                          source_names={recommendation.sourceNames}
                          year={recommendation.item.year}
                          douban_id={recommendation.doubanId}
                          from='search'
                          isAggregate
                        />
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            )}
          </div>
        </div>
      </PageLayout>
    );
  }


  return (
    <PageLayout activePath='/play' hideNavigation={isWebFullscreen}>
      {/* TMDB背景图 */}
      {tmdbBackdrop && (
        <div
          className='fixed inset-0 z-0'
          style={{
            backgroundImage: `url(${tmdbBackdrop})`,
            backgroundSize: 'cover',
            backgroundPosition: 'center',
            backgroundRepeat: 'no-repeat',
            filter: 'blur(5px) brightness(0.7)',
          }}
        />
      )}
      {/* 弹幕源选择对话框 */}
      {showDanmakuSourceSelector && danmakuMatches.length > 0 && (
        <div className='fixed inset-0 z-[1000] flex items-center justify-center bg-black/60 backdrop-blur-sm'>
          <div className='relative w-full max-w-2xl max-h-[80vh] mx-4 bg-white dark:bg-gray-800 rounded-2xl shadow-2xl overflow-hidden'>
            {/* 标题栏 */}
            <div className='sticky top-0 z-10 bg-gradient-to-r from-green-500 to-emerald-600 px-6 py-4'>
              <h3 className='text-xl font-bold text-white flex items-center gap-2'>
                <svg className='w-6 h-6' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
                  <path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2} d='M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z' />
                </svg>
                选择弹幕源
              </h3>
              <p className='text-sm text-white/90 mt-1'>
                找到 {danmakuMatches.length} 个匹配的弹幕源，请选择一个
              </p>
            </div>

            {/* 列表区域 */}
            <div className='overflow-y-auto max-h-[60vh] p-4'>
              <div className='space-y-4'>
                {danmakuMatches.map((anime, index) => (
                  <button
                    key={anime.animeId}
                    onClick={() => handleDanmakuSourceSelect(anime, index)}
                    className='w-full flex flex-col p-5 bg-gray-50 dark:bg-gray-700/50
                             hover:bg-gray-100 dark:hover:bg-gray-700 rounded-xl transition-all
                             duration-200 text-left group border-2 border-transparent
                             hover:border-green-500 hover:shadow-lg'
                  >
                    {/* 顶部：序号和标题 */}
                    <div className='flex items-start gap-3 mb-3'>
                      {/* 序号 */}
                      <div className='flex-shrink-0 w-8 h-8 rounded-full bg-green-500 text-white
                                    flex items-center justify-center font-bold text-sm
                                    group-hover:bg-green-600 transition-colors duration-200'>
                        {index + 1}
                      </div>

                      {/* 标题 */}
                      <h4 className='flex-1 text-lg font-bold text-gray-900 dark:text-white
                                   group-hover:text-green-600 dark:group-hover:text-green-400
                                   transition-colors duration-200 leading-tight'>
                        {anime.animeTitle}
                      </h4>

                      {/* 选择图标 */}
                      <div className='flex-shrink-0'>
                        <svg className='w-6 h-6 text-gray-400 group-hover:text-green-500
                                      transition-colors duration-200'
                          fill='none' stroke='currentColor' viewBox='0 0 24 24'>
                          <path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2}
                            d='M9 5l7 7-7 7' />
                        </svg>
                      </div>
                    </div>

                    {/* 主体内容 */}
                    <div className='flex gap-4'>
                      {/* 封面 */}
                      {anime.imageUrl && (
                        <div className='flex-shrink-0 w-20 h-28 rounded-lg overflow-hidden shadow-md
                                      group-hover:shadow-xl transition-shadow duration-200'>
                          <img
                            src={anime.imageUrl}
                            alt={anime.animeTitle}
                            className='w-full h-full object-cover'
                            onError={(e) => {
                              e.currentTarget.style.display = 'none';
                            }}
                          />
                        </div>
                      )}

                      {/* 详细信息 */}
                      <div className='flex-1 space-y-2'>
                        {/* 基本信息标签 */}
                        <div className='flex flex-wrap gap-2'>
                          {anime.typeDescription && (
                            <span className='inline-flex items-center px-2.5 py-1 rounded-md
                                           bg-blue-100 dark:bg-blue-900/30 text-blue-700
                                           dark:text-blue-300 text-sm font-medium'>
                              📺 {anime.typeDescription}
                            </span>
                          )}
                          {anime.episodeCount && (
                            <span className='inline-flex items-center px-2.5 py-1 rounded-md
                                           bg-purple-100 dark:bg-purple-900/30 text-purple-700
                                           dark:text-purple-300 text-sm font-medium'>
                              🎬 {anime.episodeCount} 集
                            </span>
                          )}
                          {anime.startDate && (
                            <span className='inline-flex items-center px-2.5 py-1 rounded-md
                                           bg-gray-100 dark:bg-gray-600 text-gray-700
                                           dark:text-gray-300 text-sm font-medium'>
                              📅 {anime.startDate}
                            </span>
                          )}
                        </div>

                        {/* 动漫ID */}
                        <div className='text-xs text-gray-500 dark:text-gray-400'>
                          弹幕库 ID: {anime.animeId}
                        </div>

                        {/* 提示信息 */}
                        <div className='text-sm text-gray-600 dark:text-gray-300 pt-1
                                      opacity-0 group-hover:opacity-100 transition-opacity duration-200'>
                          点击选择此弹幕源
                        </div>
                      </div>
                    </div>
                  </button>
                ))}
              </div>
            </div>

            {/* 底部操作栏 */}
            <div className='sticky bottom-0 z-10 bg-white dark:bg-gray-800 border-t
                          border-gray-200 dark:border-gray-700 px-6 py-4'>
              <button
                onClick={() => {
                  setShowDanmakuSourceSelector(false);
                  setDanmakuMatches([]);
                }}
                className='w-full px-4 py-2.5 bg-gray-100 dark:bg-gray-700
                         hover:bg-gray-200 dark:hover:bg-gray-600 text-gray-700
                         dark:text-gray-300 rounded-lg font-medium transition-colors
                         duration-200'
              >
                取消
              </button>
            </div>
          </div>
        </div>
      )}

      <div className='relative z-10 flex flex-col gap-3 py-4 px-5 lg:px-[3rem] 2xl:px-20'>
        {/* 第一行：影片标题 */}
        <div className='py-1'>
          <h1 className={`text-xl font-semibold flex items-center gap-2 flex-wrap ${tmdbBackdrop ? 'text-white' : 'text-gray-900 dark:text-gray-100'}`}>
            <span>
              {videoTitle || '影片标题'}
              {shouldShowEpisodeLabel && (
                <span className={tmdbBackdrop ? 'text-white opacity-80' : 'text-gray-500 dark:text-gray-400'}>
                  {` > ${episodeLabel}`}
                </span>
              )}
            </span>
            {/* 完结状态标识 */}
            {detail && totalEpisodes > 1 && (() => {
              const status = getSeriesStatus(detail);
              if (status === 'unknown') return null;

              return (
                <span
                  className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${status === 'completed'
                    ? 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300'
                    : 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300'
                    }`}
                >
                  {status === 'completed' ? '已完结' : '连载中'}
                </span>
              );
            })()}
            {playbackSourceBadge && (
              <span className='inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-orange-100 text-orange-800 dark:bg-orange-900/30 dark:text-orange-300'>
                {playbackSourceBadge === 'local' ? '本地播放' : '离线播放'}
              </span>
            )}
          </h1>
        </div>
        {/* 第二行：播放器和选集 */}
        <div className='space-y-2'>
          {/* 折叠控制 - 仅在 lg 及以上屏幕显示 */}
          <div className='hidden lg:flex justify-end'>
            <button
              onClick={() =>
                setIsEpisodeSelectorCollapsed(!isEpisodeSelectorCollapsed)
              }
              className='group relative flex items-center space-x-1.5 px-3 py-1.5 rounded-full bg-white/80 hover:bg-white dark:bg-gray-800/80 dark:hover:bg-gray-800 backdrop-blur-sm border border-gray-200/50 dark:border-gray-700/50 shadow-sm hover:shadow-md transition-all duration-200'
              title={
                isEpisodeSelectorCollapsed ? '显示选集面板' : '隐藏选集面板'
              }
            >
              <svg
                className={`w-3.5 h-3.5 text-gray-500 dark:text-gray-400 transition-transform duration-200 ${isEpisodeSelectorCollapsed ? 'rotate-180' : 'rotate-0'
                  }`}
                fill='none'
                stroke='currentColor'
                viewBox='0 0 24 24'
              >
                <path
                  strokeLinecap='round'
                  strokeLinejoin='round'
                  strokeWidth='2'
                  d='M9 5l7 7-7 7'
                />
              </svg>
              <span className='text-xs font-medium text-gray-600 dark:text-gray-300'>
                {isEpisodeSelectorCollapsed ? '显示' : '隐藏'}
              </span>

              {/* 精致的状态指示点 */}
              <div
                className={`absolute -top-0.5 -right-0.5 w-2 h-2 rounded-full transition-all duration-200 ${isEpisodeSelectorCollapsed
                  ? 'bg-orange-400 animate-pulse'
                  : 'bg-green-400'
                  }`}
              ></div>
            </button>
          </div>

          <div
            className={`grid gap-4 lg:h-[500px] xl:h-[650px] 2xl:h-[750px] transition-all duration-300 ease-in-out ${isEpisodeSelectorCollapsed
              ? 'grid-cols-1'
              : 'grid-cols-1 md:grid-cols-4'
              }`}
          >
            {/* 播放器 */}
            <div
              className={`transition-all duration-300 ease-in-out rounded-xl border border-white/0 dark:border-white/30 flex flex-col ${isEpisodeSelectorCollapsed ? 'col-span-1' : 'md:col-span-3'
                }`}
            >
              {/* 播放器容器 */}
              <div className='relative w-full h-[300px] lg:flex-1 lg:min-h-0'>
                <div
                  ref={artRef}
                  className='bg-black w-full h-full rounded-xl overflow-hidden shadow-lg'
                ></div>

                {/* 换源加载蒙层 */}
                {(isVideoLoading || videoError) && (
                  <div className='absolute inset-0 bg-black/85 backdrop-blur-sm rounded-xl flex items-center justify-center z-[500] transition-all duration-300'>
                    <div className='text-center max-w-md mx-auto px-6'>
                      {videoError ? (
                        // 错误显示
                        <>
                          {/* 错误图标 */}
                          <div className='relative mb-8'>
                            <div className='relative mx-auto w-24 h-24 bg-gradient-to-r from-red-500 to-rose-600 rounded-2xl shadow-2xl flex items-center justify-center'>
                              <div className='text-white text-4xl'>⚠️</div>
                            </div>
                          </div>

                          {/* 错误消息 */}
                          <div className='space-y-4'>
                            <p className='text-xl font-semibold text-white'>
                              播放失败
                            </p>
                            <p className='text-base text-gray-300'>
                              {videoError}
                            </p>
                            <button
                              onClick={() => {
                                setVideoError(null);
                                setIsVideoLoading(true);
                                // 重新加载视频
                                if (artPlayerRef.current) {
                                  artPlayerRef.current.url = videoUrl;
                                }
                              }}
                              className='mt-4 px-6 py-2 bg-gradient-to-r from-green-500 to-emerald-600 text-white rounded-lg hover:from-green-600 hover:to-emerald-700 transition-all duration-200'
                            >
                              重试
                            </button>
                            {/* 直链播放 CORS 失败时，显示"使用代理播放"按钮 */}
                            {!proxyAttemptedRef.current && (corsFailedUrl || (isDirectPlay && videoUrl && !videoUrl.includes('/api/proxy-m3u8'))) && (
                              <button
                                onClick={() => {
                                  const originalUrl = corsFailedUrl || videoUrl;
                                  // 记忆域名到 localStorage
                                  addDirectplayProxyDomain(originalUrl);
                                  // 构建代理 URL
                                  const tokenParam = proxyToken ? `&token=${encodeURIComponent(proxyToken)}` : '';
                                  const proxyUrl = `/api/proxy-m3u8?url=${encodeURIComponent(originalUrl)}&source=directplay${tokenParam}`;
                                  // 清除错误状态并重新播放
                                  setVideoError(null);
                                  setCorsFailedUrl(null);
                                  setIsVideoLoading(true);
                                  proxyAttemptedRef.current = true;
                                  setVideoUrl(proxyUrl);
                                }}
                                className='mt-4 ml-3 px-6 py-2 bg-gradient-to-r from-blue-500 to-indigo-600 text-white rounded-lg hover:from-blue-600 hover:to-indigo-700 transition-all duration-200'
                              >
                                使用代理播放
                              </button>
                            )}
                          </div>
                        </>
                      ) : (
                        // 加载显示
                        <>
                          {/* 动画影院图标 */}
                          <div className='relative mb-8'>
                            <div className='relative mx-auto w-24 h-24 bg-gradient-to-r from-green-500 to-emerald-600 rounded-2xl shadow-2xl flex items-center justify-center transform hover:scale-105 transition-transform duration-300'>
                              <div className='text-white text-4xl'>🎬</div>
                              {/* 旋转光环 */}
                              <div className='absolute -inset-2 bg-gradient-to-r from-green-500 to-emerald-600 rounded-2xl opacity-20 animate-spin'></div>
                            </div>

                            {/* 浮动粒子效果 */}
                            <div className='absolute top-0 left-0 w-full h-full pointer-events-none'>
                              <div className='absolute top-2 left-2 w-2 h-2 bg-green-400 rounded-full animate-bounce'></div>
                              <div
                                className='absolute top-4 right-4 w-1.5 h-1.5 bg-emerald-400 rounded-full animate-bounce'
                                style={{ animationDelay: '0.5s' }}
                              ></div>
                              <div
                                className='absolute bottom-3 left-6 w-1 h-1 bg-lime-400 rounded-full animate-bounce'
                                style={{ animationDelay: '1s' }}
                              ></div>
                            </div>
                          </div>

                          {/* 换源消息 */}
                          <div className='space-y-2'>
                            <p className='text-xl font-semibold text-white animate-pulse'>
                              {videoLoadingStage === 'sourceChanging'
                                ? '🔄 切换播放源...'
                                : '🔄 视频加载中...'}
                            </p>
                          </div>
                        </>
                      )}
                    </div>
                  </div>
                )}

                {/* 链接刷新提示（右上角，无遮罩） */}
                {isRefreshingUrl && (
                  <div className='absolute top-3 right-3 z-50 pointer-events-none'>
                    <div className='bg-black/70 text-white px-3 py-1.5 rounded-md flex items-center gap-2 text-sm border border-green-500/30 shadow-lg'>
                      <svg className='animate-spin h-4 w-4' viewBox='0 0 24 24'>
                        <circle className='opacity-25' cx='12' cy='12' r='10' stroke='currentColor' strokeWidth='4' fill='none' />
                        <path className='opacity-75' fill='currentColor' d='M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z' />
                      </svg>
                      <span>正在刷新链接...</span>
                    </div>
                  </div>
                )}

                {/* 弹幕加载蒙层 */}
                {danmakuLoading && (
                  <div className='absolute top-0 right-0 m-4 bg-black/80 backdrop-blur-sm rounded-lg px-4 py-2 z-[600] flex items-center gap-2 border border-green-500/30'>
                    {danmakuCount > 0 ? (
                      <>
                        <svg
                          className='w-4 h-4 text-green-500'
                          fill='none'
                          stroke='currentColor'
                          viewBox='0 0 24 24'
                        >
                          <path
                            strokeLinecap='round'
                            strokeLinejoin='round'
                            strokeWidth={2}
                            d='M5 13l4 4L19 7'
                          />
                        </svg>
                        <span className='text-sm font-medium text-green-400'>
                          {danmakuOriginalCount > 0
                            ? `已加载 ${danmakuCount} 条弹幕（原始 ${danmakuOriginalCount} 条）`
                            : `已加载 ${danmakuCount} 条弹幕`
                          }
                        </span>
                      </>
                    ) : (
                      <>
                        <div className='w-4 h-4 border-2 border-green-500 border-t-transparent rounded-full animate-spin'></div>
                        <span className='text-sm font-medium text-green-400'>
                          加载弹幕中...
                        </span>
                      </>
                    )}
                  </div>
                )}

              </div>

              {/* 第三方应用打开按钮 - 观影室同步状态下隐藏 */}
              {videoUrl && !playSync.isInRoom && (
                <div className='mt-3 px-2 lg:flex-shrink-0'>
                  <div className='bg-white/50 dark:bg-gray-800/50 backdrop-blur-sm rounded-lg p-2 border border-gray-200/50 dark:border-gray-700/50 w-full lg:w-auto overflow-x-auto'>
                    <div className='flex gap-1.5 flex-nowrap lg:flex-wrap items-center'>
                      <div className='flex gap-1.5 flex-nowrap lg:flex-wrap lg:justify-end lg:flex-1'>
                        {/* 下载按钮 */}
                        <button
                          onClick={(e) => {
                            e.preventDefault();
                            setShowDownloadSelector(true);
                          }}
                          className='group relative flex items-center justify-center gap-1 w-8 h-8 lg:w-auto lg:h-auto lg:px-2 lg:py-1.5 bg-gradient-to-r from-green-500 to-emerald-600 hover:from-green-600 hover:to-emerald-700 text-xs font-medium rounded-md transition-all duration-200 shadow-sm hover:shadow-md cursor-pointer overflow-hidden border border-green-400 flex-shrink-0'
                          title='下载视频'
                        >
                          <svg
                            className='w-4 h-4 flex-shrink-0 text-white'
                            fill='none'
                            stroke='currentColor'
                            viewBox='0 0 24 24'
                          >
                            <path
                              strokeLinecap='round'
                              strokeLinejoin='round'
                              strokeWidth='2'
                              d='M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4'
                            />
                          </svg>
                          <span className='hidden lg:inline max-w-0 group-hover:max-w-[100px] overflow-hidden whitespace-nowrap transition-all duration-200 ease-in-out text-white'>
                            下载
                          </span>
                        </button>

                        {/* 复制视频链接按钮 */}
                        <button
                          onClick={(e) => {
                            e.preventDefault();
                            // 如果当前是代理播放模式，使用原始 URL；否则使用当前 videoUrl
                            let urlToUse = videoUrl;
                            if (sourceProxyMode && detail?.episodes && currentEpisodeIndex < detail.episodes.length) {
                              urlToUse = detail.episodes[currentEpisodeIndex];
                            }
                            // 使用代理 URL（与外部播放器逻辑一致）
                            const tokenParam = proxyToken ? `&token=${encodeURIComponent(proxyToken)}` : '';
                            const proxyUrl = externalPlayerAdBlock
                              ? `${window.location.origin}/api/proxy-m3u8?url=${encodeURIComponent(urlToUse)}&source=${encodeURIComponent(currentSource)}${tokenParam}`
                              : urlToUse;

                            // 如果链接是相对路径，补充完整的 base URL
                            let finalUrl = proxyUrl;
                            if (proxyUrl && !proxyUrl.startsWith('http://') && !proxyUrl.startsWith('https://')) {
                              finalUrl = `${window.location.origin}${proxyUrl.startsWith('/') ? '' : '/'}${proxyUrl}`;
                            }

                            // 复制到剪贴板
                            navigator.clipboard.writeText(finalUrl).then(() => {
                              setToast({
                                message: '视频链接已复制到剪贴板',
                                type: 'success',
                                onClose: () => setToast(null),
                              });
                            }).catch((err) => {
                              console.error('复制失败:', err);
                              setToast({
                                message: '复制失败，请重试',
                                type: 'error',
                                onClose: () => setToast(null),
                              });
                            });
                          }}
                          className='group relative flex items-center justify-center gap-1 w-8 h-8 lg:w-auto lg:h-auto lg:px-2 lg:py-1.5 bg-blue-500 hover:bg-blue-600 text-white text-xs font-medium rounded-md transition-all duration-200 shadow-sm hover:shadow-md cursor-pointer overflow-hidden border border-blue-400 flex-shrink-0'
                          title='复制视频链接'
                        >
                          <svg
                            className='w-4 h-4 flex-shrink-0 text-white'
                            fill='none'
                            stroke='currentColor'
                            viewBox='0 0 24 24'
                          >
                            <path
                              strokeLinecap='round'
                              strokeLinejoin='round'
                              strokeWidth='2'
                              d='M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z'
                            />
                          </svg>
                          <span className='hidden lg:inline max-w-0 group-hover:max-w-[100px] overflow-hidden whitespace-nowrap transition-all duration-200 ease-in-out text-white'>
                            复制链接
                          </span>
                        </button>

                        {/* App打开 */}
                        <button
                          onClick={(e) => {
                            e.preventDefault();
                            // 获取当前浏览器URL去除域名部分，并去除开头的/
                            const currentPath = (window.location.pathname + window.location.search).replace(/^\//, '');
                            // 打开moontvplus协议
                            window.open(`moontvplus://${currentPath}`, '_blank');
                          }}
                          className='group relative flex items-center justify-center gap-1 w-8 h-8 lg:w-auto lg:h-auto lg:px-2 lg:py-1.5 bg-blue-500 hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700 text-xs font-medium rounded-md transition-all duration-200 shadow-sm hover:shadow-md cursor-pointer overflow-hidden border border-blue-600 dark:border-blue-700 flex-shrink-0'
                          title='App打开'
                        >
                          <svg
                            className='w-4 h-4 flex-shrink-0 text-white'
                            fill='none'
                            stroke='currentColor'
                            viewBox='0 0 24 24'
                            xmlns='http://www.w3.org/2000/svg'
                          >
                            <path
                              strokeLinecap='round'
                              strokeLinejoin='round'
                              strokeWidth={2}
                              d='M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z'
                            />
                          </svg>
                          <span className='hidden lg:inline max-w-0 group-hover:max-w-[100px] overflow-hidden whitespace-nowrap transition-all duration-200 ease-in-out text-white'>
                            App打开
                          </span>
                        </button>

                        {showExternalTranscodeButton && (
                          <button
                            onClick={async (e) => {
                              e.preventDefault();
                              await handleCreateTranscodeSession();
                            }}
                            disabled={isTranscoding}
                            className={`group relative flex items-center justify-center gap-1 w-8 h-8 lg:w-auto lg:h-auto lg:px-2 lg:py-1.5 text-xs font-medium rounded-md transition-all duration-200 shadow-sm hover:shadow-md overflow-hidden border flex-shrink-0 ${
                              isTranscoding
                                ? 'bg-amber-400 text-white border-amber-400 cursor-wait'
                                : 'bg-amber-500 hover:bg-amber-600 text-white border-amber-500 cursor-pointer'
                            }`}
                            title='转码播放'
                          >
                            {isTranscoding ? (
                              <Loader2 className='w-4 h-4 flex-shrink-0 text-white animate-spin' />
                            ) : (
                              <Router className='w-4 h-4 flex-shrink-0 text-white' />
                            )}
                            <span className='hidden lg:inline max-w-0 group-hover:max-w-[100px] overflow-hidden whitespace-nowrap transition-all duration-200 ease-in-out text-white'>
                              {isTranscoding ? '转码中' : '转码'}
                            </span>
                          </button>
                        )}

                        {/* 快捷键说明 */}
                        <button
                          onClick={(e) => {
                            e.preventDefault();
                            setShowShortcutDialog(true);
                          }}
                          className='group relative flex items-center justify-center gap-1 w-8 h-8 lg:w-auto lg:h-auto lg:px-2 lg:py-1.5 bg-gray-200 hover:bg-gray-300 dark:bg-gray-500 dark:hover:bg-gray-400 text-xs font-medium rounded-md transition-all duration-200 shadow-sm hover:shadow-md cursor-pointer overflow-hidden border border-gray-300 dark:border-gray-500 flex-shrink-0 focus:outline-none focus-visible:ring-2 focus-visible:ring-green-500 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-950'
                          title='快捷键说明'
                          aria-label='查看播放快捷键说明'
                        >
                          <Keyboard className='w-4 h-4 flex-shrink-0 text-gray-700 dark:text-gray-200' />
                          <span className='hidden lg:inline max-w-0 group-hover:max-w-[100px] overflow-hidden whitespace-nowrap transition-all duration-200 ease-in-out text-gray-700 dark:text-gray-200'>
                            快捷键
                          </span>
                        </button>

                        {/* PotPlayer */}
                        <button
                          onClick={(e) => {
                            e.preventDefault();
                            // 如果当前是代理播放模式，使用原始 URL；否则使用当前 videoUrl
                            let urlToUse = videoUrl;
                            if (sourceProxyMode && detail?.episodes && currentEpisodeIndex < detail.episodes.length) {
                              urlToUse = detail.episodes[currentEpisodeIndex];
                            }
                            // 使用代理 URL
                            const tokenParam = proxyToken ? `&token=${encodeURIComponent(proxyToken)}` : '';
                            const proxyUrl = externalPlayerAdBlock
                              ? `${window.location.origin}/api/proxy-m3u8?url=${encodeURIComponent(urlToUse)}&source=${encodeURIComponent(currentSource)}${tokenParam}`
                              : urlToUse;
                            // URL encode 避免冒号被吃掉
                            window.open(`potplayer://${proxyUrl}`, '_blank');
                          }}
                          className='group relative flex items-center justify-center gap-1 w-8 h-8 lg:w-auto lg:h-auto lg:px-2 lg:py-1.5 bg-white hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600 text-xs font-medium rounded-md transition-all duration-200 shadow-sm hover:shadow-md cursor-pointer overflow-hidden border border-gray-300 dark:border-gray-600 flex-shrink-0'
                          title='PotPlayer'
                        >
                          <img
                            src='/players/potplayer.png'
                            alt='PotPlayer'
                            className='w-4 h-4 flex-shrink-0'
                          />
                          <span className='hidden lg:inline max-w-0 group-hover:max-w-[100px] overflow-hidden whitespace-nowrap transition-all duration-200 ease-in-out text-gray-700 dark:text-gray-200'>
                            PotPlayer
                          </span>
                        </button>

                        {/* VLC */}
                        <button
                          onClick={(e) => {
                            e.preventDefault();
                            // 如果当前是代理播放模式，使用原始 URL；否则使用当前 videoUrl
                            let urlToUse = videoUrl;
                            if (sourceProxyMode && detail?.episodes && currentEpisodeIndex < detail.episodes.length) {
                              urlToUse = detail.episodes[currentEpisodeIndex];
                            }
                            // 使用代理 URL
                            const tokenParam = proxyToken ? `&token=${encodeURIComponent(proxyToken)}` : '';
                            const proxyUrl = externalPlayerAdBlock
                              ? `${window.location.origin}/api/proxy-m3u8?url=${encodeURIComponent(urlToUse)}&source=${encodeURIComponent(currentSource)}${tokenParam}`
                              : urlToUse;
                            // URL encode 避免冒号被吃掉
                            window.open(`vlc://${proxyUrl}`, '_blank');
                          }}
                          className='group relative flex items-center justify-center gap-1 w-8 h-8 lg:w-auto lg:h-auto lg:px-2 lg:py-1.5 bg-white hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600 text-xs font-medium rounded-md transition-all duration-200 shadow-sm hover:shadow-md cursor-pointer overflow-hidden border border-gray-300 dark:border-gray-600 flex-shrink-0'
                          title='VLC'
                        >
                          <img
                            src='/players/vlc.png'
                            alt='VLC'
                            className='w-4 h-4 flex-shrink-0'
                          />
                          <span className='hidden lg:inline max-w-0 group-hover:max-w-[100px] overflow-hidden whitespace-nowrap transition-all duration-200 ease-in-out text-gray-700 dark:text-gray-200'>
                            VLC
                          </span>
                        </button>

                        {/* MPV */}
                        <button
                          onClick={(e) => {
                            e.preventDefault();
                            // 如果当前是代理播放模式，使用原始 URL；否则使用当前 videoUrl
                            let urlToUse = videoUrl;
                            if (sourceProxyMode && detail?.episodes && currentEpisodeIndex < detail.episodes.length) {
                              urlToUse = detail.episodes[currentEpisodeIndex];
                            }
                            // 使用代理 URL
                            const tokenParam = proxyToken ? `&token=${encodeURIComponent(proxyToken)}` : '';
                            const proxyUrl = externalPlayerAdBlock
                              ? `${window.location.origin}/api/proxy-m3u8?url=${encodeURIComponent(urlToUse)}&source=${encodeURIComponent(currentSource)}${tokenParam}`
                              : urlToUse;
                            // URL encode 避免冒号被吃掉
                            window.open(`mpv://${proxyUrl}`, '_blank');
                          }}
                          className='group relative flex items-center justify-center gap-1 w-8 h-8 lg:w-auto lg:h-auto lg:px-2 lg:py-1.5 bg-white hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600 text-xs font-medium rounded-md transition-all duration-200 shadow-sm hover:shadow-md cursor-pointer overflow-hidden border border-gray-300 dark:border-gray-600 flex-shrink-0'
                          title='MPV'
                        >
                          <img
                            src='/players/mpv.png'
                            alt='MPV'
                            className='w-4 h-4 flex-shrink-0'
                          />
                          <span className='hidden lg:inline max-w-0 group-hover:max-w-[100px] overflow-hidden whitespace-nowrap transition-all duration-200 ease-in-out text-gray-700 dark:text-gray-200'>
                            MPV
                          </span>
                        </button>

                        {/* MX Player */}
                        <button
                          onClick={(e) => {
                            e.preventDefault();
                            // 如果当前是代理播放模式，使用原始 URL；否则使用当前 videoUrl
                            let urlToUse = videoUrl;
                            if (sourceProxyMode && detail?.episodes && currentEpisodeIndex < detail.episodes.length) {
                              urlToUse = detail.episodes[currentEpisodeIndex];
                            }
                            // 使用代理 URL
                            const tokenParam = proxyToken ? `&token=${encodeURIComponent(proxyToken)}` : '';
                            const proxyUrl = externalPlayerAdBlock
                              ? `${window.location.origin}/api/proxy-m3u8?url=${encodeURIComponent(urlToUse)}&source=${encodeURIComponent(currentSource)}${tokenParam}`
                              : urlToUse;
                            window.open(
                              `intent://${proxyUrl}#Intent;package=com.mxtech.videoplayer.ad;S.title=${encodeURIComponent(
                                videoTitle
                              )};end`,
                              '_blank'
                            );
                          }}
                          className='group relative flex items-center justify-center gap-1 w-8 h-8 lg:w-auto lg:h-auto lg:px-2 lg:py-1.5 bg-white hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600 text-xs font-medium rounded-md transition-all duration-200 shadow-sm hover:shadow-md cursor-pointer overflow-hidden border border-gray-300 dark:border-gray-600 flex-shrink-0'
                          title='MX Player'
                        >
                          <img
                            src='/players/mxplayer.png'
                            alt='MX Player'
                            className='w-4 h-4 flex-shrink-0'
                          />
                          <span className='hidden lg:inline max-w-0 group-hover:max-w-[100px] overflow-hidden whitespace-nowrap transition-all duration-200 ease-in-out text-gray-700 dark:text-gray-200'>
                            MX Player
                          </span>
                        </button>

                        {/* nPlayer */}
                        <button
                          onClick={(e) => {
                            e.preventDefault();
                            // 如果当前是代理播放模式，使用原始 URL；否则使用当前 videoUrl
                            let urlToUse = videoUrl;
                            if (sourceProxyMode && detail?.episodes && currentEpisodeIndex < detail.episodes.length) {
                              urlToUse = detail.episodes[currentEpisodeIndex];
                            }
                            // 使用代理 URL
                            const tokenParam = proxyToken ? `&token=${encodeURIComponent(proxyToken)}` : '';
                            const proxyUrl = externalPlayerAdBlock
                              ? `${window.location.origin}/api/proxy-m3u8?url=${encodeURIComponent(urlToUse)}&source=${encodeURIComponent(currentSource)}${tokenParam}`
                              : urlToUse;
                            window.open(`nplayer-${proxyUrl}`, '_blank');
                          }}
                          className='group relative flex items-center justify-center gap-1 w-8 h-8 lg:w-auto lg:h-auto lg:px-2 lg:py-1.5 bg-white hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600 text-xs font-medium rounded-md transition-all duration-200 shadow-sm hover:shadow-md cursor-pointer overflow-hidden border border-gray-300 dark:border-gray-600 flex-shrink-0'
                          title='nPlayer'
                        >
                          <img
                            src='/players/nplayer.png'
                            alt='nPlayer'
                            className='w-4 h-4 flex-shrink-0'
                          />
                          <span className='hidden lg:inline max-w-0 group-hover:max-w-[100px] overflow-hidden whitespace-nowrap transition-all duration-200 ease-in-out text-gray-700 dark:text-gray-200'>
                            nPlayer
                          </span>
                        </button>

                        {/* IINA */}
                        <button
                          onClick={(e) => {
                            e.preventDefault();
                            // 如果当前是代理播放模式，使用原始 URL；否则使用当前 videoUrl
                            let urlToUse = videoUrl;
                            if (sourceProxyMode && detail?.episodes && currentEpisodeIndex < detail.episodes.length) {
                              urlToUse = detail.episodes[currentEpisodeIndex];
                            }
                            // 使用代理 URL
                            const tokenParam = proxyToken ? `&token=${encodeURIComponent(proxyToken)}` : '';
                            const proxyUrl = externalPlayerAdBlock
                              ? `${window.location.origin}/api/proxy-m3u8?url=${encodeURIComponent(urlToUse)}&source=${encodeURIComponent(currentSource)}${tokenParam}`
                              : urlToUse;
                            window.open(
                              `iina://weblink?url=${encodeURIComponent(
                                proxyUrl
                              )}`,
                              '_blank'
                            );
                          }}
                          className='group relative flex items-center justify-center gap-1 w-8 h-8 lg:w-auto lg:h-auto lg:px-2 lg:py-1.5 bg-white hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600 text-xs font-medium rounded-md transition-all duration-200 shadow-sm hover:shadow-md cursor-pointer overflow-hidden border border-gray-300 dark:border-gray-600 flex-shrink-0'
                          title='IINA'
                        >
                          <img
                            src='/players/iina.png'
                            alt='IINA'
                            className='w-4 h-4 flex-shrink-0'
                          />
                          <span className='hidden lg:inline max-w-0 group-hover:max-w-[100px] overflow-hidden whitespace-nowrap transition-all duration-200 ease-in-out text-gray-700 dark:text-gray-200'>
                            IINA
                          </span>
                        </button>
                      </div>

                      {/* 去广告开关 */}
                      <button
                        onClick={() => setExternalPlayerAdBlock(!externalPlayerAdBlock)}
                        className={`flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium transition-all duration-200 shadow-sm hover:shadow-md cursor-pointer border flex-shrink-0 ${externalPlayerAdBlock
                          ? 'bg-gradient-to-r from-blue-500 to-indigo-600 hover:from-blue-600 hover:to-indigo-700 text-white border-blue-400'
                          : 'bg-white hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-200 border-gray-300 dark:border-gray-600'
                          }`}
                        title={externalPlayerAdBlock ? '去广告已开启' : '去广告已关闭'}
                      >
                        <svg
                          className='w-4 h-4 flex-shrink-0'
                          fill='none'
                          stroke='currentColor'
                          viewBox='0 0 24 24'
                        >
                          {externalPlayerAdBlock ? (
                            <path
                              strokeLinecap='round'
                              strokeLinejoin='round'
                              strokeWidth='2'
                              d='M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z'
                            />
                          ) : (
                            <path
                              strokeLinecap='round'
                              strokeLinejoin='round'
                              strokeWidth='2'
                              d='M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636'
                            />
                          )}
                        </svg>
                        <span className='whitespace-nowrap'>
                          {externalPlayerAdBlock ? '去广告' : '去广告'}
                        </span>
                      </button>
                    </div>
                  </div>
                </div>
              )}
            </div>

            {/* 选集和换源 - 在移动端始终显示，在 lg 及以上可折叠 */}
            <div
              className={`relative z-10 h-[350px] lg:h-full md:overflow-hidden transition-all duration-300 ease-in-out ${isEpisodeSelectorCollapsed
                ? 'md:col-span-1 lg:hidden lg:opacity-0 lg:scale-95'
                : 'md:col-span-1 lg:opacity-100 lg:scale-100'
                }`}
            >
              <EpisodeSelector
                totalEpisodes={totalEpisodes}
                episodes_titles={detail?.episodes_titles || []}
                value={currentEpisodeIndex + 1}
                onChange={playSync.shouldDisableControls ? () => { /* disabled */ } : handleEpisodeChange}
                onSourceChange={playSync.shouldDisableControls ? () => { /* disabled */ } : handleSourceChange}
                isRoomMember={playSync.shouldDisableControls}
                currentSource={currentSource}
                currentId={currentId}
                episodeProgressContentKey={episodeProgressContentKey || undefined}
                videoTitle={searchTitle || videoTitle}
                availableSources={availableSources}
                sourceSearchLoading={sourceSearchLoading}
                sourceSearchError={sourceSearchError}
                backgroundSourcesLoading={backgroundSourcesLoading}
                precomputedVideoInfo={precomputedVideoInfo}
                useLightTextOnBackdrop={!!tmdbBackdrop}
                onDanmakuSelect={(selection) => handleDanmakuSelect(selection, true)}
                currentDanmakuSelection={currentDanmakuSelection}
                onUploadDanmaku={handleUploadDanmaku}
                episodeFilterConfig={episodeFilterConfig}
                onFilterConfigUpdate={setEpisodeFilterConfig}
                onShowToast={(message, type) => {
                  setToast({ message, type, onClose: () => setToast(null) });
                }}
              />
            </div>
          </div>
        </div>

        {!isDirectPlay && (
          <>
            {/* 详情展示 */}
            <div className='grid grid-cols-1 md:grid-cols-5 lg:grid-cols-6 gap-4'>
              {/* 文字区 */}
              <div className='md:col-span-4 lg:col-span-5'>
                <div className='p-6 flex flex-col min-h-0'>
                  {/* 标题 */}
                  <h1 className={`text-3xl font-bold mb-2 tracking-wide flex items-center flex-shrink-0 text-center md:text-left w-full flex-wrap gap-2 ${tmdbBackdrop ? 'text-white' : 'text-gray-900 dark:text-gray-100'}`}>
                    <span className={doubanAka.length > 0 ? 'relative group cursor-help' : ''}>
                      {videoTitle || '影片标题'}
                      {/* aka 悬浮提示 */}
                      {doubanAka.length > 0 && (
                        <div className='absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-3 py-2 bg-gray-800 dark:bg-gray-900 text-white text-sm rounded-lg shadow-xl opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 ease-out whitespace-nowrap z-[100] pointer-events-none'>
                          <div className='font-semibold text-xs text-gray-400 mb-1'>又名：</div>
                          {doubanAka.map((name, index) => (
                            <div key={index} className='text-sm'>
                              {name}
                            </div>
                          ))}
                          <div className='absolute top-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-l-4 border-r-4 border-t-4 border-transparent border-t-gray-800 dark:border-t-gray-900'></div>
                        </div>
                      )}
                    </span>
                    <button
                      onClick={(e) => {
                        e.stopPropagation();
                        handleToggleFavorite();
                      }}
                      className='flex-shrink-0 hover:opacity-80 transition-opacity'
                    >
                      <FavoriteIcon filled={favorited} />
                    </button>
                    {/* 网盘搜索按钮 */}
                    {netdiskSearchEnabled && (
                      <button
                        onClick={(e) => {
                          e.stopPropagation();
                          openDrawer('pansou');
                        }}
                        className='flex-shrink-0 hover:opacity-80 transition-opacity'
                        title='搜索网盘资源'
                      >
                        <Cloud className='h-6 w-6 text-gray-700 dark:text-gray-300' />
                      </button>
                    )}
                    {/* AI问片按钮 */}
                    {aiEnabled && detail && (
                      <button
                        onClick={(e) => {
                          e.stopPropagation();
                          openDrawer('aiChat');
                        }}
                        className='flex-shrink-0 hover:opacity-80 transition-opacity'
                        title='AI问片'
                      >
                        <Sparkles className='h-6 w-6 text-gray-700 dark:text-gray-300' />
                      </button>
                    )}
                    {/* 详情按钮 */}
                    {detail && (
                      <button
                        onClick={(e) => {
                          e.stopPropagation();
                          openDrawer('detail');
                        }}
                        className='flex-shrink-0 hover:opacity-80 transition-opacity px-2 py-1 text-base font-medium text-gray-700 dark:text-gray-300'
                        title='详情'
                      >
                        详
                      </button>
                    )}
                    {/* 纠错按钮 - 仅小雅源显示 */}
                    {detail && detail.source === 'xiaoya' && (
                      <button
                        onClick={(e) => {
                          e.stopPropagation();
                          openDrawer('correct');
                        }}
                        className='flex-shrink-0 hover:opacity-80 transition-opacity'
                        title='纠错'
                      >
                        <AlertCircle className='h-6 w-6 text-gray-700 dark:text-gray-300' />
                      </button>
                    )}
                    {/* 豆瓣评分显示 */}
                    {doubanRating && doubanRating.value > 0 && (
                      <div className='flex items-center gap-2 text-base font-normal'>
                        {/* 星级显示 */}
                        <div className='flex items-center gap-1'>
                          {[1, 2, 3, 4, 5].map((star) => {
                            const starValue = doubanRating.value / 2; // 转换为5星制
                            const isFullStar = star <= Math.floor(starValue);
                            const isHalfStar = !isFullStar && star <= Math.ceil(starValue) && starValue % 1 >= 0.25;

                            return (
                              <div key={star} className='relative w-5 h-5'>
                                {isFullStar ? (
                                  // 全星
                                  <svg
                                    className='w-5 h-5 text-yellow-400 fill-yellow-400'
                                    viewBox='0 0 24 24'
                                    xmlns='http://www.w3.org/2000/svg'
                                  >
                                    <path d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z' />
                                  </svg>
                                ) : isHalfStar ? (
                                  // 半星
                                  <>
                                    {/* 空星背景 */}
                                    <svg
                                      className='absolute w-5 h-5 text-gray-300 dark:text-gray-600 fill-gray-300 dark:fill-gray-600'
                                      viewBox='0 0 24 24'
                                      xmlns='http://www.w3.org/2000/svg'
                                    >
                                      <path d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z' />
                                    </svg>
                                    {/* 半星遮罩 */}
                                    <svg
                                      className='absolute w-5 h-5 text-yellow-400 fill-yellow-400'
                                      viewBox='0 0 24 24'
                                      xmlns='http://www.w3.org/2000/svg'
                                      style={{ clipPath: 'inset(0 50% 0 0)' }}
                                    >
                                      <path d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z' />
                                    </svg>
                                  </>
                                ) : (
                                  // 空星
                                  <svg
                                    className='w-5 h-5 text-gray-300 dark:text-gray-600 fill-gray-300 dark:fill-gray-600'
                                    viewBox='0 0 24 24'
                                    xmlns='http://www.w3.org/2000/svg'
                                  >
                                    <path d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z' />
                                  </svg>
                                )}
                              </div>
                            );
                          })}
                        </div>
                        {/* 评分数值 */}
                        <span className={`font-semibold ${tmdbBackdrop ? 'text-white' : 'text-gray-700 dark:text-gray-300'}`}>
                          {doubanRating.value.toFixed(1)}
                        </span>
                        {/* 评分人数 */}
                        <span className={`text-sm ${tmdbBackdrop ? 'text-white/80' : 'text-gray-500 dark:text-gray-400'}`}>
                          ({doubanRating.count.toLocaleString()}人评价)
                        </span>
                      </div>
                    )}
                  </h1>

                  {/* 关键信息行 */}
                  <div className={`flex flex-wrap items-center gap-3 text-base mb-4 opacity-80 flex-shrink-0 ${tmdbBackdrop ? 'text-white' : ''}`}>
                    {detail?.class && (
                      <span className='text-green-600 font-semibold'>
                        {detail.class}
                      </span>
                    )}
                    {/* 优先使用 doubanYear，如果没有则使用 detail.year 或 videoYear */}
                    {(doubanYear || netdiskTMDBMeta?.year || detail?.year || videoYear) && (
                      <span>{doubanYear || netdiskTMDBMeta?.year || detail?.year || videoYear}</span>
                    )}
                    {detail?.source_name && (
                      <span
                        className={`relative group cursor-pointer border px-2 py-[1px] rounded ${detail.source === 'xiaoya' ? 'border-blue-500' : isNetdiskSource(detail.source) ? 'border-purple-500' : detail.source === 'openlist' || detail.source === 'emby' || detail.source?.startsWith('emby_') ? 'border-yellow-500' : 'border-gray-500/60'
                          }`}
                        onClick={fetchCurrentSourceVideoInfo}
                      >
                        {detail.source_name}
                        {/* 视频信息悬浮提示 */}
                        {currentSourceVideoInfo && (
                          <div className='absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-3 py-2 bg-gray-800 dark:bg-gray-900 text-white text-sm rounded-lg shadow-xl opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 ease-out whitespace-nowrap z-[100] pointer-events-none'>
                            <div className='text-sm'>
                              <div>分辨率: {currentSourceVideoInfo.quality}</div>
                              <div>码率: {currentSourceVideoInfo.bitrate}</div>
                            </div>
                            <div className='absolute top-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-l-4 border-r-4 border-t-4 border-transparent border-t-gray-800 dark:border-t-gray-900'></div>
                          </div>
                        )}
                      </span>
                    )}
                    {detail?.type_name && <span>{detail.type_name}</span>}
                  </div>
                  {/* 剧情简介 */}
                  {(doubanCardSubtitle || netdiskTMDBMeta?.desc || correctedDesc || detail?.desc) && (
                    <div
                      className={`mt-0 text-base leading-relaxed opacity-90 overflow-y-auto pr-2 flex-1 min-h-0 scrollbar-hide ${tmdbBackdrop ? 'text-white' : ''}`}
                      style={{ whiteSpace: 'pre-line' }}
                    >
                      {/* card_subtitle 在前，desc 在后 */}
                      {doubanCardSubtitle && (
                        <div className='mb-3 pb-3 border-b border-gray-300 dark:border-gray-700'>
                          {doubanCardSubtitle}
                        </div>
                      )}
                      {netdiskTMDBMeta?.desc || correctedDesc || detail?.desc}
                    </div>
                  )}
                </div>
              </div>

              {/* 封面展示 */}
              <div className='hidden md:block md:col-span-1 md:order-first'>
                <div className='pl-0 py-4 pr-6 max-w-sm mx-auto'>
                  <div className='relative bg-gray-300 dark:bg-gray-700 aspect-[2/3] flex items-center justify-center rounded-xl overflow-hidden'>
                    {videoCover ? (
                      <>
                        <ProxyImage
                          originalSrc={videoCover}
                          alt={videoTitle}
                          className='w-full h-full object-cover'
                        />

                        {/* 豆瓣链接按钮 */}
                        {videoDoubanId !== 0 && (
                          <a
                            href={`https://movie.douban.com/subject/${videoDoubanId.toString()}`}
                            target='_blank'
                            rel='noopener noreferrer'
                            className='absolute top-3 left-3'
                          >
                            <div className='bg-green-500 text-white text-xs font-bold w-8 h-8 rounded-full flex items-center justify-center shadow-md hover:bg-green-600 hover:scale-[1.1] transition-all duration-300 ease-out'>
                              <svg
                                width='16'
                                height='16'
                                viewBox='0 0 24 24'
                                fill='none'
                                stroke='currentColor'
                                strokeWidth='2'
                                strokeLinecap='round'
                                strokeLinejoin='round'
                              >
                                <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path>
                                <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path>
                              </svg>
                            </div>
                          </a>
                        )}
                      </>
                    ) : (
                      isNetdiskSource(detail?.source) ? (
                        <div className='flex flex-col items-center justify-center text-gray-500 dark:text-gray-400'>
                          <Cloud className='w-16 h-16 opacity-80' />
                        </div>
                      ) : (
                        <span className='text-gray-600 dark:text-gray-400'>
                          封面图片
                        </span>
                      )
                    )}
                  </div>
                </div>
              </div>
            </div>

            {/* 推荐区域 */}
            <SmartRecommendations
              doubanId={videoDoubanId !== 0 ? videoDoubanId : undefined}
              videoTitle={videoTitle}
            />

            {/* 豆瓣评论区域 */}
            {videoDoubanId !== 0 && enableComments && (
              <div className='mt-6 -mx-3 md:mx-0 md:px-4'>
                <div className='bg-white/50 dark:bg-gray-800/50 backdrop-blur-sm rounded-xl border border-gray-200/50 dark:border-gray-700/50 overflow-hidden'>
                  {/* 标题 */}
                  <div className='px-3 md:px-6 py-4 border-b border-gray-200 dark:border-gray-700'>
                    <h3 className='text-lg font-semibold text-gray-900 dark:text-white flex items-center gap-2'>
                      <svg className='w-5 h-5' fill='currentColor' viewBox='0 0 24 24'>
                        <path d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z' />
                      </svg>
                      豆瓣评论
                    </h3>
                  </div>

                  {/* 评论内容 */}
                  <div className='p-3 md:p-6'>
                    <DoubanComments doubanId={videoDoubanId} />
                  </div>
                </div>
              </div>
            )}

            {/* AI评论区域 */}
            {videoTitle && enableAIComments && (
              <div className='mt-6 -mx-3 md:mx-0 md:px-4'>
                <div className='bg-white/50 dark:bg-gray-800/50 backdrop-blur-sm rounded-xl border border-blue-200/50 dark:border-blue-700/50 overflow-hidden'>
                  {/* 标题 */}
                  <div className='px-3 md:px-6 py-4 border-b border-blue-200 dark:border-blue-700'>
                    <h3 className='text-lg font-semibold text-gray-900 dark:text-white flex items-center gap-2'>
                      <svg className='w-5 h-5 text-blue-600 dark:text-blue-400' fill='currentColor' viewBox='0 0 24 24'>
                        <path d='M13 10V3L4 14h7v7l9-11h-7z' />
                      </svg>
                      AI生成评论
                    </h3>
                  </div>

                  {/* 评论内容 */}
                  <div className='p-3 md:p-6'>
                    <AIComments movieName={videoTitle} />
                  </div>
                </div>
              </div>
            )}
          </>
        )}
      </div>

      {/* Toast通知 */}
      {toast && <Toast {...toast} />}

      <input
        ref={customSubtitleInputRef}
        type='file'
        accept={CUSTOM_SUBTITLE_ACCEPT}
        className='hidden'
        onChange={handleCustomSubtitleFileChange}
      />

      {/* 下载选集面板 */}
      <DownloadEpisodeSelector
        isOpen={showDownloadSelector}
        onClose={() => setShowDownloadSelector(false)}
        totalEpisodes={totalEpisodes}
        episodesTitles={detail?.episodes_titles || []}
        videoTitle={videoTitle}
        currentEpisodeIndex={currentEpisodeIndex}
        onDownload={handleDownloadEpisode}
        enableOfflineDownload={enableOfflineDownload}
        hasOfflinePermission={hasOfflinePermission}
      />

      {/* 弹幕过滤设置对话框 */}
      <DanmakuFilterSettings
        isOpen={showDanmakuFilterSettings}
        onClose={() => setShowDanmakuFilterSettings(false)}
        onConfigUpdate={(config) => {
          setDanmakuFilterConfig(config);
          danmakuFilterConfigRef.current = config;

          // 重新加载弹幕以应用新的过滤规则
          if (danmakuPluginRef.current) {
            try {
              danmakuPluginRef.current.load();
              console.log('弹幕过滤规则已更新，重新加载弹幕');
            } catch (error) {
              console.error('重新加载弹幕失败:', error);
            }
          }
        }}
        onShowToast={(message, type) => {
          setToast({
            message,
            type,
            onClose: () => setToast(null),
          });
        }}
      />

      {/* 快捷键说明弹窗 */}
      {showShortcutDialog && (
        <div
          className='fixed inset-0 z-[10000] flex items-center justify-center bg-black/50 px-4 py-6 backdrop-blur-sm'
          onClick={() => setShowShortcutDialog(false)}
        >
          <div
            className='relative w-full max-w-lg overflow-hidden rounded-2xl border border-gray-200 bg-white text-gray-900 shadow-2xl shadow-black/20 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:shadow-black/40'
            onClick={(e) => e.stopPropagation()}
            onKeyDown={(e) => e.stopPropagation()}
            role='dialog'
            aria-modal='true'
            aria-labelledby='shortcut-dialog-title'
          >
            <div className='absolute inset-x-0 top-0 h-24 bg-gradient-to-br from-green-500/15 via-cyan-500/10 to-transparent pointer-events-none' />
            <div className='relative flex items-start justify-between gap-4 border-b border-gray-200 px-5 py-4 dark:border-gray-700'>
              <div className='flex items-center gap-3'>
                <div className='flex h-10 w-10 items-center justify-center rounded-xl border border-green-500/30 bg-green-500/10 text-green-600 dark:text-green-300'>
                  <Keyboard className='h-5 w-5' />
                </div>
                <div>
                  <h2 id='shortcut-dialog-title' className='text-base font-semibold text-gray-950 dark:text-white'>
                    播放快捷键
                  </h2>
                </div>
              </div>
              <button
                onClick={() => setShowShortcutDialog(false)}
                className='rounded-lg p-2 text-gray-500 transition-colors duration-200 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus-visible:ring-2 focus-visible:ring-green-500 cursor-pointer dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-white'
                aria-label='关闭快捷键说明'
              >
                <X className='h-5 w-5' />
              </button>
            </div>

            <div className='relative max-h-[70vh] overflow-y-auto px-5 py-4'>
              <div className='grid gap-3'>
                {PLAY_SHORTCUT_GROUPS.map((group) => (
                  <section
                    key={group.title}
                    className='rounded-xl border border-gray-200 bg-gray-50 p-3 dark:border-gray-700 dark:bg-gray-800/60'
                  >
                    <h3 className='mb-3 text-sm font-medium text-gray-800 dark:text-gray-200'>
                      {group.title}
                    </h3>
                    <div className='space-y-2'>
                      {group.items.map((item) => (
                        <div
                          key={`${group.title}-${item.description}`}
                          className='flex items-center justify-between gap-4 rounded-lg px-2 py-1.5 transition-colors duration-200 hover:bg-white dark:hover:bg-gray-700/70'
                        >
                          <div className='flex flex-wrap items-center gap-1.5'>
                            {item.keys.map((key, index) => (
                              <span key={`${item.description}-${key}`} className='flex items-center gap-1.5'>
                                {index > 0 && (
                                  <span className='text-xs text-gray-400 dark:text-gray-500'>+</span>
                                )}
                                <kbd className='min-w-7 rounded-md border border-gray-300 bg-white px-2 py-1 text-center text-xs font-semibold text-gray-800 shadow-sm dark:border-gray-600 dark:bg-gray-900 dark:text-gray-100 dark:shadow-inner dark:shadow-white/5'>
                                  {key}
                                </kbd>
                              </span>
                            ))}
                          </div>
                          <span className='text-right text-xs text-gray-600 dark:text-gray-300'>
                            {item.description}
                          </span>
                        </div>
                      ))}
                    </div>
                  </section>
                ))}
              </div>
            </div>
          </div>
        </div>
      )}

      {/* 网盘搜索弹窗 */}
      {showPansouDialog && (
        isLargeScreen ? (
          <Drawer
            isOpen={showPansouDialog}
            onClose={() => setShowPansouDialog(false)}
            title={`搜索网盘资源: ${detail?.title || ''}`}
            width='w-[400px]'
          >
            <div className='p-4'>
              <PansouSearch
                keyword={detail?.title || ''}
                triggerSearch={showPansouDialog}
              />
            </div>
          </Drawer>
        ) : (
          <div
            className='fixed inset-0 z-[10000] flex items-center justify-center bg-black/50'
            onClick={() => setShowPansouDialog(false)}
          >
            <div
              className='relative w-full max-w-4xl max-h-[80vh] overflow-y-auto bg-white dark:bg-gray-900 rounded-lg shadow-xl m-4'
              onClick={(e) => e.stopPropagation()}
            >
              {/* 弹窗头部 */}
              <div className='sticky top-0 z-10 flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900'>
                <h2 className='text-xl font-bold text-gray-900 dark:text-gray-100'>
                  搜索网盘资源: {detail?.title || ''}
                </h2>
                <button
                  onClick={() => setShowPansouDialog(false)}
                  className='p-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors'
                >
                  <X className='h-5 w-5 text-gray-600 dark:text-gray-400' />
                </button>
              </div>

              {/* 弹窗内容 */}
              <div className='p-4'>
                <PansouSearch
                  keyword={detail?.title || ''}
                  triggerSearch={showPansouDialog}
                />
              </div>
            </div>
          </div>
        )
      )}

      {/* AI问片面板 */}
      {aiEnabled && detail && (
        <AIChatPanel
          isOpen={showAIChat}
          onClose={() => setShowAIChat(false)}
          context={{
            title: detail.title,
            year: detail.year,
            douban_id: videoDoubanId !== 0 ? videoDoubanId : undefined,
            currentEpisode: currentEpisodeIndex + 1,
          }}
          welcomeMessage={aiDefaultMessageWithVideo ? aiDefaultMessageWithVideo.replace('{title}', detail.title || '') : `想了解《${detail.title}》的更多信息吗？我可以帮你查询剧情、演员、评价等。`}
          useDrawer={isLargeScreen}
          drawerWidth='w-[400px]'
        />
      )}

      {/* 纠错弹窗 - 仅小雅源显示 */}
      {detail && detail.source === 'xiaoya' && (
        <CorrectDialog
          isOpen={showCorrectDialog}
          onClose={() => setShowCorrectDialog(false)}
          videoKey={`${detail.source}_${detail.id}`}
          currentTitle={detail.title}
          currentVideo={{
            tmdbId: detail.tmdb_id,
            doubanId: detail.douban_id ? String(detail.douban_id) : undefined,
            poster: detail.poster,
            releaseDate: detail.year,
            overview: detail.desc,
            voteAverage: detail.rating,
            mediaType: detail.type_name === '电影' ? 'movie' : 'tv',
          }}
          source="xiaoya"
          onCorrect={() => {
            // 纠错成功后的回调
            handleCorrectSuccess();
          }}
          useDrawer={isLargeScreen}
          drawerWidth='w-[400px]'
        />
      )}

      {/* 详情面板 */}
      {detail && (
        <DetailPanel
          isOpen={showDetailPanel}
          onClose={() => setShowDetailPanel(false)}
          title={detail.title}
          poster={detail.poster}
          doubanId={
            // 特殊源使用 tmdb，其他使用 cms（通过 doubanId）
            // 如果有豆瓣ID且不为0，传入doubanId
            detail.source === 'openlist' ||
              isNetdiskSource(detail.source) ||
              detail.source?.startsWith('emby') ||
              detail.source === 'xiaoya'
              ? undefined
              : detail.douban_id && detail.douban_id !== 0
                ? detail.douban_id
                : undefined
          }
          tmdbId={
            // 特殊源使用 tmdb
            detail.source === 'openlist' ||
              isNetdiskSource(detail.source) ||
              detail.source?.startsWith('emby') ||
              detail.source === 'xiaoya'
              ? detail.tmdb_id
              : undefined
          }
          type={detail.type_name === '电影' ? 'movie' : 'tv'}
          currentEpisode={currentEpisodeIndex + 1}
          cmsData={
            // 非特殊源使用 cms 数据
            // 但如果有豆瓣ID且不为0，则不传入cmsData，优先使用豆瓣数据
            detail.source !== 'openlist' &&
              !isNetdiskSource(detail.source) &&
              !detail.source?.startsWith('emby') &&
              detail.source !== 'xiaoya' &&
              !(detail.douban_id && detail.douban_id !== 0)
              ? {
                desc: detail.desc,
                episodes: detail.episodes,
                episodes_titles: detail.episodes_titles,
              }
              : undefined
          }
          sourceId={detail.id}
          source={detail.source}
          useDrawer={isLargeScreen}
          drawerWidth='w-[400px]'
        />
      )}
    </PageLayout>
  );
}

// 从 localStorage 读取小雅源的纠错信息
const getXiaoyaCorrection = (source: string, id: string) => {
  try {
    const storageKey = `xiaoya_correction_${source}_${id}`;
    const correctionJson = localStorage.getItem(storageKey);
    if (correctionJson) {
      return JSON.parse(correctionJson);
    }
  } catch (error) {
    console.error('读取纠错信息失败:', error);
  }
  return null;
};

// 应用纠错信息到 detail 对象
const applyCorrection = (detail: SearchResult, correction: any): SearchResult => {
  return {
    ...detail,
    title: correction.title || detail.title,
    poster: correction.posterPath ? processImageUrl(getTMDBImageUrl(correction.posterPath)) : detail.poster,
    year: correction.releaseDate || detail.year,
    desc: correction.overview || detail.desc,
    rating: correction.voteAverage || detail.rating,
    tmdb_id: correction.tmdbId || detail.tmdb_id,
    douban_id: correction.doubanId ? (typeof correction.doubanId === 'string' ? parseInt(correction.doubanId, 10) : correction.doubanId) : detail.douban_id,
    type_name: correction.mediaType === 'movie' ? '电影' : (correction.mediaType === 'tv' ? '电视剧' : detail.type_name),
  };
};

// 批量应用纠错信息到源列表
const applyCorrectionsToSources = (sources: SearchResult[]): SearchResult[] => {
  return sources.map(source => {
    if (source.source === 'xiaoya') {
      const correction = getXiaoyaCorrection(source.source, source.id);
      if (correction) {
        return applyCorrection(source, correction);
      }
    }
    return source;
  });
};

// FavoriteIcon 组件
const FavoriteIcon = ({ filled }: { filled: boolean }) => {
  if (filled) {
    return (
      <svg
        className='h-7 w-7'
        viewBox='0 0 24 24'
        xmlns='http://www.w3.org/2000/svg'
      >
        <path
          d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'
          fill='#ef4444' /* Tailwind red-500 */
          stroke='#ef4444'
          strokeWidth='2'
          strokeLinecap='round'
          strokeLinejoin='round'
        />
      </svg>
    );
  }
  return (
    <Heart className='h-7 w-7 stroke-[1] text-gray-600 dark:text-gray-300' />
  );
};

export default function PlayPage() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <PlayPageClient />
    </Suspense>
  );
}