<template>
  <view class="collection-matrix">
    <text class="section-title">藏品矩阵</text>

    <!-- TOP 5 -->
    <TopFiveAssets :items="topFive || []" />

    <!-- 等级分布 -->
    <LevelDistribution :items="levels" />

    <!-- 即将升级 + 最近升级 (双列) -->
    <view class="upgrades-two-col">
      <UpcomingUpgrades :items="upgrades?.upcoming || []" />
      <RecentUpgrades :items="upgrades?.recent || []" />
    </view>
  </view>
</template>

<script setup>
import TopFiveAssets from './TopFiveAssets.vue'
import LevelDistribution from './LevelDistribution.vue'
import UpcomingUpgrades from './UpcomingUpgrades.vue'
import RecentUpgrades from './RecentUpgrades.vue'

defineProps({
  topFive: { type: Array, default: () => [] },
  levels: { type: Array, default: () => [] },
  upgrades: { type: Object, default: () => ({ upcoming: [], recent: [] }) },
})
</script>

<style lang="scss" scoped>
.collection-matrix {
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
  border-radius: 22rpx;
  padding: 24rpx;
  margin: 24rpx 0;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.15);
}

.section-title {
  display: block;
  font-size: 36rpx;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 24rpx;
  text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
}

.upgrades-two-col {
  display: flex;
  gap: 12rpx;
  margin-top: 16rpx;

  > * {
    flex: 1;
  }
}
</style>
