<!-- 收听历史 / 收藏 -->
<view class="history-page">

  <!-- Tab 切换 + 清空 -->
  <view class="filter-header">
    <view class="filter-tabs">
      <view class="tab-item {{tab === 'history' ? 'active' : ''}}" bindtap="setTab" data-val="history">
        <text class="tab-text">历史</text>
        <view class="tab-underline"></view>
      </view>
      <view class="tab-item {{tab === 'favorite' ? 'active' : ''}}" bindtap="setTab" data-val="favorite">
        <text class="tab-text">收藏</text>
        <view class="tab-underline"></view>
      </view>
    </view>
    <view class="clear-btn tap-active" bindtap="onClear" wx:if="{{historyList.length > 0}}">
      <view class="icon-trash">
        <view class="trash-handle"></view>
        <view class="trash-lid-bar"></view>
        <view class="trash-body">
          <view class="trash-stripe"></view>
          <view class="trash-stripe"></view>
          <view class="trash-stripe"></view>
        </view>
      </view>
      <text class="clear-text">清空</text>
    </view>
  </view>

  <!-- 列表区 -->
  <view class="list-area">

    <!-- 加载骨架 -->
    <view wx:if="{{loading}}" class="skeleton-wrap">
      <view wx:for="{{[1,2,3]}}" wx:key="*this" class="skeleton-item">
        <view class="sk-icon"></view>
        <view class="sk-lines">
          <view class="sk-line sk-line-short"></view>
          <view class="sk-line sk-line-long"></view>
          <view class="sk-line sk-line-mid"></view>
        </view>
      </view>
    </view>

    <!-- 历史空状态 -->
    <view wx:elif="{{historyList.length === 0 && tab === 'history'}}" class="empty-state">
      <text class="empty-icon">🎧</text>
      <text class="empty-title">还没有收听记录</text>
      <text class="empty-desc">去发现频道，开始你的第一段收听</text>
      <view class="empty-actions">
        <view class="btn-primary tap-active" bindtap="goDiscover">
          <text class="btn-text">去发现频道</text>
        </view>
        <view class="btn-ghost tap-active" bindtap="goHome">
          <text class="btn-ghost-text">回到首页</text>
        </view>
      </view>
    </view>

    <!-- 收藏空状态 -->
    <view wx:elif="{{historyList.length === 0 && tab === 'favorite'}}" class="empty-state">
      <text class="empty-icon">🔖</text>
      <text class="empty-title">还没有收藏内容</text>
      <text class="empty-desc">听到喜欢的节目，点击 ♡ 收藏它</text>
      <view class="empty-actions">
        <view class="btn-primary tap-active" bindtap="goDiscover">
          <text class="btn-text">订阅感兴趣的频道</text>
        </view>
      </view>
      <!-- 推荐订阅提示 -->
      <view class="upsell-card">
        <text class="upsell-icon">👑</text>
        <view class="upsell-body">
          <text class="upsell-title">开通会员</text>
          <text class="upsell-desc">解锁全部付费频道，无限收藏</text>
        </view>
        <view class="upsell-btn tap-active" bindtap="goVip">
          <text class="upsell-btn-text">了解</text>
        </view>
      </view>
    </view>

    <!-- 条目列表 -->
    <view
      wx:for="{{historyList}}"
      wx:key="id"
      class="history-item"
      bindtap="onPlay"
      data-id="{{item.id}}"
    >
      <!-- 频道/节目图标 -->
      <view class="h-icon" style="background: {{item._bgColor}};">
        <text class="h-emoji">{{item._icon}}</text>
      </view>

      <!-- 文字信息 -->
      <view class="h-info">
        <text class="h-channel" wx:if="{{item._domainName}}">{{item._domainName}}</text>
        <text class="h-title {{item._isThisPlaying ? 'text-primary' : ''}}">{{item.title}}</text>
        <view class="h-meta-row">
          <text class="h-meta">{{item._friendlyDate}}</text>
          <text class="h-meta" wx:if="{{item.durationText}}"> · {{item.durationText}}</text>
        </view>
        <!-- 播放进度条 -->
        <view class="h-progress-wrap" wx:if="{{item._progress > 0 && item.duration > 0}}">
          <view class="h-progress-bar" style="width: {{item._progress / item.duration * 100}}%;"></view>
        </view>
      </view>

      <!-- 播放指示 / 播放按钮 -->
      <view class="h-right">
        <view wx:if="{{item._isThisPlaying && isPlaying}}" class="playing-indicator">
          <view class="bar bar-1"></view>
          <view class="bar bar-2"></view>
          <view class="bar bar-3"></view>
        </view>
        <view wx:else class="play-mini">
          <text class="play-mini-icon">▶</text>
        </view>
      </view>

      <!-- 删除按钮 -->
      <view class="h-del tap-active" catchtap="onDeleteItem" data-id="{{item.id}}">
        <view class="icon-trash icon-trash-sm">
          <view class="trash-handle"></view>
          <view class="trash-lid-bar"></view>
          <view class="trash-body">
            <view class="trash-stripe"></view>
            <view class="trash-stripe"></view>
            <view class="trash-stripe"></view>
          </view>
        </view>
      </view>
    </view>

  </view>
  <view style="height: 200rpx;"></view>

  <global-player />
</view>
