<view class="page">
  <!-- 商品轮播 -->
  <swiper class="product-swiper" indicator-dots="{{true}}" indicator-color="rgba(255,255,255,0.4)" indicator-active-color="#fff" autoplay="{{false}}" circular="{{true}}">
    <swiper-item wx:for="{{images}}" wx:key="index">
      <image class="product-swiper-image" src="{{item}}" mode="aspectFill" binderror="onImageError" />
    </swiper-item>
    <swiper-item wx:if="{{images.length === 0}}">
      <image class="product-swiper-image" src="{{product.image}}" mode="aspectFill" />
    </swiper-item>
  </swiper>

  <!-- 商品信息 -->
  <view class="product-info-section card">
    <view class="card-body">
      <view class="product-name">{{product.name}}</view>
      <view class="product-subtitle" wx:if="{{product.subtitle}}">{{product.subtitle}}</view>
      
      <view class="product-price-row">
        <view class="price price-large">
          <text class="price-symbol">¥</text>
          <text class="price-value">{{currentPrice}}</text>
        </view>
        <text class="original-price" wx:if="{{product.original_price && product.original_price > product.price}}">¥{{product.original_price}}</text>
        <text class="sales-count">已售 {{product.sales || 0}} 件</text>
      </view>

      <view class="product-meta flex-row gap-24">
        <view wx:if="{{product.stock !== undefined}}">库存 {{product.stock}}</view>
        <view wx:if="{{product.unit}}">单位 {{product.unit}}</view>
      </view>
    </view>
  </view>

  <!-- 规格选择 -->
  <view class="card" wx:if="{{specs.length > 0}}">
    <view class="card-body">
      <view class="spec-section" wx:for="{{specs}}" wx:key="id" wx:for-item="spec">
        <view class="spec-label">{{spec.name}}</view>
        <view class="spec-values">
          <text
            class="spec-value {{selectedSpecs[index] === item ? 'active' : ''}}"
            wx:for="{{spec.values}}"
            wx:key="index"
            data-spec-index="{{index}}"
            data-value="{{item}}"
            bindtap="onSpecTap"
          >{{item}}</text>
        </view>
      </view>
    </view>
  </view>

  <!-- 商品评价 -->
  <view class="card" wx:if="{{reviewsStats.total > 0}}">
    <view class="card-header flex-between">
      <text>商品评价 ({{reviewsStats.total}})</text>
      <text class="text-primary" style="font-size:24rpx">查看全部 ›</text>
    </view>
    <view class="card-body">
      <view class="review-item" wx:for="{{reviewsList}}" wx:key="id" wx:for-item="review">
        <view class="review-user flex-row gap-16">
          <image class="review-avatar" src="{{review.avatar}}" mode="aspectFill" />
          <text class="review-nickname">{{review.nickname || '匿名用户'}}</text>
          <star-rating value="{{review.rating}}" showText="{{false}}" />
        </view>
        <view class="review-content" wx:if="{{review.content}}">{{review.content}}</view>
        <view class="review-images" wx:if="{{review.images && review.images.length}}">
          <image class="review-image" wx:for="{{review.images}}" wx:key="index" src="{{item}}" mode="aspectFill" />
        </view>
        <view class="review-time">{{review.created_at}}</view>
        <view class="review-like" data-id="{{review.id}}" bindtap="onLikeReview">
          <text>{{review.is_liked ? '❤️' : '🤍'}}</text>
          <text class="review-like-count">{{review.like_count || 0}}</text>
        </view>
      </view>
    </view>
  </view>

  <!-- 商品详情（富文本） -->
  <view class="card" wx:if="{{product.description}}">
    <view class="card-header">商品详情</view>
    <view class="card-body">
      <rich-text nodes="{{product.description}}" />
    </view>
  </view>

  <!-- 底部操作栏 -->
  <view class="bottom-bar safe-bottom">
    <view class="action-icons flex-row gap-12">
      <view class="action-icon-item" bindtap="onFavorite">
        <text class="action-icon">{{isFavorited ? '❤️' : '🤍'}}</text>
        <text class="action-label">收藏</text>
      </view>
      <view class="action-icon-item" bindtap="onShare">
        <text class="action-icon">📤</text>
        <text class="action-label">分享</text>
      </view>
    </view>
    <view class="action-buttons flex-1 flex-row gap-16" style="margin-left:20rpx">
      <button class="btn-plain btn-small flex-1" bindtap="onAddCart" loading="{{cartLoading}}">加入购物车</button>
      <button class="btn-primary btn-small flex-1" bindtap="onBuyNow">立即购买</button>
    </view>
  </view>
</view>
