<script setup>
import { ref, onMounted, onBeforeUnmount } from "vue";
import { onShow, onHide } from "@dcloudio/uni-app";
import Container from "@/components/Container.vue";
import SButton from "@/components/SButton.vue";

import { aimRenewAPI, laserAimAPI, laserCloseAPI } from "@/apis";
import { MESSAGETYPES } from "@/constants";
// import audioManager from "@/audioManager";

const guides = [
  {
    title: "箭头面向靶子",
    src: "https://static.shelingxingqiu.com/attachment/2025-10-30/ddv9p5fk5wscg7hrfo.png",
  },
  {
    title: "摆出拉弓姿势",
    src: "https://static.shelingxingqiu.com/attachment/2025-10-30/ddv9p5fk5b7ljrhx3o.png",
  },
  {
    title: "调整瞄准器",
    src: "https://static.shelingxingqiu.com/attachment/2025-10-29/dduexjgrcxf9wjaiv4.png",
  },
];

const done = ref(true);
let aimRenewTimer = null;
let pageMounted = false;
let pageVisible = false;
let aimSessionVersion = 0;

const stopAimRenew = () => {
  if (!aimRenewTimer) return;
  clearInterval(aimRenewTimer);
  aimRenewTimer = null;
};

const startAimRenew = () => {
  stopAimRenew();
  aimRenewTimer = setInterval(() => {
    aimRenewAPI();
  }, 1000);
};

const openAimSession = async (sessionVersion) => {
  try {
    await laserAimAPI();
  } catch (error) {
    return;
  }

  if (
    !pageMounted ||
    !pageVisible ||
    sessionVersion !== aimSessionVersion
  ) {
    void laserCloseAPI().catch(() => {});
    return;
  }

  startAimRenew();
};

const stopAimSession = (closeLaser = true) => {
  const wasVisible = pageVisible;
  pageVisible = false;
  aimSessionVersion += 1;
  stopAimRenew();

  if (closeLaser && wasVisible) {
    void laserCloseAPI().catch(() => {});
  }
};

const onComplete = async () => {
  stopAimSession(false);
  await laserCloseAPI();
  uni.navigateBack();
};

function onReceiveMessage(messages = []) {
  messages.forEach((msg) => {
    if (msg.constructor === MESSAGETYPES.Calibration) {
      done.value = true;
      uni.setStorageSync("calibration", true);
      // audioManager.play("激光已校准");
    }
  });
}

onShow(() => {
  pageVisible = true;
  const sessionVersion = ++aimSessionVersion;
  if (pageMounted) void openAimSession(sessionVersion);
});

onHide(() => {
  stopAimSession();
});

onMounted(() => {
  uni.$on("socket-inbox", onReceiveMessage);
  pageMounted = true;
  if (pageVisible) void openAimSession(aimSessionVersion);
});

onBeforeUnmount(() => {
  pageMounted = false;
  stopAimSession();
  uni.$off("socket-inbox", onReceiveMessage);
});
</script>

<template>
  <Container title="校准智能弓">
    <view class="container">
      <view v-for="(guide, index) in guides" :key="guide.title" class="guide">
        <view>
          <text>{{ index + 1 }}</text>
          <text>{{ guide.title }}</text>
        </view>
        <image :src="guide.src" mode="widthFix" />
      </view>
      <text>请完成以上步骤校准智能弓</text>
      <SButton
        :onClick="onComplete"
        width="60vw"
        :rounded="40"
        :disabled="!done"
      >
        我已校准
      </SButton>
    </view>
  </Container>
</template>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.guide {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 26rpx;
  color: #ffffff;
  margin-bottom: 15rpx;
}
.guide > view {
  width: 100%;
  margin: 25rpx 0;
  display: flex;
  align-items: center;
}
.guide > view > text:first-child {
  font-size: 24rpx;
  background: #e89024;
  border-radius: 50%;
  width: 32rpx;
  height: 32rpx;
  line-height: 32rpx;
  display: block;
  text-align: center;
  margin-right: 15rpx;
}
.guide > image {
  width: 630rpx;
  height: 250rpx;
}
.container > text {
  font-size: 24rpx;
  color: #fff9;
  margin: 30rpx;
}
</style>
