<!-- 陪聊师申请页面 - 根据 Figma 设计重构 -->
<view class="page-container">
  <!-- 顶部导航栏 -->
  <view class="nav-header" style="padding-top: {{statusBarHeight}}px;">
    <view class="nav-content">
      <view class="nav-back" bindtap="goBack">
        <image src="/images/icon-back.png" class="back-icon" mode="aspectFit"></image>
        <text class="back-text">返回</text>
      </view>
      <text class="nav-title">申请成为陪聊师</text>
      <view class="nav-right">
        <image src="/images/icon-more.png" class="more-icon" mode="aspectFit"></image>
      </view>
    </view>
  </view>

  <!-- 内容区域 -->
  <scroll-view scroll-y class="content-scroll" style="padding-top: {{totalNavHeight}}px;">
    <!-- 已提交申请状态 -->
    <view class="status-card" wx:if="{{applyStatus !== 'none' && !showForm}}">
      <view class="status-icon {{applyStatus}}">
        <image wx:if="{{applyStatus === 'pending' || applyStatus === 'reviewing'}}" src="/images/icon-pending.png"></image>
        <image wx:if="{{applyStatus === 'approved'}}" src="/images/icon-success.png"></image>
        <image wx:if="{{applyStatus === 'rejected'}}" src="/images/icon-rejected.png"></image>
      </view>
      <text class="status-title">{{statusTitle}}</text>
      <text class="status-desc">{{statusDesc}}</text>
      
      <button class="btn-primary" wx:if="{{applyStatus === 'approved'}}" bindtap="goToWorkbench">
        进入工作台
      </button>
      <button class="btn-secondary" wx:if="{{applyStatus === 'rejected'}}" bindtap="reapply">
        重新申请
      </button>
    </view>

    <!-- 申请表单 -->
    <view class="apply-form" wx:if="{{applyStatus === 'none' || showForm}}">
      <!-- 基本信息 -->
      <view class="form-section">
        <view class="section-header">
          <text class="section-title">基本信息</text>
        </view>
        
        <view class="form-item">
          <view class="item-label-row">
            <text class="item-label">姓名</text>
            <text class="required">*</text>
          </view>
          <view class="input-wrapper">
            <input class="item-input" placeholder="请输入真实姓名" placeholder-class="placeholder" value="{{formData.realName}}" bindinput="onInputChange" data-field="realName" />
          </view>
        </view>

        <view class="form-item">
          <view class="item-label-row">
            <text class="item-label">所在城市</text>
            <text class="optional">（选填）</text>
          </view>
          <view class="input-wrapper">
            <input class="item-input" placeholder="请输入所在城市" placeholder-class="placeholder" value="{{formData.city}}" bindinput="onInputChange" data-field="city" />
          </view>
        </view>

        <view class="form-item">
          <view class="item-label-row">
            <text class="item-label">手机号</text>
            <text class="required">*</text>
          </view>
          <view class="input-wrapper">
            <input class="item-input" type="number" placeholder="请输入手机号" placeholder-class="placeholder" value="{{formData.phone}}" bindinput="onInputChange" data-field="phone" maxlength="11" />
          </view>
        </view>
      </view>

      <!-- 备注信息 -->
      <view class="form-section">
        <view class="section-header">
          <text class="section-title">备注信息</text>
        </view>
        <view class="textarea-wrapper">
          <textarea class="intro-textarea" placeholder="请输入备注信息（选填）" placeholder-class="placeholder" value="{{formData.remarks}}" bindinput="onInputChange" data-field="remarks" maxlength="500"></textarea>
        </view>
        <view class="textarea-footer">
          <text class="char-count">{{formData.remarks.length || 0}}/500</text>
        </view>
      </view>

      <!-- 协议 -->
      <view class="agreement-row">
        <view class="checkbox {{agreed ? 'checked' : ''}}" bindtap="toggleAgreement">
          <image wx:if="{{agreed}}" src="/images/icon-checked.png" class="check-icon"></image>
        </view>
        <view class="agreement-text">
          <text class="normal-text">我已阅读并同意</text>
          <text class="link-text" bindtap="viewAgreement">《倾听陪聊师服务协议》</text>
        </view>
      </view>

      <!-- 提交按钮 -->
      <button class="submit-btn {{canSubmit ? '' : 'disabled'}}" bindtap="submitApply" disabled="{{!canSubmit}}">
        提交申请
      </button>
    </view>

    <!-- 底部占位 -->
    <view class="bottom-placeholder"></view>
  </scroll-view>

  <!-- 已是陪聊师浮动按钮 -->
  <view class="float-btn" wx:if="{{applyStatus === 'approved'}}" bindtap="goToWorkbench">
    <text class="float-btn-text">我是陪聊师，进入工作台</text>
    <image src="/images/icon-chevron-right.png" class="float-btn-arrow" mode="aspectFit"></image>
  </view>
</view>
