<script setup>
import { ref, computed } from 'vue';
import { onShareAppMessage, onLoad } from '@dcloudio/uni-app';
import { useGameStore } from '@/stores/game';

const gameStore = useGameStore();

// 图片路径
const ASSETS = Object.freeze ({
  bg: '/static/start/bg.webp',
  title: '/static/start/title.webp',
  startBtn: '/static/start/start.webp',
  restartBtn: '/static/start/restart.webp',
  progress: '/static/start/yxjd.webp',
  progress1: '/static/start/yxjd1.webp',
  progress2: '/static/start/yxjd2.webp',
  progress3: '/static/start/yxjd3.webp',
  progress4: '/static/start/yxjd4.webp',
  finish: '/static/start/finish.webp',
  top: '/static/start/top.webp',
  bottom: '/static/start/bottom.webp',
  sidebarIcon: '/static/start/cbl.webp',
  sidebarMenu: '/static/start/all.webp',
  badge1: '/static/start/badge1.webp',
  badge2: '/static/start/badge2.webp',
  badge3: '/static/start/badge3.webp',
  badge4: '/static/start/badge4.webp',
  badge5: '/static/start/badge5.webp',
  finishBtn: '/static/start/finishBtn.webp',
});

// 根据 store 计算进度
const progressLevel = computed(() => {
  const { first, second, third, fourth } = gameStore.levels;

  if (fourth.completed) return 5;
  if (fourth.started) return 4;

  if (third.completed) return 4;
  if (third.started) return 3;

  if (second.completed) return 3;
  if (second.started) return 2;

  if (first.completed) return 2;
  if (first.started) return 1;

  return 0;
});

// 根据 store 计算获得的勋章数
const badgeLevel = computed(() => {
  const { first, second, third, fourth } = gameStore.levels;

  if (fourth.completed) return 5;
  if (third.completed) return 3;
  if (second.completed) return 2;
  if (first.completed) return 1;

  return 0;
});

const getProgressImage = () => {
  const level = Math.floor(progressLevel.value);
  switch (level) {
    case 0: return ASSETS.progress;
    case 1: return ASSETS.progress1;
    case 2: return ASSETS.progress2;
    case 3: return ASSETS.progress3;
    case 4: return ASSETS.progress4;
    case 5: return ASSETS.finish;
    default: return ASSETS.progress;
  }
};

const getBadgeImage = () => {
  const level = badgeLevel.value;
  switch (level) {
    case 1: return ASSETS.badge1;
    case 2: return ASSETS.badge2;
    case 3: return ASSETS.badge3;
    case 4: return ASSETS.badge4;
    case 5: return ASSETS.badge5;
    default: return;
  }
};

// 侧边栏状态
const isSidebarExpanded = ref(false);

const handleStart = () => {
  const { first, second, third, fourth } = gameStore.levels;

  if (!first.completed) {
    gameStore.setLevelStarted('first');
    uni.navigateTo({ url: '/pages/first/index' });
  } else if (!second.completed) {
    gameStore.setLevelStarted('second');
    uni.navigateTo({ url: '/pages/second/index' });
  } else if (!third.completed) {
    gameStore.setLevelStarted('third');
    uni.navigateTo({ url: '/pages/third/index' });
  } else if (!fourth.completed) {
    gameStore.setLevelStarted('fourth');
    // 跳转到第四关的起始页
    uni.navigateTo({ url: '/pages/fourth/index' });
  }
};

const handleRestart = () => {
  uni.showModal({
    title: '提示',
    content: '确定要重置所有进度吗？',
    success: (res) => {
      if (res.confirm) {
        gameStore.resetAllProgress();
        uni.showToast({
          title: '进度已重置',
          icon: 'success'
        });
      }
    }
  });
};

const navToBadgePage = () => {
  uni.navigateTo({
    url: `/pages/badge/index?badge=${badgeLevel.value}`
  });
};

const navToCouponPage = () => {
  uni.navigateTo({
    url: '/pages/coupon/index'
  });
};

const toggleSidebar = () => {
  isSidebarExpanded.value = !isSidebarExpanded.value;
};

const closeSidebar = () => {
  if (isSidebarExpanded.value) {
    isSidebarExpanded.value = false;
  }
};

// 分享配置
onShareAppMessage(() => {
  return {
    title: '滤芯排序游戏',
    path: '/pages/start/index',
  };
});
</script>

<template>
  <view class="start-container" @click="closeSidebar">
    <!-- 背景 -->
    <image class="bg-image" :src="ASSETS.bg" mode="scaleToFill" />
    
    <!-- 顶部用户信息 -->
    <view class="top-section">
      <view class="top-info">
        <view class="user-info">
          <view class="user-name">用户198xxxxx890</view>
          <view class="user-level">钻石会员</view>
        </view>
      </view>
      <view class="user-avatar">
        <image class="avatar" src="" mode="aspectFill" />
      </view>
      <view class="user-badge">
        <image class="badge" :src="getBadgeImage()" mode="aspectFill" />
      </view>
    </view>
    
    <!-- 主要内容 -->
    <view class="content-wrapper">
      <!-- 标题 -->
      <view class="title-box">
        <image class="title-img" :src="ASSETS.title" mode="widthFix" />
      </view>
      
      <!-- 游戏进度展示 -->
      <view class="progress-box">
        <image class="progress-img" :src="getProgressImage()" mode="widthFix" />
      </view>
      
      <!-- 按钮区域 -->
      <view class="btn-group">
        <view class="btn-item" @click="handleStart">
          <image class="btn-img start-btn" :src="progressLevel === 5 ? ASSETS.finishBtn : ASSETS.startBtn" mode="widthFix" />
        </view>
        
        <view class="btn-item" @click="handleRestart">
          <image class="btn-img restart-btn" :src="ASSETS.restartBtn" mode="widthFix" />
        </view>
      </view>
    </view>
    
    <!-- 侧边栏 -->
    <view class="sidebar-container" :class="{ expanded: isSidebarExpanded }">
      <view v-if="isSidebarExpanded" class="sidebar-custom-content">
        <view class="badge-nav-btn" @click.stop="navToBadgePage"></view>
        <view class="badge-nav-btn" @click.stop="navToCouponPage"></view>
        <button class="badge-nav-btn badge-nav-btn-third" open-type="share" @click.stop></button>
      </view>
      <view class="sidebar-wrapper" @click.stop="toggleSidebar">
        <image 
          v-if="!isSidebarExpanded" 
          class="sidebar-icon" 
          :src="ASSETS.sidebarIcon" 
          mode="heightFix" 
        />
        <image 
          v-else 
          class="sidebar-menu" 
          :src="ASSETS.sidebarMenu" 
          mode="heightFix" 
        />
      </view>
    </view>
    
    <image class="bottom-decoration" :src="ASSETS.bottom" mode="widthFix" />
  </view>
</template>

<style scoped lang="scss">
.start-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}

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

.top-section {
  position: relative;
  z-index: 1;
  width: 95%;
  padding-top: 180rpx;
  padding-left: 20rpx;
  padding-right: 20rpx;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  
  .top-info {
    width: 80%;
    height: 132rpx;
    background: linear-gradient(270deg, #1eaafe00 0%, #0298F3 100%);

    .user-info {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      padding-left: 80rpx;
      height: 100%;
      box-sizing: border-box;

      .user-name {
        margin-left: 8rpx;
        color: #ffffff;
        font-size: 32rpx;
        font-weight: 600;
      }

      .user-level {
        margin-top: 8rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 116rpx;
        height: 32rpx;
        border-radius: 72rpx;
        border: 1rpx solid #ffffff80;
        background: linear-gradient(180deg, #ACAEEE 0%, #c0c0ff80 100%);
        color: #0E015F;
        font-size: 20rpx;
      }
    }
  }

  .user-avatar {
    position: absolute;
    top: 57%;
    left: 24rpx;
    width: 132rpx;
    height: 132rpx;
    border-radius: 50%;
    border: 1.72rpx solid #4495E7;
    background: linear-gradient(180deg, #8DDAFF 0%, #4FA4E5 46.15%, #A1E1FF 100%);
    box-shadow: 0 3.42rpx 1.72px 0 #00000040;
    display: flex;
    justify-content: center;
    align-items: center;

    .avatar {
      width: 120rpx;
      height: 120rpx;
      border-radius: 50%;
      background: #D9D9D9;
      border: 1.72rpx solid #4495E7;
    }
  }

  .user-badge {
    position: absolute;
    top: 42%;
    right: 20rpx;
    width: 240rpx;
    height: 240rpx;

    .badge {
      width: 100%;
      height: 100%;
    }
  }
}

.bottom-decoration {
  position: absolute;
  bottom: 100rpx;
  left: 40rpx;
  width: 90%;
  z-index: 1;
}

.content-wrapper {
  position: relative;
  z-index: 2;
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 40rpx;
}

.title-box {
  .title-img {
    width: 500rpx;
    height: auto;
    animation: bounceIn 1s ease-out;
  }
}

.progress-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 95%;
  margin-top: -40rpx;
  position: relative;
  z-index: 5;
  
  .progress-img {
    width: 100%;
    height: auto;
  }
}

.btn-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30rpx;
  margin-top: -60rpx;
  position: relative;
  z-index: 10;
}

.btn-item {
  transition: transform 0.1s;
  
  &:active {
    transform: scale(0.95);
  }
  
  .btn-img {
    height: auto;
  }
  
  .start-btn {
    width: 380rpx;
  }
  
  .restart-btn {
    width: 300rpx;
  }
}

.sidebar-container {
  position: absolute;
  right: 0;
  top: 408rpx;
  z-index: 20;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  
  &.expanded {
    top: 408rpx;
  }
  
  .sidebar-wrapper {
    display: flex;
    justify-content: flex-end;
  }

  .sidebar-custom-content {
    position: absolute;
    top: 10rpx;
    z-index: 25;
    animation: fadeIn 0.5s ease-out;
    
    .badge-nav-btn {
      width: 170rpx;
      height: 90rpx;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .badge-nav-btn-third {
      width: 170rpx;
      height: 89rpx;
      position: absolute;
      top: 198rpx;
      right: 0;
      padding: 0;
      margin: 0;
      background: transparent;
      border: none;
      line-height: normal;

      &::after {
        border: none;
      }
    }
  }
  
  .sidebar-icon {
    width: auto;
    height: 700rpx;
  }
  
  .sidebar-menu {
    width: auto;
    height: 700rpx;
    animation: slideInRight 0.3s ease-out;
  }
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes bounceIn {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  60% {
    transform: scale(1.05);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}
</style>