<template>
  <view class="page">
    <view class="bg-decoration"></view>
    
    <!-- 顶部固定区域 -->
    <view class="header-section">
      <view class="search-box">
        <view class="search-input-wrap">
          <text class="search-icon">🔍</text>
          <input class="search-input" v-model="keyword" placeholder="搜索心仪的宝贝" placeholder-class="placeholder-style" confirm-type="search" @confirm="onSearchConfirm" />
        </view>
      </view>
      
      <!-- 分类标签 -->
      <view class="tab-row">
        <view 
          v-for="tab in tabs" 
          :key="tab.id" 
          class="tab-item" 
          :class="{ active: currentTab === tab.id }"
          @tap="switchTab(tab.id)"
        >
          <text class="tab-text">{{ tab.name }}</text>
          <view class="tab-line" v-if="currentTab === tab.id"></view>
        </view>
      </view>
    </view>

    <!-- 占位 -->
    <view class="header-placeholder"></view>

    <view v-if="loading && !items.length" class="loading-wrap"><view class="spinner"></view></view>
    
    <view class="content-container" v-else>
      <!-- 商品视图 (网格) -->
      <view v-if="currentTab === 'product'" class="products-grid">
        <view class="product-item" v-for="p in items" :key="p.id" @tap="onProductTap(p)">
          <view class="product-card">
            <view class="thumb-wrap">
              <image class="product-thumb" :src="p.image" mode="aspectFill" lazy-load="true" />
               <view class="stock-tag" v-if="p.stock !== null && p.stock < 10 && p.stock > 0">仅剩{{p.stock}}件</view>
               <view class="stock-tag out" v-else-if="p.stock === 0">已罄</view>
            </view>
            <view class="product-info">
              <text class="product-title">{{ p.title }}</text>
              <view class="product-bottom">
                <view class="price-row">
                  <text class="points-val">{{ p.points || 0 }}</text>
                  <text class="points-unit">积分</text>
                </view>
                <view class="redeem-btn" @tap.stop="onRedeemTap(p)">兑换</view>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 优惠券视图 (票据样式列表) -->
      <view v-else-if="currentTab === 'coupon'" class="coupons-list">
        <view class="coupon-card" v-for="c in items" :key="c.id">
          <view class="coupon-left">
            <view class="coupon-val-row">
               <text class="coupon-symbol">¥</text>
               <text class="coupon-val">{{ (c.discount_value || 0) / 100 }}</text>
            </view>
            <text class="coupon-limit" v-if="c.min_spend > 0">满{{ (c.min_spend || 0) / 100 }}可用</text>
            <text class="coupon-limit" v-else>无门槛</text>
          </view>
          <view class="coupon-divider">
            <view class="notch top"></view>
            <view class="dash"></view>
            <view class="notch bottom"></view>
          </view>
          <view class="coupon-right">
            <view class="coupon-name">{{ c.title || c.name }}</view>
            <view class="coupon-bottom">
               <view class="coupon-price">
                 <text class="p-val">{{ c.points || 0 }}</text>
                 <text class="p-unit">积分</text>
               </view>
               <view class="coupon-btn" @tap="onRedeemTap(c)">立即兑换</view>
            </view>
          </view>
        </view>
      </view>

      <!-- 道具卡视图 (列表卡片) -->
      <view v-else-if="currentTab === 'item_card'" class="item-cards-list">
        <!-- TODO: 后续我们要打开的 -->
        <view class="empty-state" style="padding-top: 50rpx;">
           <image class="empty-img" src="/static/empty.png" mode="widthFix" />
           <text class="empty-text">暂未开放</text>
        </view>
      </view>

      <view v-if="!items.length && currentTab !== 'item_card'" class="empty-state">
        <image class="empty-img" src="/static/empty.png" mode="widthFix" />
        <text class="empty-text">暂无相关兑换项</text>
      </view>

      <!-- 加载更多 -->
      <view v-if="loading && items.length > 0" class="loading-more">
        <view class="spinner"></view>
        <text>加载更多...</text>
      </view>
      <view v-else-if="!hasMore && items.length > 0" class="no-more">- 到底啦 -</view>
    </view>
  </view>
</template>

<script setup>
import { onShow, onReachBottom } from '@dcloudio/uni-app'
import { ref, watch } from 'vue'
import { getStoreItems, redeemProductByPoints, redeemCouponByPoints, redeemItemCardByPoints } from '../../api/appUser'

const loading = ref(false)
const keyword = ref('')
const currentTab = ref('product')
const items = ref([])
const allItems = ref([])
const page = ref(1)
const pageSize = 20
const hasMore = ref(true)

const tabs = [
  { id: 'product', name: '商品' },
  { id: 'coupon', name: '优惠券' },
  { id: 'item_card', name: '道具卡' }
]

function cleanUrl(u) {
  const s = String(u || '').trim()
  const m = s.match(/https?:\/\/[^\s'"`]+/)
  if (m && m[0]) return m[0]
  return s.replace(/[`'\"]/g, '').trim()
}

function normalizeItems(list, kind) {
  if (!Array.isArray(list)) return []
  return list.map((i, idx) => ({
    id: i.id,
    kind: i.kind || kind,
    image: cleanUrl(i.main_image || i.image || ''),
    title: i.name || i.title || '',
    price: i.price || i.discount_value || 0,
    points: i.points_required ? Math.floor(i.points_required / 100) : (i.price ? Math.floor(i.price / 100) : (i.discount_value ? Math.floor(i.discount_value / 100) : 0)),
    stock: i.in_stock ? 99 : 0, // Simplified stock check if returned as bool
    discount_value: i.discount_value || 0,
    min_spend: i.min_spend || 0,
    description: i.description || ''
  })).filter(i => i.title)
}

function switchTab(id) {
  if (currentTab.value === id) return
  currentTab.value = id
  loading.value = true
  items.value = []
  allItems.value = []
  page.value = 1
  hasMore.value = true
  loadItems()
}

async function loadItems(append = false) {
  if (loading.value && append) return
  loading.value = true
  try {
    const res = await getStoreItems(currentTab.value, page.value, pageSize)
    const list = res.list || res || []
    const newItems = normalizeItems(list, currentTab.value)
    
    if (append) {
      allItems.value = [...allItems.value, ...newItems]
    } else {
      allItems.value = newItems
    }
    
    if (newItems.length < pageSize) {
      hasMore.value = false
    } else {
      page.value++
    }
    
    applyFilters()
  } catch (e) {
    console.error(e)
    hasMore.value = false
  } finally {
    loading.value = false
  }
}

function applyFilters() {
  const k = String(keyword.value || '').trim().toLowerCase()
  items.value = allItems.value.filter(item => {
    const title = String(item.title || '').toLowerCase()
    return !k || title.includes(k)
  })
}

function onSearchConfirm() { applyFilters() }

function onProductTap(p) {
  if (p.kind === 'product') {
    uni.navigateTo({ url: `/pages/shop/detail?id=${p.id}` })
  }
}

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

onShow(() => {
  const token = uni.getStorageSync('token')
  const phoneBound = !!uni.getStorageSync('phone_bound')
  if (token && phoneBound) {
    page.value = 1
    hasMore.value = true
    allItems.value = []
    loadItems()
  } else {
    // Redirect logic if needed
  }
})

onReachBottom(() => {
  if (!loading.value && hasMore.value) {
    loadItems(true)
  }
})

watch(keyword, () => applyFilters())

</script>

<style lang="scss" scoped>
.page {
  min-height: 100vh;
  background-color: $bg-page;
  padding-bottom: 40rpx;
  position: relative;
  overflow-x: hidden;
}

/* 顶部 Header */
.header-section {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20rpx);
  padding: 20rpx 24rpx 0;
  box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.05);
}
.header-placeholder { height: 180rpx; }

.search-box { margin-bottom: 20rpx; }
.search-input-wrap {
  display: flex; align-items: center;
  background: rgba(0, 0, 0, 0.04);
  border-radius: $radius-round;
  padding: 16rpx 24rpx;
}
.search-icon { font-size: 28rpx; margin-right: 16rpx; opacity: 0.5; }
.search-input { flex: 1; font-size: 26rpx; color: $text-main; }
.placeholder-style { color: $text-tertiary; }

/* Tabs */
.tab-row {
  display: flex;
  justify-content: space-around;
  padding-bottom: 4rpx;
}
.tab-item {
  position: relative;
  padding: 16rpx 20rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tab-text {
  font-size: 28rpx;
  color: $text-secondary;
  font-weight: 500;
  transition: all 0.2s;
}
.tab-item.active .tab-text {
  color: $brand-primary;
  font-weight: 700;
  font-size: 30rpx;
}
.tab-line {
  position: absolute;
  bottom: 0;
  width: 40rpx;
  height: 6rpx;
  background: $gradient-brand;
  border-radius: 4rpx;
}

.content-container { padding: 24rpx; }

/* 商品 Grid */
.products-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;
}
.product-card {
  background: #fff;
  border-radius: $radius-lg;
  overflow: hidden;
  box-shadow: $shadow-sm;
}
.thumb-wrap {
  position: relative; width: 100%; padding-top: 100%;
  background: #f8f8f8;
}
.product-thumb { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.stock-tag {
  position: absolute; bottom: 0; right: 0;
  background: rgba($brand-primary, 0.9);
  color: #fff; font-size: 20rpx; padding: 4rpx 12rpx;
  border-top-left-radius: 12rpx;
  &.out { background: #999; }
}
.product-info { padding: 16rpx; }
.product-title {
  font-size: 26rpx; color: $text-main; font-weight: 600;
  line-height: 1.4; height: 2.8em; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  margin-bottom: 12rpx;
}
.product-bottom { display: flex; align-items: center; justify-content: space-between; }
.points-val { font-size: 32rpx; font-weight: 800; color: #FF9800; font-family: 'DIN-Bold'; }
.points-unit { font-size: 20rpx; color: #FF9800; margin-left: 2rpx; }
.redeem-btn {
  background: $gradient-brand; color: #fff; font-size: 22rpx;
  padding: 6rpx 18rpx; border-radius: 24rpx; font-weight: 600;
}

/* 优惠券 (Ticket Style) */
.coupons-list { display: flex; flex-direction: column; gap: 24rpx; }
.coupon-card {
  display: flex;
  background: #fff;
  border-radius: $radius-lg;
  height: 180rpx;
  box-shadow: $shadow-sm;
  overflow: hidden;
}
.coupon-left {
  width: 200rpx;
  background: linear-gradient(135deg, #FF6B6B, #FF3B30);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: #fff;
}
.coupon-val-row { display: flex; align-items: baseline; }
.coupon-symbol { font-size: 24rpx; font-weight: 600; }
.coupon-val { font-size: 56rpx; font-weight: 800; font-family: 'DIN-Bold'; }
.coupon-limit { font-size: 20rpx; opacity: 0.9; }

.coupon-divider {
  width: 2rpx; position: relative;
  background: #eee;
  .notch {
    position: absolute; width: 24rpx; height: 24rpx; background: $bg-page;
    border-radius: 50%; left: -12rpx;
    &.top { top: -12rpx; }
    &.bottom { bottom: -12rpx; }
  }
}
.coupon-right {
  flex: 1; padding: 24rpx;
  display: flex; flex-direction: column; justify-content: space-between;
}
.coupon-name { font-size: 30rpx; font-weight: 700; color: $text-main; }
.coupon-bottom { display: flex; align-items: center; justify-content: space-between; }
.coupon-price .p-val { font-size: 36rpx; font-weight: 800; color: #FF9800; }
.coupon-price .p-unit { font-size: 22rpx; color: #FF9800; }
.coupon-btn {
  background: #333; color: #fff; font-size: 24rpx;
  padding: 10rpx 24rpx; border-radius: 30rpx; font-weight: 600;
}

/* 道具卡 (Card Style) */
.item-cards-list { display: flex; flex-direction: column; gap: 24rpx; }
.item-card {
  display: flex; background: #fff; border-radius: $radius-lg; padding: 24rpx;
  box-shadow: $shadow-sm; align-items: center;
}
.ic-icon-wrap {
  width: 100rpx; height: 100rpx; background: #f0f0f0;
  border-radius: $radius-md; display: flex; align-items: center; justify-content: center;
  font-size: 48rpx; margin-right: 24rpx;
}
.ic-info { flex: 1; display: flex; flex-direction: column; }
.ic-name { font-size: 30rpx; font-weight: 700; color: $text-main; margin-bottom: 4rpx; }
.ic-desc { font-size: 22rpx; color: $text-tertiary; margin-bottom: 20rpx; }
.ic-bottom { display: flex; align-items: center; justify-content: space-between; }
.ic-price .p-val { font-size: 32rpx; font-weight: 800; color: #FF9800; }
.ic-btn {
  background: $gradient-brand; color: #fff; font-size: 24rpx;
  padding: 8rpx 24rpx; border-radius: 30rpx;
}

.empty-state {
  display: flex; flex-direction: column; align-items: center; padding-top: 100rpx;
}
.empty-img { width: 240rpx; opacity: 0.6; }
.empty-text { color: $text-tertiary; font-size: 26rpx; margin-top: 20rpx; }

.loading-wrap { padding: 100rpx 0; display: flex; justify-content: center; }
.spinner {
  width: 48rpx; height: 48rpx; border: 4rpx solid #eee; border-top-color: $brand-primary;
  border-radius: 50%; animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* 加载更多 */
.loading-more {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30rpx 0;
  color: $text-tertiary;
  font-size: 24rpx;
  gap: 12rpx;
}

.no-more {
  text-align: center;
  padding: 40rpx 0;
  color: $text-tertiary;
  font-size: 24rpx;
  opacity: 0.6;
}

</style>
