<template>
  <view class="page">
    <view class="bg-decoration"></view>
    <view class="loading" v-if="loading">加载中...</view>
    <view v-else-if="detail.id" class="detail-wrap">
      <image v-if="detail.main_image" class="main-image" :src="detail.main_image" mode="widthFix" />
      <view class="info-card">
        <view class="title">{{ detail.title || detail.name || '-' }}</view>
        <view class="price-row">
          <view class="points-wrap">
             <text class="points-val">{{ (detail.points_required ? Math.floor(detail.points_required / 100) : 0) || (detail.price ? Math.floor(detail.price / 100) : 0) }}</text>
             <text class="points-unit">积分</text>
          </view>
        </view>
        <view class="stock" v-if="detail.stock !== null && detail.stock !== undefined">库存：{{ detail.stock }}</view>
        <view class="desc" v-if="detail.description">
          <rich-text :nodes="detail.description"></rich-text>
        </view>
        
      </view>
    </view>
    <view v-else class="empty">商品不存在</view>
    
    <!-- Action Bar Moved Outside info-card -->
    <view class="action-bar-placeholder" v-if="detail.id"></view>
    <view class="action-bar" v-if="detail.id">
       <view class="action-btn redeem" @tap="onRedeem">立即兑换</view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getProductDetail } from '../../api/appUser'
import { redeemProductByPoints } from '../../utils/request.js'

const detail = ref({})
const loading = ref(false)

function formatPrice(p) {
  if (p === undefined || p === null) return '0.00'
  return (Number(p) / 100).toFixed(2)
}

async function fetchDetail(id) {
  loading.value = true
  try {
    const res = await getProductDetail(id)
    detail.value = res || {}
  } catch (e) {
    detail.value = {}
  } finally {
    loading.value = false
  }
}

function onBuy() {
  uni.showToast({ title: '暂未开放购买', icon: 'none' })
}

async function onRedeem() {
  const p = detail.value
  if (!p || !p.id) return
  
  const token = uni.getStorageSync('token')
  if (!token) {
    uni.showModal({
      title: '提示',
      content: '请先登录',
      confirmText: '去登录',
      success: (res) => { if (res.confirm) uni.navigateTo({ url: '/pages/login/index' }) }
    })
    return
  }
  
  const points = (detail.value.points_required ? Math.floor(detail.value.points_required / 100) : 0) || (detail.value.price ? Math.floor(detail.value.price / 100) : 0)
  uni.showModal({
    title: '确认兑换',
    content: `是否消耗 ${points} 积分兑换 ${p.title || p.name}？`,
    success: async (res) => {
      if (res.confirm) {
        uni.showLoading({ title: '兑换中...' })
        try {
          const userId = uni.getStorageSync('user_id')
          if (!userId) throw new Error('用户ID不存在')
          
          await redeemProductByPoints(userId, p.id, 1)
          uni.hideLoading()
          uni.showModal({
            title: '兑换成功',
            content: `您已成功兑换 ${p.title || p.name}`,
            showCancel: false,
            success: () => {
              fetchDetail(p.id)
            }
          })
        } catch (e) {
          uni.hideLoading()
          uni.showToast({ title: e.message || '兑换失败', icon: 'none' })
        }
      }
    }
  })
}

onLoad((opts) => {
  const id = opts && opts.id
  if (id) fetchDetail(id)
})
</script>

<style lang="scss" scoped>
/* ============================================
   柯大鸭潮玩 - 商品详情页
   ============================================ */

.page {
  min-height: 100vh;
  background: $bg-page;
  padding-bottom: env(safe-area-inset-bottom);
  position: relative;
  overflow: hidden;
}

/* 背景装饰 - 漂浮光球 (与各主要页面统一) */
.bg-decoration {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    top: -100rpx; right: -100rpx;
    width: 600rpx; height: 600rpx;
    background: radial-gradient(circle, rgba($brand-primary, 0.15) 0%, transparent 70%);
    filter: blur(60rpx);
    border-radius: 50%;
    opacity: 0.8;
    animation: float 10s ease-in-out infinite;
  }

  &::after {
    content: '';
    position: absolute;
    top: 200rpx; left: -200rpx;
    width: 500rpx; height: 500rpx;
    background: radial-gradient(circle, rgba($brand-secondary, 0.1) 0%, transparent 70%);
    filter: blur(50rpx);
    border-radius: 50%;
    opacity: 0.6;
    animation: float 15s ease-in-out infinite reverse;
  }
}

@keyframes float {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(30rpx, 50rpx); }
}

.loading, .empty {
  text-align: center;
  padding: 120rpx 40rpx;
  color: $text-secondary;
  font-size: $font-md;
  position: relative;
  z-index: 10;
}

.detail-wrap {
  padding-bottom: 40rpx;
  animation: fadeInUp 0.4s ease-out;
  position: relative;
  z-index: 1;
}

.main-image {
  width: 100%;
  height: 750rpx;
  display: block;
  background: $bg-secondary;
}

.info-card {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(20rpx);
  border-radius: $radius-xl $radius-xl 0 0;
  padding: $spacing-xl;
  box-shadow: 0 -8rpx 32rpx rgba(0,0,0,0.05);
  position: relative;
  z-index: 2;
  margin-top: -40rpx;
  min-height: 50vh;
  border-top: 1px solid rgba(255, 255, 255, 0.6);
  border-left: 1px solid rgba(255, 255, 255, 0.6);
  border-right: 1px solid rgba(255, 255, 255, 0.6);
}

.title {
  font-size: $font-xl;
  font-weight: 800;
  color: $text-main;
  margin-bottom: $spacing-md;
  line-height: 1.4;
  text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.05);
}

.price-row {
  display: flex;
  align-items: baseline;
  gap: $spacing-sm;
  margin-bottom: $spacing-lg;
}

.price {
  font-size: $font-xxl;
  font-weight: 900;
  color: $brand-primary;
  font-family: 'DIN Alternate', sans-serif;
  
  &::before {
    content: '¥';
    font-size: $font-md;
    margin-right: 4rpx;
  }
}

.points-wrap {
  display: flex; align-items: baseline;
}
.points-val {
  font-size: 48rpx;
  font-weight: 900;
  color: #FF9800;
  font-family: 'DIN Alternate', sans-serif;
}
.points-unit {
  font-size: 24rpx;
  color: #FF9800;
  margin-left: 6rpx;
  font-weight: 600;
}

.stock {
  font-size: $font-sm;
  color: $text-secondary;
  margin-bottom: $spacing-lg;
  background: rgba(0,0,0,0.05);
  display: inline-block;
  padding: 6rpx $spacing-md;
  border-radius: $radius-sm;
}

.desc {
  font-size: $font-lg;
  color: $text-main;
  line-height: 1.8;
  padding-top: $spacing-lg;
  border-top: 1rpx dashed $border-color-light;
  
  &::before {
    content: '商品详情';
    display: block;
    font-size: $font-md;
    color: $text-secondary;
    margin-bottom: $spacing-sm;
    font-weight: 700;
  }

  :deep(img) {
    max-width: 100%;
    height: auto;
    display: block;
  }
}

.action-bar-placeholder { height: 120rpx; }
.action-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  padding: 20rpx 40rpx;
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(10px);
  box-shadow: 0 -4rpx 20rpx rgba(0,0,0,0.05);
  display: flex;
  justify-content: flex-end;
  z-index: 100;
}

.action-btn {
  width: 100%;
  height: 88rpx;
  border-radius: 44rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  font-weight: 700;
  color: #fff;
  transition: transform 0.2s;
  
  &:active { transform: scale(0.96); }
}
.action-btn.redeem { background: linear-gradient(135deg, #FFB74D, #FF9800); box-shadow: 0 8rpx 20rpx rgba(255, 152, 0, 0.3); }
.action-btn.buy { background: linear-gradient(135deg, #FF6B6B, #FF3B30); box-shadow: 0 8rpx 20rpx rgba(255, 59, 48, 0.3); }

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(40rpx); }
  to { opacity: 1; transform: translateY(0); }
}
</style>
