// ==================== 标签切换功能 ====================
document.addEventListener("DOMContentLoaded", function () {
  const tabs = document.querySelectorAll(".nav-tab");
  const contents = document.querySelectorAll(".tab-content");
  tabs.forEach((tab) => {
    tab.addEventListener("click", function () {
      const tabId = this.getAttribute("data-tab");
      // 在切换之前，如果当前是足迹页且地图已存在，销毁旧地图实例 (ECharts 版本)
      const currentActiveTab = document.querySelector(".nav-tab.active");
      if (
        currentActiveTab &&
        currentActiveTab.getAttribute("data-tab") === "footprint" &&
        typeof MapFootprintModule !== "undefined"
      ) {
        MapFootprintModule.destroyMap(); // 销毁之前的 ECharts 实例
        console.log("切换标签前已销毁旧地图实例");
      }

      // 移除所有激活状态
      tabs.forEach((t) => t.classList.remove("active"));
      contents.forEach((c) => c.classList.remove("active"));
      // 添加当前激活状态
      this.classList.add("active");
      document.getElementById(`${tabId}-content`).classList.add("active");
    });
  });

  const websiteTab = document.querySelector('.nav-tab[data-tab="website"]');
  const websiteContent = document.getElementById("website-content");
  if (websiteTab && websiteContent) {
    websiteTab.addEventListener("click", function () {
      const hasRendered =
        websiteContent.querySelector(".category-links") !== null;
      if (!hasRendered) {
        const savedLang = localStorage.getItem(LANG_KEY) || "zh";
        renderWebsites(websitesData, translations, savedLang);
      }
    });
  } else {
    console.warn("未找到“我的网站”标签或内容区域。");
  }

  // 点击我的工具函数
  const toolsTab = document.querySelector('.nav-tab[data-tab="tools"]');
  const toolsContent = document.getElementById("tools-content");
  if (toolsTab && toolsContent) {
    toolsTab.addEventListener("click", function () {
      const hasRendered = toolsContent.querySelector(".tool-item") !== null;
      if (!hasRendered) {
        renderTools(toolsData);
      }
    });
  } else {
    console.warn("未找到“我的工具”标签或内容区域，将在页面加载时尝试渲染。");
    renderTools(toolsData);
  }
  // 点击常玩游戏函数
  const gamesTab = document.querySelector('.nav-tab[data-tab="games"]');
  const gamesContent = document.getElementById("games-content");
  if (gamesTab && gamesContent) {
    gamesTab.addEventListener("click", function () {
      const hasRendered = gamesContent.querySelector(".game-item") !== null;
      if (!hasRendered) {
        renderGames(gamesData);
      }
    });
  } else {
    console.warn("未找到“常玩游戏”标签或内容区域。");
    renderGames(gamesData);
  }

  // 点击足迹函数 (新增)
  const footprintTab = document.querySelector('.nav-tab[data-tab="footprint"]');
  const footprintContent = document.getElementById("footprint-content");
  if (footprintTab && footprintContent) {
    footprintTab.addEventListener("click", function () {
      // 如果 MapFootprintModule 已加载（即 map-footprint.js 已成功执行）
      if (typeof MapFootprintModule !== "undefined") {
        // 调用模块中的 renderMap 函数来渲染地图
        MapFootprintModule.renderMap(footprintContent);
      } else {
        // 如果模块未定义，说明 map-footprint.js 可能未加载或加载失败
        console.error(
          "MapFootprintModule 未定义，请确保 map-footprint.js 已正确加载且在 tabchange.js 之前。",
        );
        // 可以选择显示错误信息给用户
        footprintContent.innerHTML =
          '<p data-i18n="error_loading_map">加载地图失败，请刷新页面重试。</p>';
        // 如果需要更新国际化文本，可以在这里处理
        if (typeof translations !== "undefined") {
          const errorElement = footprintContent.querySelector(
            '[data-i18n="error_loading_map"]',
          );
          if (errorElement) {
            const savedLang = localStorage.getItem(LANG_KEY) || "zh";
            const translation = translations[savedLang]["error_loading_map"];
            if (translation) errorElement.textContent = translation;
          }
        }
      }
    });
  } else {
    console.warn("未找到“足迹”标签或内容区域。");
  }
});