function setHeaderLength() {
  let headerBtn = document.querySelectorAll(".head-btn");
  let headerLength = headerBtn.length;
  localStorage.setItem("headerLength", headerLength);
}
setHeaderLength();

function updateUI(massage_service_started) {
  var icon = document.getElementById("status-icon");
  var text = document.getElementById("status-text");

  let lang = localStorage.getItem("selectedLanguage");
  // let lang = 'zh';

  if (massage_service_started) {
    icon.src = "static/images/common/connected.svg";
    let key = "topbar.connected";
    updateTranslation("#status-text", lang, key);
  } else {
    icon.src = "static/images/common/disconnected.svg";
    let key = "topbar.disconnected";
    updateTranslation("#status-text", lang, key);
  }
}

async function switchMode(mode) {
  const status = await getStatus();
  if (status.is_massaging && status.is_massaging == true) {
    let massagingText = await getPopupText("massagingText");
    showPopup(massagingText);
    return;
  } else {
    window.location.href = `/switch_mode/${mode}`;
  }
}

socket.on("connect", function () {
  console.log("Connected to server!");
});

// socket.on("message", function (msg) {
//   const oldMessage = document.getElementById("messageBox");
//   const newMessage = oldMessage.cloneNode(false); // Clone the current message box without child nodes
//   newMessage.innerText = msg; // Set new text
//   newMessage.classList.add("slide-in"); // Add sliding animation
//   oldMessage.parentNode.replaceChild(newMessage, oldMessage); // Replace old message with new one

//   // Optionally, remove the animation class after the animation ends
//   newMessage.addEventListener("animationend", () => {
//     newMessage.classList.remove("slide-in");
//   });

//   let key;
//   switch (msg) {
//     case "小悠师傅 开始按摩":
//       key = "smart_mode.msg";
//       break;
//     case "小悠小悠 今天天气怎么样":
//       key = "smart_mode.msg2";
//       break;
//     case "小悠小悠 今天有什么新闻":
//       key = "smart_mode.msg3";
//       break;
//     case "使用“小悠师傅” 或 “小悠小悠”唤醒我...":
//       key = "smart_mode.msg4";
//       break;
//     default:
//       break;
//   }
//   updateTranslation("#messageBox", lang, key);
// });

const imgContent = document.getElementById("img-content-frame");
const iframeContainer = document.getElementById("iframe-container");

// 根据配置显示/隐藏按摩头
function updateVisibleHeads() {
  fetch('/get_massage_heads')
      .then(response => response.json())
      .then(data => {
          if (data.status === 'success') {
              const headButtons = document.querySelectorAll('.head-btn');
              const headOrder = [
                  'thermotherapy', 'shockwave', 'ball', 
                  'finger', 'roller', 'stone', 'ion', 'heat', 'spheres'
              ];
              
              headButtons.forEach((button, index) => {
                  const headId = headOrder[index];
                  if (headId && data.data[headId] && data.data[headId].display) {
                      button.style.display = 'flex';
                  } else {
                      button.style.display = 'none';
                  }
              });

              getHeadSelectIndex();
          }
      })
      .catch(error => {
          console.error('获取按摩头配置失败:', error);
          // 失败时显示所有按摩头
          document.querySelectorAll('.head-btn').forEach(button => {
              button.style.display = 'flex';
          });
      });
}

document.addEventListener("DOMContentLoaded", function () {
  const options = document.querySelectorAll(".toggle-option");
  const sliderToggle = document.querySelector(".slider-toggle");
  const iframeWebContent = document.getElementById("web-content-frame");

  let activeIndex = 0; // 默认激活状态
  let contentList = [imgContent, iframeContainer, iframeWebContent];
  // let contentList = [imgContent, iframeContainer];

  options.forEach((option, index) => {
    option.addEventListener("click", function () {
      if (index !== activeIndex) {
        sliderToggle.style.left = option.offsetLeft + "px";
        setTimeout(() => {
          sliderToggle.style.width = `${options[activeIndex].clientWidth}px`;
        }, 100); // 等待浏览器渲染完成

        // 隐藏当前显示的元素并显示新的元素
        contentList[activeIndex].classList.remove("active");
        contentList[activeIndex].classList.add("inactive");

        contentList[index].classList.remove("inactive");
        contentList[index].classList.add("active");

        // 更新功能按钮的激活状态
        options.forEach((opt) => opt.classList.remove("active"));
        option.classList.add("active");

        activeIndex = index;
      }
    });
  });

  updateVisibleHeads();

  // 切换按摩头功能;

  const headsBtn = document.querySelectorAll(".head-btn");
  headsBtn.forEach((btn, index) => {
    btn.addEventListener("click", function () {
      let headChangeFlag = JSON.parse(localStorage.getItem("headChangeFlag"));
      if (!headChangeFlag) {
        showPopup(
          "按摩进行中无法切换",
          (buttons = { confirm: true, cancel: false })
        );
        return;
      } else {
        // 验证index的值
        let headSelectIndex = localStorage.getItem("headSelectIndex") || 0;
        if (index != headSelectIndex) {
          btn.classList.add("active");
          localStorage.setItem("headSelectIndex", index);
          headsBtn[headSelectIndex].classList.remove("active");
          btn.querySelector(".btn-text").style.display = "block";
          headsBtn[headSelectIndex].querySelector(".btn-text").style.display =
            "none";
        }
      }
    });
  });

});

function getBodyPart() {
  return localStorage.getItem("bodyPart") || "back";
}

/**
 * 检查指定按摩头是否可见
 * @param {number} headIndex - 按摩头索引
 * @returns {boolean}
 */
function isHeadVisible(headIndex) {
  console.log("isHeadVisible", headIndex);
  const headButtons = document.querySelectorAll('.head-btn');
  return headIndex >= 0 && 
         headIndex < headButtons.length && 
         headButtons[headIndex].style.display !== 'none';
}

/**
* 获取第一个可见按摩头的索引
* @returns {number}
*/
function getFirstVisibleHeadIndex() {
  const headButtons = document.querySelectorAll('.head-btn');
  for (let i = 0; i < headButtons.length; i++) {
      if (headButtons[i].style.display !== 'none') {
        console.log(i, "getFirstVisibleHeadIndex")
        return i;
      }
  }
  return 0; // 默认返回0，即使所有都隐藏
}

/**
 * 获取当前选中的按摩头索引（确保是可见的）
 * @returns {number} 有效的按摩头索引
 */
// 检查当前选择的按摩头是否可见
function getHeadSelectIndex() {
  let visibleIndex;
  const headerLength = parseInt(localStorage.getItem("headerLength")) || 0;
  let headSelectIndex = parseInt(localStorage.getItem("headSelectIndex")) || 0;
  
  console.log(headSelectIndex, 'headSelectIndex');
  console.log(!isHeadVisible(headSelectIndex), 'isHeadVisible');
  console.log(headSelectIndex >= headerLength, 'headSelectIndex >= headerLength');

  // 检查当前选择的按摩头是否可见
  if (!isHeadVisible(headSelectIndex) || headSelectIndex >= headerLength)  {
      // 如果不可见，找到第一个可见的按摩头
      visibleIndex = getFirstVisibleHeadIndex();
      localStorage.setItem("headSelectIndex", visibleIndex);
      // return visibleIndex;
  } else {
    visibleIndex = headSelectIndex;
  }

  const headsBtn = document.querySelectorAll(".head-btn");
  headsBtn[visibleIndex].classList.add("active");
  headsBtn[visibleIndex].querySelector(
    ".btn-text"
  ).style.display = "block";
  localStorage.setItem("headSelectIndex", visibleIndex);
}

var is3D = false; // 默认是2D
var button = document.getElementById("toggle3D");
var toggleIcon = document.getElementById("toggle3D-icon");
// var iframeContainer = document.getElementById("iframe-container");
var threeDModel = document.getElementById("three-d-model");
var img2dImage = document.getElementById("img2d-image");

// 监听 'change_image' 事件并更新图片的 src
socket.on("change_image", function (data) {
  let newPath;
  if (data.path === "static/images/smart_mode/back.png") {
    let partVal = getBodyPart();
    newPath = (partVal === 'belly' || partVal === 'leg') ? `static/images/smart_mode/${partVal}.png` : `static/images/smart_mode/back.png`;
  } else {
    newPath = data.path;
  }
  imgContent.src = newPath;
  getBodyPart() == "belly"
    ? (img2dImage.src = "static/images/smart_mode/穴位2.png")
    : (img2dImage.src = "static/images/smart_mode/穴位.png");
});

button.onclick = function () {
  if (is3D) {
    // 切换回2D，移除iframe，显示静态图片，并将按钮图标换回2D
    // var iframe = iframeContainer.querySelector("iframe");
    // if (iframe) {
    //   iframeContainer.removeChild(iframe);
    // }
    img2dImage.style.display = "block";
    threeDModel.style.display = "none";
    toggleIcon.src = "static/images/smart_mode/2d.svg"; // 切换回2D图标
    toggleIcon.alt = "2D";
    is3D = false;
  } else {
    // 切换到3D，加载iframe，隐藏静态图片，并将按钮图标换成3D
    img2dImage.style.display = "none";
    threeDModel.style.display = "block";
    toggleIcon.src = "static/images/smart_mode/3d.svg"; // 切换为3D图标
    toggleIcon.alt = "3D";
    is3D = true;
    // var iframe = document.createElement("iframe");
    // iframe.src = "/model";
    // iframe.frameBorder = "0";
    // iframe.loading = "lazy";
    // 当 iframe 加载完成后，隐藏2D图像
    // iframe.onload = function () {
    //   img2dImage.style.display = "none";
    // };

    // iframeContainer.appendChild(iframe); // 添加 iframe 到容器
  }
};

window.addEventListener("storage", function (event) {
  if (event.key === "bodyPart") {
    // if (event.newValue !== "belly") {
    //   imgContent.src = event.newValue !== 'leg' ? "static/images/smart_mode/back.png" : `static/images/smart_mode/leg.png`; // 显示图片
    //   img2dImage.src = "static/images/smart_mode/穴位.png"; // 隐藏2D图像
    // } else {
    //   imgContent.src = "static/images/smart_mode/belly.png"; // 显示图片
    //   img2dImage.src = "static/images/smart_mode/穴位2.png"; // 隐藏2D图像
    // }
    switch (event.newValue) {
      case event.newValue === "belly":
        imgContent.src = `static/images/smart_mode/${event.newValue}.png`; // 显示图片
        img2dImage.src = "static/images/smart_mode/穴位2.png"
        break;
      case event.newValue === "leg":
        imgContent.src = `static/images/smart_mode/${event.newValue}.png`; // 显示图片
        img2dImage.src = "static/images/smart_mode/穴位.png"; // 隐藏2D图像
        break;
      default:
        imgContent.src = "static/images/smart_mode/back.png"; // 显示图片
        img2dImage.src = "static/images/smart_mode/穴位.png"; // 隐藏2D图像
    }
  }
  if (event.key === "headSelectIndex") {
    if (event.oldValue === event.newValue) {
      return;
    } else {
      let oldValue = parseInt(event.oldValue);
      let newValue = parseInt(event.newValue);

      headsBtn[newValue].classList.add("active");
      headsBtn[oldValue].classList.remove("active");
      headsBtn[newValue].querySelector(".btn-text").style.display = "block";
      headsBtn[oldValue].querySelector(".btn-text").style.display = "none";
    }
  }
});

async function getStatus() {
  try {
    const response = await fetch("/get_status");
    if (!response.ok) {
      throw new Error("Network response was not ok");
    }
    const data = await response.json();
    console.log("Status data:", data);
    return data; // 直接返回字典数据
  } catch (error) {
    console.error("There was a problem with the fetch operation:", error);
    return null;
  }
}