<!-- pages/live/report/report.wxml -->
<navigation-bar title="反馈与投诉" back="{{true}}" bind:handleBack="handleBack" color="black" background="#ffffff" />

<block wx:if="{{pageStep === 1}}">
      <scroll-view class="reason-list-scroll" scroll-y>
        <view class="report-page">
          <!-- 举报原因列表 -->
          <view class="section-header">请选择投诉原因</view>
          <view class="section-card">
              <view class="reason-list">
                <view
                  wx:for="{{reasons}}"
                  wx:key="id"
                  class="reason-item"
                  data-id="{{item.id}}"
                  bind:tap="onReasonTap"
                >
                  <text class="reason-label">{{item.label}}</text>
                  <view class="reason-arrow"></view>
                </view>
              </view>
          </view>
        </view>
      </scroll-view>
</block>

<block wx:elif="{{pageStep === 2}}">
  <view class="report-page">
    <!-- 举报对象 - 小程序头像和名称 -->
    <view class="section-card">
      <view class="target-row">
        <image class="target-avatar" src="{{'/assets/img/wchat.svg'}}" mode="aspectFill" />
        <view class="target-info">
          <text class="target-name">小程序</text>
          <text class="target-context" wx:if="{{targetContext}}">{{targetContext}}</text>
        </view>
      </view>
    </view>

    <!-- 投诉内容卡片（合并：投诉原因、补充描述、图片证据） -->
    <view class="section-card unified-card">
      <!-- 已选原因 - 直接展示，不可修改 -->
      <view class="selected-reason-row">
        <text class="selected-reason-text">{{selectedReason}}</text>
      </view>

      <!-- 分隔线 -->
      <view class="unified-divider"></view>

      <!-- 补充描述 -->
      <view class="desc-wrap">
        <textarea
          class="desc-textarea"
          placeholder="请详细描述投诉内容，包括时间、地点、涉及人员等信息..."
          maxlength="500"
          value="{{description}}"
          bindinput="onDescriptionInput"
          auto-height
        />
        <view class="char-count">{{descriptionLen}}/500</view>
      </view>

      <!-- 分隔线 -->
      <view class="unified-divider"></view>

      <!-- 图片证据 -->
      <view class="section-title">
        <text>图片证据</text>
        <text class="evidence-tip">（最多9张，选填）</text>
      </view>
      <view class="upload-grid">
        <view
          wx:for="{{imageList}}"
          wx:key="index"
          class="upload-cell"
        >
          <image class="upload-img" src="{{item}}" mode="aspectFill" />
          <view class="upload-close" data-index="{{index}}" bind:tap="onRemoveImage">✕</view>
        </view>
        <view class="upload-cell upload-add" wx:if="{{imageList.length < 9}}" bind:tap="onChooseImage">+</view>
      </view>
    </view>

    <!-- 投诉须知 - 无背景，圆形选中，默认选中 -->
    <view class="agreement-section">
      <view class="agreement-row" bind:tap="toggleAgree">
        <view class="agreement-check-circle {{isAgreed ? 'checked' : ''}}">
          <text wx:if="{{isAgreed}}" class="agreement-check-icon">✓</text>
        </view>
        <text class="agreement-text">我已阅读并同意</text>
        <text class="agreement-link">《投诉须知》</text>
      </view>
    </view>
  </view>

  <!-- 底部提交按钮 -->
  <view class="bottom-bar">
    <button class="submit-btn" bind:tap="handleSubmit" disabled="{{!canSubmit}}">提交</button>
  </view>
</block>

<block wx:else>
  <view class="report-page">
    <view class="success-content">
      <view class="success-icon-wrap">
        <text class="success-check">✓</text>
      </view>
      <text class="success-title">提交成功</text>
      <text class="success-desc">我们将在24小时内处理您的投诉，请耐心等待</text>
      <button class="success-btn" bind:tap="handleClose">我知道了</button>
    </view>
  </view>
</block>