import { discoveryChannelName, discoveryPlatformName } from '../i18n/discoveryNames';
import { useT } from '../i18n/useT';
import type { AppLanguage } from '../i18n/languages';
import { Button } from './ui/button';
import React, { useState, useCallback, useMemo, useRef, useEffect } from 'react';
import {
  RefreshCw,
  TrendingUp,
  Bot,
  Check,
  Loader2,
  Rocket,
  Tag,
  Search,
  Crown,
  Filter,
  ChevronDown,
  Globe,
  X,
  Calendar,
  Newspaper,
  Users
} from 'lucide-react';
import { SiAndroid, SiApple, SiLinux, SiX, SiTelegram } from '@icons-pack/react-simple-icons';
import { SiWindows } from './SiWindows';
import { useAppStore } from '../store/useAppStore';
import { useDiscoveryActions } from '../features/discovery/hooks/useDiscoveryActions';
import { useWebScrapeSupport } from '../hooks/useWebScrapeSupport';
import { DiscoverySidebar } from './DiscoverySidebar';
import { DiscoveryChannelMenu } from './DiscoveryChannelMenu';
import { TrendingHistoryPanel } from '../features/discovery/components/TrendingHistoryPanel';
import { useTrendingSnapshotCapture } from '../features/discovery/hooks/useTrendingSnapshotCapture';
import { SubscriptionRepoCard } from './SubscriptionRepoCard';
import { CodeSearchView } from './CodeSearchView';
import { SortAlgorithmTooltip } from './SortAlgorithmTooltip';
import { ScrollToBottom } from './ScrollToBottom';
import { XTweetSettingsModal } from './XTweetSettingsModal';
import { TelegramSettingsModal } from './TelegramSettingsModal';
import { Input } from './ui/input';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './ui/select';
import { DropdownMenu, DropdownMenuContent, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuTrigger } from './ui/dropdown-menu';
import type {
  DiscoveryChannel,
  DiscoveryChannelId,
  DiscoveryChannelIcon,
  DiscoveryPlatform,
  ProgrammingLanguage,
  SortBy,
  SortOrder,
  TopicCategory,
  TrendingTimeRange
} from '../types';

const discoveryChannelIconMap: Record<DiscoveryChannelIcon, React.ReactNode> = {
  trending: <TrendingUp className="w-4 h-4 text-muted-foreground dark:text-muted-foreground" />,
  rocket: <Rocket className="w-4 h-4 text-muted-foreground dark:text-muted-foreground" />,
  star: <Crown className="w-4 h-4 text-muted-foreground dark:text-muted-foreground" />,
  tag: <Tag className="w-4 h-4 text-muted-foreground dark:text-muted-foreground" />,
  tweet: <SiX className="w-4 h-4 text-muted-foreground dark:text-muted-foreground" />,
  telegram: <SiTelegram className="w-4 h-4 text-muted-foreground dark:text-muted-foreground" />,
  weekly: <Newspaper className="w-4 h-4 text-muted-foreground dark:text-muted-foreground" />,
  search: <Search className="w-4 h-4 text-muted-foreground dark:text-muted-foreground" />,
};

const discoveryChannelStyleMap: Record<DiscoveryChannelIcon, { gradient: string; shadow: string; largeIcon: React.ReactNode }> = {
  trending: {
    gradient: 'from-muted to-muted/60 dark:from-muted/40 dark:to-muted/20',
    shadow: 'shadow-subtle',
    largeIcon: <TrendingUp className="w-9 h-9 text-muted-foreground dark:text-foreground" />,
  },
  rocket: {
    gradient: 'from-muted to-muted/60 dark:from-muted/40 dark:to-muted/20',
    shadow: 'shadow-subtle',
    largeIcon: <Rocket className="w-9 h-9 text-muted-foreground dark:text-foreground" />,
  },
  star: {
    gradient: 'from-muted to-muted/60 dark:from-muted/40 dark:to-muted/20',
    shadow: 'shadow-subtle',
    largeIcon: <Crown className="w-9 h-9 text-muted-foreground dark:text-foreground" />,
  },
  tag: {
    gradient: 'from-muted to-muted/60 dark:from-muted/40 dark:to-muted/20',
    shadow: 'shadow-subtle',
    largeIcon: <Tag className="w-9 h-9 text-muted-foreground dark:text-foreground" />,
  },
  tweet: {
    gradient: 'from-muted to-muted/60 dark:from-muted/40 dark:to-muted/20',
    shadow: 'shadow-subtle',
    largeIcon: <SiX className="w-9 h-9 text-muted-foreground dark:text-foreground" />,
  },
  telegram: {
    gradient: 'from-muted to-muted/60 dark:from-muted/40 dark:to-muted/20',
    shadow: 'shadow-subtle',
    largeIcon: <SiTelegram className="w-9 h-9 text-muted-foreground dark:text-foreground" />,
  },
  weekly: {
    gradient: 'from-muted to-muted/60 dark:from-muted/40 dark:to-muted/20',
    shadow: 'shadow-subtle',
    largeIcon: <Newspaper className="w-9 h-9 text-muted-foreground dark:text-foreground" />,
  },
  search: {
    gradient: 'from-muted to-muted/60 dark:from-muted/40 dark:to-muted/20',
    shadow: 'shadow-subtle',
    largeIcon: <Search className="w-9 h-9 text-muted-foreground dark:text-foreground" />,
  },
};

interface MobileTabNavProps {
  channels: { id: DiscoveryChannelId; name: string; nameEn: string; icon: React.ReactNode }[];
  allChannels: DiscoveryChannel[];
  selectedChannel: DiscoveryChannelId;
  onChannelSelect: (channel: DiscoveryChannelId) => void;
  onToggleChannel: (channel: DiscoveryChannelId) => void;
  language: AppLanguage;
}

const MobileTabNav: React.FC<MobileTabNavProps> = ({ 
  channels, 
  allChannels,
  selectedChannel, 
  onChannelSelect,
  onToggleChannel,
  language 
}) => {
  const scrollContainerRef = useRef<HTMLDivElement>(null);
  const tabRefs = useRef<Map<DiscoveryChannelId, HTMLButtonElement>>(new Map());
  const [indicatorStyle, setIndicatorStyle] = useState({ translateX: 0, width: 0 });
  const isScrollingRef = useRef(false);
  const scrollTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
  const rafRef = useRef<number | null>(null);

  const updateIndicator = useCallback(() => {
    if (rafRef.current) {
      cancelAnimationFrame(rafRef.current);
    }

    rafRef.current = requestAnimationFrame(() => {
      const activeButton = tabRefs.current.get(selectedChannel);
      if (activeButton && scrollContainerRef.current) {
        const container = scrollContainerRef.current;
        const translateX = activeButton.offsetLeft - container.scrollLeft;
        const width = activeButton.offsetWidth;

        setIndicatorStyle({ translateX, width });
      }
    });
  }, [selectedChannel]);

  const scrollToActiveTab = useCallback(() => {
    const activeButton = tabRefs.current.get(selectedChannel);
    if (activeButton && scrollContainerRef.current) {
      const container = scrollContainerRef.current;
      const scrollLeft = activeButton.offsetLeft - (container.offsetWidth / 2) + (activeButton.offsetWidth / 2);
      
      container.scrollTo({
        left: Math.max(0, scrollLeft),
        behavior: 'smooth',
      });
    }
  }, [selectedChannel]);

  useEffect(() => {
    updateIndicator();
  }, [updateIndicator, channels]);

  useEffect(() => {
    scrollToActiveTab();
    const timer = setTimeout(() => {
      updateIndicator();
    }, 350);
    return () => clearTimeout(timer);
  }, [selectedChannel, scrollToActiveTab, updateIndicator]);

  const handleScroll = useCallback(() => {
    if (!isScrollingRef.current) {
      isScrollingRef.current = true;
    }
    
    updateIndicator();

    if (scrollTimeoutRef.current) {
      clearTimeout(scrollTimeoutRef.current);
    }
    
    scrollTimeoutRef.current = setTimeout(() => {
      isScrollingRef.current = false;
    }, 150);
  }, [updateIndicator]);

  useEffect(() => {
    return () => {
      if (scrollTimeoutRef.current) {
        clearTimeout(scrollTimeoutRef.current);
      }
      if (rafRef.current) {
        cancelAnimationFrame(rafRef.current);
      }
    };
  }, []);

  return (
    <div 
      className="relative w-full border-b border-border dark:border-border bg-background/95 dark:bg-card/95 backdrop-blur-sm lg:hidden"
    >
      <div className="flex min-w-0 items-center">
        <div
          ref={scrollContainerRef}
          onScroll={handleScroll}
          role="tablist"
          className="flex min-w-0 flex-1 overflow-x-auto scrollbar-hide py-2 px-2 gap-1 snap-x snap-mandatory"
          style={{
            scrollbarWidth: 'none',
            msOverflowStyle: 'none',
            WebkitOverflowScrolling: 'touch',
          }}
        >
          {channels.map((channel) => (
            <Button
              key={channel.id}
              ref={(el) => {
                if (el) {
                  tabRefs.current.set(channel.id, el);
                } else {
                  tabRefs.current.delete(channel.id);
                }
              }}
              onClick={() => onChannelSelect(channel.id)}
              variant="ghost"
              role="tab"
              aria-selected={selectedChannel === channel.id}
              className={`
                relative flex-shrink-0 px-4 py-2 rounded-lg text-sm font-medium snap-start
                transition-all duration-200 ease-out
                focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2
                ${selectedChannel === channel.id
                  ? 'text-foreground dark:text-foreground '
                  : 'text-muted-foreground dark:text-muted-foreground hover:text-foreground dark:hover:text-foreground hover:bg-muted dark:hover:bg-accent'
                }
              `}
            >
              <span className="flex items-center gap-1.5 whitespace-nowrap">
                {channel.icon}
                {discoveryChannelName(channel, language)}
              </span>
            </Button>
          ))}
        </div>
        <DiscoveryChannelMenu
          channels={allChannels}
          language={language}
          onToggleChannel={onToggleChannel}
          triggerClassName="h-11 w-11 shrink-0"
        />
      </div>
      
      {/* Active indicator */}
      <div
        className="absolute bottom-0 h-0.5 bg-primary rounded-full transition-transform duration-200 ease-out will-change-transform"
        style={{
          width: indicatorStyle.width,
          transform: `translateX(${indicatorStyle.translateX}px)`,
        }}
      />
    </div>
  );
};

interface PlatformFilterProps {
  platform: DiscoveryPlatform;
  onPlatformChange: (platform: DiscoveryPlatform) => void;
  language: AppLanguage;
}

const PlatformFilter: React.FC<PlatformFilterProps> = ({ platform, onPlatformChange, language }) => {
    const t = useT('discovery');
  const platforms: { id: DiscoveryPlatform; name: string; nameEn: string; icon: React.ReactNode }[] = [
    { id: 'All', name: '全部平台', nameEn: 'All Platforms', icon: <Globe className="w-4 h-4" /> },
    { id: 'Android', name: 'Android', nameEn: 'Android', icon: <SiAndroid className="w-4 h-4" /> },
    { id: 'Macos', name: 'macOS', nameEn: 'macOS', icon: <SiApple className="w-4 h-4" /> },
    { id: 'Windows', name: 'Windows', nameEn: 'Windows', icon: <SiWindows className="w-4 h-4" /> },
    { id: 'Linux', name: 'Linux', nameEn: 'Linux', icon: <SiLinux className="w-4 h-4" /> },
  ];

  const selectedPlatform = platforms.find(p => p.id === platform);

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button
          type="button"
          variant="ghost"
          aria-label={t('discoveryView.platform-filter-v1', { v1: discoveryPlatformName(selectedPlatform ?? { id: 'All', name: '全部平台', nameEn: 'All Platforms' }, language) })}
          className="flex items-center gap-2 rounded-lg px-3 py-1.5 text-sm font-medium bg-muted text-foreground dark:bg-muted/40 dark:text-muted-foreground hover:bg-accent dark:hover:bg-accent transition-colors"
        >
          <Filter className="h-4 w-4" />
          <span className="hidden xl:inline">{selectedPlatform ? discoveryPlatformName(selectedPlatform, language) : ''}</span>
          <ChevronDown className="h-4 w-4" />
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end" className="w-48">
        <DropdownMenuRadioGroup value={platform} onValueChange={(value) => onPlatformChange(value as DiscoveryPlatform)}>
          {platforms.map((p) => (
            <DropdownMenuRadioItem
              key={p.id}
              value={p.id}
              className={platform === p.id ? 'bg-accent text-accent-foreground' : ''}
            >
              {p.icon}
              <span>{discoveryPlatformName(p, language)}</span>
            </DropdownMenuRadioItem>
          ))}
        </DropdownMenuRadioGroup>
      </DropdownMenuContent>
    </DropdownMenu>
  );
};

interface CustomSelectOption {
  value: string;
  label: string;
  icon?: React.ReactNode;
}

interface CustomSelectProps {
  value: string;
  onChange: (value: string) => void;
  options: CustomSelectOption[];
  className?: string;
  dropdownClassName?: string;
  ariaLabel?: string;
  /** 禁用整个下拉（语义搜索模式下排序无意义时使用） */
  disabled?: boolean;
}

const CustomSelect: React.FC<CustomSelectProps> = ({
  value,
  onChange,
  options,
  className = '',
  dropdownClassName = '',
  ariaLabel,
  disabled = false,
}) => {
  const selectedOption = options.find(o => o.value === value);

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button
          type="button"
          variant="outline"
          disabled={disabled}
          aria-label={ariaLabel ?? selectedOption?.label}
          className={`flex items-center gap-2 rounded-lg px-3 py-1.5 text-sm font-medium bg-card dark:bg-muted/40 border border-border dark:border-border text-foreground dark:text-muted-foreground hover:bg-accent dark:hover:bg-accent transition-colors disabled:opacity-50 disabled:cursor-not-allowed ${className}`}
        >
          {selectedOption?.icon && <span className="h-4 w-4">{selectedOption.icon}</span>}
          <span>{selectedOption?.label}</span>
          <ChevronDown className="h-4 w-4" />
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end" className={`w-48 ${dropdownClassName}`}>
        <DropdownMenuRadioGroup value={value} onValueChange={onChange}>
          {options.map((option) => (
            <DropdownMenuRadioItem
              key={option.value}
              value={option.value}
              className={`gap-2 ${value === option.value ? 'bg-accent text-accent-foreground' : ''}`}
            >
              {option.icon && <span className="h-4 w-4 shrink-0">{option.icon}</span>}
              <span>{option.label}</span>
            </DropdownMenuRadioItem>
          ))}
        </DropdownMenuRadioGroup>
      </DropdownMenuContent>
    </DropdownMenu>
  );
};

interface LoadMoreButtonProps {
  onLoadMore: () => void;
  isLoading: boolean;
  hasMore: boolean;
  totalCount: number;
  language: AppLanguage;
}

/** 语义搜索四阶段（顺序即管道顺序），UI 据此渲染进度指示。 */
const SEMANTIC_PHASE_ORDER = ['expanding', 'recalling', 'enriching', 'reranking'] as const;

/** 语义搜索过程状态：已完成打勾、当前阶段旋转 + 脉冲 + 明细（如补全计数）、未到阶段弱化。 */
const SemanticSearchProgress: React.FC<{ phase: string; detail: string | null }> = ({ phase, detail }) => {
  const t = useT('discovery');
  const currentIndex = SEMANTIC_PHASE_ORDER.indexOf(phase as typeof SEMANTIC_PHASE_ORDER[number]);
  return (
    <div className="flex flex-wrap items-center gap-x-4 gap-y-1.5 text-xs text-muted-foreground dark:text-muted-foreground">
      {SEMANTIC_PHASE_ORDER.map((step, index) => {
        const done = currentIndex > index;
        const active = currentIndex === index;
        return (
          <span
            key={step}
            className={`flex items-center gap-1.5 ${active ? 'text-foreground dark:text-foreground' : ''} ${!done && !active ? 'opacity-50' : ''}`}
          >
            {done
              ? <Check className="h-3 w-3" />
              : active
                ? <Loader2 className="h-3 w-3 animate-spin" />
                : <span className="h-1.5 w-1.5 rounded-full bg-current" />}
            <span className={active ? 'animate-pulse' : ''}>{t(`discoveryView.search-phase-${step}`)}</span>
            {active && detail && <span className="tabular-nums">({detail})</span>}
          </span>
        );
      })}
    </div>
  );
};

const LoadMoreButton: React.FC<LoadMoreButtonProps> = ({
  onLoadMore,
  isLoading,
  hasMore,
  totalCount,
}) => {
  const t = useT('discovery');

  if (!hasMore) {
    return (
      <div className="flex flex-col items-center gap-2 py-8">
        <div className="flex items-center gap-2 text-muted-foreground dark:text-muted-foreground">
          <div className="w-8 h-px bg-muted dark:bg-muted/40" />
          <span className="text-sm">{t('discoveryView.all-loaded')}</span>
          <div className="w-8 h-px bg-muted dark:bg-muted/40" />
        </div>
        <span className="text-xs text-muted-foreground dark:text-muted-foreground">
          {t('discoveryView.total-totalcount-items', { totalCount: totalCount })}
        </span>
      </div>
    );
  }

  return (
    <div className="flex flex-col items-stretch pt-2 pb-6">
      <Button
        onClick={onLoadMore}
        disabled={isLoading}
        className="w-full py-3.5 rounded-xl font-medium bg-muted dark:bg-muted/20 border border-border dark:border-border hover:bg-accent dark:hover:bg-accent text-foreground dark:text-foreground disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-200 flex items-center justify-center gap-2"
      >
        {isLoading ? (
          <>
            <Loader2 className="w-4 h-4 animate-spin text-primary" />
            <span>{t('discoveryView.loading')}</span>
          </>
        ) : (
          <>
            <RefreshCw className="w-4 h-4 text-muted-foreground dark:text-muted-foreground" />
            <span>{t('discoveryView.load-more')}</span>
          </>
        )}
      </Button>
    </div>
  );
};


interface DataStatsProps {
  currentCount: number;
  totalCount: number;
  language: AppLanguage;
}

const DataStats: React.FC<DataStatsProps> = ({ currentCount, totalCount }) => {
  const t = useT('discovery');
  
  return (
    <div className="flex items-center gap-2 text-sm text-muted-foreground dark:text-muted-foreground">
      <div className="w-1.5 h-1.5 rounded-full bg-primary" />
      <span>
        {totalCount > 0 && currentCount < totalCount
          ? t('discoveryView.items-count-with-total', { currentCount, totalCount })
          : t('discoveryView.items-count', { currentCount })}
      </span>
    </div>
  );
};

export const DiscoveryView: React.FC = React.memo(() => {
  const scrollContainerRef = useRef<HTMLDivElement>(null);
  const toggleDiscoveryChannel = useAppStore(state => state.toggleDiscoveryChannel);
  const { supported: scrapeSupport, settled: scrapeSupportSettled } = useWebScrapeSupport();
  const {
    githubToken,
    language,
    discoveryChannels,
    discoveryRepos,
    discoveryLastRefresh,
    discoveryIsLoading,
    discoveryIsLoadingMore,
    discoveryLoadMoreError,
    selectedDiscoveryChannel,
    setSelectedDiscoveryChannel,
    setDiscoveryScrollPosition,
    analysisProgress,
    discoveryPlatform,
    setDiscoveryPlatform,
    discoveryLanguage,
    setDiscoveryLanguage,
    discoverySortBy,
    setDiscoverySortBy,
    discoverySortOrder,
    setDiscoverySortOrder,
    discoverySearchQuery,
    setDiscoverySearchQuery,
    discoverySearchMode,
    setDiscoverySearchMode,
    discoverySearchPhase,
    discoverySearchPhaseDetail,
    discoverySearchEmptyReason,
    discoverySelectedTopic,
    setDiscoverySelectedTopic,
    discoveryHasMore,
    discoveryNextPage,
    discoveryTotalCount,
    trendingTimeRange,
    setTrendingTimeRange,
    weeklyOnlyCollected,
    setWeeklyOnlyCollected,
    weeklySyncStatus,
    xTweetFollows,
    xTweetAuth,
    xTweetAuthRevision,
    xTweetSyncStatus,
    telegramFollows,
    telegramSyncStatus,
    t,
    isAnalyzing,
    refreshChannel,
    handleAnalyzePage,
    handleAbortAnalysis,
  } = useDiscoveryActions(scrollContainerRef);

  const [searchInput, setSearchInput] = useState(discoverySearchQuery);
  
  const sidebarRef = useRef<HTMLDivElement>(null);
  // X 推文频道：关注列表设置弹窗
  const [tweetSettingsOpen, setTweetSettingsOpen] = useState(false);
  // Telegram 频道：关注频道设置弹窗
  const [telegramSettingsOpen, setTelegramSettingsOpen] = useState(false);
  // 工具栏显示状态
  const [isToolbarVisible, setIsToolbarVisible] = useState(true);
  const lastScrollY = useRef(0);
  const scrollTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
  // 用于在频道切换时直接读取最新滚动位置，避免订阅整个 map 导致 effect 重跑
  const discoveryScrollPositionsRef = useRef<Record<string, number>>({});
  // 用于记录最近一次自动拉取的频道，防止空频道无限循环拉取
  const autoFetchChannelRef = useRef<string | null>(null);
  const appliedTopicRef = useRef<{ topic: string | null; platform: DiscoveryPlatform } | null>(null);

  const isAnalyzingThisChannel = isAnalyzing && analysisProgress.total > 0;
  const isDesktopSafeMode = useMemo(() => {
    if (typeof window === 'undefined') return false;
    return window.location.protocol === 'file:' || navigator.userAgent.includes('Electron');
  }, []);
  const safeDiscoveryChannels = useMemo(() => {
    if (!Array.isArray(discoveryChannels)) return [];
    // 可用性未确定（启动探测中）先全部显示，避免 Web+后端用户的可用频道闪烁；
    // 纯浏览器模式（无桌面壳、无后端）无法抓取 X 推文与 Telegram，落定后直接隐藏
    if (!scrapeSupportSettled || scrapeSupport) return discoveryChannels.filter(Boolean);
    return discoveryChannels.filter(channel => Boolean(channel)
      && channel.id !== 'x-tweet' && channel.id !== 'telegram');
  }, [discoveryChannels, scrapeSupport, scrapeSupportSettled]);

  // 抓取支持落定后（纯浏览器模式）：隐藏频道移出列表，确保仍有一个可见启用
  // 频道（水合期间不做该决策，必要时在此恢复「趋势」），并把选中的被隐藏频
  // 道回退到可见频道
  useEffect(() => {
    if (!scrapeSupportSettled || scrapeSupport) return;
    const visibleEnabledExists = safeDiscoveryChannels.some(ch => ch.enabled && ch.id !== 'code-search');
    if (!visibleEnabledExists) {
      if (!safeDiscoveryChannels.find(ch => ch.id === 'trending')?.enabled) toggleDiscoveryChannel('trending');
      setSelectedDiscoveryChannel('trending');
      return;
    }
    if (selectedDiscoveryChannel === 'x-tweet' || selectedDiscoveryChannel === 'telegram') {
      const fallback = safeDiscoveryChannels.find(ch => ch.enabled && ch.id !== 'code-search')?.id ?? 'trending';
      setSelectedDiscoveryChannel(fallback);
    }
  }, [scrapeSupport, scrapeSupportSettled, selectedDiscoveryChannel, safeDiscoveryChannels, toggleDiscoveryChannel, setSelectedDiscoveryChannel]);

  // 获取当前频道的所有仓库
  const allRepos = useMemo(
    () => (discoveryRepos && discoveryRepos[selectedDiscoveryChannel]) || [],
    [discoveryRepos, selectedDiscoveryChannel]
  );

  const currentLastRefresh = discoveryLastRefresh?.[selectedDiscoveryChannel] ?? null;

  // Trending 快照（开发守则 §7）：只记 trending 频道，每天同一「周期 × 平台」保留一份
  useTrendingSnapshotCapture(
    discoveryRepos?.trending ?? [],
    selectedDiscoveryChannel === 'trending',
    trendingTimeRange,
    discoveryPlatform,
    discoveryLastRefresh?.trending ?? null,
  );

  // 从 store 获取当前频道的总数量
  const currentTotalCount = discoveryTotalCount?.[selectedDiscoveryChannel] ?? 0;

  const currentIsLoading = discoveryIsLoading?.[selectedDiscoveryChannel] ?? false;
  const currentIsLoadingMore = discoveryIsLoadingMore?.[selectedDiscoveryChannel] ?? false;
  const currentLoadMoreError = discoveryLoadMoreError?.[selectedDiscoveryChannel] ?? null;
  const currentChannel = safeDiscoveryChannels.find(ch => ch.id === selectedDiscoveryChannel);
  const currentChannelIcon = currentChannel?.icon || 'trending';
  const currentChannelStyle = discoveryChannelStyleMap[currentChannelIcon] || discoveryChannelStyleMap.trending;
  const currentChannelIconNode = discoveryChannelIconMap[currentChannelIcon] || discoveryChannelIconMap.trending;
  // 周刊同步/补全进度文案（工具栏与空态加载两处共用）
  const weeklyStatusText = weeklySyncStatus
    ? (weeklySyncStatus.phase === 'syncing'
      ? t('discoveryView.syncing-weekly-submissions-v1-scanned', { v1: weeklySyncStatus.current })
      : t('discoveryView.fetching-repo-details-v1-v2', { v1: weeklySyncStatus.current, v2: weeklySyncStatus.total }))
    : null;
  // X 推文同步/补全进度文案
  const xTweetStatusText = xTweetSyncStatus
    ? (xTweetSyncStatus.phase === 'syncing'
      ? t('discoveryView.fetching-timelines-v1-v2', { v1: xTweetSyncStatus.current, v2: xTweetSyncStatus.total })
      : t('discoveryView.fetching-repo-details-v1-v2', { v1: xTweetSyncStatus.current, v2: xTweetSyncStatus.total }))
    : null;
  // Telegram 频道同步/补全进度文案
  const telegramStatusText = telegramSyncStatus
    ? (telegramSyncStatus.phase === 'syncing'
      ? t('discoveryView.fetching-channel-messages-v1-v2', { v1: telegramSyncStatus.current, v2: telegramSyncStatus.total })
      : t('discoveryView.fetching-repo-details-v1-v2', { v1: telegramSyncStatus.current, v2: telegramSyncStatus.total }))
    : null;



  // 切换频道时恢复滚动位置，并自动加载空数据
  useEffect(() => {
    // 恢复当前频道的滚动位置（从 ref 读取最新值，避免订阅整个 map）
    const savedPosition = discoveryScrollPositionsRef.current[selectedDiscoveryChannel] || 0;
    window.scrollTo({ top: savedPosition, behavior: 'auto' });
    
    // 取消持久化后，首次打开或切换到空频道时自动加载（代码搜索走本地实时请求，不参与自动拉取）
    const hasRepos = useAppStore.getState().discoveryRepos[selectedDiscoveryChannel]?.length > 0;
    const isLoading = useAppStore.getState().discoveryIsLoading[selectedDiscoveryChannel];
    if (selectedDiscoveryChannel !== 'topic' && selectedDiscoveryChannel !== 'code-search' && selectedDiscoveryChannel !== 'search' && !hasRepos && !isLoading && autoFetchChannelRef.current !== selectedDiscoveryChannel) {
      autoFetchChannelRef.current = selectedDiscoveryChannel;
      refreshChannel(selectedDiscoveryChannel, 1, false);
    }
  }, [selectedDiscoveryChannel, refreshChannel]);

  useEffect(() => {
    if (selectedDiscoveryChannel === 'search' && discoverySearchQuery.trim()) {
      refreshChannel('search', 1, false);
    }
  }, [selectedDiscoveryChannel, discoverySearchQuery, refreshChannel]);

  // 趋势时间范围改变时刷新数据
  useEffect(() => {
    if (selectedDiscoveryChannel === 'trending' && trendingTimeRange) {
      refreshChannel('trending', 1, false);
    }
  }, [trendingTimeRange, selectedDiscoveryChannel, refreshChannel]);

  // 周刊收录过滤器切换时重建列表：只在偏好值真正变化时触发（挂载/切频道不触发，
  // 避免与空频道自动加载 effect 双重调用导致增量同步被中止重启）
  const prevWeeklyOnlyCollectedRef = useRef(weeklyOnlyCollected);
  useEffect(() => {
    if (prevWeeklyOnlyCollectedRef.current === weeklyOnlyCollected) return;
    prevWeeklyOnlyCollectedRef.current = weeklyOnlyCollected;
    if (selectedDiscoveryChannel === 'weekly') {
      refreshChannel('weekly', 1, false);
    }
  }, [weeklyOnlyCollected, selectedDiscoveryChannel, refreshChannel]);

  // X 推文关注列表/鉴权变化时重建列表：只在集合真正变化时触发（挂载/切频道
  // 不触发，避免与空频道自动加载 effect 双重调用导致同步被中止重启）
  // 修订号区分"不同 Cookie 之间的切换"，布尔值做不到
  const xTweetFollowsSignature = `${xTweetFollows.map(follow => follow.handle.toLowerCase()).sort().join(',')}|${xTweetAuth !== null}|${xTweetAuthRevision ?? 0}`;
  const prevXTweetFollowsRef = useRef(xTweetFollowsSignature);
  useEffect(() => {
    if (prevXTweetFollowsRef.current === xTweetFollowsSignature) return;
    prevXTweetFollowsRef.current = xTweetFollowsSignature;
    if (selectedDiscoveryChannel === 'x-tweet') {
      refreshChannel('x-tweet', 1, false);
    }
  }, [xTweetFollowsSignature, selectedDiscoveryChannel, refreshChannel]);

  // Telegram 关注列表变化时重建列表：只在关注集真正变化时触发（挂载/切频道
  // 不触发，避免与空频道自动加载 effect 双重调用导致同步被中止重启）
  const telegramFollowsSignature = telegramFollows.map(follow => follow.channel.toLowerCase()).sort().join(',');
  const prevTelegramFollowsRef = useRef(telegramFollowsSignature);
  useEffect(() => {
    if (prevTelegramFollowsRef.current === telegramFollowsSignature) return;
    prevTelegramFollowsRef.current = telegramFollowsSignature;
    if (selectedDiscoveryChannel === 'telegram') {
      refreshChannel('telegram', 1, false);
    }
  }, [telegramFollowsSignature, selectedDiscoveryChannel, refreshChannel]);

  // 主题改变时刷新数据
  useEffect(() => {
    if (selectedDiscoveryChannel !== 'topic' || !githubToken) return;
    const applied = appliedTopicRef.current;
    if (applied?.topic === discoverySelectedTopic && applied.platform === discoveryPlatform) return;
    appliedTopicRef.current = { topic: discoverySelectedTopic, platform: discoveryPlatform };
    refreshChannel('topic', 1, false);
  }, [githubToken, discoverySelectedTopic, discoveryPlatform, selectedDiscoveryChannel, refreshChannel]);

  const formatLastRefresh = useCallback((timestamp: string | null) => {
    if (!timestamp) return '';
    const date = new Date(timestamp);
    const now = new Date();
    const diffMs = now.getTime() - date.getTime();
    const diffMin = Math.floor(diffMs / (1000 * 60));
    if (diffMin < 1) return t('discoveryView.just-now');
    if (diffMin < 60) return t('discoveryView.diffmin-m-ago', { diffMin: diffMin });
    const diffHours = Math.floor(diffMin / 60);
    if (diffHours < 24) return t('discoveryView.diffhours-h-ago', { diffHours: diffHours });
    return date.toLocaleDateString();
  }, [t]);

  // 处理滚动事件：保存滚动位置、控制工具栏显示、控制侧栏固定
  const handleScroll = useCallback(() => {
    // 获取页面滚动位置（支持window滚动和元素滚动）
    const currentScrollY = window.scrollY || window.pageYOffset || 0;

    // 控制工具栏显示/隐藏
    if (scrollTimeoutRef.current) {
      clearTimeout(scrollTimeoutRef.current);
    }

    // 向上滚动或接近顶部时显示工具栏，向下滚动时隐藏
    if (currentScrollY < 50 || currentScrollY < lastScrollY.current) {
      setIsToolbarVisible(true);
    } else if (currentScrollY > lastScrollY.current + 10) {
      setIsToolbarVisible(false);
    }

    lastScrollY.current = currentScrollY;

    // 滚动停止后重新显示工具栏
    scrollTimeoutRef.current = setTimeout(() => {
      setIsToolbarVisible(true);
    }, 1500);
  }, []);

  // 监听 window 滚动事件
  useEffect(() => {
    window.addEventListener('scroll', handleScroll, { passive: true });
    return () => {
      window.removeEventListener('scroll', handleScroll);
      if (scrollTimeoutRef.current) {
        clearTimeout(scrollTimeoutRef.current);
      }
    };
  }, [handleScroll]);

  const handleSearch = useCallback(() => {
    if (selectedDiscoveryChannel === 'search') {
      const query = searchInput.trim();
      if (!query) return;
      if (query === discoverySearchQuery) refreshChannel('search', 1, false);
      else setDiscoverySearchQuery(query);
    }
  }, [selectedDiscoveryChannel, discoverySearchQuery, searchInput, setDiscoverySearchQuery, refreshChannel]);

  // 搜索模式切换：关键词 ↔ AI 语义。这里只写 store；已有查询时的自动重搜由
  // useDiscoveryActions 的模式变化 effect 触发（该 effect 在 latestStateRef 同步
  // 之后执行，refreshChannel 读到的已是新模式，请求签名校验才能通过）
  const handleSearchModeChange = useCallback((value: string) => {
    setDiscoverySearchMode(value as 'keyword' | 'semantic');
  }, [setDiscoverySearchMode]);

  const handleLoadMore = useCallback(async () => {
    if (!discoveryHasMore[selectedDiscoveryChannel]) {
      return;
    }
    
    if (currentIsLoading) {
      return;
    }
    
    const nextPage = discoveryNextPage[selectedDiscoveryChannel];
    if (!nextPage) {
      return;
    }
    
    await refreshChannel(selectedDiscoveryChannel, nextPage, true);
  }, [
    discoveryHasMore,
    discoveryNextPage,
    selectedDiscoveryChannel,
    currentIsLoading,
    refreshChannel
  ]);

  const refreshAll = useCallback(async () => {
    const enabledChannels = safeDiscoveryChannels.filter(ch => ch.enabled && ch.id !== 'code-search');
    for (const channel of enabledChannels) {
      await refreshChannel(channel.id, 1, false);
    }
  }, [safeDiscoveryChannels, refreshChannel]);

  const mobileChannels = useMemo(() => {
    return safeDiscoveryChannels
      .filter(ch => ch.enabled)
      .map(ch => ({
        ...ch,
        icon: discoveryChannelIconMap[ch.icon] || <Crown className="w-4 h-4" />,
      }));
  }, [safeDiscoveryChannels]);

  return (
    <div className="flex flex-col">
      {/* Mobile Tab Navigation */}
      <MobileTabNav
        channels={mobileChannels}
        allChannels={safeDiscoveryChannels}
        selectedChannel={selectedDiscoveryChannel}
        onToggleChannel={toggleDiscoveryChannel}
        onChannelSelect={(channel) => {
          if (channel === selectedDiscoveryChannel) {
            return;
          }
          const scrollTop = window.scrollY;
          discoveryScrollPositionsRef.current[selectedDiscoveryChannel] = scrollTop;
          setDiscoveryScrollPosition(selectedDiscoveryChannel, scrollTop);
          setSelectedDiscoveryChannel(channel);
        }}
        language={language}
      />

      <div
        className="route-workspace flex-1 min-h-0 min-w-0"
      >
        <aside
          ref={sidebarRef}
          data-context-sidebar="discovery"
          aria-label={t('discoverySidebar.discovery-channels')}
          className="context-sidebar hidden shrink-0 lg:flex lg:w-(--app-sidebar-width)"
        >
          <DiscoverySidebar
            channels={safeDiscoveryChannels}
            onToggleChannel={toggleDiscoveryChannel}
            selectedChannel={selectedDiscoveryChannel}
            onChannelSelect={(channel) => {
              if (channel === selectedDiscoveryChannel) {
                return;
              }
              const scrollTop = window.scrollY;
              discoveryScrollPositionsRef.current[selectedDiscoveryChannel] = scrollTop;
              setDiscoveryScrollPosition(selectedDiscoveryChannel, scrollTop);
              setSelectedDiscoveryChannel(channel);
            }}
            onRefreshAll={refreshAll}
            totalCount={discoveryTotalCount}
            isLoading={discoveryIsLoading}
            lastRefresh={discoveryLastRefresh}
            isAnalyzing={isAnalyzing}
            language={language}
          />
        </aside>

        <div className="workspace-content flex flex-col min-h-0 min-w-0 relative">
          {/* 顶部工具栏 - 随滚动显示/隐藏 */}
          <div 
            className={`flex-shrink-0 pr-2 transition-transform duration-300 ease-in-out z-10 ${
              isToolbarVisible ? 'translate-y-0' : '-translate-y-full opacity-0 pointer-events-none'
            }`}
          >
            <div className="ui-toolbar p-3.5 sm:p-4 mb-4">
              {/* 第一行：标题和刷新按钮 */}
              <div className="flex items-center justify-between gap-2 mb-2.5">
                <div className="flex items-center gap-2.5 min-w-0">
                  <div className={`w-9 h-9 rounded-xl bg-gradient-to-br ${currentChannelStyle.gradient} flex items-center justify-center shadow-md ${currentChannelStyle.shadow}`}>
                    {currentChannelIconNode}
                  </div>
                  <div className="min-w-0">
                    <h2 className="text-base sm:text-lg font-bold text-foreground dark:text-foreground truncate leading-tight">
                      {language === 'zh'
                        ? currentChannel?.name
                        : discoveryChannelName(currentChannel ?? { id: 'search', name: '仓库搜索', nameEn: 'Repo Search' }, language)}
                    </h2>
                    {currentLastRefresh && (
                      <p className="hidden sm:block text-xs text-muted-foreground dark:text-muted-foreground">
                        {t('discoveryView.updated')} {formatLastRefresh(currentLastRefresh)}
                      </p>
                    )}
                  </div>
                </div>
                {selectedDiscoveryChannel !== 'code-search' && (
                <div className="relative group/refresh shrink-0">
                  <Button
                    variant="ghost"
                    size="icon"
                    onClick={() => refreshChannel(selectedDiscoveryChannel, 1, false)}
                    disabled={currentIsLoading || isAnalyzing}
                    className="p-2 disabled:opacity-50 disabled:cursor-not-allowed"
                    title={t('discoveryView.refresh')}
                  >
                    <RefreshCw className={`w-4 h-4 ${currentIsLoading ? 'animate-spin' : ''}`} />
                  </Button>
                  {selectedDiscoveryChannel === 'hot-release' && (
                    <div className="absolute top-full mt-2 right-0 z-50 opacity-0 group-hover/refresh:opacity-100 translate-y-1 group-hover/refresh:translate-y-0 transition-all duration-200 pointer-events-none">
                      <div className="bg-popover text-popover-foreground border border-border text-xs rounded-lg px-3 py-2 whitespace-nowrap shadow-lg">
                        {t('discoveryView.each-refresh-shows-different-content')}
                      </div>
                      <div className="absolute -top-1 right-3 w-2 h-2 bg-popover border-t border-l border-border rotate-45" />
                    </div>
                  )}
                </div>
                )}
              </div>
              
              {/* 第二行：筛选和操作按钮（代码搜索频道使用自有工具条，此处隐藏仓库维度控件） */}
              {selectedDiscoveryChannel !== 'code-search' && (
              <div className="flex items-center gap-2 flex-wrap">
                {selectedDiscoveryChannel === 'trending' && (
            <div className="flex items-center gap-1.5">
              <Calendar className="w-4 h-4 text-muted-foreground dark:text-muted-foreground" />
              <Select value={trendingTimeRange} onValueChange={(value) => setTrendingTimeRange(value as TrendingTimeRange)}>
                <SelectTrigger aria-label={t('discoveryView.time-range')} className="ui-field h-9 w-auto min-w-28 px-3 py-1.5 text-sm font-medium text-foreground dark:text-foreground"><SelectValue /></SelectTrigger>
                <SelectContent>
                  <SelectItem value="daily">{t('discoveryView.today')}</SelectItem>
                  <SelectItem value="weekly">{t('discoveryView.this-week')}</SelectItem>
                  <SelectItem value="monthly">{t('discoveryView.this-month')}</SelectItem>
                </SelectContent>
              </Select>
            </div>
          )}
        {selectedDiscoveryChannel === 'topic' && (
                  <Select value={discoverySelectedTopic || 'all'} onValueChange={(value) => setDiscoverySelectedTopic(value === 'all' ? null : value as TopicCategory)}>
                    <SelectTrigger aria-label={t('discoveryView.topic-filter')} className="ui-field h-9 w-auto min-w-28 px-3 py-1.5 text-sm font-medium text-foreground dark:text-foreground"><SelectValue placeholder={t('discoveryView.topic')} /></SelectTrigger>
                    <SelectContent>
                      <SelectItem value="all">{t('discoveryView.topic')}</SelectItem>
                      <SelectItem value="ai">{t('discoveryView.ai')}</SelectItem>
                      <SelectItem value="ml">{t('discoveryView.ml')}</SelectItem>
                      <SelectItem value="database">{t('discoveryView.db')}</SelectItem>
                      <SelectItem value="web">{t('discoveryView.web')}</SelectItem>
                      <SelectItem value="mobile">{t('discoveryView.mobile')}</SelectItem>
                      <SelectItem value="devtools">{t('discoveryView.devtools')}</SelectItem>
                      <SelectItem value="security">{t('discoveryView.security')}</SelectItem>
                      <SelectItem value="game">{t('discoveryView.game')}</SelectItem>
                    </SelectContent>
                  </Select>
                )}
                {selectedDiscoveryChannel === 'weekly' && (
                  <button
                    type="button"
                    onClick={() => setWeeklyOnlyCollected(!weeklyOnlyCollected)}
                    aria-pressed={weeklyOnlyCollected}
                    className={`flex items-center gap-1.5 h-9 px-3 rounded-lg text-sm font-medium border transition-colors ${
                      weeklyOnlyCollected
                        ? 'bg-primary/10 text-primary border-primary/30 dark:text-primary'
                        : 'bg-muted/50 text-muted-foreground border-transparent hover:bg-accent hover:text-accent-foreground'
                    }`}
                    title={t('discoveryView.only-show-submissions-included-in-the-weekly-iss')}
                  >
                    <Newspaper className="w-4 h-4" />
                    {t('discoveryView.in-weekly')}
                  </button>
                )}
                {selectedDiscoveryChannel === 'weekly' && weeklyStatusText && (
                  <span className="flex items-center gap-1.5 text-xs text-muted-foreground dark:text-muted-foreground" aria-live="polite">
                    <Loader2 className="w-3.5 h-3.5 animate-spin" />
                    {weeklyStatusText}
                  </span>
                )}
                {selectedDiscoveryChannel === 'x-tweet' && xTweetStatusText && (
                  <span className="flex items-center gap-1.5 text-xs text-muted-foreground dark:text-muted-foreground" aria-live="polite">
                    <Loader2 className="w-3.5 h-3.5 animate-spin" />
                    {xTweetStatusText}
                  </span>
                )}
                {selectedDiscoveryChannel === 'x-tweet' && (
                  <button
                    type="button"
                    onClick={() => setTweetSettingsOpen(true)}
                    className="flex items-center gap-1.5 h-9 px-3 rounded-lg text-sm font-medium border transition-colors bg-muted/50 text-muted-foreground border-transparent hover:bg-accent hover:text-accent-foreground"
                    title={t('discoveryView.manage-the-follow-list')}
                  >
                    <Users className="w-4 h-4" />
                    {t('discoveryView.follow-list')}
                  </button>
                )}
                {selectedDiscoveryChannel === 'telegram' && telegramStatusText && (
                  <span className="flex items-center gap-1.5 text-xs text-muted-foreground dark:text-muted-foreground" aria-live="polite">
                    <Loader2 className="w-3.5 h-3.5 animate-spin" />
                    {telegramStatusText}
                  </span>
                )}
                {selectedDiscoveryChannel === 'telegram' && (
                  <button
                    type="button"
                    onClick={() => setTelegramSettingsOpen(true)}
                    className="flex items-center gap-1.5 h-9 px-3 rounded-lg text-sm font-medium border transition-colors bg-muted/50 text-muted-foreground border-transparent hover:bg-accent hover:text-accent-foreground"
                    title={t('discoveryView.manage-the-channel-list')}
                  >
                    <Users className="w-4 h-4" />
                    {t('discoveryView.channel-list')}
                  </button>
                )}
                <div className="flex items-center gap-1.5 flex-wrap">
                  {!currentChannel?.sourceUrl && selectedDiscoveryChannel !== 'weekly' && selectedDiscoveryChannel !== 'x-tweet' && selectedDiscoveryChannel !== 'telegram' && (
                    <PlatformFilter
                      platform={discoveryPlatform}
                      onPlatformChange={setDiscoveryPlatform}
                      language={language}
                    />
                  )}
                  <SortAlgorithmTooltip
                    channelId={selectedDiscoveryChannel}
                    language={language}
                  />
                  {isAnalyzingThisChannel ? (
                    <div className="flex items-center gap-1">
                      <div className="relative">
                        <div className="px-2 py-1.5 rounded-lg bg-muted dark:bg-muted/40 text-muted-foreground dark:text-muted-foreground flex items-center gap-1.5 overflow-hidden">
                          <div 
                            className="absolute left-0 top-0 h-full bg-gradient-to-r from-primary/50 via-primary/70 to-primary/50 transition-all duration-400 ease-out"
                            style={{
                              width: analysisProgress.total > 0
                                ? `${Math.min((analysisProgress.current / analysisProgress.total) * 100, 100)}%`
                                : '0%',
                            }}
                          />
                          <div className="relative flex items-center gap-1.5 z-10">
                            <Bot className="w-4 h-4" />
                            <span className="text-xs font-medium">
                              {analysisProgress.current}/{analysisProgress.total}
                            </span>
                          </div>
                        </div>
                      </div>
                      <Button
                        type="button"
                        variant="ghost"
                        size="icon"
                        onClick={handleAbortAnalysis}
                        aria-label={t('discoveryView.stop-analysis')}
                        title={t('discoveryView.stop')}
                        className="h-8 w-8"
                      >
                        <X className="w-4 h-4" />
                      </Button>
                    </div>
                  ) : (
                    <Button
                      type="button"
                      variant="default"
                      onClick={handleAnalyzePage}
                      disabled={isAnalyzing || currentIsLoading}
                      className="h-9 shrink-0 gap-1.5 px-3 py-1.5 text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed"
                      title={t('discoveryView.analyze-with-ai')}
                    >
                      <Bot className="w-4 h-4" />
                      <span className="hidden sm:inline">{t('discoveryView.ai-analyze')}</span>
                    </Button>
                  )}
                  <DataStats
                    currentCount={allRepos.length}
                    totalCount={currentTotalCount}
                    language={language}
                  />
                </div>
              </div>
              )}
            </div>
          </div>

          {/* 内容区域 */}
          <div
            ref={scrollContainerRef}
            className="flex-1 overflow-y-auto space-y-4 pr-2"
          >
            {selectedDiscoveryChannel === 'code-search' && <CodeSearchView />}
            {selectedDiscoveryChannel !== 'code-search' && (
            <>
            {selectedDiscoveryChannel === 'search' && (
              <div className={isDesktopSafeMode
                ? 'ui-toolbar p-4 space-y-4'
                : 'ui-toolbar p-5 space-y-4'}>
                <div className="flex flex-col sm:flex-row gap-3">
                  {/* 搜索模式下拉：关键词（默认，行为不变）/ AI 语义（全网仓库） */}
                  <CustomSelect
                    value={discoverySearchMode}
                    onChange={handleSearchModeChange}
                    ariaLabel={t('discoveryView.search-mode')}
                    options={[
                      { value: 'keyword', label: t('discoveryView.search-mode-keyword'), icon: <Search className="w-4 h-4" /> },
                      { value: 'semantic', label: t('discoveryView.search-mode-semantic'), icon: <Bot className="w-4 h-4" /> },
                    ]}
                  />
                  <div className="flex-1 relative">
                    <Search className="absolute left-3.5 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground dark:text-muted-foreground" />
                    <Input
                      type="text"
                      aria-label={discoverySearchMode === 'semantic'
                        ? t('discoveryView.search-mode-semantic-placeholder')
                        : t('discoveryView.search-repositories')}
                      value={searchInput}
                      onChange={(e) => setSearchInput(e.target.value)}
                      onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
                      placeholder={discoverySearchMode === 'semantic'
                        ? t('discoveryView.search-mode-semantic-placeholder')
                        : t('discoveryView.search-repositories-2')}
                      className="ui-field h-auto w-full py-2.5 pl-10 pr-4 text-foreground dark:text-foreground" />
                  </div>
                  <Button
                    onClick={handleSearch}
                    aria-label={t('discoveryView.search')}
                    disabled={!searchInput.trim() || currentIsLoading}
                    className="ui-button-primary px-5 py-2.5 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2 font-medium"
                  >
                    <Search className="w-4 h-4" />
                    <span className="hidden sm:inline">{t('discoveryView.search')}</span>
                  </Button>
                </div>
                {discoverySearchMode === 'semantic' && (
                  <p className="text-xs text-muted-foreground dark:text-muted-foreground">
                    {t('discoveryView.search-mode-hint')}
                  </p>
                )}
                {discoverySearchPhase && (
                  <SemanticSearchProgress phase={discoverySearchPhase} detail={discoverySearchPhaseDetail} />
                )}
                
                <div className="flex flex-wrap gap-2.5">
                  <Select value={discoveryLanguage} onValueChange={(value) => setDiscoveryLanguage(value as ProgrammingLanguage)}>
                    <SelectTrigger aria-label={t('discoveryView.programming-language')} className="ui-field h-9 w-auto min-w-32 px-3 py-1.5 text-sm font-medium text-foreground dark:text-foreground"><SelectValue /></SelectTrigger>
                    <SelectContent>
                      <SelectItem value="All">{t('discoveryView.all-languages')}</SelectItem>
                      <SelectItem value="JavaScript">JavaScript</SelectItem>
                      <SelectItem value="TypeScript">TypeScript</SelectItem>
                      <SelectItem value="Python">Python</SelectItem>
                      <SelectItem value="Java">Java</SelectItem>
                      <SelectItem value="Kotlin">Kotlin</SelectItem>
                      <SelectItem value="Go">Go</SelectItem>
                      <SelectItem value="Rust">Rust</SelectItem>
                      <SelectItem value="CSharp">C#</SelectItem>
                      <SelectItem value="CPlusPlus">C++</SelectItem>
                      <SelectItem value="C">C</SelectItem>
                      <SelectItem value="Swift">Swift</SelectItem>
                      <SelectItem value="Dart">Dart</SelectItem>
                      <SelectItem value="Ruby">Ruby</SelectItem>
                      <SelectItem value="PHP">PHP</SelectItem>
                    </SelectContent>
                  </Select>
                  
                  {/* 语义模式由 AI 按相关性排序，排序选项无意义，禁用 */}
                  <CustomSelect
                    value={discoverySortBy}
                    onChange={(value) => setDiscoverySortBy(value as SortBy)}
                    ariaLabel={t('discoveryView.discovery-sort-field')}
                    disabled={discoverySearchMode === 'semantic'}
                    options={[
                      { value: 'BestMatch', label: t('discoveryView.best-match') },
                      { value: 'MostStars', label: t('discoveryView.most-stars') },
                      { value: 'MostForks', label: t('discoveryView.most-forks') },
                    ]}
                  />

                  <CustomSelect
                    value={discoverySortOrder}
                    onChange={(value) => setDiscoverySortOrder(value as SortOrder)}
                    ariaLabel={t('discoveryView.discovery-sort-order')}
                    disabled={discoverySearchMode === 'semantic'}
                    options={[
                      { value: 'Descending', label: t('discoveryView.descending') },
                      { value: 'Ascending', label: t('discoveryView.ascending') },
                    ]}
                  />
                </div>
              </div>
            )}

            {currentIsLoading && allRepos.length === 0 && (
              <div className="flex flex-col items-center justify-center py-16 gap-4">
                <div className="relative">
                  <div className="w-14 h-14 rounded-2xl bg-gradient-to-br from-accent to-background dark:from-accent/40 dark:to-transparent flex items-center justify-center">
                    <Loader2 className="w-7 h-7 animate-spin text-primary" />
                  </div>
                  <div className="absolute -top-1 -right-1 w-4 h-4 bg-status-green rounded-full animate-ping opacity-75" />
                </div>
                <div className="text-center space-y-1.5">
                  <p className="text-foreground dark:text-muted-foreground font-medium text-sm">
                    {t('discoveryView.fetching-data')}
                  </p>
                  <p className="text-xs text-muted-foreground dark:text-muted-foreground">
                    {selectedDiscoveryChannel === 'weekly' && weeklyStatusText
                      ? weeklyStatusText
                      : selectedDiscoveryChannel === 'x-tweet' && xTweetStatusText
                      ? xTweetStatusText
                      : selectedDiscoveryChannel === 'telegram' && telegramStatusText
                      ? telegramStatusText
                      : t('discoveryView.waiting-for-github-api-response')}
                  </p>
                </div>
              </div>
            )}

            {!currentIsLoading && allRepos.length === 0 && (
              <div className="flex flex-col items-center justify-center py-16 gap-5 text-center">
                {selectedDiscoveryChannel === 'search' ? (
                  <>
                    {isDesktopSafeMode ? (
                      <div className="w-16 h-16 rounded-2xl bg-muted dark:bg-card flex items-center justify-center text-muted-foreground dark:text-muted-foreground border border-border dark:border-border">
                        {currentChannelIconNode}
                      </div>
                    ) : (
                      <div className={`w-20 h-20 rounded-3xl bg-gradient-to-br ${currentChannelStyle.gradient} flex items-center justify-center shadow-md ${currentChannelStyle.shadow}`}>
                        {currentChannelStyle.largeIcon}
                      </div>
                    )}
                    <div className="space-y-2 max-w-xs">
                      <p className="text-muted-foreground dark:text-muted-foreground font-medium text-base">
                        {t('discoveryView.repo-search')}
                      </p>
                      <p className="text-sm text-muted-foreground dark:text-muted-foreground leading-relaxed">
                        {/* 仅当语义搜索真的给出了空态原因（召回为空/AI 判空）才显示语义空态文案：
                            语义模式但回退到关键词搜索（如 AI 配置不完整）时 reason 为 null，
                            此时显示通用关键词文案，不能宣称"语义召回为空" */}
                        {discoverySearchMode === 'semantic' && discoverySearchQuery.trim() && discoverySearchEmptyReason
                          ? (discoverySearchEmptyReason === 'ai_empty'
                              ? t('discoveryView.semantic-empty-ai')
                              : t('discoveryView.semantic-empty-recall'))
                          : t('discoveryView.enter-keywords-to-search-github-repositories')}
                      </p>
                    </div>
                  </>
                ) : selectedDiscoveryChannel === 'x-tweet' ? (
                  <>
                    {isDesktopSafeMode ? (
                      <div className="w-16 h-16 rounded-2xl bg-muted dark:bg-card flex items-center justify-center text-muted-foreground dark:text-muted-foreground border border-border dark:border-border">
                        {currentChannelIconNode}
                      </div>
                    ) : (
                      <div className={`w-20 h-20 rounded-3xl bg-gradient-to-br ${currentChannelStyle.gradient} flex items-center justify-center shadow-md ${currentChannelStyle.shadow}`}>
                        {currentChannelStyle.largeIcon}
                      </div>
                    )}
                    <div className="space-y-2 max-w-xs">
                      <p className="text-muted-foreground dark:text-muted-foreground font-medium text-base">
                        {t('discoveryView.x-tweets')}
                      </p>
                      <p className="text-sm text-muted-foreground dark:text-muted-foreground leading-relaxed">
                        {t('discoveryView.fetches-github-projects-from-followed-accounts-l')}
                      </p>
                    </div>
                    <div className="flex flex-wrap items-center justify-center gap-2">
                      <Button
                        variant="default"
                        onClick={() => refreshChannel('x-tweet', 1, false)}
                        disabled={currentIsLoading}
                        className={isDesktopSafeMode
                          ? 'flex items-center gap-2 rounded-lg bg-primary px-6 py-2.5 text-sm font-medium text-primary-foreground shadow-sm transition-colors hover:bg-primary/90'
                          : 'flex items-center gap-2 rounded-xl bg-primary px-6 py-2.5 text-sm font-medium text-primary-foreground shadow-sm transition-colors hover:bg-primary/90'}
                      >
                        <RefreshCw className="w-4 h-4" />
                        {t('discoveryView.start-sync')}
                      </Button>
                      <Button
                        variant="outline"
                        onClick={() => setTweetSettingsOpen(true)}
                        disabled={currentIsLoading}
                        className="flex items-center gap-2 rounded-xl border border-border dark:border-border bg-card dark:bg-muted/40 px-6 py-2.5 text-sm font-medium text-foreground dark:text-foreground transition-colors hover:bg-accent dark:hover:bg-accent"
                      >
                        <Users className="w-4 h-4" />
                        {t('discoveryView.follow-list')}
                      </Button>
                    </div>
                  </>
                ) : selectedDiscoveryChannel === 'telegram' ? (
                  <>
                    {isDesktopSafeMode ? (
                      <div className="w-16 h-16 rounded-2xl bg-muted dark:bg-card flex items-center justify-center text-muted-foreground dark:text-muted-foreground border border-border dark:border-border">
                        {currentChannelIconNode}
                      </div>
                    ) : (
                      <div className={`w-20 h-20 rounded-3xl bg-gradient-to-br ${currentChannelStyle.gradient} flex items-center justify-center shadow-md ${currentChannelStyle.shadow}`}>
                        {currentChannelStyle.largeIcon}
                      </div>
                    )}
                    <div className="space-y-2 max-w-xs">
                      <p className="text-muted-foreground dark:text-muted-foreground font-medium text-base">
                        {t('discoveryView.telegram-channels')}
                      </p>
                      <p className="text-sm text-muted-foreground dark:text-muted-foreground leading-relaxed">
                        {t('discoveryView.fetches-github-projects-from-followed-channels-m')}
                      </p>
                    </div>
                    <div className="flex flex-wrap items-center justify-center gap-2">
                      <Button
                        variant="default"
                        onClick={() => refreshChannel('telegram', 1, false)}
                        disabled={currentIsLoading}
                        className={isDesktopSafeMode
                          ? 'flex items-center gap-2 rounded-lg bg-primary px-6 py-2.5 text-sm font-medium text-primary-foreground shadow-sm transition-colors hover:bg-primary/90'
                          : 'flex items-center gap-2 rounded-xl bg-primary px-6 py-2.5 text-sm font-medium text-primary-foreground shadow-sm transition-colors hover:bg-primary/90'}
                      >
                        <RefreshCw className="w-4 h-4" />
                        {t('discoveryView.start-sync')}
                      </Button>
                      <Button
                        variant="outline"
                        onClick={() => setTelegramSettingsOpen(true)}
                        disabled={currentIsLoading}
                        className="flex items-center gap-2 rounded-xl border border-border dark:border-border bg-card dark:bg-muted/40 px-6 py-2.5 text-sm font-medium text-foreground dark:text-foreground transition-colors hover:bg-accent dark:hover:bg-accent"
                      >
                        <Users className="w-4 h-4" />
                        {t('discoveryView.channel-list')}
                      </Button>
                    </div>
                  </>
                ) : selectedDiscoveryChannel === 'weekly' ? (
                  <>
                    {isDesktopSafeMode ? (
                      <div className="w-16 h-16 rounded-2xl bg-muted dark:bg-card flex items-center justify-center text-muted-foreground dark:text-muted-foreground border border-border dark:border-border">
                        {currentChannelIconNode}
                      </div>
                    ) : (
                      <div className={`w-20 h-20 rounded-3xl bg-gradient-to-br ${currentChannelStyle.gradient} flex items-center justify-center shadow-md ${currentChannelStyle.shadow}`}>
                        {currentChannelStyle.largeIcon}
                      </div>
                    )}
                    <div className="space-y-2 max-w-xs">
                      <p className="text-muted-foreground dark:text-muted-foreground font-medium text-base">
                        {t('discoveryView.ruanyifeng-weekly')}
                      </p>
                      <p className="text-sm text-muted-foreground dark:text-muted-foreground leading-relaxed">
                        {t('discoveryView.sync-open-source-submissions-from-the-weekly-ear')}
                      </p>
                    </div>
                    <Button
                      variant="default"
                      onClick={() => refreshChannel('weekly', 1, false)}
                      disabled={currentIsLoading}
                      className={isDesktopSafeMode
                        ? 'flex items-center gap-2 rounded-lg bg-primary px-6 py-2.5 text-sm font-medium text-primary-foreground shadow-sm transition-colors hover:bg-primary/90'
                        : 'flex items-center gap-2 rounded-xl bg-primary px-6 py-2.5 text-sm font-medium text-primary-foreground shadow-sm transition-colors hover:bg-primary/90'}
                    >
                      <RefreshCw className="w-4 h-4" />
                      {t('discoveryView.start-sync')}
                    </Button>
                  </>
                ) : (
                  <>
                    {isDesktopSafeMode ? (
                      <div className="w-16 h-16 rounded-2xl bg-muted dark:bg-card flex items-center justify-center text-muted-foreground dark:text-muted-foreground border border-border dark:border-border">
                        {currentChannelIconNode}
                      </div>
                    ) : (
                      <div className={`w-20 h-20 rounded-3xl bg-gradient-to-br ${currentChannelStyle.gradient} flex items-center justify-center shadow-md ${currentChannelStyle.shadow}`}>
                        {currentChannelStyle.largeIcon}
                      </div>
                    )}
                    <div className="space-y-2 max-w-xs">
                      <p className="text-muted-foreground dark:text-muted-foreground font-medium text-base">
                        {t('discoveryView.no-data-yet')}
                      </p>
                      <p className="text-sm text-muted-foreground dark:text-muted-foreground leading-relaxed">
                        {t('discoveryView.click-refresh-to-fetch-latest-rankings')}
                      </p>
                    </div>
                    <Button
                      variant="default"
                      onClick={() => refreshChannel(selectedDiscoveryChannel, 1, false)}
                      disabled={currentIsLoading}
                      className={isDesktopSafeMode
                        ? 'flex items-center gap-2 rounded-lg bg-primary px-6 py-2.5 text-sm font-medium text-primary-foreground shadow-sm transition-colors hover:bg-primary/90'
                        : 'flex items-center gap-2 rounded-xl bg-primary px-6 py-2.5 text-sm font-medium text-primary-foreground shadow-sm transition-colors hover:bg-primary/90'}
                    >
                      <RefreshCw className="w-4 h-4" />
                      {t('discoveryView.refresh-now')}
                    </Button>
                  </>
                )}
              </div>
            )}

            {selectedDiscoveryChannel === 'trending' && (
              <TrendingHistoryPanel period={trendingTimeRange} platform={discoveryPlatform} />
            )}

            {allRepos.length > 0 && (
              <div className={isDesktopSafeMode ? 'space-y-3' : 'space-y-4'}>
                {allRepos.map((repo, index) => (
                  <div key={repo.id} data-repo-index={index}>
                    <SubscriptionRepoCard repo={repo} desktopSafeMode={isDesktopSafeMode} />
                  </div>
                ))}
              </div>
            )}

            {currentIsLoadingMore && (
              <div className="flex items-center justify-center py-6 gap-3">
                <Loader2 className="w-5 h-5 animate-spin text-primary" />
                <span className="text-sm text-muted-foreground dark:text-muted-foreground">{t('discoveryView.loading-more')}</span>
              </div>
            )}

            {currentLoadMoreError && (
              <div className="flex flex-col items-center gap-3 py-4">
                <div className="flex items-center gap-2 text-muted-foreground dark:text-muted-foreground ">
                  <X className="w-4 h-4" />
                  <span className="text-sm">{currentLoadMoreError}</span>
                </div>
                <Button
                  onClick={() => {
                    const nextPage = discoveryNextPage[selectedDiscoveryChannel];
                    if (nextPage) {
                      refreshChannel(selectedDiscoveryChannel, nextPage, true);
                    }
                  }}
                  className="px-4 py-2 rounded-lg text-sm font-medium bg-muted dark:bg-muted/40 text-muted-foreground dark:text-muted-foreground hover:bg-accent dark:hover:bg-accent transition-colors flex items-center gap-2"
                >
                  <RefreshCw className="w-3.5 h-3.5" />
                  {t('discoveryView.retry')}
                </Button>
              </div>
            )}

            {/* Page Info */}
            {!currentIsLoading && allRepos.length > 0 && (
              <div className={isDesktopSafeMode
                ? 'flex items-center justify-between py-3.5 px-5 bg-background dark:bg-card rounded-lg border border-border dark:border-border text-sm'
                : 'flex items-center justify-between py-3.5 px-5 bg-gradient-to-r from-muted/60 to-muted/30 rounded-xl border border-border/60 dark:border-border/50 text-sm'}>
                <div className="flex items-center gap-2 text-muted-foreground dark:text-muted-foreground">
                  <div className="w-1.5 h-1.5 rounded-full bg-primary" />
                  <span>
                    {t('discoveryView.total')} <strong className="text-foreground dark:text-foreground">{allRepos.length}</strong> {t('discoveryView.items')}
                  </span>
                </div>

              </div>
            )}

            {/* Load More Button */}
            {!currentIsLoading && !currentIsLoadingMore && allRepos.length > 0 && (
              <LoadMoreButton
                onLoadMore={handleLoadMore}
                isLoading={false}
                hasMore={discoveryHasMore[selectedDiscoveryChannel] ?? false}
                totalCount={currentTotalCount}
                language={language}
              />
            )}
            </>
            )}


          </div>

          {/* 滚动到底部按钮 */}
          <ScrollToBottom scrollContainerRef={scrollContainerRef} />

          {/* X 推文频道关注列表设置 */}
          <XTweetSettingsModal
            isOpen={tweetSettingsOpen}
            onClose={() => setTweetSettingsOpen(false)} />

          {/* Telegram 频道关注列表设置 */}
          <TelegramSettingsModal
            isOpen={telegramSettingsOpen}
            onClose={() => setTelegramSettingsOpen(false)} />
        </div>
      </div>
    </div>
  );
});

DiscoveryView.displayName = 'DiscoveryView';