<view class="task-detail {{appearanceClass}}">
  <view class="task-detail__header">
    <view class="task-detail__crumb">
      <text class="task-detail__crumb-channel">{{channelLabel}}</text>
      <text class="task-detail__crumb-separator">›</text>
      <text class="task-detail__ref">#t{{taskNumber}}</text>
    </view>
    <text class="task-detail__title" user-select>{{title}}</text>
    <view wx:if="{{statusLabel || priorityLabel || kindLabel || assignee || sourceLabel}}" class="task-detail__metadata">
      <text wx:if="{{statusLabel}}" class="task-detail__meta-badge task-detail__meta-badge--status task-detail__meta-badge--{{statusKey}}">{{statusLabel}}</text>
      <text wx:if="{{priorityLabel}}" class="task-detail__meta-badge task-detail__meta-badge--tag">{{priorityLabel}}</text>
      <text wx:if="{{kindLabel}}" class="task-detail__meta-badge task-detail__meta-badge--tag">{{kindLabel}}</text>
      <text wx:if="{{assignee}}" class="task-detail__meta-text">{{assignee}}</text>
      <text wx:if="{{sourceLabel}}" class="task-detail__meta-text" user-select>{{sourceLabel}}</text>
    </view>
  </view>

  <view class="task-detail__tabs" role="tablist">
    <view class="task-detail__tab {{activeTab === 'overview' ? 'task-detail__tab--active' : ''}}" data-tab="overview" bindtap="onSwitchTab" role="tab" aria-selected="{{activeTab === 'overview'}}">{{text.overview}}</view>
    <view class="task-detail__tab {{activeTab === 'discussion' ? 'task-detail__tab--active' : ''}}" data-tab="discussion" bindtap="onSwitchTab" role="tab" aria-selected="{{activeTab === 'discussion'}}">
      <text>{{text.discussion}}</text><text wx:if="{{discussionRows.length > 0}}" class="task-detail__tab-count">{{discussionRows.length}}</text>
    </view>
    <view class="task-detail__tab {{activeTab === 'progress' ? 'task-detail__tab--active' : ''}}" data-tab="progress" bindtap="onSwitchTab" role="tab" aria-selected="{{activeTab === 'progress'}}">
      <text>{{text.progress}}</text><text wx:if="{{progressRows.length > 0}}" class="task-detail__tab-count">{{progressRows.length}}</text>
    </view>
  </view>

  <scroll-view scroll-y class="task-detail__scroll" bindscrolltoupper="onLoadMoreTimeline" upper-threshold="160" enhanced show-scrollbar="{{false}}">
    <view wx:if="{{status === 'loading'}}" class="task-detail__content-state">
      <view class="task-detail__loading-row">
        <view class="task-detail__loading-dot"></view>
        <view class="task-detail__loading-lines"><view></view><view></view></view>
      </view>
    </view>

    <view wx:elif="{{status === 'error'}}" class="task-detail__content-state task-detail__content-state--error">
      <text>{{errorMsg || text.error}}</text>
      <button class="task-detail__retry" bindtap="onRetry">{{text.retry}}</button>
    </view>

    <block wx:else>
      <block wx:if="{{activeTab === 'overview'}}">
        <view class="task-detail__section task-detail__description">
          <markdown-content wx:if="{{description}}" class="task-detail__body" content="{{description}}" disable-collapse="{{true}}" tone="muted" />
          <text wx:else class="task-detail__body task-detail__empty" user-select>{{text.noDescription}}</text>
        </view>

        <view wx:if="{{checkpoints.length > 0}}" class="task-detail__section">
          <text class="task-detail__section-title">{{text.checkpoints}}</text>
          <view wx:for="{{checkpoints}}" wx:key="key" class="task-detail__check">
            <text class="task-detail__check-icon">{{item.checked ? '✓' : '○'}}</text>
            <markdown-content class="task-detail__check-body" content="{{item.text}}" disable-collapse="{{true}}" tone="muted" />
          </view>
        </view>

        <view wx:if="{{acceptanceCriteria.length > 0}}" class="task-detail__section">
          <text class="task-detail__section-title">{{text.acceptance}}</text>
          <view wx:for="{{acceptanceCriteria}}" wx:key="key" class="task-detail__check">
            <text class="task-detail__check-icon">{{item.checked ? '✓' : '○'}}</text>
            <markdown-content class="task-detail__check-body" content="{{item.text}}" disable-collapse="{{true}}" tone="muted" />
          </view>
        </view>

        <view wx:if="{{subtasks.length > 0}}" class="task-detail__section">
          <text class="task-detail__section-title">{{text.subtasks}}</text>
          <view wx:for="{{subtasks}}" wx:key="key" class="task-detail__subtask" data-channel-id="{{item.channelId}}" data-task-number="{{item.taskNumber}}" bindtap="onOpenSubtask">
            <text class="task-detail__subtask-ref">{{item.ref}}</text>
            <markdown-content class="task-detail__subtask-title" content="{{item.title}}" disable-collapse="{{true}}" tone="muted" />
            <text class="task-detail__subtask-status">{{item.status}}</text>
          </view>
        </view>
      </block>

      <view wx:else class="task-detail__section task-detail__timeline">
        <view wx:if="{{timelineError}}" class="task-detail__timeline-error">
          <text>{{timelineError}}</text><text class="task-detail__timeline-retry" bindtap="onLoadMoreTimeline">{{text.retry}}</text>
        </view>
        <view wx:if="{{timelineLoadingMore}}" class="task-detail__timeline-loading"><loading-dots /></view>
        <view wx:elif="{{timelineHasMore}}" class="task-detail__timeline-more" bindtap="onLoadMoreTimeline">{{text.loadEarlier}}</view>

        <block wx:if="{{activeTab === 'discussion'}}">
          <view wx:if="{{discussionRows.length === 0}}" class="task-detail__empty">{{text.emptyDiscussion}}</view>
          <view wx:for="{{discussionRows}}" wx:key="key" class="task-detail__timeline-row task-detail__timeline-row--discussion">
            <view class="task-detail__discussion-avatar">
              <avatar-image wx:if="{{item.authorAvatarUrl}}" class="task-detail__discussion-avatar-img" source="{{item.authorAvatarUrl}}"><text>{{item.authorInitials}}</text></avatar-image>
              <text wx:else>{{item.authorInitials}}</text>
            </view>
            <view class="task-detail__timeline-body">
              <view class="task-detail__timeline-head"><text class="task-detail__timeline-author">{{item.authorName}}</text><text class="task-detail__timeline-time">{{item.createdAt}}</text></view>
              <markdown-content class="task-detail__discussion-body" content="{{item.body}}" disable-collapse="{{true}}" tone="muted" />
              <view wx:if="{{item.attachments.length > 0}}" class="task-detail__discussion-attachments">
                <view wx:for="{{item.attachments}}" wx:key="id" class="task-detail__discussion-attachment"><view class="icon icon--sm icon--paperclip"></view><text>{{item.filename}}</text></view>
              </view>
              <view wx:if="{{item.reactions.length > 0}}" class="task-detail__discussion-reactions">
                <text wx:for="{{item.reactions}}" wx:key="emoji" class="task-detail__discussion-reaction">{{item.emoji}} {{item.count}}</text>
              </view>
            </view>
          </view>
          <view class="task-detail__readonly-note">{{text.readOnly}}</view>
        </block>

        <block wx:else>
          <view wx:if="{{progressRows.length === 0}}" class="task-detail__empty">{{text.emptyProgress}}</view>
          <view wx:for="{{progressRows}}" wx:key="key" class="task-detail__timeline-row task-detail__timeline-row--activity">
            <view class="task-detail__activity-icon icon icon--sm icon--activity"></view>
            <view class="task-detail__timeline-body">
              <view class="task-detail__timeline-head"><text wx:if="{{item.actor}}" class="task-detail__timeline-author">{{item.actor}}</text><text class="task-detail__timeline-time">{{item.createdAt}}</text></view>
              <markdown-content class="task-detail__activity-summary" content="{{item.summary}}" disable-collapse="{{true}}" tone="muted" />
            </view>
          </view>
        </block>
      </view>
    </block>
  </scroll-view>
</view>
