<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import navBar from '@/components/navBar.vue';
import success from '@/components/success.vue';
import Beaker from './components/beaker.vue';
import TabsInstructionsPanel from './components/TabsInstructionsPanel.vue';
import BottomActionBar from './components/BottomActionBar.vue';
import { useGameStore } from '@/stores/game';

const gameStore = useGameStore();
const showSuccess = ref(false);

const assets = {
  bg: 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/963079c98b914f349fe9ff5e600d0f65%E6%B0%B4%E8%B4%A8%E6%A3%80%E6%B5%8B%E7%AB%99_%E7%BA%AF%E8%83%8C%E6%99%AF%201.webp',
  title: 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/e9ddd6b498fe452b9254e86c04596df3Group%20348447251.webp',
  completionPopup: 'https://userone-oss-cdn.angelgroup.com.cn/static/2026-01-23/d204d71cf2a54b18a6404e6132618cd6%E5%AE%8C%E6%88%90%E5%BC%B9%E7%AA%97.webp'
};

const statusBarHeight = ref(20);
const isTesting = ref(false);
const isSecondTest = ref(false);
const isResultShown = ref(false);
const isProgressFinished = ref(false);
const triggerShowFinalCard = ref(false);
const showCompletion = ref(false);

onLoad(() => {
  const systemInfo = uni.getSystemInfoSync();
  statusBarHeight.value = systemInfo.statusBarHeight || 20;
});

const startTest = () => {
  isTesting.value = true;
  isProgressFinished.value = false;
  triggerShowFinalCard.value = false;
};

const handleResultShown = () => {
  isResultShown.value = true;
};

const handleProgressFinished = () => {
  isProgressFinished.value = true;
};

const handleShowFinalCard = () => {
  triggerShowFinalCard.value = true;
};

const restartTest = () => {
  isTesting.value = false;
  isResultShown.value = false;
  isProgressFinished.value = false;
  triggerShowFinalCard.value = false;
  isSecondTest.value = true;
};

const handleShowCompletion = () => {
  showCompletion.value = true;
};

const closeCompletion = () => {
  showCompletion.value = false;
  gameStore.setThirdLevelStatus(true);
  showSuccess.value = true;
};

const handleSuccessConfirm = () => {
  showSuccess.value = false;
  uni.reLaunch({ url: '/pages/start/index' });
};
</script>

<template>
  <view class="container">
    <navBar />
    <image class="bg" :src="assets.bg" mode="aspectFill" />

    <view class="header" :style="{ paddingTop: statusBarHeight + 'px' }">
      <image class="title" :src="assets.title" mode="heightFix" />
    </view>

    <Beaker :isTesting="isTesting" :isSecondTest="isSecondTest" />

    <view class="bottom-panel">
      <TabsInstructionsPanel
        :isTesting="isTesting"
        :isSecondTest="isSecondTest"
        :triggerShowFinalCard="triggerShowFinalCard"
        @resultShown="handleResultShown"
        @progressFinished="handleProgressFinished"
      />

      <BottomActionBar
        :isTesting="isTesting"
        :isSecondTest="isSecondTest"
        :isResultShown="isResultShown"
        :isProgressFinished="isProgressFinished"
        @startTest="startTest"
        @restartTest="restartTest"
        @showFinalCard="handleShowFinalCard"
        @showCompletionPopup="handleShowCompletion"
      />
    </view>

    <view class="completion-overlay" v-if="showCompletion" @click="closeCompletion">
      <image
        class="completion-img"
        :src="assets.completionPopup"
        mode="scaleToFill"
        @click.stop="closeCompletion"
      />
    </view>

    <success 
      :show="showSuccess" 
      :badge-index="3" 
      title="水质分析高手" 
      sub-title="已完成第三关卡" 
      @confirm="handleSuccessConfirm" 
      @close="showSuccess = false" 
    />
  </view>
</template>

<style lang="scss" scoped>
.container {
  width: 100vw;
  height: 100vh;
  position: relative;
  display: flex;
  flex-direction: column;
  color: #333;
  overflow: hidden;
  box-sizing: border-box;
}

.bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  object-fit: cover;
}

.header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 2vh;
  flex-shrink: 0;

  .title {
    height: 120rpx;
    width: 54rpx;
  }
}

.completion-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;

  .completion-img {
    width: 100%;
    height: 100%;
  }
}

.bottom-panel {
  width: 100%;
  height: 48vh;
  flex-shrink: 0;
  border-radius: 24rpx 24rpx 0 0;
  border-top: 4rpx solid #728FAF;
  background: linear-gradient(180deg, #E0EBF6 0%, #C3D3E4 100%);
  box-shadow: 0 10rpx 0 0 #FFF inset;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 3vh;
  box-sizing: border-box;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 10;
  padding-bottom: env(safe-area-inset-bottom);
}
</style>