<view class="preview-page">
  <custom-nav content-height="86" padding-x="34">
    <view class="preview-nav">
      <view class="nav-back" bindtap="handleBack"><text></text></view>
      <view class="nav-title-wrap">
        <text class="nav-title">文案优化</text>
        <text class="nav-subtitle">让口播更自然，更适合短视频传播</text>
      </view>
      <view class="nav-space"></view>
    </view>
  </custom-nav>

  <view class="preview-content">
    <view class="panel original-panel">
      <text class="panel-title">原文案</text>
      <view class="script-text original-text">
        <text>{{taskinfo.original_script}}</text>
      </view>
      <text class="count-text">共 {{taskinfo.original_script.length}} 字</text>
    </view>

    <view class="panel ai-panel">
      <view class="panel-head">
        <view class="title-line">
          <text class="panel-title">AI 优化后文案</text>
          <text class="status-pill">已优化</text>
        </view>
        <view class="edit-btn" bindtap="handleEdit">
          <image class="edit-icon icon-placeholder" src="/static/images/edit.png" mode="aspectFit"></image>
          <text>{{inEdit?'保存':'编辑'}}</text>
        </view>
      </view>

      <view class="optimized-box">
        <text wx:if="{{inEdit == false}}">{{taskinfo.script_text}}</text>
        <textarea bindinput="changeContent" wx:else value="{{taskinfo.script_text}}"></textarea>
        <text class="optimized-count">共 {{taskinfo.script_text.length}} 字</text>
      </view>
    </view>

    <view class="panel style-panel">
      <text class="panel-title">选择润色风格</text>
      <view class="style-list">
        <view
          wx:for="{{styles}}"
          wx:key="id"
          class="style-item {{selectedStyle === item.id ? 'style-item-active' : ''}}"
          data-id="{{item.id}}"
          bindtap="handleStyleSelect"
        >
          <image class="style-icon style-icon-{{item.id}} icon-placeholder" src="{{selectedStyle == item.id ? item.activeIcon :item.icon}}" mode="aspectFit"></image>
          <text>{{item.name}}</text>
        </view>
      </view>
    </view>

    <view class="action-row">
      <view class="outline-action" bindtap="handleRegenerate">重新润色</view>
      <view class="confirm-action" bindtap="handleConfirm">确认使用此文案</view>
    </view>

    <view class="bottom-tip">
      <image class="tip-dot icon-placeholder" src="/static/images/info-circle.png" mode="aspectFit"></image>
      <text>新生成的视频将使用优化后的文案进行口播</text>
    </view>
  </view>
</view>

