<template>
  <view class="page">
    <view class="bg-decoration"></view>

    <!-- Tab 切换 -->
    <view class="tab-bar glass-card">
      <view
        class="tab-item"
        :class="{ active: gameType === 'minesweeper' }"
        @tap="switchTab('minesweeper')"
      >
        <text class="tab-text">付费模式</text>
      </view>
      <view
        class="tab-item"
        :class="{ active: gameType === 'minesweeper_free' }"
        @tap="switchTab('minesweeper_free')"
      >
        <text class="tab-text">免费模式</text>
      </view>
    </view>

    <!-- 我的排名 -->
    <view class="my-card glass-card" v-if="myRank">
      <view class="my-left">
        <text class="my-label">我的排名</text>
        <text class="my-rank">{{ myRank.rank ? `#${myRank.rank}` : '未上榜' }}</text>
      </view>
      <view class="my-divider"></view>
      <view class="my-stats">
        <view class="stat-col">
          <text class="stat-val">{{ myRank.wins || 0 }}</text>
          <text class="stat-key">胜场</text>
        </view>
        <view class="stat-col">
          <text class="stat-val">{{ myRank.matches_played || 0 }}</text>
          <text class="stat-key">总场次</text>
        </view>
        <view class="stat-col">
          <text class="stat-val">{{ formatWinRate(myRank.win_rate) }}</text>
          <text class="stat-key">胜率</text>
        </view>
      </view>
      <view class="my-divider"></view>
      <view class="my-right">
        <text class="my-pts">{{ myRank.total_rank_points || 0 }}</text>
        <text class="my-pts-label">积分</text>
      </view>
    </view>

    <!-- 榜单 -->
    <scroll-view scroll-y class="list-wrap" @scrolltolower="loadMore">

      <view v-if="loading && list.length === 0" class="state-box">
        <text class="state-icon">⏳</text>
        <text class="state-text">加载中...</text>
      </view>

      <view v-else-if="!loading && list.length === 0" class="state-box">
        <text class="state-icon">🏆</text>
        <text class="state-text">暂无数据，快来挑战吧！</text>
      </view>

      <view v-else class="list">
        <view
          v-for="item in list"
          :key="item.user_id"
          class="rank-row glass-card"
          :class="{ 'is-me': item.user_id === myUserId }"
        >
          <view class="rank-badge">
            <text v-if="item.rank === 1" class="medal">🥇</text>
            <text v-else-if="item.rank === 2" class="medal">🥈</text>
            <text v-else-if="item.rank === 3" class="medal">🥉</text>
            <text v-else class="rank-no">{{ item.rank }}</text>
          </view>

          <image class="avatar" :src="item.avatar || fallback" mode="aspectFill" />

          <view class="item-info">
            <view class="name-row">
              <text class="item-name">{{ item.nickname || '匿名玩家' }}</text>
              <text v-if="item.user_id === myUserId" class="me-tag">我</text>
            </view>
            <text class="item-sub">{{ item.wins }}胜 · {{ item.matches_played }}场 · {{ formatWinRate(item.win_rate) }}胜率</text>
          </view>

          <view class="pts-box">
            <text class="pts-val">{{ item.total_rank_points }}</text>
            <text class="pts-unit">分</text>
          </view>
        </view>

        <view v-if="loadingMore" class="footer-tip"><text class="footer-txt">加载中...</text></view>
        <view v-if="!hasMore && list.length > 0" class="footer-tip"><text class="footer-txt">— 已显示全部 —</text></view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import { authRequest } from '../../../utils/request.js'

export default {
  data() {
    return {
      gameType: 'minesweeper',
      list: [],
      myRank: null,
      myUserId: null,
      total: 0,
      page: 1,
      pageSize: 20,
      loading: false,
      loadingMore: false,
      hasMore: true,
      fallback: 'https://via.placeholder.com/80/FF6B00/FFFFFF?text=U',
    }
  },
  onLoad() {
    const info = uni.getStorageSync('user_info') || {}
    this.myUserId = info.id || info.user_id || null
    this.fetchList(true)
  },
  methods: {
    switchTab(type) {
      if (this.gameType === type) return
      this.gameType = type
      this.fetchList(true)
    },
    async fetchList(reset = false) {
      if (reset) {
        this.list = []
        this.page = 1
        this.hasMore = true
        this.myRank = null
        this.loading = true
      } else {
        if (!this.hasMore || this.loadingMore) return
        this.loadingMore = true
      }
      try {
        const res = await authRequest({
          url: '/api/app/games/leaderboard',
          method: 'GET',
          data: { game_type: this.gameType, page: this.page, page_size: this.pageSize },
        })
        const items = res.list || []
        this.list = reset ? items : [...this.list, ...items]
        this.total = res.total || 0
        this.myRank = res.me || null
        this.hasMore = this.list.length < this.total
        if (this.hasMore) this.page++
      } catch {
        uni.showToast({ title: '加载失败，请重试', icon: 'none' })
      } finally {
        this.loading = false
        this.loadingMore = false
      }
    },
    loadMore() { this.fetchList(false) },
    formatWinRate(rate) {
      if (rate == null) return '0%'
      return `${(rate * 100).toFixed(1)}%`
    },
  },
}
</script>

<style lang="scss" scoped>
@import '@/uni.scss';

.page {
  min-height: 100vh;
  background: $bg-page;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

/* Tab */
.tab-bar {
  position: relative;
  z-index: 10;
  display: flex;
  margin: 24rpx 32rpx 20rpx;
  padding: 8rpx;
  border-radius: $radius-round;
}

.tab-item {
  flex: 1;
  height: 72rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: $radius-round;
  transition: all $transition-normal $ease-out;

  &.active {
    background: $gradient-brand;
    box-shadow: $shadow-warm;
    .tab-text { color: #fff; font-weight: 700; }
  }
}

.tab-text {
  font-size: $font-md;
  color: $text-sub;
  font-weight: 600;
}

/* 我的排名 */
.my-card {
  position: relative;
  z-index: 5;
  margin: 0 32rpx 24rpx;
  padding: 28rpx 24rpx;
  display: flex;
  align-items: center;
  gap: 0;
}

.my-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 100rpx;
}

.my-label {
  font-size: $font-xs;
  color: $text-sub;
  margin-bottom: 8rpx;
}

.my-rank {
  font-size: 38rpx;
  font-weight: 900;
  color: $brand-primary;
}

.my-divider {
  width: 1px;
  height: 60rpx;
  background: $border-color-light;
  margin: 0 20rpx;
}

.my-stats {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.stat-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4rpx;
}

.stat-val {
  font-size: 30rpx;
  font-weight: 800;
  color: $text-main;
}

.stat-key {
  font-size: $font-xs;
  color: $text-sub;
}

.my-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 80rpx;
}

.my-pts {
  font-size: 38rpx;
  font-weight: 900;
  color: $brand-primary;
  line-height: 1;
}

.my-pts-label {
  font-size: $font-xs;
  color: $text-sub;
  margin-top: 6rpx;
}

/* 列表 */
.list-wrap {
  flex: 1;
  padding: 0 32rpx;
}

.state-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 120rpx 0;
  gap: 20rpx;
}

.state-icon { font-size: 80rpx; }
.state-text { font-size: $font-md; color: $text-sub; }

.list {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
  padding-bottom: calc(40rpx + env(safe-area-inset-bottom));
}

.rank-row {
  display: flex;
  align-items: center;
  padding: 20rpx 24rpx;
  gap: 20rpx;

  &.is-me {
    border: 2rpx solid rgba($brand-primary, 0.4);
    background: linear-gradient(135deg, rgba($brand-primary, 0.06) 0%, $bg-glass 100%);
  }
}

.rank-badge {
  width: 52rpx;
  height: 52rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.medal { font-size: 44rpx; }

.rank-no {
  font-size: $font-md;
  font-weight: 800;
  color: $text-sub;
}

.avatar {
  width: 88rpx;
  height: 88rpx;
  border-radius: 50%;
  background: $bg-secondary;
  flex-shrink: 0;
  border: 2rpx solid $border-color-light;
}

.item-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.name-row {
  display: flex;
  align-items: center;
  gap: 12rpx;
}

.item-name {
  font-size: $font-lg;
  font-weight: 700;
  color: $text-main;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 220rpx;
}

.me-tag {
  font-size: $font-xs;
  font-weight: 700;
  color: #fff;
  background: $gradient-brand;
  padding: 2rpx 14rpx;
  border-radius: $radius-round;
  flex-shrink: 0;
}

.item-sub {
  font-size: $font-sm;
  color: $text-sub;
}

.pts-box {
  display: flex;
  align-items: baseline;
  gap: 4rpx;
  flex-shrink: 0;
}

.pts-val {
  font-size: 36rpx;
  font-weight: 900;
  color: $brand-primary;
}

.pts-unit {
  font-size: $font-sm;
  color: $text-sub;
}

.footer-tip {
  padding: 32rpx 0;
  text-align: center;
}

.footer-txt {
  font-size: $font-sm;
  color: $text-tertiary;
}
</style>
