<template>
  <view class="upcoming-upgrades">
    <text class="card-title">即将升级</text>
    <view v-if="!items || items.length === 0" class="empty-row">
      <text class="empty-text">暂无数据</text>
    </view>
    <view v-else class="upgrades-list">
      <view
        v-for="item in items"
        :key="item.asset_id"
        class="upgrade-row"
      >
        <view class="upgrade-thumb">
          <view class="thumb-circle" :style="{ background: 'linear-gradient(135deg, #FF6B6B 0%, #FFB199 100%)' }">
            <text class="thumb-letter">{{ item.asset_name[0] }}</text>
          </view>
        </view>
        <view class="upgrade-progress">
          <view class="progress-bar progress-cyan">
            <view class="progress-fill" :style="{ width: item.like_progress + '%' }"></view>
            <text class="progress-text">{{ item.like_progress }}%</text>
          </view>
          <view class="progress-bar progress-pink">
            <view class="progress-fill" :style="{ width: item.duration_progress + '%' }"></view>
            <text class="progress-text">{{ item.duration_progress }}%</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
defineProps({
  items: { type: Array, default: () => [] }, // UpcomingLevelUpItem[]
})
</script>

<style lang="scss" scoped>
.upcoming-upgrades {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 17rpx;
  padding: 20rpx;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.15);
}

.card-title {
  display: block;
  font-size: 28rpx;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 16rpx;
}

.upgrades-list {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.upgrade-row {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.upgrade-thumb {
  width: 64rpx;
  height: 64rpx;
  flex-shrink: 0;
}

.thumb-circle {
  width: 100%;
  height: 100%;
  border-radius: 12rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.2);
}

.thumb-letter {
  font-size: 24rpx;
  font-weight: 700;
  color: #ffffff;
}

.upgrade-progress {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6rpx;
}

.progress-bar {
  position: relative;
  height: 16rpx;
  border-radius: 6rpx;
  background: rgba(217, 217, 217, 0.2);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: 6rpx;
  transition: width 0.3s ease;
}

.progress-cyan .progress-fill {
  background: linear-gradient(90deg, #5EDFFF 0%, #FFC8C8 100%);
}

.progress-pink .progress-fill {
  background: linear-gradient(90deg, #FFF375 0%, #FF6B84 100%);
}

.progress-text {
  position: absolute;
  right: 6rpx;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16rpx;
  font-weight: 700;
  color: #ffffff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}

.empty-row {
  height: 120rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.empty-text {
  color: rgba(255, 255, 255, 0.5);
  font-size: 24rpx;
}
</style>
