<view class="page">
  <view class="page-header page-header-pink" style="padding-top: {{statusBarHeight + 24}}px;">
    <view class="nav-back" bindtap="onBack">‹ 返回</view>
    <view class="page-header-title">自动扫描</view>
    <view class="page-header-subtitle">正在识别面部...</view>
  </view>

  <view class="page-content">
    <view class="page-title">自动扫描面部区域</view>

    <view class="scan-container">
      <view class="face-outline">
        <view class="scan-line"></view>
      </view>
    </view>

    <view class="scan-hint">请将面罩对准面部</view>
    <view class="scan-hint" style="font-size:24rpx;color:#999;margin-top:8rpx;">连接设备后可获取皮肤数据</view>

    <view class="debug-actions" wx:if="{{devMode}}">
      <view class="debug-label">🔧 调试工具</view>
      <button class="btn-secondary btn-sm" bindtap="onMockScanDone">模拟扫描完成</button>
    </view>

    <view class="scan-progress" wx:if="{{scanning}}">
      正在扫描... <text class="highlight">{{regionData.length || 3}}</text> 个区域
    </view>

    <view class="detected-tags" wx:if="{{regionData.length > 0}}">
      <text class="detected-tag" wx:for="{{regionData}}" wx:key="region">{{item.region}}</text>
    </view>

    <button class="btn-primary mt-30" wx:if="{{!scanning}}" bindtap="onNext">设置护理参数</button>
  </view>
</view>
