<script setup>
import navBar from '@/components/navBar.vue';
import { ref, computed } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import { useGameStore } from '@/stores/game';

const gameStore = useGameStore();

const ASSETS = Object.freeze({
  bg: '/static/second/bg.webp',
  info1: '/static/second/info1.webp',
  info2: '/static/second/info2.webp', 
  info3: '/static/second/info3.webp',
  info4: '/static/second/info4.webp',
  info: '/static/second/info.webp',
  title: '/static/second/title.webp',
  jdt1: '/static/second/jdt1.webp',
  jdt2: '/static/second/jdt2.webp',
  jdt3: '/static/second/jdt3.webp',
  jdt4: '/static/second/jdt4.webp',
  next: '/static/second/next.webp',
});

const INFO_MAP = [ASSETS.info1, ASSETS.info2, ASSETS.info3, ASSETS.info4];
const JDT_MAP = [ASSETS.jdt1, ASSETS.jdt2, ASSETS.jdt3, ASSETS.jdt4];

const currentStep = computed(() => {
  const parts = gameStore.levels.second.parts;
  if (parts.part4) return 4; // 全部完成
  if (parts.part3) return 3;
  if (parts.part2) return 2;
  if (parts.part1) return 1;
  return 0;
});

const currentInfo = computed(() => {
  const step = currentStep.value >= 4 ? 3 : currentStep.value;
  return INFO_MAP[step] || ASSETS.info1;
});

const currentJdt = computed(() => {
  const step = currentStep.value >= 4 ? 3 : currentStep.value;
  return JDT_MAP[step] || ASSETS.jdt1;
});

const handleNext = () => {
  const step = currentStep.value;
  if (step >= 4) {
    // 如果已经全部完成，跳转到第三关
    uni.navigateTo({ url: '/pages/third/index' });
    return;
  }
  
  const urlMap = {
    0: '/pages/second/part1',
    1: '/pages/second/part2',
    2: '/pages/second/part3',
    3: '/pages/second/part4/index',
  };
  const url = urlMap[step];
  uni.navigateTo({ url });
};
</script>

<template>
  <view class="container">
    <navBar />
    <!-- 主体内容 -->
    <view class="main-content">
      <!-- 背景 -->
      <image class="bg-img" :src="ASSETS.bg" mode="aspectFill" />

      <!-- 标题 -->
      <view class="title-area">
        <image class="title-img" :src="ASSETS.title" mode="widthFix" />
      </view>

      <!-- 右侧信息区域 -->
      <view class="info-area">
        <image class="info-img" :src="currentInfo" mode="scaleToFill" />
      </view>

      <!-- 底部区域 -->
      <view class="bottom-area">
        <image class="progress-bar" :src="currentJdt" mode="scaleToFill" />
        
        <view class="next-btn-wrapper" @click="handleNext">
          <image class="next-btn" :src="ASSETS.next" mode="scaleToFill" />
        </view>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.container {
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;
}

.main-content {
  width: 100%;
  height: 100%;
  position: relative;
}

.bg-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.title-area {
  position: absolute;
  top: 7vh;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  z-index: 10;

  .title-img {
    width: 240rpx;
    height: auto;
  }
}

.info-area {
  position: absolute;
  top: 48%;
  right: 22rpx;
  transform: translateY(-45%);
  z-index: 10;
  display: flex;
  justify-content: flex-end;

  .info-img {
    width: 440rpx;
    height: 780rpx;
  }
}

.bottom-area {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 180rpx;
  padding: 40rpx;
  padding-bottom: calc(40rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(40rpx + env(safe-area-inset-bottom));
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 20;
  background: linear-gradient(180deg, #73D8FF 0%, #3498F4 100%);
  border-radius: 40rpx 40rpx 0 0;
  border-top: 4rpx solid #CCECFD;

  .progress-bar {
    position: absolute;
    left: 40rpx;
    top: 50%;
    transform: translateY(-50%);
    width: 428rpx;
    height: 56rpx;
  }

  .next-btn-wrapper {
    position: absolute;
    right: 30rpx;
    top: 50%;
    transform: translateY(-50%);
    width: 230rpx;
    height: 72px;
    transition: transform 0.2s ease;
    align-self: auto;
    margin: 0;

    .next-btn {
      width: 100%;
      height: 100%;
    }
  }
}

@media screen and (min-width: 768px) {
  .title-area {
    top: 10vh;
    .title-img {
      width: 20vw;
    }
  }

  .info-area {
    right: 10vw;
    .info-img {
      width: 440rpx;
      height: 740rpx;
    }
  }

  .bottom-area {
    bottom: 10vh;
    
    .progress-bar {
      width: 30vw;
    }

    .next-btn-wrapper {
      right: 10vw;
      .next-btn {
        width: 15vw;
      }
    }
  }
}
</style>