<template>
  <scroll-view scroll-y :class="['page-scroll', elderClass]">
    <view class="page-content">
      <!-- 积分概览 -->
      <view class="points-card card">
        <text class="points-label">我的积分</text>
        <text class="points-value">{{ points }}</text>
        <view class="checkin-btn" @tap="doCheckin">
          {{ checkinDone ? '已签到' : '每日签到' }}
        </view>
      </view>

      <!-- 商品列表 -->
      <text class="section-title">兑换商品</text>
      <Loading v-if="loading" text="加载中..." />
      <EmptyState v-else-if="products.length === 0" icon="🎁" title="暂无可兑换商品" />
      <view v-else class="product-grid">
        <view v-for="item in products" :key="item.id" class="product-card">
          <text class="product-name">{{ item.name }}</text>
          <text class="product-points">{{ item.points }} 积分</text>
        </view>
      </view>
    </view>
  </scroll-view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { api } from '@/services/request'
import Loading from '@/components/Loading.vue'
import EmptyState from '@/components/EmptyState.vue'
import { useElderClass } from '@/composables/useElderClass'

const { elderClass } = useElderClass()
const points = ref(0)
const products = ref<any[]>([])
const loading = ref(false)
const checkinDone = ref(false)

async function fetchPoints() {
  try {
    const res = await api.get<any>('/health/points')
    if (res) points.value = res.points || 0
  } catch { /* ignore */ }
}

async function fetchProducts() {
  loading.value = true
  try { products.value = await api.get<any[]>('/health/points/products') || [] }
  catch { products.value = [] }
  loading.value = false
}

async function doCheckin() {
  if (checkinDone.value) return
  try {
    await api.post('/health/points/checkin')
    checkinDone.value = true
    uni.showToast({ title: '签到成功', icon: 'success' })
    await fetchPoints()
  } catch {
    uni.showToast({ title: '签到失败', icon: 'none' })
  }
}

onMounted(() => { fetchPoints(); fetchProducts() })
</script>

<style lang="scss" scoped>
.page-scroll { height: 100vh; background: $bg; }
.page-content { padding: 28px 24px 120px; }

.card { @include card; }

.points-card {
  @include flex-center;
  flex-direction: column;
  margin-bottom: 28px;
}

.points-label {
  font-size: var(--tk-font-body);
  color: $tx3;
}

.points-value {
  font-size: var(--tk-font-display);
  font-weight: bold;
  color: $pri;
  @include serif-number;
  margin: 12px 0;
}

.checkin-btn {
  @include btn-primary;
  width: auto;
  padding: 0 48px;
}

.section-title { @include section-title; }

.product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.product-card {
  background: $card;
  border-radius: $r;
  padding: 20px;
  box-shadow: $shadow-sm;
  @include flex-center;
  flex-direction: column;
}

.product-name {
  font-size: var(--tk-font-body);
  color: $tx;
  font-weight: 500;
  margin-bottom: 8px;
}

.product-points {
  font-size: var(--tk-font-body-sm);
  color: $pri;
  font-weight: 600;
}
</style>
