<view class="page-container">
  <!-- 顶部导航栏 -->
  <view class="nav-container">
    <view class="status-bar" style="height: {{statusBarHeight}}px;"></view>
    <view class="nav-bar" style="height: {{navBarHeight}}px;">
      <view class="nav-back" bindtap="goBack">
        <image src="/images/icon-chevron-left.png" class="back-icon" mode="aspectFit"></image>
      </view>
      <view class="nav-title">礼品商城</view>
    </view>
  </view>

  <!-- 内容区域 -->
  <scroll-view scroll-y class="content-scroll" style="padding-top: {{totalNavHeight}}px;" enhanced show-scrollbar="{{false}}">
    <view class="content-wrap">
      <!-- 爱心值卡片 - 仅登录后显示 -->
      <view class="love-card" wx:if="{{isLoggedIn}}">
        <view class="love-card-bg"></view>
        <view class="love-card-blur"></view>
        <view class="love-card-bottom-shade"></view>

        <view class="love-card-content">
          <view class="love-info">
            <view class="love-header">
              <image src="/images/figma-gift-shop-love-icon.svg" class="love-icon" mode="aspectFit"></image>
              <text class="love-label">我的爱心</text>
            </view>
            <text class="love-value">{{lovePoints}}</text>
            <view class="love-action" bindtap="onViewDetails">
              <text class="love-action-text">点击查看明细</text>
              <image src="/images/figma-gift-shop-chevron-right.svg" class="love-action-arrow" mode="aspectFit"></image>
            </view>
          </view>

          <view class="love-decoration">
            <image src="/images/figma-gift-shop-decor-icon.svg" class="decoration-icon" mode="aspectFit"></image>
          </view>
        </view>
      </view>

      <view class="gifts-section">
        <view class="gifts-header">
          <image src="/images/figma-gift-shop-section-icon.svg" class="gifts-icon" mode="aspectFit"></image>
          <text class="gifts-title">超值兑换</text>
        </view>

        <view wx:if="{{giftsLoading}}" class="gifts-grid">
          <view wx:for="{{skeletonGifts}}" wx:key="id" class="gift-card skeleton">
            <view class="gift-image-wrap"></view>
            <view class="gift-name skeleton-line"></view>
            <view class="gift-footer">
              <view class="gift-price skeleton-line"></view>
              <view class="gift-exchange-btn skeleton-btn"></view>
            </view>
          </view>
        </view>

        <view wx:elif="{{giftsError}}" class="gifts-error">
          <text class="gifts-error-text">{{giftsError}}</text>
          <view class="gifts-retry" bindtap="loadGifts">重试</view>
        </view>

        <view wx:else>
          <view wx:if="{{!gifts || gifts.length === 0}}" class="gifts-empty">
            <text class="gifts-empty-text">暂无可兑换礼品</text>
          </view>
          <view wx:else class="gifts-grid">
            <view wx:for="{{gifts}}" wx:key="id" class="gift-card" bindtap="onGiftTap" data-id="{{item.id}}">
              <view class="gift-image-wrap">
                <image src="{{item.image || '/images/icon-empty.png'}}" class="gift-image" mode="aspectFill"></image>
                <view class="gift-image-overlay"></view>
                <view class="gift-badge">热兑</view>
              </view>

              <text class="gift-name">{{item.name}}</text>

              <view class="gift-footer">
                <view class="gift-price">
                  <image src="/images/figma-gift-shop-price-icon.svg" class="gift-heart-icon" mode="aspectFit"></image>
                  <text class="gift-price-text">{{item.love_cost}}</text>
                </view>
                <view class="gift-exchange-btn">兑换</view>
              </view>
            </view>
          </view>
        </view>
      </view>

      <view class="bottom-tip">
        <text class="tip-text">更多精美礼品持续上新中...</text>
      </view>
    </view>
  </scroll-view>
</view>
