'use client';

import React, { useState, useEffect } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faStar, faSearch, faTimes, faChevronDown, faBook, faCode, faCloud, faBell, faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons';
import { faStar as farStar } from '@fortawesome/free-regular-svg-icons';
import { faGithub } from '@fortawesome/free-brands-svg-icons';
import categories from '@/config/categories';
import tools from '@/config/tools';
import { useRouter } from 'next/navigation';
import ThemeToggle from '@/components/ThemeToggle';
import LanguageToggle from '@/components/LanguageToggle';
import Link from 'next/link';
import { useLanguage } from '@/context/LanguageContext';

export default function Home() {
  const { t, language } = useLanguage();
  const [activeCategory, setActiveCategory] = useState(() => {
    // 从 localStorage 获取上次选择的分类，如果没有则默认为 "all"
    if (typeof window !== 'undefined') {
      return localStorage.getItem('lastActiveCategory') || "all";
    }
    return "all";
  });
  const [searchTerm, setSearchTerm] = useState("");
  const [iconsLoaded, setIconsLoaded] = useState(false);
  const [favoriteTools, setFavoriteTools] = useState<string[]>([]);
  const [showFavorites, setShowFavorites] = useState(false);
  const [showNotification, setShowNotification] = useState(false);
  const [firstFavoriteAdded, setFirstFavoriteAdded] = useState(false);
  const [prefetchedTools, setPrefetchedTools] = useState<Set<string>>(new Set());
  const [loadingProgress, setLoadingProgress] = useState<{ current: number, total: number }>({ current: 0, total: 0 });
  const [showProductsDropdown, setShowProductsDropdown] = useState(false);
  const router = useRouter();

  // 产品推荐列表
  const recommendedProducts = [
    { title: "ShowDoc", url: "https://www.showdoc.com.cn/", description: "API文档、技术文档工具", icon: faBook },
    { title: "RunApi", url: "https://www.runapi.com.cn/", description: "接口管理与测试平台", icon: faCode },
    { title: "大风云", url: "https://www.dfyun.com.cn/", description: "性价比巨高的CDN服务", icon: faCloud },
    { title: "Push", url: "https://push.showdoc.com.cn/", description: "消息推送服务", icon: faBell }
  ];

  // 点击其他区域关闭产品推荐下拉菜单
  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      const target = event.target as Element;
      if (!target.closest('#products-dropdown-container')) {
        setShowProductsDropdown(false);
      }
    };

    document.addEventListener('click', handleClickOutside);
    return () => {
      document.removeEventListener('click', handleClickOutside);
    };
  }, []);

  // 切换产品推荐下拉菜单的显示状态
  const toggleProductsDropdown = (e: React.MouseEvent) => {
    e.stopPropagation();
    setShowProductsDropdown(prev => !prev);
  };

  // 批量工具预加载管理
  useEffect(() => {
    let isMounted = true;
    
    // 页面完全加载后开始批量预加载
    const startBatchPrefetch = () => {
      // 获取收藏的工具列表
      const savedFavorites = localStorage.getItem('favoriteTools');
      const userFavorites = savedFavorites ? JSON.parse(savedFavorites) : [];
      
      // 按优先级排序工具：1. 收藏的工具 2. 常用工具 3. 其他工具
      const favoriteTools = tools.filter(tool => userFavorites.includes(tool.code));
      const commonTools = tools.filter(tool => 
        tool.category.includes('common') && !userFavorites.includes(tool.code)
      );
      const otherTools = tools.filter(tool => 
        !tool.category.includes('common') && !userFavorites.includes(tool.code)
      );
      
      // 按优先级顺序合并工具列表
      const orderedTools = [...favoriteTools, ...commonTools, ...otherTools];
      
      if (!isMounted) return;
      
      // 设置总数
      setLoadingProgress({ current: 0, total: orderedTools.length });
      
      // 创建预加载队列
      const prefetchQueue = async () => {
        const newPrefetchedSet = new Set(prefetchedTools);
        
        for (let i = 0; i < orderedTools.length; i++) {
          if (!isMounted) return;
          
          const tool = orderedTools[i];
          
          // 如果已经预加载过，跳过
          if (newPrefetchedSet.has(tool.code)) {
            setLoadingProgress(prev => ({ ...prev, current: prev.current + 1 }));
            continue;
          }
          
          try {
            // 计算优先级：收藏 > 常用 > 其他
            const isPriority = userFavorites.includes(tool.code) || 
                              (i < favoriteTools.length + commonTools.length);
            
            // 使用 fetch 预加载页面内容
            const prefetchUrl = `/tools/${tool.code}`;
            const response = await fetch(prefetchUrl, { 
              priority: isPriority ? 'high' : 'low',
              method: 'GET',
              cache: 'default'
            });
            
            if (!isMounted) return;
            
            if (response.ok) {
              // 预解析响应以确保它被缓存
              await response.text();
              
              // 更新已预加载的工具集合
              newPrefetchedSet.add(tool.code);
              
              // 更新进度
              setLoadingProgress(prev => ({ ...prev, current: prev.current + 1 }));
              
              // 更新预加载状态
              if (isMounted) {
                setPrefetchedTools(prev => {
                  const updatedSet = new Set(prev);
                  updatedSet.add(tool.code);
                  return updatedSet;
                });
              }
            } else {
              // 即使请求不成功也更新进度
              setLoadingProgress(prev => ({ ...prev, current: prev.current + 1 }));
            }
          } catch (error) {
            console.warn(`批量预加载工具 ${tool.code} 失败:`, error);
            // 即使失败也更新进度
            setLoadingProgress(prev => ({ ...prev, current: prev.current + 1 }));
          }
          
          // 调整不同优先级工具的预加载延迟
          if (i < orderedTools.length - 1) {
            // 收藏与常用工具间隔短一些，其他工具间隔长一些
            const delay = i < favoriteTools.length + commonTools.length ? 150 : 300;
            await new Promise(resolve => setTimeout(resolve, delay));
          }
        }
        
        // 预加载完成后，在开发环境打印信息
        if (process.env.NODE_ENV === 'development') {
          console.log(`预加载完成! 收藏工具: ${favoriteTools.length}, 常用工具: ${commonTools.length}, 其他工具: ${otherTools.length}`);
        }
      };
      
      // 开始预加载队列
      prefetchQueue();
    };
    
    // 等待页面完全加载后开始预加载
    if (document.readyState === 'complete') {
      // 给页面内容完全渲染一些时间，然后开始批量预加载
      setTimeout(startBatchPrefetch, 2000);
    } else {
      window.addEventListener('load', () => {
        // 页面加载完成后延迟一段时间再开始预加载
        setTimeout(startBatchPrefetch, 2000);
      });
    }
    
    // 清理函数
    return () => {
      isMounted = false;
    };
  }, []);

  // 添加预加载工具页面的函数
  const prefetchTool = (toolCode: string) => {
    // 如果已经预加载过，则不再重复预加载
    if (prefetchedTools.has(toolCode)) {
      return;
    }
    
    // 使用 fetch 预加载页面内容
    const prefetchUrl = `/tools/${toolCode}`;
    fetch(prefetchUrl, { priority: 'low' })
      .then(response => {
        if (!response.ok) {
          throw new Error(`预加载失败: ${response.status}`);
        }
        return response.text();
      })
      .then(() => {
        // 成功预加载后更新状态
        setPrefetchedTools(prev => {
          const newSet = new Set(prev);
          newSet.add(toolCode);
          return newSet;
        });
      })
      .catch(error => {
        console.warn(`工具 ${toolCode} 预加载失败:`, error);
      });
  };

  // 处理工具导航并显示加载指示器
  const navigateToTool = (toolCode: string) => {
    // 检查是否已预加载 - 使用最新状态重新检查一次
    const isPrefetched = prefetchedTools.has(toolCode);

    // 检查是否是首次访问该工具
    const isFirstVisit = !localStorage.getItem(`visited-${toolCode}`);
    
    // 记录已访问工具
    localStorage.setItem(`visited-${toolCode}`, 'true');
    
    // 打印调试信息 - 开发环境
    if (process.env.NODE_ENV === 'development') {
      console.log(`导航到工具: ${toolCode}, 预加载状态: ${isPrefetched ? '已预加载' : '未预加载'}`);
    }
    
    // 如果已预加载，直接导航，不显示loading
    if (isPrefetched) {
      // 在导航前存储一个标志，表示这是从主页导航过来的
      localStorage.setItem('from_homepage', 'true');
      router.push(`/tools/${toolCode}`);
      return;
    }
    
    // 在导航前存储一个标志，表示这是从主页导航过来的
    localStorage.setItem('from_homepage', 'true');
    
    const loadingId = 'loading-indicator-' + Date.now();
    const loadingEl = document.createElement('div');
    loadingEl.id = loadingId;
    loadingEl.className = 'fixed inset-0 flex items-center justify-center bg-[rgba(0,0,0,0.3)] z-50 backdrop-blur-sm transition-opacity duration-300';
    
    // 使用自适应主题的加载指示器
    const bgColor = getComputedStyle(document.documentElement).getPropertyValue('--color-bg-card').trim();
    const borderColor = getComputedStyle(document.documentElement).getPropertyValue('--color-primary').trim();
    const textColor = getComputedStyle(document.documentElement).getPropertyValue('--color-text-primary').trim();
    
    loadingEl.innerHTML = `<div style="background-color: rgb(${bgColor}); border: 1px solid rgba(${borderColor}, 0.3);" class="p-4 rounded-lg shadow-lg">
      <div class="flex items-center gap-3">
        <div style="border-color: rgb(${borderColor}); border-top-color: transparent;" class="w-6 h-6 border-2 rounded-full animate-spin"></div>
        <div style="color: rgb(${textColor});">加载中...</div>
      </div>
    </div>`;
    
    document.body.appendChild(loadingEl);
    
    const removeLoadingIndicator = () => {
      const indicator = document.getElementById(loadingId);
      if (indicator) {
        indicator.classList.add('opacity-0');
        setTimeout(() => {
          indicator.remove();
        }, 200);
      }
    };
    
    // 立即导航
    router.push(`/tools/${toolCode}`);
    
    // 超短超时检测，针对缓存页面快速检测
    setTimeout(() => {
      // 如果页面已变化并且不是首次访问，很可能是使用了缓存，可以快速移除loading
      if (window.location.pathname.includes(`/tools/${toolCode}`) && !isFirstVisit) {
        removeLoadingIndicator();
        return;
      }
      
      // 否则继续进行DOM检测
      startDomCheck();
    }, 20);
    
    // 启动DOM监测
    const startDomCheck = () => {
      let checkCount = 0;
      const maxChecks = isFirstVisit ? 20 : 10; // 首次访问检查更多次
      const baseDelay = isFirstVisit ? 50 : 30; // 首次访问间隔更长
      
      const checkForPageLoad = () => {
        // 检查是否已经导航到新页面
        if (window.location.pathname.includes(`/tools/${toolCode}`)) {
          // 检查页面内容是否已经渲染
          const content = document.querySelector('main') || document.querySelector('#tool-content');
          if (content) {
            removeLoadingIndicator();
            return;
          }
        }
        
        checkCount++;
        if (checkCount < maxChecks) {
          // 最开始快速检查，逐渐减慢检查频率
          const delay = Math.min(baseDelay + checkCount * 5, isFirstVisit ? 100 : 60);
          setTimeout(checkForPageLoad, delay);
        }
      };
      
      // 立即开始检查
      checkForPageLoad();
    };
    
    // 兜底保障，确保加载指示器一定会被移除
    // 对于首次访问等待更长时间，后续访问缩短时间
    setTimeout(removeLoadingIndicator, isFirstVisit ? 800 : 300);
  };

  // 图标加载处理
  useEffect(() => {
    // 设置小延迟确保图标已加载
    const timer = setTimeout(() => {
      setIconsLoaded(true);
    }, 200);
    
    return () => clearTimeout(timer);
  }, []);

  // 加载收藏工具和首次收藏状态
  useEffect(() => {
    const savedFavorites = localStorage.getItem('favoriteTools');
    const hasSeenFirstFavoriteNotification = localStorage.getItem('hasSeenFirstFavoriteNotification') === 'true';
    
    setFirstFavoriteAdded(hasSeenFirstFavoriteNotification);
    
    if (savedFavorites) {
      setFavoriteTools(JSON.parse(savedFavorites));
      setShowFavorites(true);
    }
  }, []);

  // 收藏/取消收藏工具
  const toggleFavorite = (toolCode: string, e: React.MouseEvent) => {
    e.stopPropagation();
    
    // 检查是否要添加到收藏
    const isAdding = !favoriteTools.includes(toolCode);
    
    const updatedFavorites = isAdding
      ? [...favoriteTools, toolCode]
      : favoriteTools.filter(code => code !== toolCode);
    
    setFavoriteTools(updatedFavorites);
    localStorage.setItem('favoriteTools', JSON.stringify(updatedFavorites));
    
    // 更新收藏分类的显示状态
    setShowFavorites(updatedFavorites.length > 0);
    
    // 如果是添加收藏且是第一次收藏，显示通知
    if (isAdding && !firstFavoriteAdded) {
      setShowNotification(true);
      setFirstFavoriteAdded(true);
      localStorage.setItem('hasSeenFirstFavoriteNotification', 'true');
      
      // 5秒后自动关闭通知
      setTimeout(() => {
        setShowNotification(false);
      }, 5000);
    }
  };

  // 关闭通知
  const closeNotification = () => {
    setShowNotification(false);
  };

  // 切换到收藏分类
  const viewFavorites = () => {
    setActiveCategory('favorites');
  };

  // 过滤工具列表
  const filteredTools = () => tools.filter(tool => {
    // 根据搜索词过滤
    if (searchTerm && !t(`tools.${tool.code}.title`).toLowerCase().includes(searchTerm.toLowerCase()) && 
        !t(`tools.${tool.code}.description`).toLowerCase().includes(searchTerm.toLowerCase()) &&
        !tool.keywords?.some(keyword => keyword.toLowerCase().includes(searchTerm.toLowerCase()))) {
      return false;
    }
    
    // 过滤收藏分类
    if (activeCategory === 'favorites') {
      return favoriteTools.includes(tool.code);
    }
    
    // 根据类别过滤
    if (activeCategory !== "all" && !tool.category.includes(activeCategory)) {
      return false;
    }
    
    return true;
  }).sort((a, b) => {
    // 搜索优先级排序
    if (searchTerm) {
      // 计算匹配得分 (越高越靠前)
      const getScore = (tool: typeof tools[0]) => {
        let score = 0;
        const term = searchTerm.toLowerCase();
        const title = t(`tools.${tool.code}.title`).toLowerCase();
        const description = t(`tools.${tool.code}.description`).toLowerCase();
        
        // 标题匹配权重最高
        if (title.includes(term)) {
          score += 100;
          // 标题精确匹配给额外加分
          if (title === term) {
            score += 50;
          }
        }
        
        // 关键词匹配权重次之
        if (tool.keywords?.some(keyword => keyword.toLowerCase() === term)) {
          // 关键词精确匹配
          score += 80;
        } else if (tool.keywords?.some(keyword => keyword.toLowerCase().includes(term))) {
          // 关键词部分匹配
          score += 60;
        }
        
        // 描述匹配权重稍低
        if (description.includes(term)) {
          score += 40;
        }
        
        return score;
      };
      
      const scoreA = getScore(a);
      const scoreB = getScore(b);
      
      // 按分数降序排列
      if (scoreA !== scoreB) {
        return scoreB - scoreA;
      }
    }
    
    // 在全部工具视图中，将常用工具排在前面
    if (activeCategory === "all") {
      const aIsCommon = a.category.includes('common');
      const bIsCommon = b.category.includes('common');
      
      if (aIsCommon && !bIsCommon) return -1;
      if (!aIsCommon && bIsCommon) return 1;
    }
    
    return 0;
  });

  // 构建分类列表（添加动态的"我的收藏"分类）
  const allCategories = [
    ...categories.slice(0, 2), // 全部工具和常用工具
    ...(showFavorites ? [{ code: "favorites", name: t('common.favorites'), active: false }] : []),
    ...categories.slice(2) // 其余分类
  ];

  // 更新分类选择处理函数
  const handleCategoryChange = (categoryCode: string) => {
    setActiveCategory(categoryCode);
    // 保存到 localStorage
    localStorage.setItem('lastActiveCategory', categoryCode);
  };

  return (
    <div className={`min-h-screen flex flex-col max-w-[1440px] mx-auto px-4 sm:px-8 py-4 sm:py-6 ${!iconsLoaded ? 'opacity-90' : 'opacity-100 transition-opacity duration-300'}`}>
      {/* 通知提示 */}
      {showNotification && (
        <div className="fixed top-4 left-1/2 transform -translate-x-1/2 z-50 flex items-center gap-2 bg-gradient-to-r from-[rgb(var(--color-primary))] to-[rgb(var(--color-primary-hover))] text-white px-4 py-3 rounded-lg shadow-lg animate-fadeIn">
          <span>工具已添加到收藏夹，点击导航栏中的&quot;我的收藏&quot;查看</span>
          <button 
            className="ml-2 text-white hover:text-[#F1F5F9] transition-colors"
            onClick={closeNotification}
          >
            <FontAwesomeIcon icon={faTimes} />
          </button>
        </div>
      )}

      {/* 添加预加载进度提示（仅在开发环境显示） */}
      {process.env.NODE_ENV === 'development' && loadingProgress.total > 0 && (
        <div className="fixed bottom-4 left-4 z-40 bg-[rgb(var(--color-bg-card))] border border-[rgba(var(--color-primary),0.3)] rounded-lg p-2 text-xs opacity-80">
          <div className="flex items-center gap-2">
            <div>预加载: {loadingProgress.current}/{loadingProgress.total}</div>
            <div className="w-20 h-1.5 bg-[rgb(var(--color-bg-secondary))] rounded-full overflow-hidden">
              <div 
                className="h-full bg-[rgb(var(--color-primary))]"
                style={{width: `${(loadingProgress.current / loadingProgress.total) * 100}%`}}
              ></div>
            </div>
          </div>
        </div>
      )}

      {/* 头部 */}
      <header className="sticky top-0 z-10 backdrop-blur-md border-b border-[rgba(var(--color-primary),0.1)] bg-[rgba(var(--color-bg-secondary),0.8)]">
        <div className="container mx-auto px-4 py-3 flex flex-col md:flex-row md:items-center md:justify-between">
          <div className="flex items-center justify-between">
            <div className="flex items-center">
              <h1 className="text-2xl font-bold text-[rgb(var(--color-primary))]">
                {t('common.siteName')}
              </h1>
              <span className="mx-2 text-sm text-[rgb(var(--color-text-secondary))]">|</span>
              <p className="text-sm text-[rgb(var(--color-text-secondary))]">{t('common.siteDesc')}</p>
            </div>
            
            <div className="flex items-center space-x-2 md:hidden">
              <button 
                className="btn-primary w-8 h-8 md:w-10 md:h-10 rounded-full flex items-center justify-center"
                onClick={viewFavorites}
                title={t('common.favorites')}
              >
                <FontAwesomeIcon icon={faStar} className="text-sm md:text-base" />
              </button>
              
              <div className="w-px h-6 bg-[rgba(var(--color-text-secondary),0.2)]"></div>
              
              <LanguageToggle />
              <ThemeToggle />
              
              {language === 'zh' && (
                <>
                  <div className="w-px h-6 bg-[rgba(var(--color-text-secondary),0.2)]"></div>
                  
                  <div className="relative">
                    <button
                      className="btn-secondary w-8 h-8 md:w-10 md:h-10 rounded-full flex items-center justify-center relative"
                      onClick={toggleProductsDropdown}
                      title={t('common.productRecommend')}
                    >
                      <FontAwesomeIcon icon={faExternalLinkAlt} className="text-sm md:text-base" />
                      <FontAwesomeIcon icon={faChevronDown} className="absolute text-[0.5rem] md:text-[0.6rem] bottom-0.5 md:bottom-1 right-0.5 md:right-1" />
                    </button>
                  </div>
                </>
              )}
              
              <a 
                href="https://github.com/star7th/jisuxiang"
                target="_blank"
                rel="noopener noreferrer"
                className="btn-secondary w-8 h-8 md:w-10 md:h-10 rounded-full flex items-center justify-center"
                title="GitHub"
              >
                <FontAwesomeIcon icon={faGithub} className="text-sm md:text-base" />
              </a>
            </div>
          </div>
          
          <div className="mt-3 md:mt-0 relative w-full md:w-auto flex-1 md:max-w-md">
            <div className="relative">
              <input
                type="text"
                placeholder={t('common.search')}
                className="w-full bg-[rgb(var(--color-bg-card))] rounded-full pl-10 pr-4 py-2 text-[rgb(var(--color-text-primary))] outline-none focus:ring-2 ring-[rgb(var(--color-primary))] transition-shadow shadow-sm"
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
              />
              <FontAwesomeIcon 
                icon={faSearch} 
                className="absolute left-3 top-1/2 transform -translate-y-1/2 text-[rgb(var(--color-text-secondary))]" 
              />
              {searchTerm && (
                <button 
                  className="absolute right-3 top-1/2 transform -translate-y-1/2"
                  onClick={() => setSearchTerm('')}
                >
                  <FontAwesomeIcon 
                    icon={faTimes} 
                    className="text-[rgb(var(--color-text-secondary))] hover:text-[rgb(var(--color-text-primary))] transition-colors" 
                  />
                </button>
              )}
            </div>
          </div>
          
          <div className="hidden md:flex items-center space-x-3">
            <button 
              className="btn-primary w-10 h-10 rounded-full flex items-center justify-center group relative"
              onClick={viewFavorites}
              title={t('common.favorites')}
            >
              <FontAwesomeIcon icon={faStar} />
              <span className="absolute left-1/2 -translate-x-1/2 top-full mt-2 px-2 py-1 rounded-md whitespace-nowrap opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity duration-300 text-sm z-10"
                style={{
                  backgroundColor: 'rgb(var(--color-bg-secondary))',
                  color: 'rgb(var(--color-text-primary))'
                }}>
                {t('common.favorites')}
              </span>
            </button>
            
            <div className="w-px h-6 bg-[rgba(var(--color-text-secondary),0.2)]"></div>
            
            <LanguageToggle />
            <ThemeToggle />
            
            <div className="w-px h-6 bg-[rgba(var(--color-text-secondary),0.2)]"></div>
            
            {/* GitHub链接按钮 */}
            <a 
              href="https://github.com/star7th/jisuxiang"
              target="_blank"
              rel="noopener noreferrer"
              className="btn-secondary w-10 h-10 rounded-full flex items-center justify-center group relative"
              title="GitHub"
            >
              <FontAwesomeIcon icon={faGithub} />
              <span className="absolute left-1/2 -translate-x-1/2 top-full mt-2 px-2 py-1 rounded-md whitespace-nowrap opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity duration-300 text-sm z-10"
                style={{
                  backgroundColor: 'rgb(var(--color-bg-secondary))',
                  color: 'rgb(var(--color-text-primary))'
                }}>
                GitHub
              </span>
            </a>
            
            {/* 产品推荐下拉菜单 - 仅在中文语言下显示 */}
            {language === 'zh' && (
              <div id="products-dropdown-container" className="relative">
                <button
                  className="btn-secondary w-10 h-10 rounded-full flex items-center justify-center group relative"
                  onClick={toggleProductsDropdown}
                  title={t('common.productRecommend')}
                >
                  <FontAwesomeIcon icon={faExternalLinkAlt} />
                  <FontAwesomeIcon icon={faChevronDown} className={`absolute text-[0.6rem] bottom-1 right-1 transition-transform duration-200 ${showProductsDropdown ? 'rotate-180' : ''}`} />
                  <span className="absolute left-1/2 -translate-x-1/2 top-full mt-2 px-2 py-1 rounded-md whitespace-nowrap opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity duration-300 text-sm z-10"
                    style={{
                      backgroundColor: 'rgb(var(--color-bg-secondary))',
                      color: 'rgb(var(--color-text-primary))'
                    }}>
                    {t('common.productRecommend')}
                  </span>
                </button>
                
                {showProductsDropdown && (
                  <div className="absolute right-0 top-full mt-1 w-56 rounded-md shadow-lg border z-50 animate-fadeIn overflow-hidden"
                      style={{
                        backgroundColor: 'rgb(var(--color-bg-card))',
                        borderColor: 'rgba(var(--color-primary), 0.2)'
                      }}>
                    <div className="py-1">
                      {recommendedProducts.map((product, index) => (
                        <a 
                          key={index}
                          href={product.url}
                          target="_blank"
                          rel="noopener noreferrer"
                          className="block px-4 py-3 hover:bg-[rgba(var(--color-primary),0.1)] transition-colors"
                          style={{color: 'rgb(var(--color-text-primary))'}}
                        >
                          <div className="flex items-center gap-3">
                            <div className="w-8 h-8 rounded-full flex items-center justify-center" style={{backgroundColor: 'rgba(var(--color-primary), 0.1)'}}>
                              <FontAwesomeIcon icon={product.icon} style={{color: 'rgb(var(--color-primary))'}} />
                            </div>
                            <div>
                              <div className="font-medium">{product.title}</div>
                              <div className="text-xs mt-1" style={{color: 'rgb(var(--color-text-tertiary))'}}>{product.description}</div>
                            </div>
                          </div>
                        </a>
                      ))}
                    </div>
                  </div>
                )}
              </div>
            )}
          </div>
        </div>
      </header>

      {/* 主内容区域 */}
      <main className="flex-1 container mx-auto">
        {/* 分类导航 - 独立导航栏 */}
        <div className="flex flex-wrap nav-bar gap-2 sm:gap-3 mb-6 sm:mb-8 mt-6">
          {allCategories.map((category, index) => (
            <button 
              key={index}
              className={`px-4 py-2 rounded-button whitespace-nowrap transition-all ${
                activeCategory === category.code 
                  ? 'bg-gradient-to-r from-[rgb(var(--color-primary))] to-[rgb(var(--color-primary-hover))] text-white shadow-sm' 
                  : 'btn-secondary'
              }`}
              onClick={() => handleCategoryChange(category.code)}
            >
              {t(`categories.${category.code}`)}
            </button>
          ))}
        </div>

        {/* 工具列表 */}
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 sm:gap-6">
          {filteredTools().map((tool, index) => (
            <div 
              key={index} 
              className="card p-6 flex flex-col cursor-pointer min-h-[170px]"
              onClick={() => navigateToTool(tool.code)}
              onMouseEnter={() => prefetchTool(tool.code)}
            >
              {/* 添加不可见的 Link 组件用于 Next.js 原生预加载 */}
              <Link 
                href={`/tools/${tool.code}`} 
                prefetch={true} 
                className="hidden" 
                aria-hidden="true"
              />
              <div className="flex items-center justify-between mb-6">
                <div className="flex items-center gap-4">
                  <div className="icon-container w-10 h-10 flex-shrink-0">
                    <FontAwesomeIcon icon={tool.icon} className="icon" />
                  </div>
                  <div>
                    <h3 className="text-lg font-medium" style={{color: 'rgb(var(--color-text-primary))'}}>{t(`tools.${tool.code}.title`)}</h3>
                    <div className="flex flex-wrap gap-1 mt-2">
                      {tool.category.map((catCode, catIndex) => (
                        <span 
                          key={catIndex} 
                          className="category-tag"
                        >
                          {t(`categories.${catCode}`)}
                        </span>
                      ))}
                    </div>
                  </div>
                </div>
                <button 
                  className="transition-colors"
                  style={{color: 'rgb(var(--color-text-tertiary))'}}
                  onClick={(e) => toggleFavorite(tool.code, e)}
                >
                  <FontAwesomeIcon 
                    icon={favoriteTools.includes(tool.code) ? faStar : farStar}
                    className={favoriteTools.includes(tool.code) ? 'text-[rgb(var(--color-primary-light))]' : ''} 
                  />
                </button>
              </div>
              <p className="text-sm mt-auto" style={{color: 'rgb(var(--color-text-secondary))'}}>{t(`tools.${tool.code}.description`)}</p>
            </div>
          ))}
        </div>
      </main>

      {/* 底部 */}
      <footer className="mt-auto py-6 sm:py-8 border-t" style={{borderColor: 'rgb(var(--color-bg-secondary))'}}>
        <div className="flex justify-center items-center text-sm" style={{color: 'rgb(var(--color-text-tertiary))'}}>
          <span>本站基于开源项目 </span>
          <a 
            href="https://github.com/star7th/jisuxiang" 
            target="_blank" 
            rel="noopener noreferrer" 
            className="mx-1 text-[rgb(var(--color-primary-light))] hover:underline transition-colors"
          >
            极速箱
          </a>
          <span> 搭建</span>
        </div>
      </footer>
    </div>
  );
}