<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AI Stone 游戏导航</title>
  <meta name="description" content="探索精彩的网页游戏，包括益智、动作、角色扮演等各种类型">
  <link rel="stylesheet" href="/css/style.css">
  <link rel="icon" href="/images/favicon.ico" type="image/x-icon">
  <script>
    // 防止页面无限刷新
    console.log("页面初始化...");
    const originalWindowLocation = window.location;
    Object.defineProperty(window, 'location', {
      get: function() {
        console.log("获取window.location");
        return originalWindowLocation;
      },
      set: function(value) {
        console.log("尝试设置window.location:", value);
        if (typeof value === 'string' && value.includes('reload')) {
          console.log("阻止页面刷新");
          return;
        }
        originalWindowLocation.href = value;
      }
    });
    
    // 替换可能导致刷新的API
    window.addEventListener('DOMContentLoaded', function() {
      console.log("DOM加载完成，设置安全措施");
      // 重写reload方法
      const originalReload = location.reload;
      location.reload = function() {
        console.log("阻止reload调用");
        return false;
      };
      
      // 重写history.go方法
      const originalGo = history.go;
      history.go = function(delta) {
        console.log("阻止history.go调用:", delta);
        return false;
      };
    });
  </script>
</head>
<body>
  <div class="container">
    <header class="main-header">
      <h1 class="site-title">AI Stone 游戏导航</h1>
      <div class="search-bar">
        <input type="text" id="searchInput" placeholder="搜索游戏...">
        <button id="searchButton">搜索</button>
      </div>
      <nav class="main-nav">
        <a href="/" class="active">首页</a>
        <a href="/favorites.html">收藏夹</a>
        <a href="/admin/index.html">管理</a>
        <button id="toggleLang">English</button>
      </nav>
    </header>
    
    <main>
      <section class="categories-section">
        <h2 class="section-title">游戏分类</h2>
        <div id="categoriesContainer" class="categories-container">
          <div class="skeleton-loader category-skeleton"></div>
          <div class="skeleton-loader category-skeleton"></div>
          <div class="skeleton-loader category-skeleton"></div>
          <div class="skeleton-loader category-skeleton"></div>
        </div>
      </section>
      
      <section class="recent-games-section">
        <h2 class="section-title">热门游戏</h2>
        <div id="recentGamesContainer" class="games-grid">
          <div class="skeleton-loader game-card-skeleton"></div>
          <div class="skeleton-loader game-card-skeleton"></div>
          <div class="skeleton-loader game-card-skeleton"></div>
          <div class="skeleton-loader game-card-skeleton"></div>
        </div>
      </section>
      
      <section id="allGamesSection" class="all-games-section">
        <h2 class="section-title">所有游戏</h2>
        <div id="allGamesContainer" class="games-grid">
          <div class="skeleton-loader game-card-skeleton"></div>
          <div class="skeleton-loader game-card-skeleton"></div>
          <div class="skeleton-loader game-card-skeleton"></div>
          <div class="skeleton-loader game-card-skeleton"></div>
          <div class="skeleton-loader game-card-skeleton"></div>
          <div class="skeleton-loader game-card-skeleton"></div>
        </div>
      </section>
      
      <div id="errorContainer" class="error-container" style="display: none;">
        <p id="errorMessage">加载失败</p>
        <button id="reloadButton" class="reload-button">重试</button>
      </div>
    </main>
    
    <footer>
      <p>&copy; 2024 AI Stone Navigation - 所有游戏版权归各自开发者所有</p>
    </footer>
  </div>
  
  <script>
    console.log("开始加载页面逻辑");
    
    // 内嵌数据（不依赖外部JSON文件）
    const gamesData = {
      "games": [
        {
          "id": "2048",
          "title": {
            "en": "2048",
            "zh": "2048数字方块"
          },
          "description": {
            "en": "Join the numbers and get to the 2048 tile! Classic and addictive puzzle game.",
            "zh": "合并相同数字，获得2048方块！经典且让人上瘾的益智游戏。"
          },
          "iframeUrl": "https://play2048.co/",
          "thumbnail": "/images/placeholder.jpg",
          "category": "puzzle",
          "active": true,
          "dateAdded": "2023-06-01T12:00:00Z"
        },
        {
          "id": "wordle",
          "title": {
            "en": "Wordle Game",
            "zh": "猜单词"
          },
          "description": {
            "en": "Guess the hidden word in 6 tries. Each guess must be a valid 5-letter word.",
            "zh": "6次机会猜出隐藏的单词。每次猜测必须是有效的5个字母单词。"
          },
          "iframeUrl": "https://wordlegame.org/",
          "thumbnail": "/images/placeholder.jpg",
          "category": "puzzle",
          "active": true,
          "dateAdded": "2023-08-15T12:00:00Z"
        },
        {
          "id": "tetris",
          "title": {
            "en": "Tetris",
            "zh": "俄罗斯方块"
          },
          "description": {
            "en": "The classic tile-matching game where you arrange falling blocks to create and destroy lines.",
            "zh": "经典的方块消除游戏，排列下落的方块，创建并消除水平线。"
          },
          "iframeUrl": "https://www.freetetris.org/game.php",
          "thumbnail": "/images/placeholder.jpg",
          "category": "puzzle",
          "active": true,
          "dateAdded": "2023-06-03T12:00:00Z"
        },
        {
          "id": "snake",
          "title": {
            "en": "Snake Game",
            "zh": "贪吃蛇"
          },
          "description": {
            "en": "Control a snake to eat food and grow longer, but avoid hitting walls or yourself.",
            "zh": "控制蛇吃食物变得更长，但要避免撞到墙壁或自身。"
          },
          "iframeUrl": "https://www.google.com/fbx?fbx=snake_arcade",
          "thumbnail": "/images/placeholder.jpg",
          "category": "action",
          "active": true,
          "dateAdded": "2023-06-04T12:00:00Z"
        },
        {
          "id": "pacman",
          "title": {
            "en": "Pac-Man",
            "zh": "吃豆人"
          },
          "description": {
            "en": "Navigate Pac-Man through a maze, eating dots and avoiding ghosts in this classic arcade game.",
            "zh": "在这款经典街机游戏中，引导吃豆人穿过迷宫，吃掉豆子并避开幽灵。"
          },
          "iframeUrl": "https://www.google.com/logos/2010/pacman10-i.html",
          "thumbnail": "/images/placeholder.jpg",
          "category": "action",
          "active": true,
          "dateAdded": "2023-06-06T12:00:00Z"
        },
        {
          "id": "chess",
          "title": {
            "en": "Chess",
            "zh": "国际象棋"
          },
          "description": {
            "en": "Play the classic game of chess against the computer at different difficulty levels.",
            "zh": "以不同难度级别与电脑对弈经典的国际象棋游戏。"
          },
          "iframeUrl": "https://www.Chess.com/play/computer",
          "thumbnail": "/images/placeholder.jpg",
          "category": "strategy",
          "active": true,
          "dateAdded": "2023-07-05T12:00:00Z"
        },
        {
          "id": "sudoku",
          "title": {
            "en": "Sudoku",
            "zh": "数独"
          },
          "description": {
            "en": "Fill in the grid so that every row, column, and region contains the digits 1-9 without repetition.",
            "zh": "填写网格，使每行、每列和每个区域都包含数字1-9，且不重复。"
          },
          "iframeUrl": "https://sudoku.com/",
          "thumbnail": "/images/placeholder.jpg",
          "category": "puzzle",
          "active": true,
          "dateAdded": "2023-07-12T12:00:00Z"
        },
        {
          "id": "minesweeper",
          "title": {
            "en": "Minesweeper",
            "zh": "扫雷"
          },
          "description": {
            "en": "Find all mines on the board without detonating any of them in this classic puzzle game.",
            "zh": "在这个经典益智游戏中，找出所有地雷，但不要触发它们。"
          },
          "iframeUrl": "https://minesweeper.online/",
          "thumbnail": "/images/placeholder.jpg",
          "category": "puzzle",
          "active": true,
          "dateAdded": "2023-06-05T12:00:00Z"
        }
      ]
    };
    
    const categoriesData = {
      "categories": [
        {
          "id": "all",
          "name": {
            "en": "All Games",
            "zh": "所有游戏"
          },
          "description": {
            "en": "Browse all games in our collection",
            "zh": "浏览我们收集的所有游戏"
          },
          "icon": "🎲"
        },
        {
          "id": "action",
          "name": {
            "en": "Action",
            "zh": "动作游戏"
          },
          "description": {
            "en": "Fast-paced games requiring quick reflexes",
            "zh": "需要快速反应的高节奏游戏"
          },
          "icon": "🎮"
        },
        {
          "id": "puzzle",
          "name": {
            "en": "Puzzle",
            "zh": "益智游戏"
          },
          "description": {
            "en": "Brain teasers and logical challenges",
            "zh": "脑筋急转弯和逻辑挑战"
          },
          "icon": "🧩"
        },
        {
          "id": "strategy",
          "name": {
            "en": "Strategy",
            "zh": "策略游戏"
          },
          "description": {
            "en": "Planning and strategic thinking games",
            "zh": "需要规划和战略思维的游戏"
          },
          "icon": "♟️"
        }
      ]
    };
    
    // 全局变量
    let currentGames = [];
    let currentCategories = [];
    let currentLang = 'zh';
    let favorites = [];
    
    // DOM加载完成后执行
    document.addEventListener('DOMContentLoaded', async () => {
      console.log("开始初始化应用...");
      try {
        // 获取当前语言
        initializeLanguage();
        
        // 加载收藏夹数据
        loadFavorites();
        
        // 加载游戏数据和分类数据
        currentGames = gamesData.games;
        currentCategories = categoriesData.categories;
        
        // 保存数据到全局对象，使管理页面可以访问
        window.appData = {
          games: currentGames,
          categories: currentCategories
        };
        
        console.log("数据加载成功:", {
          games: currentGames.length,
          categories: currentCategories.length
        });
        
        // 更新UI
        updateCategories();
        updateRecentGames();
        updateAllGames();
        
        // 设置搜索按钮事件
        document.getElementById('searchButton').addEventListener('click', handleSearch);
        document.getElementById('searchInput').addEventListener('keyup', function(event) {
          if (event.key === 'Enter') {
            handleSearch();
          }
        });
        
        // 设置刷新按钮事件
        document.getElementById('reloadButton').addEventListener('click', function() {
          console.log("点击重试按钮");
          document.getElementById('errorContainer').style.display = 'none';
          // 仅更新UI，不重新加载数据
          updateCategories();
          updateRecentGames();
          updateAllGames();
        });
        
        // 语言切换按钮
        document.getElementById('toggleLang').addEventListener('click', toggleLanguage);
        
        console.log("应用初始化完成");
      } catch (error) {
        console.error('初始化失败:', error);
        showError("初始化失败: " + error.message);
      }
    });
    
    /**
     * 初始化语言设置
     */
    function initializeLanguage() {
      currentLang = localStorage.getItem('locale') || 'zh';
      updateLanguageButton();
      updatePageTitle();
    }
    
    /**
     * 更新页面标题
     */
    function updatePageTitle() {
      document.title = currentLang === 'zh' ? 'AI Stone 游戏导航' : 'AI Stone Game Navigation';
      document.querySelector('.site-title').textContent = currentLang === 'zh' ? 'AI Stone 游戏导航' : 'AI Stone Game Navigation';
      document.querySelector('.main-nav a:first-child').textContent = currentLang === 'zh' ? '首页' : 'Home';
      document.querySelector('.main-nav a:nth-child(2)').textContent = currentLang === 'zh' ? '收藏夹' : 'Favorites';
      document.querySelector('.main-nav a:nth-child(3)').textContent = currentLang === 'zh' ? '管理' : 'Admin';
      document.getElementById('searchInput').placeholder = currentLang === 'zh' ? '搜索游戏...' : 'Search games...';
      document.getElementById('searchButton').textContent = currentLang === 'zh' ? '搜索' : 'Search';
      document.querySelector('.categories-section .section-title').textContent = currentLang === 'zh' ? '游戏分类' : 'Categories';
      document.querySelector('.recent-games-section .section-title').textContent = currentLang === 'zh' ? '热门游戏' : 'Popular Games';
      document.querySelector('#allGamesSection .section-title').textContent = currentLang === 'zh' ? '所有游戏' : 'All Games';
    }
    
    /**
     * 更新语言切换按钮
     */
    function updateLanguageButton() {
      const toggleButton = document.getElementById('toggleLang');
      toggleButton.textContent = currentLang === 'zh' ? 'English' : '中文';
    }
    
    /**
     * 切换语言
     */
    function toggleLanguage() {
      console.log("切换语言");
      currentLang = currentLang === 'zh' ? 'en' : 'zh';
      localStorage.setItem('locale', currentLang);
      
      updateLanguageButton();
      updatePageTitle();
      updateCategories();
      updateRecentGames();
      updateAllGames();
    }
    
    /**
     * 加载收藏夹数据
     */
    function loadFavorites() {
      console.log("加载收藏夹数据");
      const favoritesData = localStorage.getItem('favorites');
      if (favoritesData) {
        try {
          favorites = JSON.parse(favoritesData);
        } catch (e) {
          console.error("解析收藏夹数据失败:", e);
          favorites = [];
        }
      }
    }
    
    /**
     * 添加或移除收藏
     */
    function toggleFavorite(gameId) {
      console.log("切换收藏状态:", gameId);
      const index = favorites.indexOf(gameId);
      
      if (index === -1) {
        // 添加到收藏
        favorites.push(gameId);
      } else {
        // 从收藏中移除
        favorites.splice(index, 1);
      }
      
      // 保存到本地存储
      localStorage.setItem('favorites', JSON.stringify(favorites));
      
      // 更新UI
      updateAllGames();
      updateRecentGames();
    }
    
    /**
     * 更新分类显示
     */
    function updateCategories() {
      console.log("更新分类显示");
      const container = document.getElementById('categoriesContainer');
      container.innerHTML = '';
      
      currentCategories.forEach(category => {
        const categoryElement = document.createElement('div');
        categoryElement.className = 'category-card';
        categoryElement.dataset.id = category.id;
        categoryElement.innerHTML = `
          <div class="category-icon">${category.icon || '🎮'}</div>
          <h3>${category.name[currentLang] || '未命名分类'}</h3>
          <p>${category.description[currentLang] || '暂无描述'}</p>
        `;
        
        // 添加点击事件
        categoryElement.addEventListener('click', () => {
          console.log("点击分类:", category.id);
          const gamesInCategory = currentGames.filter(game => 
            category.id === 'all' ? true : game.category === category.id
          );
          
          // 更新标题
          document.querySelector('#allGamesSection .section-title').textContent = 
            currentLang === 'zh' ? `${category.name[currentLang]}` : `${category.name[currentLang]}`;
          
          renderGames(document.getElementById('allGamesContainer'), gamesInCategory);
          
          // 滚动到游戏区域
          document.getElementById('allGamesSection').scrollIntoView({behavior: 'smooth'});
        });
        
        container.appendChild(categoryElement);
      });
    }
    
    /**
     * 更新热门游戏
     */
    function updateRecentGames() {
      console.log("更新热门游戏");
      // 按添加日期排序取最近6个
      const recentGames = [...currentGames]
        .sort((a, b) => new Date(b.dateAdded) - new Date(a.dateAdded))
        .slice(0, 4);
      
      renderGames(document.getElementById('recentGamesContainer'), recentGames);
    }
    
    /**
     * 更新所有游戏
     */
    function updateAllGames() {
      console.log("更新所有游戏");
      renderGames(document.getElementById('allGamesContainer'), currentGames);
    }
    
    /**
     * 渲染游戏卡片
     */
    function renderGames(container, games) {
      container.innerHTML = '';
      
      if (games.length === 0) {
        const emptyMessage = document.createElement('p');
        emptyMessage.className = 'empty-message';
        emptyMessage.textContent = currentLang === 'zh' ? '没有找到游戏' : 'No games found';
        container.appendChild(emptyMessage);
        return;
      }
      
      games.forEach(game => {
        const gameCard = document.createElement('div');
        gameCard.className = 'game-card';
        gameCard.dataset.id = game.id;
        
        const isFavorite = favorites.includes(game.id);
        
        gameCard.innerHTML = `
          <div class="game-thumbnail">
            <img src="${game.thumbnail}" alt="${game.title[currentLang]}" onerror="this.src='/images/placeholder.jpg'">
          </div>
          <div class="game-info">
            <h3>${game.title[currentLang]}</h3>
            <p>${game.description[currentLang]}</p>
            <div class="game-actions">
              <button class="play-button">${currentLang === 'zh' ? '玩游戏' : 'Play'}</button>
              <button class="favorite-button ${isFavorite ? 'favorited' : ''}">
                ${isFavorite ? '❤️' : '🤍'}
              </button>
            </div>
          </div>
        `;
        
        // 添加游戏卡片点击事件
        gameCard.querySelector('.play-button').addEventListener('click', () => {
          console.log("点击游戏:", game.id);
          window.open(`/game/index.html?id=${game.id}`, '_blank');
        });
        
        // 添加收藏按钮点击事件
        gameCard.querySelector('.favorite-button').addEventListener('click', (e) => {
          e.stopPropagation();
          toggleFavorite(game.id);
          
          // 更新按钮外观
          const button = e.target;
          const isNowFavorite = favorites.includes(game.id);
          button.textContent = isNowFavorite ? '❤️' : '🤍';
          button.classList.toggle('favorited', isNowFavorite);
        });
        
        container.appendChild(gameCard);
      });
    }
    
    /**
     * 处理搜索功能
     */
    function handleSearch() {
      console.log("执行搜索");
      const searchTerm = document.getElementById('searchInput').value.trim().toLowerCase();
      
      if (!searchTerm) {
        updateAllGames();
        return;
      }
      
      // 在标题和描述中搜索
      const filteredGames = currentGames.filter(game => {
        const titleMatch = game.title[currentLang].toLowerCase().includes(searchTerm);
        const descMatch = game.description[currentLang].toLowerCase().includes(searchTerm);
        return titleMatch || descMatch;
      });
      
      // 更新游戏显示
      document.querySelector('#allGamesSection .section-title').textContent = 
        currentLang === 'zh' ? `搜索结果: ${searchTerm}` : `Search Results: ${searchTerm}`;
      
      renderGames(document.getElementById('allGamesContainer'), filteredGames);
      
      // 滚动到游戏区域
      document.getElementById('allGamesSection').scrollIntoView({behavior: 'smooth'});
    }
    
    /**
     * 显示错误提示
     */
    function showError(message) {
      console.error("显示错误:", message);
      const errorContainer = document.getElementById('errorContainer');
      const errorMessage = document.getElementById('errorMessage');
      
      errorMessage.textContent = currentLang === 'zh' ? 
        `加载失败: ${message}` : `Loading Failed: ${message}`;
      
      errorContainer.style.display = 'flex';
    }
  </script>
</body>
</html>