// let lang = "zh";
// let lang;

function setSelectedLanguage() {
  // if (localStorage.getItem("selectedLanguage")) {
  //   lang = localStorage.getItem("selectedLanguage");
  // } else {
  //   // 判断系统语言
  //   let language = navigator.language || navigator.userLanguage;
  //   language = language.toLowerCase();
  //   if (language.includes("jp")) {
  //     lang = "jp";
  //   } else if (language.includes("en")) {
  //     lang = "en";
  //   } else if (language.includes("ko")) {
  //     lang = "ko";
  //   } else {
  //     lang = "zh";
  //   }
  // }
}


let weekdayList = {
  "zh": ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
  "en": ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
  "jp": ["日曜日", "月曜日", "火曜日", "水曜日", "木曜日", "金曜日", "土曜日"],
  "ko": ["일요일", "월요일", "화요일", "수요일", "목요일", "금요일", "토요일"],
}

// setSelectedLanguage();
updateDateTime(true);

function updateDateTime(flag, language) {
  const now = new Date();
  if (language) {
    lang = language
  }
  const weekday = weekdayList[lang][now.getDay()];

  const date = now.toLocaleDateString("zh-CN");
  const time = now.toLocaleTimeString("zh-CN", { hour12: false });

  if (time === "00:00:00" || flag) {
    // 如果是0点或者 flag 为 true，则更新日期和星期，否则只更新时间
    document.querySelector(".weekday").textContent = weekday;
    document.querySelector(".date").textContent = date;
  }

  document.querySelector(".time").textContent = time;
}
setInterval(updateDateTime, 1000);

// 连接到 Socket.IO
const socket = io();
let connectionInProgress = false; // 标记连接中状态
let connectionTimeout; // 定时器变量

// 网页加载时检查状态
document.addEventListener("DOMContentLoaded", function () {
  checkStatus(); // 网页加载时检查状态

  // 监听更新按摩状态的事件
  socket.on("update_massage_status", function (massage_status) {
    updateUI(massage_status.massage_service_started);
    clearTimeout(connectionTimeout); // 清除定时器
    if (massage_status.massage_service_started === true) {
      connectionInProgress = false; // 连接完成，重置状态
    } else {
      setTimeout(() => {
        connectionInProgress = false;
        updateUI(false);
      }, 5000); // 5 秒
    }
  });
});

function toggleConnection() {
  if (connectionInProgress) return; // 如果正在连接，直接返回

  var icon = document.getElementById("status-icon");
  var text = document.getElementById("status-text");

  fetch("/get_status") // 请求获取当前状态
    .then((response) => response.json())
    .then(async (data) => {
      if (!data.massage_service_started) {
        // 弹出确认提示，询问用户是否要启动服务
        let safeText = await getPopupText("safeText");
        showPopup(safeText).then(async (confirm) => {
          if (confirm) {
            // 如果用户确认，则继续连接操作
            let noticeText = await getPopupText("noticeText");
            showPopup(noticeText, {
              confirm: true,
              cancel: false,
            });
            icon.src = "static/images/common/connecting.svg"; // 显示连接中状态
            // text.innerText = "连接中";
            let key = "topbar.connecting";
            updateTranslation("#status-text", lang, key);
            connectionInProgress = true; // 设置连接中状态

            // 设置超时定时器
            connectionTimeout = setTimeout(async () => {
              // 超过 20 秒后恢复为未连接
              icon.src = "static/images/common/disconnected.svg";
              // text.innerText = "未连接";
              let key = "topbar.disconnected";
              updateTranslation("#status-text", lang, key);
              connectionInProgress = false; // 重置连接状态
              let timeoutText = await getPopupText("timeoutText");
              showPopup(timeoutText, {
                confirm: true,
                cancel: false,
              }); // 弹出连接超时提示
            }, 60000); // 60 秒

            // 发送请求以启动按摩服务
            sendMassageControl("start");
            // }
            // });
          }
        });
      } else {
        // 如果服务已经启动，提示用户是否断开连接
        let disconnectText = await getPopupText("disconnectText");
        showPopup(disconnectText, {
          confirm: true,
          cancel: true,
        }).then((confirm) => {
          if (confirm) {
            // 如果用户确认，则断开连接
            icon.src = "static/images/common/connecting.svg";
            text.innerText = "处理中";
            let key = "topbar.processing";
            updateTranslation("#status-text", lang, key);
            connectionInProgress = true; // 设置连接中状态
            sendMassageControl("stop");
            // setTimeout(() => {
            //   fetch("/get_status") // 请求获取当前状态
            //   .then((response) => response.json())
            //   .then((data) => {
            //     console.log(data, '断开获取状态');
            //   })
            //   .catch((error) => console.error("Error fetching status:", error));
            // }, 2000);
          }
        });
      }
    })
    .catch((error) => console.error("Error fetching status:", error));
}

async function shutdownSystem() {
  let shutdownText = await getPopupText("shutdownText");
  showPopup(shutdownText, { confirm: true, cancel: true }).then(
    async (confirm) => {
      if (confirm) {
        let shutingDownText = await getPopupText("shutingDownText");
        showPopup(shutingDownText, {
          confirm: false,
          cancel: false,
        });
        sendMassageControl("shutdown");
      }
    }
  );
}

function sendMassageControl(action) {
  fetch("/massage_control", {
    method: "POST",
    headers: {
      "Content-Type": "application/x-www-form-urlencoded",
    },
    body: new URLSearchParams({ action: action }),
  })
    .then((response) => response.json())
    .then((data) => {
      if (data.status === "success") {
        console.log(`${action} service successfully.`);
      } else {
        console.error("Error:", data.message);
      }
    })
    .catch((error) => console.error("Error sending control command:", error));
}

let massageServiceStarted = null;

function checkStatus() {
  fetch("/get_status") // 请求获取当前状态
    .then((response) => response.json())
    .then((data) => {
      massageServiceStarted = data.massage_service_started;
      updateUI(data.massage_service_started);
    })
    .catch((error) => console.error("Error fetching status:", error));
}

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

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

// 监听来自服务器的 on_message 事件
socket.on("on_message", function (data) {
  var message = data.message;
  showPopup(message, { confirm: true, cancel: false });
});

// 弹窗显示的Promise，用户点击后resolve结果
let popupResolve;

function showPopup(message, buttons = { confirm: true, cancel: true }) {
  // 设置弹窗的消息内容，使用 innerHTML 以支持换行
  document.getElementById("popup-message").innerHTML = message;

  // 控制按钮显示
  document.getElementById("confirm-btn").style.display = buttons.confirm
    ? "inline-block"
    : "none";
  document.getElementById("cancel-btn").style.display = buttons.cancel
    ? "inline-block"
    : "none";

  // 显示弹窗
  document.getElementById("popup-modal").style.display = "flex";

  // 返回Promise，等待用户选择
  return new Promise((resolve) => {
    popupResolve = resolve; // 保存 resolve 函数
  });
}

// 添加一个方法动态更新弹窗内容
function updatePopupMessage(newMessage, buttons = { confirm: true, cancel: true }) {
  const messageEl = document.getElementById("popup-message");
  if (messageEl) {
    messageEl.innerHTML = newMessage;
  }
  // 控制按钮显示
  document.getElementById("confirm-btn").style.display = buttons.confirm
    ? "inline-block"
    : "none";
  document.getElementById("cancel-btn").style.display = buttons.cancel
    ? "inline-block"
    : "none";
}

function confirmAction() {
  // 用户点击确认按钮，关闭弹窗并返回true
  document.getElementById("popup-modal").style.display = "none";
  popupResolve(true);
}

function cancelAction() {
  // 用户点击取消按钮，关闭弹窗并返回false
  document.getElementById("popup-modal").style.display = "none";
  popupResolve(false);
}