<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">{{state === 'scanning' ? '正在搜索设备...' : state === 'connecting' ? '正在连接设备...' : state === 'binding' ? '正在绑定...' : '连接失败'}}</view>
  </view>

  <view class="page-content">
    <view class="info-tip">
      <text>📡</text>
      <text>请确保手机蓝牙已开启</text>
    </view>

    <view class="search-card" wx:if="{{state === 'scanning' || state === 'connecting'}}">
      <view class="search-icon pulsing">⏳</view>
      <view class="search-text">搜索中...</view>
    </view>

    <view class="found-card" wx:if="{{state === 'binding'}}">
      <view class="found-icon">💆</view>
      <view class="found-name">LumiFlow-{{deviceId}}</view>
      <text class="status-badge status-badge-green">正在配对...</text>
    </view>

    <view class="found-card" wx:if="{{state === 'error'}}">
      <view class="search-icon">⚠️</view>
      <view class="found-name">{{error || '连接失败'}}</view>
      <button class="retry-btn" bindtap="onRetry">重试</button>
    </view>

  </view>
</view>
