<!--pages/read/read.wxml-->
<view class="container read-container">
  <!-- 顶部导航栏 -->
  <view class="read-header">
    <view class="header-left" bindtap="goBack">
      <text class="back-icon">←</text>
    </view>
    <view class="header-title">{{chapterInfo.title}}</view>
    <view class="header-right" bindtap="showMenu">
      <text class="menu-icon">⋯</text>
    </view>
  </view>

  <!-- 章节内容 -->
  <scroll-view class="content-scroll" scroll-y enhanced show-scrollbar="{{false}}">
    <!-- 骨架屏 -->
    <view class="content-skeleton" wx:if="{{loading}}">
      <view class="skeleton skeleton-title"></view>
      <view class="skeleton skeleton-line"></view>
      <view class="skeleton skeleton-line"></view>
      <view class="skeleton skeleton-line short"></view>
      <view class="skeleton skeleton-line"></view>
      <view class="skeleton skeleton-line"></view>
    </view>

    <!-- 实际内容 -->
    <view class="content-wrapper" wx:if="{{!loading}}">
      <view class="chapter-title">{{chapterInfo.title}}</view>
      <view class="chapter-meta">
        <text class="meta-item">{{chapterInfo.updateTime}}</text>
        <text class="meta-divider">·</text>
        <text class="meta-item">{{chapterInfo.words}}字</text>
        <text class="meta-divider">·</text>
        <text class="meta-item">{{chapterInfo.readTime}}分钟</text>
      </view>

      <view class="chapter-content markdown-body">
        <rich-text nodes="{{contentHtml}}"></rich-text>
      </view>

      <!-- 章节导航 -->
      <view class="chapter-nav">
        <button 
          class="nav-btn prev-btn {{!hasPrev ? 'disabled' : ''}}" 
          bindtap="prevChapter"
          disabled="{{!hasPrev}}"
        >
          上一章
        </button>
        <button 
          class="nav-btn next-btn {{!hasNext ? 'disabled' : ''}}" 
          bindtap="nextChapter"
          disabled="{{!hasNext}}"
        >
          下一章
        </button>
      </view>

      <!-- 推广提示 -->
      <view class="promotion-tip card">
        <view class="tip-icon">💰</view>
        <view class="tip-content">
          <view class="tip-title">喜欢这本书？</view>
          <view class="tip-desc">分享给朋友，每笔成交您可获得90%佣金</view>
        </view>
        <button class="tip-btn" bindtap="goToReferral">去分享</button>
      </view>
    </view>
  </scroll-view>

  <!-- 底部工具栏 -->
  <view class="read-toolbar glass-effect">
    <view class="toolbar-item" bindtap="bookmark">
      <text class="toolbar-icon">{{isBookmarked ? '🔖' : '📑'}}</text>
      <text class="toolbar-label">书签</text>
    </view>
    <view class="toolbar-item" bindtap="note">
      <text class="toolbar-icon">📝</text>
      <text class="toolbar-label">笔记</text>
    </view>
    <view class="toolbar-item" bindtap="showCatalog">
      <text class="toolbar-icon">📚</text>
      <text class="toolbar-label">目录</text>
    </view>
    <view class="toolbar-item" bindtap="share">
      <text class="toolbar-icon">📤</text>
      <text class="toolbar-label">分享</text>
    </view>
  </view>
</view>

<!-- 目录弹窗 -->
<view class="catalog-modal" wx:if="{{showCatalog}}" bindtap="hideCatalog">
  <view class="catalog-content" catchtap="stopPropagation">
    <view class="catalog-header">
      <text class="catalog-title">目录</text>
      <text class="catalog-close" bindtap="hideCatalog">×</text>
    </view>
    <scroll-view class="catalog-list" scroll-y>
      <view 
        class="catalog-item {{item.id === chapterId ? 'active' : ''}}" 
        wx:for="{{allChapters}}" 
        wx:key="id"
        bindtap="selectChapter"
        data-id="{{item.id}}"
      >
        <text class="catalog-item-title">{{item.title}}</text>
        <text class="catalog-item-icon" wx:if="{{item.id === chapterId}}">📖</text>
      </view>
    </scroll-view>
  </view>
</view>
