<template>
  <scroll-view class="points-page" direction="vertical">
    <view class="points-header">
      <view class="points-info">
        <text class="points-label">当前积分</text>
        <text class="points-value">{{ totalPoints }}</text>
      </view>
      <view class="points-actions">
        <button class="exchange-btn" @click="handleExchange">积分兑换</button>
      </view>
    </view>

    <view class="quick-actions">
      <view class="action-item" @click="goToSignin">
        <view class="action-icon signin-icon">📅</view>
        <text class="action-text">每日签到</text>
        <view class="action-badge" v-if="!signedToday">
          <text class="badge-text">+5</text>
        </view>
        <view class="signed-badge" v-else>
          <text class="signed-text">已签</text>
        </view>
      </view>
      <view class="action-item" @click="handleExchange">
        <view class="action-icon exchange-icon">🎁</view>
        <text class="action-text">积分兑换</text>
      </view>
      <view class="action-item" @click="goToMyReviews">
        <view class="action-icon review-icon">⭐</view>
        <text class="action-text">我的评价</text>
      </view>
    </view>

    <view class="signin-card" v-if="!signedToday">
      <view class="signin-info">
        <text class="signin-title">今日未签到</text>
        <text class="signin-desc">连续签到可获得额外奖励</text>
      </view>
      <button class="signin-btn" @click="goToSignin">去签到</button>
    </view>

    <view class="signin-card signed" v-else>
      <view class="signin-info">
        <text class="signin-title">今日已签到</text>
        <text class="signin-desc">已连续签到 {{ continuousDays }} 天</text>
      </view>
      <text class="signed-icon">✓</text>
    </view>

    <view class="expiring-card" v-if="expiringPoints > 0" @click="showExpiringDetails">
      <view class="expiring-icon">⚠️</view>
      <view class="expiring-info">
        <text class="expiring-title">{{ expiringPoints }} 积分即将过期</text>
        <text class="expiring-date">过期日期：{{ expiringDate }}</text>
      </view>
      <text class="expiring-arrow">›</text>
    </view>

    <view class="records-section">
      <text class="section-title">积分明细</text>
      
      <view v-if="loading" class="loading-state">
        <text>加载中...</text>
      </view>
      
      <view v-else-if="records.length === 0" class="empty-state">
        <text class="empty-text">暂无积分记录</text>
      </view>
      
      <view v-else class="record-list">
        <view v-for="item in records" :key="item.id" class="record-item">
          <view class="record-left">
            <text class="record-title">{{ item.description ?? getTypeText(item.type) }}</text>
            <text class="record-time">{{ formatTime(item.created_at) }}</text>
          </view>
          <view class="record-right">
            <text class="record-amount" :class="{ positive: item.points > 0, negative: item.points < 0 }">
              {{ item.points > 0 ? '+' : '' }}{{ item.points }}
            </text>
          </view>
        </view>
      </view>
    </view>

    <view class="expiring-popup" v-if="showExpiringPopup" @click="closeExpiringPopup">
      <view class="popup-content" @click.stop>
        <view class="popup-header">
          <text class="popup-title">即将过期积分</text>
          <text class="popup-close" @click="closeExpiringPopup">×</text>
        </view>
        <view class="popup-list">
          <view class="popup-item" v-for="(detail, index) in expiringDetails" :key="index">
            <view class="popup-item-info">
              <text class="popup-item-points">+{{ detail.points }} 积分</text>
              <text class="popup-item-desc">{{ detail.description ?? '积分获取' }}</text>
            </view>
            <view class="popup-item-expire">
              <text class="popup-item-date">{{ formatDate(detail.expires_at) }}</text>
              <text class="popup-item-label">过期</text>
            </view>
          </view>
        </view>
        <view class="popup-tip">
          <text class="tip-text">积分有效期为获取后365天，请及时使用避免过期</text>
        </view>
      </view>
    </view>
  </scroll-view>
</template>

<script setup lang="uts">
import { ref, onMounted } from 'vue'
import { supabaseService } from '@/utils/supabaseService.uts'

type PointRecord = {
  id: string
  user_id: string
  points: number
  type: string
  description: string
  created_at: string
}

type ExpiringDetail = {
  points: number
  description: string | null
  expires_at: string
  created_at: string
}

const totalPoints = ref<number>(0)
const records = ref<PointRecord[]>([])
const loading = ref<boolean>(true)
const signedToday = ref<boolean>(false)
const continuousDays = ref<number>(0)
const expiringPoints = ref<number>(0)
const expiringDate = ref<string>('')
const expiringDetails = ref<ExpiringDetail[]>([])
const showExpiringPopup = ref<boolean>(false)

const loadPoints = async (): Promise<void> => {
    try {
        const points = await supabaseService.getUserPoints()
        totalPoints.value = points
    } catch (e) {
        console.error('获取积分失败', e)
    }
}

const loadRecords = async (): Promise<void> => {
    try {
        const list = await supabaseService.getPointRecords()
        records.value = list as PointRecord[]
    } catch (e) {
        console.error('获取积分记录失败', e)
    }
}

const loadSigninStatus = async (): Promise<void> => {
    try {
        const status = await supabaseService.getTodaySigninStatus()
        signedToday.value = status.getBoolean('signed') ?? false
        continuousDays.value = status.getNumber('continuous_days') ?? 0
    } catch (e) {
        console.error('获取签到状态失败', e)
    }
}

const loadExpiringPoints = async (): Promise<void> => {
    try {
        const result = await supabaseService.getExpiringPoints()
        expiringPoints.value = result.getNumber('expiring_points') ?? 0
        expiringDate.value = result.getString('expiring_date') ?? ''
        
        const detailsRaw = result.get('details')
        if (detailsRaw != null && Array.isArray(detailsRaw)) {
          const details: ExpiringDetail[] = []
          const arr = detailsRaw as any[]
          for (let i = 0; i < arr.length; i++) {
            const item = arr[i]
            let itemObj: UTSJSONObject
            if (item instanceof UTSJSONObject) {
              itemObj = item
            } else {
              itemObj = JSON.parse(JSON.stringify(item)) as UTSJSONObject
            }
            details.push({
              points: itemObj.getNumber('points') ?? 0,
              description: itemObj.getString('description'),
              expires_at: itemObj.getString('expires_at') ?? '',
              created_at: itemObj.getString('created_at') ?? ''
            })
          }
          expiringDetails.value = details
        }
    } catch (e) {
        console.error('获取即将过期积分失败', e)
    }
}

const loadData = async (): Promise<void> => {
  loading.value = true
  await Promise.all([
    loadPoints(),
    loadRecords(),
    loadSigninStatus(),
    loadExpiringPoints()
  ])
  loading.value = false
}

onMounted(() => {
  loadData()
})

const handleExchange = (): void => {
  uni.navigateTo({
    url: '/pages/mall/consumer/points/exchange'
  })
}

const goToSignin = (): void => {
  uni.navigateTo({
    url: '/pages/mall/consumer/points/signin'
  })
}

const goToMyReviews = (): void => {
  uni.navigateTo({
    url: '/pages/mall/consumer/my-reviews'
  })
}

const showExpiringDetails = (): void => {
  showExpiringPopup.value = true
}

const closeExpiringPopup = (): void => {
  showExpiringPopup.value = false
}

const getTypeText = (type: string): string => {
  if (type == 'signin') {
    return '每日签到'
  } else if (type == 'shopping') {
    return '购物奖励'
  } else if (type == 'redeem') {
    return '积分兑换'
  } else if (type == 'admin') {
    return '系统调整'
  } else if (type == 'register') {
    return '注册赠送'
  } else if (type == 'expire') {
    return '积分过期'
  } else {
    return '积分变动'
  }
}

const formatTime = (timeStr: string): string => {
  if (timeStr == '') return ''
  const date = new Date(timeStr)
  const y = date.getFullYear()
  const m = (date.getMonth() + 1).toString().padStart(2, '0')
  const d = date.getDate().toString().padStart(2, '0')
  const hh = date.getHours().toString().padStart(2, '0')
  const mm = date.getMinutes().toString().padStart(2, '0')
  return `${y}-${m}-${d} ${hh}:${mm}`
}

const formatDate = (dateStr: string): string => {
  if (dateStr == '') return ''
  const date = new Date(dateStr)
  const y = date.getFullYear()
  const m = (date.getMonth() + 1).toString().padStart(2, '0')
  const d = date.getDate().toString().padStart(2, '0')
  return `${y}-${m}-${d}`
}
</script>

<style>
.points-page {
    flex: 1;
    height: 100%;
    background-color: #f5f5f5;
}

.points-header {
  background: linear-gradient(135deg, #ff6b35 0%, #ff8c42 100%);
  padding: 30px 20px;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.points-info {
  display: flex;
  flex-direction: column;
}

.points-label {
  font-size: 14px;
  opacity: 0.9;
  margin-bottom: 8px;
}

.points-value {
  font-size: 36px;
  font-weight: bold;
}

.exchange-btn {
  background-color: rgba(255,255,255,0.2);
  color: white;
  border: 1px solid rgba(255,255,255,0.4);
  font-size: 14px;
  border-radius: 20px;
  padding: 0 15px;
  height: 32px;
  line-height: 32px;
}

.quick-actions {
  display: flex;
  flex-direction: row;
  background-color: white;
  padding: 16px 0;
  margin-bottom: 8px;
}

.action-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.action-icon {
  width: 44px;
  height: 44px;
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 6px;
}

.signin-icon {
  background-color: #fff5f0;
}

.exchange-icon {
  background-color: #f0f5ff;
}

.review-icon {
  background-color: #fff5f0;
}

.action-text {
  font-size: 12px;
  color: #666;
}

.action-badge {
  position: absolute;
  top: 0;
  right: 20px;
  background-color: #ff6b35;
  border-radius: 8px;
  padding: 2px 6px;
}

.badge-text {
  font-size: 10px;
  color: white;
}

.signed-badge {
  position: absolute;
  top: 0;
  right: 20px;
  background-color: #52c41a;
  border-radius: 8px;
  padding: 2px 6px;
}

.signed-text {
  font-size: 10px;
  color: white;
}

.signin-card {
  background-color: white;
  margin: 0 12px 8px;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.signin-card.signed {
  background: linear-gradient(135deg, #f6ffed 0%, #e6fffb 100%);
}

.signin-info {
  display: flex;
  flex-direction: column;
}

.signin-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.signin-desc {
  font-size: 12px;
  color: #999;
  margin-top: 4px;
}

.signin-btn {
  background-color: #ff6b35;
  color: white;
  font-size: 14px;
  border-radius: 16px;
  padding: 0 20px;
  height: 32px;
  line-height: 32px;
}

.signed-icon {
  width: 32px;
  height: 32px;
  background-color: #52c41a;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: white;
}

.expiring-card {
  background: linear-gradient(135deg, #fff7e6 0%, #ffe7ba 100%);
  margin: 0 12px 8px;
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.expiring-icon {
  font-size: 24px;
  margin-right: 12px;
}

.expiring-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.expiring-title {
  font-size: 14px;
  font-weight: bold;
  color: #d48806;
}

.expiring-date {
  font-size: 12px;
  color: #ad8b00;
  margin-top: 2px;
}

.expiring-arrow {
  font-size: 20px;
  color: #d48806;
}

.records-section {
  background-color: white;
  padding: 0 16px;
  min-height: 300px;
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  padding: 16px 0;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
}

.record-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid #f9f9f9;
}

.record-left {
  display: flex;
  flex-direction: column;
}

.record-title {
  margin-bottom: 4px;
  font-size: 15px;
  color: #333;
}

.record-time {
  font-size: 12px;
  color: #999;
}

.record-amount {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.record-amount.positive {
  color: #ff6b35;
}

.record-amount.negative {
  color: #333;
}

.empty-state {
  padding: 40px 0;
  display: flex;
  justify-content: center;
}

.empty-text {
  color: #999;
  font-size: 14px;
}

.loading-state {
  padding: 40px 0;
  display: flex;
  justify-content: center;
}

.expiring-popup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 1000;
}

.popup-content {
  background-color: white;
  border-radius: 16px 16px 0 0;
  width: 100%;
  max-height: 400px;
  padding: 16px;
}

.popup-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.popup-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.popup-close {
  font-size: 24px;
  color: #999;
}

.popup-list {
  max-height: 300px;
}

.popup-item {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}

.popup-item-info {
  display: flex;
  flex-direction: column;
}

.popup-item-points {
  font-size: 14px;
  font-weight: bold;
  color: #ff6b35;
}

.popup-item-desc {
  font-size: 12px;
  color: #999;
  margin-top: 2px;
}

.popup-item-expire {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.popup-item-date {
  font-size: 12px;
  color: #d48806;
}

.popup-item-label {
  font-size: 10px;
  color: #999;
}

.popup-tip {
  margin-top: 16px;
  padding: 12px;
  background-color: #f9f9f9;
  border-radius: 8px;
}

.tip-text {
  font-size: 12px;
  color: #666;
}
</style>
