/* eslint-disable react-hooks/exhaustive-deps, @typescript-eslint/no-explicit-any,@typescript-eslint/no-non-null-assertion,no-empty */
'use client';

import {
  ChevronUp,
  Film,
  Grid2x2,
  HardDrive,
  List,
  Magnet,
  RefreshCw,
  Search,
  X,
} from 'lucide-react';
import { useRouter, useSearchParams } from 'next/navigation';
import React, {
  startTransition,
  Suspense,
  useEffect,
  useMemo,
  useRef,
  useState,
} from 'react';

import { getAuthInfoFromBrowserCookie } from '@/lib/auth';
import {
  addSearchHistory,
  clearSearchHistory,
  deleteSearchHistory,
  getSearchHistory,
  subscribeToDataUpdates,
} from '@/lib/db.client';
import { SearchResult } from '@/lib/types';
import { processImageUrl } from '@/lib/utils';

import AcgSearch from '@/components/AcgSearch';
import CapsuleSwitch from '@/components/CapsuleSwitch';
import ImageViewer from '@/components/ImageViewer';
import PageLayout from '@/components/PageLayout';
import PansouSearch from '@/components/PansouSearch';
import ProxyImage from '@/components/ProxyImage';
import SearchResultFilter, {
  SearchFilterCategory,
} from '@/components/SearchResultFilter';
import SearchSuggestions from '@/components/SearchSuggestions';
import VideoCard, { VideoCardHandle } from '@/components/VideoCard';
import VirtualScrollableGrid from '@/components/VirtualScrollableGrid';

function SearchPageClient() {
  // 搜索历史
  const [searchHistory, setSearchHistory] = useState<string[]>([]);
  // 返回顶部按钮显示状态
  const [showBackToTop, setShowBackToTop] = useState(false);
  // 选项卡状态: 'video' 或 'pansou' 或 'acg'
  const [activeTab, setActiveTab] = useState<'video' | 'pansou' | 'acg'>(
    'video'
  );
  // Pansou 搜索触发标志
  const [triggerPansouSearch, setTriggerPansouSearch] = useState(false);
  // ACG 搜索触发标志
  const [triggerAcgSearch, setTriggerAcgSearch] = useState(false);
  // 用户权限
  const [userRole, setUserRole] = useState<'owner' | 'admin' | 'user' | null>(
    null
  );
  // 繁体转简体转换器
  const converterRef = useRef<((text: string) => string) | null>(null);
  // 转换器是否已初始化
  const [converterReady, setConverterReady] = useState(false);

  const router = useRouter();
  const searchParams = useSearchParams();
  const submittedSearchQuery = searchParams.get('q')?.trim() || '';
  const currentQueryRef = useRef<string>('');
  const [searchQuery, setSearchQuery] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  const [showResults, setShowResults] = useState(false);
  const [searchResults, setSearchResults] = useState<SearchResult[]>([]);
  const [showSuggestions, setShowSuggestions] = useState(false);
  const eventSourceRef = useRef<EventSource | null>(null);
  const [totalSources, setTotalSources] = useState(0);
  const [completedSources, setCompletedSources] = useState(0);
  const pendingResultsRef = useRef<SearchResult[]>([]);
  const flushTimerRef = useRef<number | null>(null);
  const [useFluidSearch, setUseFluidSearch] = useState(true);
  // 聚合卡片 refs 与聚合统计缓存
  const groupRefs = useRef<Map<string, React.RefObject<VideoCardHandle>>>(
    new Map()
  );
  const groupStatsRef = useRef<
    Map<
      string,
      { douban_id?: number; episodes?: number; source_names: string[] }
    >
  >(new Map());
  // 强制刷新状态
  const [forceRefresh, setForceRefresh] = useState(false);
  // 是否使用了缓存结果
  const [isFromCache, setIsFromCache] = useState(false);
  // 精确搜索开关
  const [exactSearch, setExactSearch] = useState(true);

  // 生成缓存键
  const getCacheKey = (query: string) => {
    return `search_cache_${query.trim()}`;
  };

  // 从 sessionStorage 获取缓存的搜索结果
  const getCachedResults = (query: string): SearchResult[] | null => {
    if (typeof window === 'undefined') return null;
    try {
      const cacheKey = getCacheKey(query);
      const cached = sessionStorage.getItem(cacheKey);
      if (cached) {
        return JSON.parse(cached);
      }
    } catch (error) {
      console.error('Failed to get cached results:', error);
    }
    return null;
  };

  // 保存搜索结果到 sessionStorage
  const setCachedResults = (query: string, results: SearchResult[]) => {
    if (typeof window === 'undefined') return;
    try {
      const cacheKey = getCacheKey(query);
      sessionStorage.setItem(cacheKey, JSON.stringify(results));
    } catch (error) {
      console.error('Failed to cache results:', error);
    }
  };

  // 清除指定查询的缓存
  const clearCachedResults = (query: string) => {
    if (typeof window === 'undefined') return;
    try {
      const cacheKey = getCacheKey(query);
      sessionStorage.removeItem(cacheKey);
    } catch (error) {
      console.error('Failed to clear cached results:', error);
    }
  };

  const getGroupRef = (key: string) => {
    let ref = groupRefs.current.get(key);
    if (!ref) {
      ref = React.createRef<VideoCardHandle>();
      groupRefs.current.set(key, ref);
    }
    return ref;
  };

  const computeGroupStats = (group: SearchResult[]) => {
    const episodes = (() => {
      const countMap = new Map<number, number>();
      group.forEach((g) => {
        const len = g.episodes?.length || 0;
        if (len > 0) countMap.set(len, (countMap.get(len) || 0) + 1);
      });
      let max = 0;
      let res = 0;
      countMap.forEach((v, k) => {
        if (v > max) {
          max = v;
          res = k;
        }
      });
      return res;
    })();
    const source_names = Array.from(
      new Set(group.map((g) => g.source_name).filter(Boolean))
    ) as string[];

    const douban_id = (() => {
      const countMap = new Map<number, number>();
      group.forEach((g) => {
        if (g.douban_id && g.douban_id > 0) {
          countMap.set(g.douban_id, (countMap.get(g.douban_id) || 0) + 1);
        }
      });
      let max = 0;
      let res: number | undefined;
      countMap.forEach((v, k) => {
        if (v > max) {
          max = v;
          res = k;
        }
      });
      return res;
    })();

    return { episodes, source_names, douban_id };
  };
  // 过滤器：非聚合与聚合
  const [filterAll, setFilterAll] = useState<{
    source: string;
    title: string;
    year: string;
    yearOrder: 'none' | 'asc' | 'desc';
  }>({
    source: 'all',
    title: 'all',
    year: 'all',
    yearOrder: 'none',
  });
  const [filterAgg, setFilterAgg] = useState<{
    source: string;
    title: string;
    year: string;
    yearOrder: 'none' | 'asc' | 'desc';
  }>({
    source: 'all',
    title: 'all',
    year: 'all',
    yearOrder: 'none',
  });

  // 获取默认聚合设置：只读取用户本地设置，默认为 true
  const getDefaultAggregate = () => {
    if (typeof window !== 'undefined') {
      const userSetting = localStorage.getItem('defaultAggregateSearch');
      if (userSetting !== null) {
        return JSON.parse(userSetting);
      }
    }
    return true; // 默认启用聚合
  };

  const [viewMode, setViewMode] = useState<'agg' | 'all'>(() => {
    return getDefaultAggregate() ? 'agg' : 'all';
  });
  const [resultDisplayMode, setResultDisplayMode] = useState<'card' | 'list'>(
    () => {
      if (typeof window !== 'undefined') {
        const saved = localStorage.getItem('searchResultDisplayMode');
        if (saved === 'card' || saved === 'list') {
          return saved;
        }
      }
      return 'card';
    }
  );
  const [expandedSourceTags, setExpandedSourceTags] = useState<
    Record<string, boolean>
  >({});
  const [previewImage, setPreviewImage] = useState<{
    url: string;
    alt: string;
  } | null>(null);

  // 在“无排序”场景用于每个源批次的预排序：完全匹配标题优先，其次年份倒序，未知年份最后
  const sortBatchForNoOrder = (items: SearchResult[]) => {
    const q = currentQueryRef.current.trim();
    return items.slice().sort((a, b) => {
      const aExact = (a.title || '').trim() === q;
      const bExact = (b.title || '').trim() === q;
      if (aExact && !bExact) return -1;
      if (!aExact && bExact) return 1;

      const aNum = Number.parseInt(a.year as any, 10);
      const bNum = Number.parseInt(b.year as any, 10);
      const aValid = !Number.isNaN(aNum);
      const bValid = !Number.isNaN(bNum);
      if (aValid && !bValid) return -1;
      if (!aValid && bValid) return 1;
      if (aValid && bValid) return bNum - aNum; // 年份倒序
      return 0;
    });
  };

  // 简化的年份排序：unknown/空值始终在最后
  const compareYear = (
    aYear: string,
    bYear: string,
    order: 'none' | 'asc' | 'desc'
  ) => {
    // 如果是无排序状态，返回0（保持原顺序）
    if (order === 'none') return 0;

    // 处理空值和unknown
    const aIsEmpty = !aYear || aYear === 'unknown';
    const bIsEmpty = !bYear || bYear === 'unknown';

    if (aIsEmpty && bIsEmpty) return 0;
    if (aIsEmpty) return 1; // a 在后
    if (bIsEmpty) return -1; // b 在后

    // 都是有效年份，按数字比较
    const aNum = parseInt(aYear, 10);
    const bNum = parseInt(bYear, 10);

    return order === 'asc' ? aNum - bNum : bNum - aNum;
  };

  // 规范化标题用于聚合（去除特殊符号、括号、空格和全角空格）
  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 titleContainsQuery = (title: string, query: string): boolean => {
    if (!exactSearch) return true; // 如果未开启精确搜索，不过滤
    if (!query || !title) return true; // 如果没有搜索词或标题，不过滤

    const normalizedTitle = title.toLowerCase();
    const normalizedQuery = query.toLowerCase();

    return normalizedTitle.includes(normalizedQuery);
  };

  const allExactSearchResults = useMemo(() => {
    if (!exactSearch) return searchResults;

    return searchResults.filter((item) =>
      titleContainsQuery(item.title, submittedSearchQuery)
    );
  }, [searchResults, submittedSearchQuery, exactSearch]);

  // 聚合后的结果（按标题和年份分组）
  const aggregatedResults = useMemo(() => {
    //===== 阶段1：按 normalizedTitle-type 初步分组 =====
    const preliminaryMap = new Map<string, SearchResult[]>();

    allExactSearchResults.forEach((item) => {
      const normalizedTitle = normalizeTitle(item.title);
      const type = getType(item);
      const preliminaryKey = `${normalizedTitle}-${type}`;

      const arr = preliminaryMap.get(preliminaryKey) || [];
      arr.push(item);
      preliminaryMap.set(preliminaryKey, arr);
    });

    //===== 阶段2：智能年份推断和最终分组 =====
    const finalMap = new Map<string, SearchResult[]>();
    const keyOrder: string[] = [];

    preliminaryMap.forEach((group, preliminaryKey) => {
      // 分离有年份和无年份的结果
      const withYear = new Map<string, SearchResult[]>();
      const withoutYear: SearchResult[] = [];

      group.forEach((item) => {
        const year = item.year;

        // 判断是否为有效年份：必须是4位数字，且不能是空字符串或'unknown'
        if (
          year &&
          year.trim() !== '' &&
          year !== 'unknown' &&
          /^\d{4}$/.test(year)
        ) {
          // 有有效年份
          const arr = withYear.get(year) || [];
          arr.push(item);
          withYear.set(year, arr);
        } else {
          // 无年份（包括空字符串、'unknown'、null、undefined等）
          withoutYear.push(item);
        }
      });

      // 如果有有效年份组
      if (withYear.size > 0) {
        // 将无年份的结果复制到每个有年份的组中
        withYear.forEach((yearGroup, year) => {
          const finalKey = `${preliminaryKey}-${year}`;
          // 合并：有年份的 + 无年份的（复制）
          const mergedGroup = [...yearGroup, ...withoutYear];
          finalMap.set(finalKey, mergedGroup);
          keyOrder.push(finalKey);
        });
      } else if (withoutYear.length > 0) {
        // 如果完全没有年份信息，单独成组
        const finalKey = `${preliminaryKey}-unknown`;
        finalMap.set(finalKey, withoutYear);
        keyOrder.push(finalKey);
      }
    });

    // 按出现顺序返回聚合结果
    return keyOrder.map(
      (key) => [key, finalMap.get(key)!] as [string, SearchResult[]]
    );
  }, [allExactSearchResults]);

  // 当聚合结果变化时，如果某个聚合已存在，则调用其卡片 ref 的 set 方法增量更新
  useEffect(() => {
    aggregatedResults.forEach(([mapKey, group]) => {
      const stats = computeGroupStats(group);
      const prev = groupStatsRef.current.get(mapKey);
      if (!prev) {
        // 第一次出现，记录初始值，不调用 ref（由初始 props 渲染）
        groupStatsRef.current.set(mapKey, stats);
        return;
      }
      // 对比变化并调用对应的 set 方法
      const ref = groupRefs.current.get(mapKey);
      if (ref && ref.current) {
        if (prev.episodes !== stats.episodes) {
          ref.current.setEpisodes(stats.episodes);
        }
        const prevNames = (prev.source_names || []).join('|');
        const nextNames = (stats.source_names || []).join('|');
        if (prevNames !== nextNames) {
          ref.current.setSourceNames(stats.source_names);
        }
        if (prev.douban_id !== stats.douban_id) {
          ref.current.setDoubanId(stats.douban_id);
        }
        groupStatsRef.current.set(mapKey, stats);
      }
    });
  }, [aggregatedResults]);

  // 构建筛选选项
  const filterOptions = useMemo(() => {
    const exactSearchFiltered = exactSearch
      ? searchResults.filter((item) =>
          titleContainsQuery(item.title, currentQueryRef.current)
        )
      : searchResults;

    const buildSourceOptions = (
      sourceEntries: Array<{ source: string; source_name: string }>
    ) => [
      { label: '全部来源', value: 'all' },
      ...Array.from(
        new Map(
          sourceEntries
            .filter(
              (item) =>
                item.source &&
                item.source_name &&
                item.source.trim() !== '' &&
                item.source_name.trim() !== ''
            )
            .map((item) => [item.source, item.source_name])
        ).entries()
      )
        .sort((a, b) => {
          const aIsOpenList = a[0] === 'openlist';
          const bIsOpenList = b[0] === 'openlist';
          const aIsEmby = a[0] === 'emby' || a[0].startsWith('emby_');
          const bIsEmby = b[0] === 'emby' || b[0].startsWith('emby_');

          const aPriority = aIsOpenList ? 100 : aIsEmby ? 90 : 0;
          const bPriority = bIsOpenList ? 100 : bIsEmby ? 90 : 0;

          if (aPriority !== bPriority) {
            return bPriority - aPriority;
          }

          return a[1].localeCompare(b[1]);
        })
        .map(([value, label]) => ({ label, value })),
    ];

    const buildTitleOptions = (titles: string[]) => [
      { label: '全部标题', value: 'all' },
      ...Array.from(new Set(titles))
        .filter((title) => title && title.trim() !== '')
        .sort((a, b) => a.localeCompare(b))
        .map((title) => ({ label: title, value: title })),
    ];

    const buildYearOptions = (years: string[]) => {
      const yearSet = Array.from(
        new Set(years.filter((year) => year && year.trim() !== ''))
      );
      const knownYears = yearSet
        .filter((year) => year !== 'unknown')
        .sort((a, b) => parseInt(b) - parseInt(a));
      const hasUnknown = yearSet.includes('unknown');

      return [
        { label: '全部年份', value: 'all' },
        ...knownYears.map((year) => ({ label: year, value: year })),
        ...(hasUnknown ? [{ label: '未知', value: 'unknown' }] : []),
      ];
    };

    const allForSourceOptions = exactSearchFiltered.filter((item) => {
      if (filterAll.title !== 'all' && item.title !== filterAll.title)
        return false;
      if (filterAll.year !== 'all' && item.year !== filterAll.year)
        return false;
      return true;
    });

    const allForTitleOptions = exactSearchFiltered.filter((item) => {
      if (filterAll.source !== 'all' && item.source !== filterAll.source)
        return false;
      if (filterAll.year !== 'all' && item.year !== filterAll.year)
        return false;
      return true;
    });

    const allForYearOptions = exactSearchFiltered.filter((item) => {
      if (filterAll.source !== 'all' && item.source !== filterAll.source)
        return false;
      if (filterAll.title !== 'all' && item.title !== filterAll.title)
        return false;
      return true;
    });

    const aggForSourceOptions = aggregatedResults.filter(([_, group]) => {
      const gTitle = group[0]?.title ?? '';
      const gYear = group[0]?.year ?? 'unknown';
      if (filterAgg.title !== 'all' && gTitle !== filterAgg.title) return false;
      if (filterAgg.year !== 'all' && gYear !== filterAgg.year) return false;
      return true;
    });

    const aggForTitleOptions = aggregatedResults.filter(([_, group]) => {
      const gYear = group[0]?.year ?? 'unknown';
      const hasSource =
        filterAgg.source === 'all'
          ? true
          : group.some((item) => item.source === filterAgg.source);
      if (!hasSource) return false;
      if (filterAgg.year !== 'all' && gYear !== filterAgg.year) return false;
      return true;
    });

    const aggForYearOptions = aggregatedResults.filter(([_, group]) => {
      const gTitle = group[0]?.title ?? '';
      const hasSource =
        filterAgg.source === 'all'
          ? true
          : group.some((item) => item.source === filterAgg.source);
      if (!hasSource) return false;
      if (filterAgg.title !== 'all' && gTitle !== filterAgg.title) return false;
      return true;
    });

    const categoriesAll: SearchFilterCategory[] = [
      {
        key: 'source',
        label: '来源',
        options: buildSourceOptions(
          allForSourceOptions.map((item) => ({
            source: item.source,
            source_name: item.source_name,
          }))
        ),
      },
      {
        key: 'title',
        label: '标题',
        options: buildTitleOptions(
          allForTitleOptions.map((item) => item.title)
        ),
      },
      {
        key: 'year',
        label: '年份',
        options: buildYearOptions(allForYearOptions.map((item) => item.year)),
      },
    ];

    const categoriesAgg: SearchFilterCategory[] = [
      {
        key: 'source',
        label: '来源',
        options: buildSourceOptions(
          aggForSourceOptions.flatMap(([_, group]) =>
            group.map((item) => ({
              source: item.source,
              source_name: item.source_name,
            }))
          )
        ),
      },
      {
        key: 'title',
        label: '标题',
        options: buildTitleOptions(
          aggForTitleOptions.map(([_, group]) => group[0]?.title ?? '')
        ),
      },
      {
        key: 'year',
        label: '年份',
        options: buildYearOptions(
          aggForYearOptions.map(([_, group]) => group[0]?.year ?? 'unknown')
        ),
      },
    ];

    return { categoriesAll, categoriesAgg };
  }, [searchResults, aggregatedResults, exactSearch, filterAll, filterAgg]);

  // 非聚合：应用筛选与排序
  const filteredAllResults = useMemo(() => {
    const { source, title, year, yearOrder } = filterAll;

    const filtered = allExactSearchResults.filter((item) => {
      if (source !== 'all' && item.source !== source) return false;
      if (title !== 'all' && item.title !== title) return false;
      if (year !== 'all' && item.year !== year) return false;
      return true;
    });

    // 如果是无排序状态，直接返回过滤后的原始顺序
    if (yearOrder === 'none') {
      return filtered;
    }

    // 简化排序：1. 年份排序，2. 年份相同时精确匹配在前，3. 标题排序
    return filtered.sort((a, b) => {
      // 首先按年份排序
      const yearComp = compareYear(a.year, b.year, yearOrder);
      if (yearComp !== 0) return yearComp;

      // 年份相同时，精确匹配在前
      const aExactMatch = a.title === searchQuery.trim();
      const bExactMatch = b.title === searchQuery.trim();
      if (aExactMatch && !bExactMatch) return -1;
      if (!aExactMatch && bExactMatch) return 1;

      // 最后按标题排序，正序时字母序，倒序时反字母序
      return yearOrder === 'asc'
        ? a.title.localeCompare(b.title)
        : b.title.localeCompare(a.title);
    });
  }, [allExactSearchResults, filterAll, searchQuery]);

  // 聚合：应用筛选与排序
  const filteredAggResults = useMemo(() => {
    const { source, title, year, yearOrder } = filterAgg as any;
    const filtered = aggregatedResults.filter(([_, group]) => {
      const gTitle = group[0]?.title ?? '';
      const gYear = group[0]?.year ?? 'unknown';
      const hasSource =
        source === 'all' ? true : group.some((item) => item.source === source);
      if (!hasSource) return false;
      if (title !== 'all' && gTitle !== title) return false;
      if (year !== 'all' && gYear !== year) return false;
      return true;
    });

    // 如果是无排序状态，保持按关键字+年份+类型出现的原始顺序
    if (yearOrder === 'none') {
      return filtered;
    }

    // 简化排序：1. 年份排序，2. 年份相同时精确匹配在前，3. 标题排序
    return filtered.sort((a, b) => {
      // 首先按年份排序
      const aYear = a[1][0].year;
      const bYear = b[1][0].year;
      const yearComp = compareYear(aYear, bYear, yearOrder);
      if (yearComp !== 0) return yearComp;

      // 年份相同时，精确匹配在前
      const aExactMatch = a[1][0].title === searchQuery.trim();
      const bExactMatch = b[1][0].title === searchQuery.trim();
      if (aExactMatch && !bExactMatch) return -1;
      if (!aExactMatch && bExactMatch) return 1;

      // 最后按标题排序，正序时字母序，倒序时反字母序
      const aTitle = a[1][0].title;
      const bTitle = b[1][0].title;
      return yearOrder === 'asc'
        ? aTitle.localeCompare(bTitle)
        : bTitle.localeCompare(aTitle);
    });
  }, [aggregatedResults, filterAgg, searchQuery]);

  const useVirtualGrid = useMemo(() => {
    const cardCount =
      viewMode === 'agg'
        ? filteredAggResults.length
        : filteredAllResults.length;
    return resultDisplayMode === 'card' && cardCount >= 100;
  }, [
    viewMode,
    resultDisplayMode,
    filteredAggResults.length,
    filteredAllResults.length,
  ]);

  const resultCountMeta = useMemo(() => {
    const isAggregateView = viewMode === 'agg';
    const visibleCount = isAggregateView
      ? filteredAggResults.length
      : filteredAllResults.length;
    const totalCount = isAggregateView
      ? aggregatedResults.length
      : allExactSearchResults.length;

    return {
      visibleCount,
      totalCount,
      isFiltered: visibleCount !== totalCount,
      modeLabel: isAggregateView ? '聚合结果' : '搜索结果',
      unit: isAggregateView ? '组' : '条',
    };
  }, [
    viewMode,
    filteredAggResults.length,
    filteredAllResults.length,
    aggregatedResults.length,
    allExactSearchResults.length,
  ]);

  useEffect(() => {
    if (typeof window !== 'undefined') {
      localStorage.setItem('searchResultDisplayMode', resultDisplayMode);
    }
  }, [resultDisplayMode]);

  const getSearchResultUrl = (params: {
    title: string;
    year?: string;
    type?: string;
    source?: string;
    id?: string;
    query?: string;
    isAggregate?: boolean;
  }) => {
    const yearParam =
      params.year && params.year !== 'unknown' ? `&year=${params.year}` : '';
    const queryParam = params.query
      ? `&stitle=${encodeURIComponent(params.query.trim())}`
      : '';
    const typeParam = params.type ? `&stype=${params.type}` : '';
    const preferParam = params.isAggregate ? '&prefer=true' : '';

    if (params.isAggregate || !params.source || !params.id) {
      return `/play?title=${encodeURIComponent(
        params.title.trim()
      )}${yearParam}${typeParam}${preferParam}${queryParam}`;
    }

    return `/play?source=${params.source}&id=${
      params.id
    }&title=${encodeURIComponent(
      params.title.trim()
    )}${yearParam}${preferParam}${queryParam}${typeParam}`;
  };

  const renderTag = (label: string, className: string) => (
    <span
      className={`inline-flex items-center rounded-full px-2 py-1 text-[11px] font-medium ${className}`}
    >
      {label}
    </span>
  );

  const renderListItem = (item: {
    key: string;
    title: string;
    poster: string;
    year?: string;
    type: 'movie' | 'tv';
    episodes?: number;
    sourceName?: string;
    sourceNames?: string[];
    doubanId?: number;
    desc?: string;
    vodRemarks?: string;
    isAggregate?: boolean;
    source?: string;
    id?: string;
    query?: string;
  }) => {
    const yearText = item.year && item.year !== 'unknown' ? item.year : '';
    const sourceTags = item.isAggregate
      ? Array.from(new Set(item.sourceNames || []))
      : item.sourceName
      ? [item.sourceName]
      : [];
    const isExpanded = !!expandedSourceTags[item.key];
    const maxVisibleSourceTags = 3;
    const visibleSourceTags = isExpanded
      ? sourceTags
      : sourceTags.slice(0, maxVisibleSourceTags);
    const hiddenSourceCount = Math.max(
      0,
      sourceTags.length - visibleSourceTags.length
    );
    const description = (item.desc || '').trim();
    const itemUrl = getSearchResultUrl({
      title: item.title,
      year: item.year,
      type: item.type,
      source: item.source,
      id: item.id,
      query: item.query,
      isAggregate: item.isAggregate,
    });

    return (
      <button
        key={item.key}
        type='button'
        onClick={() => router.push(itemUrl)}
        className='group w-full rounded-2xl border border-gray-200/80 bg-white/90 p-3 text-left shadow-sm transition-all hover:border-green-300 hover:shadow-md dark:border-gray-700 dark:bg-gray-900/70 dark:hover:border-green-700'
      >
        <div className='flex items-start gap-4'>
          <div className='relative h-32 w-24 shrink-0 overflow-hidden rounded-xl bg-gray-100 dark:bg-gray-800'>
            <ProxyImage
              originalSrc={item.poster}
              alt={item.title}
              className='h-full w-full object-cover transition-transform duration-300 group-hover:scale-[1.04]'
              loading='lazy'
              onClick={(e) => {
                e.stopPropagation();
                setPreviewImage({
                  url: processImageUrl(item.poster),
                  alt: item.title,
                });
              }}
            />
          </div>

          <div className='min-w-0 flex-1'>
            <div className='flex items-start justify-between gap-3'>
              <div className='min-w-0'>
                <h3 className='line-clamp-2 text-base font-semibold text-gray-900 dark:text-gray-100'>
                  {item.title}
                </h3>
                <div className='mt-2 flex flex-wrap gap-2'>
                  {renderTag(
                    item.type === 'movie' ? '电影' : '剧集',
                    'bg-green-50 text-green-700 dark:bg-green-900/30 dark:text-green-300'
                  )}
                  {yearText &&
                    renderTag(
                      yearText,
                      'bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300'
                    )}
                  {item.episodes &&
                    item.episodes > 0 &&
                    renderTag(
                      `${item.episodes}集`,
                      'bg-blue-50 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300'
                    )}
                  {item.vodRemarks &&
                    renderTag(
                      item.vodRemarks,
                      'bg-amber-50 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300'
                    )}
                  {item.doubanId &&
                    item.doubanId > 0 &&
                    renderTag(
                      '豆瓣',
                      'bg-emerald-50 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-300'
                    )}
                </div>
              </div>
            </div>

            {description && (
              <p className='mt-3 line-clamp-3 text-sm leading-6 text-gray-600 dark:text-gray-400'>
                {description}
              </p>
            )}
          </div>
        </div>

        {sourceTags.length > 0 && (
          <div
            className={`mt-3 flex gap-2 ${
              isExpanded ? 'flex-wrap' : 'flex-nowrap overflow-hidden'
            }`}
          >
            {visibleSourceTags.map((sourceName) => (
              <span
                key={`${item.key}-${sourceName}`}
                className='inline-flex max-w-full shrink-0 items-center truncate rounded-full border border-gray-200 bg-gray-50 px-2.5 py-1 text-xs text-gray-600 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300'
                title={sourceName}
              >
                {sourceName}
              </span>
            ))}
            {hiddenSourceCount > 0 && (
              <button
                type='button'
                onClick={(e) => {
                  e.stopPropagation();
                  setExpandedSourceTags((prev) => ({
                    ...prev,
                    [item.key]: true,
                  }));
                }}
                className='inline-flex shrink-0 items-center rounded-full border border-green-200 bg-green-50 px-2.5 py-1 text-xs font-medium text-green-700 transition-colors hover:bg-green-100 dark:border-green-800 dark:bg-green-900/30 dark:text-green-300 dark:hover:bg-green-900/50'
                aria-label={`展开剩余${hiddenSourceCount}个来源`}
              >
                +{hiddenSourceCount}
              </button>
            )}
          </div>
        )}
      </button>
    );
  };

  // 监听选项卡切换，自动执行搜索
  useEffect(() => {
    // 如果切换到网盘搜索选项卡，且有搜索关键词，且已显示结果，则触发搜索
    if (activeTab === 'pansou' && searchQuery.trim() && showResults) {
      setTriggerPansouSearch((prev) => !prev);
    }
    // 如果切换到 ACG 磁力搜索选项卡，且有搜索关键词，且已显示结果，则触发搜索
    if (activeTab === 'acg' && searchQuery.trim() && showResults) {
      setTriggerAcgSearch((prev) => !prev);
    }
  }, [activeTab]);

  useEffect(() => {
    // 从 URL 读取搜索类型参数
    const typeParam = searchParams.get('type');
    const query = searchParams.get('q');

    if (typeParam === 'pansou' || typeParam === 'acg') {
      setActiveTab(typeParam);

      // 如果有搜索关键词且显示结果，触发对应的搜索
      if (query && query.trim()) {
        setSearchQuery(query);
        setShowResults(true);

        // 延迟触发搜索，确保组件已经切换到正确的标签页
        setTimeout(() => {
          if (typeParam === 'pansou') {
            setTriggerPansouSearch((prev) => !prev);
          } else if (typeParam === 'acg') {
            setTriggerAcgSearch((prev) => !prev);
          }
        }, 100);
      }
    } else if (typeParam === 'video') {
      setActiveTab('video');
    } else if (!typeParam && query) {
      // 如果没有 type 参数但有查询，默认为 video
      setActiveTab('video');
    }

    // 无搜索参数时聚焦搜索框
    !searchParams.get('q') && document.getElementById('searchInput')?.focus();

    // 获取用户权限
    const authInfo = getAuthInfoFromBrowserCookie();
    setUserRole(authInfo?.role || null);

    // 初始化繁体转简体转换器
    if (typeof window !== 'undefined') {
      import('opencc-js')
        .then((module) => {
          try {
            const OpenCC = module.default || module;
            const converter = OpenCC.Converter({ from: 'hk', to: 'cn' });
            converterRef.current = converter;
            setConverterReady(true);
          } catch (error) {
            console.error('初始化繁体转简体转换器失败:', error);
            setConverterReady(true); // 即使失败也设置为 true，避免阻塞
          }
        })
        .catch((error) => {
          console.error('加载 opencc-js 失败:', error);
          setConverterReady(true); // 即使失败也设置为 true，避免阻塞
        });
    } else {
      setConverterReady(true);
    }

    // 初始加载搜索历史
    getSearchHistory().then(setSearchHistory);

    // 读取流式搜索设置
    if (typeof window !== 'undefined') {
      const savedFluidSearch = localStorage.getItem('fluidSearch');
      const defaultFluidSearch =
        (window as any).RUNTIME_CONFIG?.FLUID_SEARCH !== false;
      if (savedFluidSearch !== null) {
        setUseFluidSearch(JSON.parse(savedFluidSearch));
      } else if (defaultFluidSearch !== undefined) {
        setUseFluidSearch(defaultFluidSearch);
      }

      // 读取精确搜索设置
      const savedExactSearch = localStorage.getItem('exactSearch');
      if (savedExactSearch !== null) {
        setExactSearch(savedExactSearch === 'true');
      }
    }

    // 监听搜索历史更新事件
    const unsubscribe = subscribeToDataUpdates(
      'searchHistoryUpdated',
      (newHistory: string[]) => {
        setSearchHistory(newHistory);
      }
    );

    // 获取滚动位置的函数 - 专门针对 body 滚动
    const getScrollTop = () => {
      return document.body.scrollTop || 0;
    };

    // 使用 requestAnimationFrame 持续检测滚动位置
    let isRunning = false;
    const checkScrollPosition = () => {
      if (!isRunning) return;

      const scrollTop = getScrollTop();
      const shouldShow = scrollTop > 300;
      setShowBackToTop(shouldShow);

      requestAnimationFrame(checkScrollPosition);
    };

    // 启动持续检测
    isRunning = true;
    checkScrollPosition();

    // 监听 body 元素的滚动事件
    const handleScroll = () => {
      const scrollTop = getScrollTop();
      setShowBackToTop(scrollTop > 300);
    };

    document.body.addEventListener('scroll', handleScroll, { passive: true });

    return () => {
      unsubscribe();
      isRunning = false; // 停止 requestAnimationFrame 循环

      // 移除 body 滚动事件监听器
      document.body.removeEventListener('scroll', handleScroll);
    };
  }, []);

  useEffect(() => {
    // 等待转换器初始化完成
    if (!converterReady) {
      return;
    }

    // 当搜索参数变化时更新搜索状态
    let query = searchParams.get('q') || '';

    // 如果开启了繁体转简体，进行转换
    if (query && typeof window !== 'undefined') {
      const searchTraditionalToSimplified = localStorage.getItem(
        'searchTraditionalToSimplified'
      );

      if (searchTraditionalToSimplified === 'true' && converterRef.current) {
        try {
          const originalQuery = query;
          query = converterRef.current(query);

          // 如果转换后的文本与原文本不同，更新 URL
          if (originalQuery !== query) {
            const trimmedConverted = query.trim();
            // 使用 replace 而不是 push，避免在历史记录中留下繁体版本
            router.replace(
              `/search?q=${encodeURIComponent(trimmedConverted)}${
                searchParams.get('type')
                  ? `&type=${searchParams.get('type')}`
                  : ''
              }`
            );
            return; // 等待 URL 更新后重新触发此 effect
          }
        } catch (error) {
          console.error('[URL参数监听] 繁体转简体转换失败:', error);
        }
      }
    }

    currentQueryRef.current = query.trim();

    if (query) {
      setSearchQuery(query);

      const trimmed = query.trim();

      // 检查是否有缓存且不是强制刷新
      if (!forceRefresh) {
        const cachedResults = getCachedResults(trimmed);
        if (cachedResults && cachedResults.length > 0) {
          // 使用缓存的结果
          setIsLoading(false); // 先设置加载状态为 false
          setSearchResults(cachedResults);
          setShowResults(true);
          setTotalSources(1);
          setCompletedSources(1);
          setShowSuggestions(false);
          setIsFromCache(true); // 标记为缓存结果
          // 保存到搜索历史
          addSearchHistory(query);
          return;
        }
      }

      // 如果是强制刷新，清除缓存
      if (forceRefresh) {
        clearCachedResults(trimmed);
        setForceRefresh(false);
      }

      // 开始新搜索时，重置缓存标记
      setIsFromCache(false);

      // 新搜索：关闭旧连接并清空结果
      if (eventSourceRef.current) {
        try {
          eventSourceRef.current.close();
        } catch {}
        eventSourceRef.current = null;
      }
      // 先设置加载状态，再清空结果，避免短暂显示"暂无搜索结果"
      setIsLoading(true);
      setShowResults(true);
      setSearchResults([]);
      setTotalSources(0);
      setCompletedSources(0);
      // 清理缓冲
      pendingResultsRef.current = [];
      if (flushTimerRef.current) {
        clearTimeout(flushTimerRef.current);
        flushTimerRef.current = null;
      }

      // 每次搜索时重新读取设置，确保使用最新的配置
      let currentFluidSearch = useFluidSearch;
      if (typeof window !== 'undefined') {
        const savedFluidSearch = localStorage.getItem('fluidSearch');
        if (savedFluidSearch !== null) {
          currentFluidSearch = JSON.parse(savedFluidSearch);
        } else {
          const defaultFluidSearch =
            (window as any).RUNTIME_CONFIG?.FLUID_SEARCH !== false;
          currentFluidSearch = defaultFluidSearch;
        }
      }

      // 如果读取的配置与当前状态不同，更新状态
      if (currentFluidSearch !== useFluidSearch) {
        setUseFluidSearch(currentFluidSearch);
      }

      if (currentFluidSearch) {
        // 流式搜索：打开新的流式连接
        const es = new EventSource(
          `/api/search/ws?q=${encodeURIComponent(trimmed)}`
        );
        eventSourceRef.current = es;

        es.onmessage = (event) => {
          if (!event.data) return;
          try {
            const payload = JSON.parse(event.data);
            if (currentQueryRef.current !== trimmed) return;
            switch (payload.type) {
              case 'start':
                setTotalSources(payload.totalSources || 0);
                setCompletedSources(0);
                break;
              case 'source_result': {
                setCompletedSources((prev) => prev + 1);
                if (
                  Array.isArray(payload.results) &&
                  payload.results.length > 0
                ) {
                  // 缓冲新增结果，节流刷入，避免频繁重渲染导致闪烁
                  const activeYearOrder =
                    viewMode === 'agg'
                      ? filterAgg.yearOrder
                      : filterAll.yearOrder;
                  const incoming: SearchResult[] =
                    activeYearOrder === 'none'
                      ? sortBatchForNoOrder(payload.results as SearchResult[])
                      : (payload.results as SearchResult[]);
                  pendingResultsRef.current.push(...incoming);
                  if (!flushTimerRef.current) {
                    flushTimerRef.current = window.setTimeout(() => {
                      const toAppend = pendingResultsRef.current;
                      pendingResultsRef.current = [];
                      startTransition(() => {
                        setSearchResults((prev) => prev.concat(toAppend));
                      });
                      flushTimerRef.current = null;
                    }, 80);
                  }
                }
                break;
              }
              case 'source_error':
                setCompletedSources((prev) => prev + 1);
                break;
              case 'complete':
                setCompletedSources(payload.completedSources || totalSources);
                // 完成前确保将缓冲写入
                if (pendingResultsRef.current.length > 0) {
                  const toAppend = pendingResultsRef.current;
                  pendingResultsRef.current = [];
                  if (flushTimerRef.current) {
                    clearTimeout(flushTimerRef.current);
                    flushTimerRef.current = null;
                  }
                  startTransition(() => {
                    setSearchResults((prev) => {
                      const newResults = prev.concat(toAppend);
                      // 缓存完整的搜索结果
                      setCachedResults(trimmed, newResults);
                      return newResults;
                    });
                  });
                } else {
                  // 即使没有待写入的缓冲，也缓存当前结果
                  setSearchResults((prev) => {
                    setCachedResults(trimmed, prev);
                    return prev;
                  });
                }
                setIsLoading(false);
                try {
                  es.close();
                } catch {}
                if (eventSourceRef.current === es) {
                  eventSourceRef.current = null;
                }
                break;
            }
          } catch {}
        };

        es.onerror = () => {
          setIsLoading(false);
          // 错误时也清空缓冲
          if (pendingResultsRef.current.length > 0) {
            const toAppend = pendingResultsRef.current;
            pendingResultsRef.current = [];
            if (flushTimerRef.current) {
              clearTimeout(flushTimerRef.current);
              flushTimerRef.current = null;
            }
            startTransition(() => {
              setSearchResults((prev) => prev.concat(toAppend));
            });
          }
          try {
            es.close();
          } catch {}
          if (eventSourceRef.current === es) {
            eventSourceRef.current = null;
          }
        };
      } else {
        // 传统搜索：使用普通接口
        fetch(`/api/search?q=${encodeURIComponent(trimmed)}`)
          .then((response) => response.json())
          .then((data) => {
            if (currentQueryRef.current !== trimmed) return;

            if (data.results && Array.isArray(data.results)) {
              const activeYearOrder =
                viewMode === 'agg' ? filterAgg.yearOrder : filterAll.yearOrder;
              const results: SearchResult[] =
                activeYearOrder === 'none'
                  ? sortBatchForNoOrder(data.results as SearchResult[])
                  : (data.results as SearchResult[]);

              setSearchResults(results);
              // 缓存搜索结果
              setCachedResults(trimmed, results);
              setTotalSources(1);
              setCompletedSources(1);
            }
            setIsLoading(false);
          })
          .catch(() => {
            setIsLoading(false);
          });
      }
      setShowSuggestions(false);

      // 保存到搜索历史 (事件监听会自动更新界面)
      addSearchHistory(query);
    } else {
      setShowResults(false);
      setShowSuggestions(false);
    }
  }, [searchParams, forceRefresh, converterReady]);

  // 组件卸载时，关闭可能存在的连接
  useEffect(() => {
    return () => {
      if (eventSourceRef.current) {
        try {
          eventSourceRef.current.close();
        } catch {}
        eventSourceRef.current = null;
      }
      if (flushTimerRef.current) {
        clearTimeout(flushTimerRef.current);
        flushTimerRef.current = null;
      }
      pendingResultsRef.current = [];
    };
  }, []);

  // 输入框内容变化时触发，显示搜索建议
  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value;
    setSearchQuery(value);

    if (value.trim()) {
      setShowSuggestions(true);
    } else {
      setShowSuggestions(false);
    }
  };

  // 搜索框聚焦时触发，显示搜索建议
  const handleInputFocus = () => {
    if (searchQuery.trim()) {
      setShowSuggestions(true);
    }
  };

  // 搜索表单提交时触发，处理搜索逻辑
  const handleSearch = (e: React.FormEvent) => {
    e.preventDefault();
    let trimmed = searchQuery.trim().replace(/\s+/g, ' ');
    if (!trimmed) return;

    // 如果开启了繁体转简体，进行转换
    if (typeof window !== 'undefined') {
      const searchTraditionalToSimplified = localStorage.getItem(
        'searchTraditionalToSimplified'
      );
      if (searchTraditionalToSimplified === 'true' && converterRef.current) {
        try {
          trimmed = converterRef.current(trimmed);
        } catch (error) {
          console.error('繁体转简体转换失败:', error);
        }
      }
    }

    // 回显搜索框
    setSearchQuery(trimmed);
    setShowResults(true);
    setShowSuggestions(false);
    // 立即设置加载状态，避免显示"未找到相关结果"
    setIsLoading(true);

    // 根据当前选项卡执行不同的搜索
    if (activeTab === 'video') {
      // 影视搜索
      router.push(`/search?q=${encodeURIComponent(trimmed)}&type=video`);
      // 其余由 searchParams 变化的 effect 处理
    } else if (activeTab === 'pansou') {
      // 网盘搜索 - 触发搜索
      router.push(`/search?q=${encodeURIComponent(trimmed)}&type=pansou`);
      setTriggerPansouSearch((prev) => !prev); // 切换状态来触发搜索
    } else if (activeTab === 'acg') {
      // ACG 磁力搜索 - 触发搜索
      router.push(`/search?q=${encodeURIComponent(trimmed)}&type=acg`);
      setTriggerAcgSearch((prev) => !prev);
    }
  };

  const handleSuggestionSelect = (suggestion: string) => {
    let processedSuggestion = suggestion;

    // 如果开启了繁体转简体，进行转换
    if (typeof window !== 'undefined') {
      const searchTraditionalToSimplified = localStorage.getItem(
        'searchTraditionalToSimplified'
      );
      if (searchTraditionalToSimplified === 'true' && converterRef.current) {
        try {
          processedSuggestion = converterRef.current(suggestion);
        } catch (error) {
          console.error('繁体转简体转换失败:', error);
        }
      }
    }

    setSearchQuery(processedSuggestion);
    setShowSuggestions(false);

    // 自动执行搜索
    setShowResults(true);
    // 立即设置加载状态，避免显示"未找到相关结果"
    setIsLoading(true);

    // 根据当前选项卡执行不同的搜索
    if (activeTab === 'video') {
      // 影视搜索
      router.push(
        `/search?q=${encodeURIComponent(processedSuggestion)}&type=video`
      );
      // 其余由 searchParams 变化的 effect 处理
    } else if (activeTab === 'pansou') {
      // 网盘搜索 - 触发搜索
      router.push(
        `/search?q=${encodeURIComponent(processedSuggestion)}&type=pansou`
      );
      setTriggerPansouSearch((prev) => !prev);
    } else if (activeTab === 'acg') {
      // ACG 磁力搜索 - 触发搜索
      router.push(
        `/search?q=${encodeURIComponent(processedSuggestion)}&type=acg`
      );
      setTriggerAcgSearch((prev) => !prev);
    }
  };

  // 返回顶部功能
  const scrollToTop = () => {
    try {
      // 根据调试结果，真正的滚动容器是 document.body
      document.body.scrollTo({
        top: 0,
        behavior: 'smooth',
      });
    } catch (error) {
      // 如果平滑滚动完全失败，使用立即滚动
      document.body.scrollTop = 0;
    }
  };

  // 处理标签切换
  const handleTabChange = (newTab: 'video' | 'pansou' | 'acg') => {
    setActiveTab(newTab);

    // 如果有搜索关键词，更新 URL
    const currentQuery = searchParams.get('q');
    if (currentQuery) {
      router.push(
        `/search?q=${encodeURIComponent(currentQuery)}&type=${newTab}`
      );
    }
  };

  return (
    <PageLayout activePath='/search'>
      <div className='px-4 sm:px-10 py-4 sm:py-8 overflow-visible mb-10'>
        {/* 搜索框 */}
        <div className='mb-8'>
          <form onSubmit={handleSearch} className='max-w-2xl mx-auto'>
            <div className='relative'>
              <Search className='absolute left-3 top-1/2 h-5 w-5 -translate-y-1/2 text-gray-400 dark:text-gray-500' />
              <input
                id='searchInput'
                type='text'
                value={searchQuery}
                onChange={handleInputChange}
                onFocus={handleInputFocus}
                placeholder='搜索电影、电视剧...'
                autoComplete='off'
                className='w-full h-12 rounded-lg bg-gray-50/80 py-3 pl-10 pr-12 text-sm text-gray-700 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-green-400 focus:bg-white border border-gray-200/50 shadow-sm dark:bg-gray-800 dark:text-gray-300 dark:placeholder-gray-500 dark:focus:bg-gray-700 dark:border-gray-700'
              />

              {/* 清除按钮 */}
              {searchQuery && (
                <button
                  type='button'
                  onClick={() => {
                    setSearchQuery('');
                    setShowSuggestions(false);
                    document.getElementById('searchInput')?.focus();
                  }}
                  className='absolute right-3 top-1/2 h-5 w-5 -translate-y-1/2 text-gray-400 hover:text-gray-600 transition-colors dark:text-gray-500 dark:hover:text-gray-300'
                  aria-label='清除搜索内容'
                >
                  <X className='h-5 w-5' />
                </button>
              )}

              {/* 搜索建议 */}
              <SearchSuggestions
                query={searchQuery}
                isVisible={showSuggestions}
                onSelect={handleSuggestionSelect}
                onClose={() => setShowSuggestions(false)}
                onEnterKey={() => {
                  // 当用户按回车键时，使用搜索框的实际内容进行搜索
                  const trimmed = searchQuery.trim().replace(/\s+/g, ' ');
                  if (!trimmed) return;

                  // 回显搜索框
                  setSearchQuery(trimmed);
                  setShowResults(true);
                  setShowSuggestions(false);

                  router.push(`/search?q=${encodeURIComponent(trimmed)}`);
                }}
              />
            </div>
          </form>

          {/* 选项卡 */}
          <div className='flex justify-center mt-6'>
            <CapsuleSwitch
              options={[
                {
                  label: '影视搜索',
                  value: 'video',
                  icon: <Film size={16} />,
                },
                {
                  label: '网盘搜索',
                  value: 'pansou',
                  icon: <HardDrive size={16} />,
                },
                // 仅管理员和站长显示 ACG 磁力搜索
                ...(userRole === 'admin' || userRole === 'owner'
                  ? [
                      {
                        label: '动漫磁力',
                        value: 'acg' as const,
                        icon: <Magnet size={16} />,
                      },
                    ]
                  : []),
              ]}
              active={activeTab}
              onChange={(value) =>
                handleTabChange(value as 'video' | 'pansou' | 'acg')
              }
            />
          </div>
        </div>

        {/* 搜索结果或搜索历史 */}
        <div className='max-w-[95%] mx-auto mt-12 overflow-visible'>
          {showResults ? (
            <section className='mb-12'>
              {activeTab === 'video' ? (
                <>
                  {/* 影视搜索结果 */}
                  {/* 标题 */}
                  <div className='mb-4 flex items-start justify-between gap-4'>
                    <div className='min-w-0'>
                      <h2 className='text-xl font-bold text-gray-800 dark:text-gray-200'>
                        搜索结果
                        {isFromCache ? (
                          <span className='ml-2 rounded-md bg-green-50 px-2 py-0.5 text-xs font-medium text-green-600 dark:bg-green-900/30 dark:text-green-400'>
                            缓存
                          </span>
                        ) : (
                          <>
                            {totalSources > 0 && useFluidSearch && (
                              <span className='ml-2 text-sm font-normal text-gray-500 dark:text-gray-400'>
                                源 {completedSources}/{totalSources}
                              </span>
                            )}
                            {isLoading && useFluidSearch && (
                              <span className='ml-2 inline-block align-middle'>
                                <span className='inline-block h-3 w-3 animate-spin rounded-full border-2 border-gray-300 border-t-green-500'></span>
                              </span>
                            )}
                          </>
                        )}
                      </h2>
                      <div className='mt-2 flex flex-wrap items-center gap-2 text-xs'>
                        <span className='inline-flex items-center rounded-full bg-gray-100 px-2.5 py-1 font-medium text-gray-700 dark:bg-gray-800 dark:text-gray-200'>
                          {resultCountMeta.modeLabel}{' '}
                          {resultCountMeta.visibleCount.toLocaleString()}{' '}
                          {resultCountMeta.unit}
                        </span>
                        {resultCountMeta.isFiltered && (
                          <span className='inline-flex items-center rounded-full bg-white/80 px-2.5 py-1 font-medium text-gray-500 ring-1 ring-gray-200 dark:bg-gray-900/70 dark:text-gray-400 dark:ring-gray-700'>
                            筛选前{' '}
                            {resultCountMeta.totalCount.toLocaleString()}{' '}
                            {resultCountMeta.unit}
                          </span>
                        )}
                      </div>
                    </div>
                    {searchQuery && (
                      <button
                        onClick={() => {
                          setForceRefresh(true);
                        }}
                        disabled={isLoading}
                        className='flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm text-gray-600 transition-colors hover:bg-green-50 hover:text-green-600 disabled:cursor-not-allowed disabled:opacity-50 dark:text-gray-400 dark:hover:bg-gray-700/50 dark:hover:text-green-400'
                        aria-label='强制刷新搜索结果'
                      >
                        <RefreshCw
                          className={`h-4 w-4 ${
                            isLoading ? 'animate-spin' : ''
                          }`}
                        />
                        <span>刷新</span>
                      </button>
                    )}
                  </div>
                  <div className='mb-4 flex items-center gap-3'>
                    <div className='min-w-0 flex-1'>
                      {viewMode === 'agg' ? (
                        <SearchResultFilter
                          categories={filterOptions.categoriesAgg}
                          values={filterAgg}
                          onChange={(v) => setFilterAgg(v as any)}
                        />
                      ) : (
                        <SearchResultFilter
                          categories={filterOptions.categoriesAll}
                          values={filterAll}
                          onChange={(v) => setFilterAll(v as any)}
                        />
                      )}
                    </div>
                    <div className='flex shrink-0 items-center justify-end self-center'>
                      <label className='flex shrink-0 cursor-pointer select-none items-center gap-2'>
                        <span className='text-xs text-gray-700 dark:text-gray-300 sm:text-sm'>
                          聚合
                        </span>
                        <div className='relative'>
                          <input
                            type='checkbox'
                            className='peer sr-only'
                            checked={viewMode === 'agg'}
                            onChange={() =>
                              setViewMode(viewMode === 'agg' ? 'all' : 'agg')
                            }
                          />
                          <div className='h-5 w-9 rounded-full bg-gray-300 transition-colors peer-checked:bg-green-500 dark:bg-gray-600'></div>
                          <div className='absolute left-0.5 top-0.5 h-4 w-4 rounded-full bg-white transition-transform peer-checked:translate-x-4'></div>
                        </div>
                      </label>
                    </div>
                  </div>
                  <div className='mb-8 flex justify-center'>
                    <div className='inline-flex items-center rounded-xl border border-gray-200 bg-white p-1 shadow-sm dark:border-gray-700 dark:bg-gray-900'>
                      <button
                        type='button'
                        onClick={() => setResultDisplayMode('card')}
                        className={`inline-flex items-center gap-1 rounded-lg px-3 py-1.5 text-sm transition-colors ${
                          resultDisplayMode === 'card'
                            ? 'bg-green-500 text-white'
                            : 'text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800'
                        }`}
                        aria-label='切换为卡片视图'
                      >
                        <Grid2x2 className='h-4 w-4' />
                        <span>卡片</span>
                      </button>
                      <button
                        type='button'
                        onClick={() => setResultDisplayMode('list')}
                        className={`inline-flex items-center gap-1 rounded-lg px-3 py-1.5 text-sm transition-colors ${
                          resultDisplayMode === 'list'
                            ? 'bg-green-500 text-white'
                            : 'text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800'
                        }`}
                        aria-label='切换为列表视图'
                      >
                        <List className='h-4 w-4' />
                        <span>列表</span>
                      </button>
                    </div>
                  </div>
                  {searchResults.length === 0 ? (
                    isLoading ? (
                      <div className='flex justify-center items-center h-40'>
                        <div className='animate-spin rounded-full h-8 w-8 border-b-2 border-green-500'></div>
                      </div>
                    ) : (
                      <div className='text-center text-gray-500 py-8 dark:text-gray-400'>
                        未找到相关结果
                      </div>
                    )
                  ) : (
                    (() => {
                      const gridClassName =
                        'justify-start grid grid-cols-3 gap-x-2 gap-y-14 px-0 sm:grid-cols-[repeat(auto-fill,_minmax(11rem,_1fr))] sm:gap-x-8 sm:gap-y-20 sm:px-2';

                      const listClassName = 'space-y-4';

                      const resultChildren =
                        viewMode === 'agg'
                          ? filteredAggResults.map(([mapKey, group]) => {
                              const title = group[0]?.title || '';
                              const poster = group[0]?.poster || '';
                              const year = group[0]?.year || 'unknown';
                              const desc =
                                group.find((entry) => entry.desc?.trim())
                                  ?.desc || '';
                              const vodRemarks =
                                group.find((entry) => entry.vod_remarks?.trim())
                                  ?.vod_remarks || '';
                              const { episodes, source_names, douban_id } =
                                computeGroupStats(group);

                              const lastDashIndex = mapKey.lastIndexOf('-');
                              const secondLastDashIndex = mapKey.lastIndexOf(
                                '-',
                                lastDashIndex - 1
                              );
                              const type =
                                secondLastDashIndex > 0
                                  ? (mapKey.substring(
                                      secondLastDashIndex + 1,
                                      lastDashIndex
                                    ) as 'movie' | 'tv')
                                  : episodes === 1
                                  ? 'movie'
                                  : 'tv';

                              if (!groupStatsRef.current.has(mapKey)) {
                                groupStatsRef.current.set(mapKey, {
                                  episodes,
                                  source_names,
                                  douban_id,
                                });
                              }

                              if (resultDisplayMode === 'list') {
                                return renderListItem({
                                  key: `agg-${mapKey}`,
                                  title,
                                  poster,
                                  year,
                                  type,
                                  episodes,
                                  sourceNames: source_names,
                                  doubanId: douban_id,
                                  desc,
                                  vodRemarks,
                                  isAggregate: true,
                                  query:
                                    searchQuery.trim() !== title
                                      ? searchQuery.trim()
                                      : '',
                                });
                              }

                              return (
                                <div key={`agg-${mapKey}`} className='w-full'>
                                  <VideoCard
                                    ref={getGroupRef(mapKey)}
                                    from='search'
                                    isAggregate={true}
                                    title={title}
                                    poster={poster}
                                    year={year}
                                    episodes={episodes}
                                    source_names={source_names}
                                    douban_id={douban_id}
                                    query={
                                      searchQuery.trim() !== title
                                        ? searchQuery.trim()
                                        : ''
                                    }
                                    type={type}
                                  />
                                </div>
                              );
                            })
                          : filteredAllResults.map((item) => {
                              const type =
                                item.episodes.length > 1 ? 'tv' : 'movie';

                              if (resultDisplayMode === 'list') {
                                return renderListItem({
                                  key: `all-${item.source}-${item.id}`,
                                  id: item.id,
                                  title: item.title,
                                  poster: item.poster,
                                  episodes: item.episodes.length,
                                  source: item.source,
                                  sourceName: item.source_name,
                                  doubanId: item.douban_id,
                                  query:
                                    searchQuery.trim() !== item.title
                                      ? searchQuery.trim()
                                      : '',
                                  year: item.year,
                                  type,
                                  desc: item.desc,
                                  vodRemarks: item.vod_remarks,
                                });
                              }

                              return (
                                <div
                                  key={`all-${item.source}-${item.id}`}
                                  className='w-full'
                                >
                                  <VideoCard
                                    id={item.id}
                                    title={item.title}
                                    poster={item.poster}
                                    episodes={item.episodes.length}
                                    source={item.source}
                                    source_name={item.source_name}
                                    douban_id={item.douban_id}
                                    query={
                                      searchQuery.trim() !== item.title
                                        ? searchQuery.trim()
                                        : ''
                                    }
                                    year={item.year}
                                    from='search'
                                    type={type}
                                  />
                                </div>
                              );
                            });

                      if (useVirtualGrid) {
                        return (
                          <VirtualScrollableGrid
                            key={`search-results-virtual-${viewMode}`}
                            gridClassName={gridClassName}
                          >
                            {resultChildren}
                          </VirtualScrollableGrid>
                        );
                      }

                      return (
                        <div
                          key={`search-results-${viewMode}-${resultDisplayMode}`}
                          className={
                            resultDisplayMode === 'list'
                              ? listClassName
                              : gridClassName
                          }
                        >
                          {resultChildren}
                        </div>
                      );
                    })()
                  )}
                </>
              ) : activeTab === 'pansou' ? (
                <>
                  {/* 网盘搜索结果 */}
                  <div className='mb-4'>
                    <h2 className='text-xl font-bold text-gray-800 dark:text-gray-200'>
                      网盘搜索结果
                    </h2>
                  </div>
                  <PansouSearch
                    keyword={searchQuery}
                    triggerSearch={triggerPansouSearch}
                  />
                </>
              ) : (
                <>
                  {/* ACG 磁力搜索结果 */}
                  <div className='mb-4'>
                    <h2 className='text-xl font-bold text-gray-800 dark:text-gray-200'>
                      动漫磁力搜索结果
                    </h2>
                  </div>
                  <AcgSearch
                    keyword={searchQuery}
                    triggerSearch={triggerAcgSearch}
                  />
                </>
              )}
            </section>
          ) : searchHistory.length > 0 ? (
            // 搜索历史
            <section className='mb-12'>
              <h2 className='mb-4 text-xl font-bold text-gray-800 text-left dark:text-gray-200'>
                搜索历史
                {searchHistory.length > 0 && (
                  <button
                    onClick={() => {
                      clearSearchHistory(); // 事件监听会自动更新界面
                    }}
                    className='ml-3 text-sm text-gray-500 hover:text-red-500 transition-colors dark:text-gray-400 dark:hover:text-red-500'
                  >
                    清空
                  </button>
                )}
              </h2>
              <div className='flex flex-wrap gap-2'>
                {searchHistory.map((item) => (
                  <div key={item} className='relative group'>
                    <button
                      onClick={() => {
                        setSearchQuery(item);
                        setShowResults(true);
                        // 立即设置加载状态，避免显示"未找到相关结果"
                        setIsLoading(true);

                        // 根据当前选项卡执行不同的搜索
                        if (activeTab === 'video') {
                          // 影视搜索
                          router.push(
                            `/search?q=${encodeURIComponent(
                              item.trim()
                            )}&type=video`
                          );
                        } else if (activeTab === 'pansou') {
                          // 网盘搜索
                          router.push(
                            `/search?q=${encodeURIComponent(
                              item.trim()
                            )}&type=pansou`
                          );
                          setTriggerPansouSearch((prev) => !prev);
                        } else if (activeTab === 'acg') {
                          // ACG 磁力搜索
                          router.push(
                            `/search?q=${encodeURIComponent(
                              item.trim()
                            )}&type=acg`
                          );
                          setTriggerAcgSearch((prev) => !prev);
                        }
                      }}
                      className='px-4 py-2 bg-gray-500/10 hover:bg-gray-300 rounded-full text-sm text-gray-700 transition-colors duration-200 dark:bg-gray-700/50 dark:hover:bg-gray-600 dark:text-gray-300'
                    >
                      {item}
                    </button>
                    {/* 删除按钮 */}
                    <button
                      aria-label='删除搜索历史'
                      onClick={(e) => {
                        e.stopPropagation();
                        e.preventDefault();
                        deleteSearchHistory(item); // 事件监听会自动更新界面
                      }}
                      className='absolute -top-1 -right-1 w-4 h-4 opacity-0 group-hover:opacity-100 bg-gray-400 hover:bg-red-500 text-white rounded-full flex items-center justify-center text-[10px] transition-colors'
                    >
                      <X className='w-3 h-3' />
                    </button>
                  </div>
                ))}
              </div>
            </section>
          ) : null}
        </div>
      </div>

      {previewImage && (
        <ImageViewer
          isOpen={!!previewImage}
          onClose={() => setPreviewImage(null)}
          imageUrl={previewImage.url}
          alt={previewImage.alt}
        />
      )}

      {/* 返回顶部悬浮按钮 */}
      <button
        onClick={scrollToTop}
        className={`fixed bottom-20 md:bottom-6 right-6 z-[500] w-12 h-12 bg-green-500/90 hover:bg-green-500 text-white rounded-full shadow-lg backdrop-blur-sm transition-all duration-300 ease-in-out flex items-center justify-center group ${
          showBackToTop
            ? 'opacity-100 translate-y-0 pointer-events-auto'
            : 'opacity-0 translate-y-4 pointer-events-none'
        }`}
        aria-label='返回顶部'
      >
        <ChevronUp className='w-6 h-6 transition-transform group-hover:scale-110' />
      </button>
    </PageLayout>
  );
}

export default function SearchPage() {
  return (
    <Suspense>
      <SearchPageClient />
    </Suspense>
  );
}