<div class="info-card requirements-confirm-card">
  <div class="card-header">
    <h4>确认需求</h4>
    <div class="header-actions">
      <button class="btn-ghost btn-sm" (click)="refreshProgress()">刷新进度</button>
      
      <!-- 紧凑型流程进度卡片 -->
      <div class="compact-stage-indicators">
        <div class="stage-chain">
          <div class="stage-dot" [class]="getStageStatusClass('materialAnalysis')" 
               title="素材分析 - {{ getStageStatusText('materialAnalysis') }}">
            <span class="stage-number">1</span>
          </div>
          <div class="stage-connector" [class]="stageCompletionStatus.materialAnalysis ? 'completed' : 'pending'"></div>
          
          <div class="stage-dot" [class]="getStageStatusClass('requirementMapping')" 
               title="需求映射 - {{ getStageStatusText('requirementMapping') }}">
            <span class="stage-number">2</span>
          </div>
          <div class="stage-connector" [class]="stageCompletionStatus.requirementMapping ? 'completed' : 'pending'"></div>
          
          <div class="stage-dot" [class]="getStageStatusClass('collaboration')" 
               title="协作验证 - {{ getStageStatusText('collaboration') }}">
            <span class="stage-number">3</span>
          </div>
          <div class="stage-connector" [class]="stageCompletionStatus.collaboration ? 'completed' : 'pending'"></div>
          
          <div class="stage-dot" [class]="getStageStatusClass('progressReview')" 
               title="进度审查 - {{ getStageStatusText('progressReview') }}">
            <span class="stage-number">4</span>
          </div>
        </div>
      </div>
      
      <div class="progress-indicator">
        <div class="progress-bar">
          <div class="progress-fill" [style.width.%]="getProgressPercentage()"></div>
        </div>
        <span class="progress-text">{{ getProgressPercentage() | number:'1.0-0' }}% 完成</span>
      </div>
    </div>
  </div>

  <!-- 标签页导航 -->
  <div class="tab-navigation">
    <button 
      class="tab-button" 
      [class.active]="activeTab === 'materials'"
      (click)="switchTab('materials')">
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
        <polyline points="14,2 14,8 20,8"></polyline>
      </svg>
      素材解析
    </button>
    <button 
      class="tab-button" 
      [class.active]="activeTab === 'mapping'"
      (click)="switchTab('mapping')">
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <circle cx="12" cy="12" r="3"></circle>
        <path d="M12 1v6m0 6v6m11-7h-6m-6 0H1"></path>
      </svg>
      需求映射
    </button>
    <button 
      class="tab-button" 
      [class.active]="activeTab === 'collaboration'"
      (click)="switchTab('collaboration')">
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
        <circle cx="9" cy="7" r="4"></circle>
        <path d="M23 21v-2a4 4 0 0 0-3-3.87m-4-12a4 4 0 0 1 0 7.75"></path>
      </svg>
      协作验证
    </button>
    <button 
      class="tab-button" 
      [class.active]="activeTab === 'progress'"
      (click)="switchTab('progress')">
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <polyline points="22,12 18,12 15,21 9,3 6,12 2,12"></polyline>
      </svg>
      进度管理
    </button>
  </div>

  <!-- 标签页内容 -->
  <div class="tab-content">
    
    <!-- 素材解析标签页 -->
    @if (activeTab === 'materials') {
      <div class="materials-section">
        <!-- 文本输入区域 - 独立一行 -->
        <div class="text-upload-section">
          <div class="upload-item text-item">
            <h5>文本描述</h5>
            <form [formGroup]="materialUploadForm" (ngSubmit)="onTextSubmit()">
              <textarea 
                formControlName="textContent" 
                placeholder="请描述您的装修需求，如：希望温馨的暖木色调，适合亲子家庭，需要瑜伽区收纳..."
                rows="4">
              </textarea>
              <button type="submit" class="btn-primary btn-sm" [disabled]="!materialUploadForm.get('textContent')?.value">
                解析文本
              </button>
            </form>
          </div>
        </div>

        <!-- 参考图片和CAD图纸并排布局 -->
        <div class="file-upload-grid">
          <!-- 参考图片上传区域 -->
          <div class="upload-item image-item">
            <h5>参考图片</h5>
            <div class="file-upload-zone" (click)="imageInput.click()">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
                <circle cx="8.5" cy="8.5" r="1.5"></circle>
                <polyline points="21,15 16,10 5,21"></polyline>
              </svg>
              <p>点击上传参考图片</p>
              <span class="hint">支持多张图片，自动分析色调和材质</span>
            </div>
            <input #imageInput type="file" multiple accept="image/*" (change)="onFileSelected($event, 'image')" style="display: none;">
          </div>

          <!-- CAD图纸上传区域 -->
          <div class="upload-item cad-item">
            <h5>CAD图纸</h5>
            <div class="file-upload-zone" (click)="cadInput.click()">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
                <polyline points="14,2 14,8 20,8"></polyline>
                <line x1="16" y1="13" x2="8" y2="13"></line>
                <line x1="16" y1="17" x2="8" y2="17"></line>
              </svg>
              <p>点击上传CAD图纸</p>
              <span class="hint">自动识别结构和空间尺寸</span>
            </div>
            <input #cadInput type="file" accept=".dwg,.dxf,.pdf" (change)="onFileSelected($event, 'cad')" style="display: none;">
          </div>
        </div>

        <!-- 已上传素材列表 -->
        @if (materials.length > 0) {
          <div class="materials-list">
            <h5>已上传素材</h5>
            <div class="material-cards">
              @for (material of materials; track material.id) {
                <div class="material-card" [class]="'material-' + material.type">
                  <div class="material-header">
                    <span class="material-type">{{ material.type === 'text' ? '文本' : material.type === 'image' ? '图片' : 'CAD' }}</span>
                    <button class="btn-ghost btn-xs" (click)="removeMaterial(material.id)">
                      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <line x1="18" y1="6" x2="6" y2="18"></line>
                        <line x1="6" y1="6" x2="18" y2="18"></line>
                      </svg>
                    </button>
                  </div>
                  <div class="material-name">{{ material.name }}</div>
                  @if (material.analysis) {
                    <div class="parsed-info">
                      @if (material.type === 'text') {
                        <div class="parsed-tags">
                          @if (material.analysis.atmosphere) {
                          <div class="tag-group">
                            <span class="tag-label">氛围:</span>
                            <span class="tag">{{ material.analysis.atmosphere.description }}</span>
                          </div>
                        }
                        </div>
                      } @else if (material.type === 'image') {
                        <div class="color-info">
                          <span class="color-temp">色温: {{ material.analysis.colorTemperature }}K</span>
                        </div>
                      }
                    </div>
                  }
                </div>
              }
            </div>
          </div>
        }
      </div>
    }

    <!-- 需求映射标签页 -->
    @if (activeTab === 'mapping') {
      <div class="mapping-section">
        
        <!-- 一致性警告 -->
        @if (showConsistencyWarning) {
          <div class="consistency-warning">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path>
              <line x1="12" y1="9" x2="12" y2="13"></line>
              <line x1="12" y1="17" x2="12.01" y2="17"></line>
            </svg>
            {{ warningMessage }}
          </div>
        }

        <div class="indicator-grid">
          
          <!-- 色彩指标 -->
          <div class="indicator-group">
            <h5>色彩氛围</h5>
            
            <!-- RGB滑块 -->
            <div class="indicator-item">
              <label>主色调 RGB</label>
              <div class="rgb-controls">
                <div class="rgb-slider">
                  <span>R</span>
                  <input 
                    type="range" 
                    [min]="indicatorRanges.color.r.min" 
                    [max]="indicatorRanges.color.r.max" 
                    [(ngModel)]="colorIndicators.mainColor.r"
                    (ngModelChange)="onSliderChange('r', $event)">
                  <input 
                    type="number" 
                    class="slider-input"
                    [min]="indicatorRanges.color.r.min" 
                    [max]="indicatorRanges.color.r.max" 
                    [(ngModel)]="colorIndicators.mainColor.r"
                    (ngModelChange)="onInputChange('r', $event)"
                    (blur)="validateInput('r', $event.target.value)">
                </div>
                <div class="rgb-slider">
                  <span>G</span>
                  <input 
                    type="range" 
                    [min]="indicatorRanges.color.g.min" 
                    [max]="indicatorRanges.color.g.max" 
                    [(ngModel)]="colorIndicators.mainColor.g"
                    (ngModelChange)="onSliderChange('g', $event)">
                  <input 
                    type="number" 
                    class="slider-input"
                    [min]="indicatorRanges.color.g.min" 
                    [max]="indicatorRanges.color.g.max" 
                    [(ngModel)]="colorIndicators.mainColor.g"
                    (ngModelChange)="onInputChange('g', $event)"
                    (blur)="validateInput('g', $event.target.value)">
                </div>
                <div class="rgb-slider">
                  <span>B</span>
                  <input 
                    type="range" 
                    [min]="indicatorRanges.color.b.min" 
                    [max]="indicatorRanges.color.b.max" 
                    [(ngModel)]="colorIndicators.mainColor.b"
                    (ngModelChange)="onSliderChange('b', $event)">
                  <input 
                    type="number" 
                    class="slider-input"
                    [min]="indicatorRanges.color.b.min" 
                    [max]="indicatorRanges.color.b.max" 
                    [(ngModel)]="colorIndicators.mainColor.b"
                    (ngModelChange)="onInputChange('b', $event)"
                    (blur)="validateInput('b', $event.target.value)">
                </div>
                <div class="color-preview" [style.background-color]="getRgbString()"></div>
              </div>
            </div>
            
            <!-- 色温滑块 -->
            <div class="indicator-item">
              <label>色温 ({{ getColorTemperatureDescription() }})</label>
              <div class="slider-container">
                <input 
                  type="range" 
                  [min]="indicatorRanges.color.temperature.min" 
                  [max]="indicatorRanges.color.temperature.max" 
                  [value]="colorIndicators.colorTemperature"
                  (input)="onSliderChange('colorTemperature', +$event.target.value)">
                <input 
                  type="number" 
                  class="slider-input"
                  [min]="indicatorRanges.color.temperature.min" 
                  [max]="indicatorRanges.color.temperature.max" 
                  [value]="colorIndicators.colorTemperature"
                  (input)="onInputChange('colorTemperature', +$event.target.value)"
                  (blur)="validateInput('colorTemperature', $event.target.value)">
                <span class="unit-label">K</span>
              </div>
            </div>

            <!-- 饱和度和亮度 -->
            <div class="indicator-item">
              <label>饱和度</label>
              <div class="slider-container">
                <input 
                  type="range" 
                  [min]="indicatorRanges.color.saturation.min" 
                  [max]="indicatorRanges.color.saturation.max" 
                  [value]="colorIndicators.saturation"
                  (input)="onSliderChange('saturation', +$event.target.value)">
                <input 
                  type="number" 
                  class="slider-input"
                  [min]="indicatorRanges.color.saturation.min" 
                  [max]="indicatorRanges.color.saturation.max" 
                  [value]="colorIndicators.saturation"
                  (input)="onInputChange('saturation', +$event.target.value)"
                  (blur)="validateInput('saturation', $event.target.value)">
                <span class="unit-label">%</span>
              </div>
            </div>
          </div>

          <!-- 空间指标 -->
          <div class="indicator-group">
            <h5>空间结构</h5>
            <div class="indicator-item">
              <label>留白占比</label>
              <div class="slider-container">
                <input 
                  type="range" 
                  [min]="indicatorRanges.space.blankRatio.min" 
                  [max]="indicatorRanges.space.blankRatio.max" 
                  [value]="spaceIndicators.blankRatio"
                  (input)="onSliderChange('blankRatio', +$event.target.value)">
                <input 
                  type="number" 
                  class="slider-input"
                  [min]="indicatorRanges.space.blankRatio.min" 
                  [max]="indicatorRanges.space.blankRatio.max" 
                  [value]="spaceIndicators.blankRatio"
                  (input)="onInputChange('blankRatio', +$event.target.value)"
                  (blur)="validateInput('blankRatio', $event.target.value)">
                <span class="unit-label">%</span>
              </div>
            </div>
            
            <div class="indicator-item">
              <label>直线条占比</label>
              <div class="slider-container">
                <input 
                  type="range" 
                  [min]="indicatorRanges.space.lineRatio.min" 
                  [max]="indicatorRanges.space.lineRatio.max" 
                  [value]="spaceIndicators.lineRatio"
                  (input)="onSliderChange('lineRatio', +$event.target.value)">
                <input 
                  type="number" 
                  class="slider-input"
                  [min]="indicatorRanges.space.lineRatio.min" 
                  [max]="indicatorRanges.space.lineRatio.max" 
                  [value]="spaceIndicators.lineRatio"
                  (input)="onInputChange('lineRatio', +$event.target.value)"
                  (blur)="validateInput('lineRatio', $event.target.value)">
                <span class="unit-label">%</span>
              </div>
            </div>

            <div class="indicator-item">
              <label>动线宽度</label>
              <div class="slider-container">
                <input 
                  type="range" 
                  [min]="indicatorRanges.space.flowWidth.min" 
                  [max]="indicatorRanges.space.flowWidth.max" 
                  step="0.1"
                  [value]="spaceIndicators.flowWidth"
                  (input)="onSliderChange('flowWidth', +$event.target.value)">
                <input 
                  type="number" 
                  class="slider-input"
                  [min]="indicatorRanges.space.flowWidth.min" 
                  [max]="indicatorRanges.space.flowWidth.max" 
                  step="0.1"
                  [value]="spaceIndicators.flowWidth"
                  (input)="onInputChange('flowWidth', +$event.target.value)"
                  (blur)="validateInput('flowWidth', $event.target.value)">
                <span class="unit-label">m</span>
              </div>
            </div>
          </div>

          <!-- 材质权重 -->
          <div class="indicator-group">
            <h5>材质权重</h5>
            <div class="indicator-item">
              <label>布艺占比</label>
              <div class="slider-container">
                <input 
                  type="range" 
                  [min]="indicatorRanges.material.fabricRatio.min" 
                  [max]="indicatorRanges.material.fabricRatio.max" 
                  [value]="materialIndicators.fabricRatio"
                  (input)="onSliderChange('fabricRatio', +$event.target.value)">
                <input 
                  type="number" 
                  class="slider-input"
                  [min]="indicatorRanges.material.fabricRatio.min" 
                  [max]="indicatorRanges.material.fabricRatio.max" 
                  [value]="materialIndicators.fabricRatio"
                  (input)="onInputChange('fabricRatio', +$event.target.value)"
                  (blur)="validateInput('fabricRatio', $event.target.value)">
                <span class="unit-label">%</span>
              </div>
            </div>

            <div class="indicator-item">
              <label>木质占比</label>
              <div class="slider-container">
                <input 
                  type="range" 
                  [min]="indicatorRanges.material.woodRatio.min" 
                  [max]="indicatorRanges.material.woodRatio.max" 
                  [value]="materialIndicators.woodRatio"
                  (input)="onSliderChange('woodRatio', +$event.target.value)">
                <input 
                  type="number" 
                  class="slider-input"
                  [min]="indicatorRanges.material.woodRatio.min" 
                  [max]="indicatorRanges.material.woodRatio.max" 
                  [value]="materialIndicators.woodRatio"
                  (input)="onInputChange('woodRatio', +$event.target.value)"
                  (blur)="validateInput('woodRatio', $event.target.value)">
                <span class="unit-label">%</span>
              </div>
            </div>

            <div class="indicator-item">
              <label>金属占比</label>
              <div class="slider-container">
                <input 
                  type="range" 
                  [min]="indicatorRanges.material.metalRatio.min" 
                  [max]="indicatorRanges.material.metalRatio.max" 
                  [value]="materialIndicators.metalRatio"
                  (input)="onSliderChange('metalRatio', +$event.target.value)">
                <input 
                  type="number" 
                  class="slider-input"
                  [min]="indicatorRanges.material.metalRatio.min" 
                  [max]="indicatorRanges.material.metalRatio.max" 
                  [value]="materialIndicators.metalRatio"
                  (input)="onInputChange('metalRatio', +$event.target.value)"
                  (blur)="validateInput('metalRatio', $event.target.value)">
                <span class="unit-label">%</span>
              </div>
            </div>

            <div class="indicator-item">
              <label>光滑度</label>
              <div class="slider-container">
                <input 
                  type="range" 
                  [min]="indicatorRanges.material.smoothness.min" 
                  [max]="indicatorRanges.material.smoothness.max" 
                  [value]="materialIndicators.smoothness"
                  (input)="onSliderChange('smoothness', +$event.target.value)">
                <input 
                  type="number" 
                  class="slider-input"
                  [min]="indicatorRanges.material.smoothness.min" 
                  [max]="indicatorRanges.material.smoothness.max" 
                  [value]="materialIndicators.smoothness"
                  (input)="onInputChange('smoothness', +$event.target.value)"
                  (blur)="validateInput('smoothness', $event.target.value)">
                <span class="unit-label">/10</span>
              </div>
            </div>
          </div>

          <!-- 预设氛围 -->
          <div class="indicator-group">
            <h5>预设氛围</h5>
            <div class="atmosphere-presets">
              @for (preset of presetAtmospheres; track preset.name) {
                <div class="preset-card" (click)="applyPresetAtmosphere(preset)">
                  <div class="preset-color" [style.background]="'rgb(' + preset.rgb + ')'"></div>
                  <div class="preset-info">
                    <div class="preset-name">{{ preset.name }}</div>
                    <div class="preset-details">{{ preset.colorTemp }}</div>
                    <div class="preset-materials">
                      @for (material of preset.materials; track material) {
                        <span class="material-tag">{{ material }}</span>
                      }
                    </div>
                  </div>
                </div>
              }
            </div>
          </div>
        </div>
      </div>
    }

    <!-- 协作验证标签页 -->
    @if (activeTab === 'collaboration') {
      <div class="collaboration-section">
        <!-- 一致性预警 -->
        @if (consistencyWarnings.length > 0) {
          <div class="consistency-warning">
            <svg viewBox="0 0 24 24" fill="currentColor">
              <path d="M12 2L1 21h22L12 2zm0 3.99L19.53 19H4.47L12 5.99zM11 16h2v2h-2v-2zm0-6h2v4h-2v-4z"/>
            </svg>
            <div>
              <strong>一致性预警：</strong>
              @for (warning of consistencyWarnings; track warning) {
                <div>{{ warning }}</div>
              }
            </div>
          </div>
        }

        <!-- 需求列表 -->
        <div class="requirements-list">
          <div class="list-header">
            <h5>需求项目</h5>
            <div class="list-controls">
              <button class="btn-ghost btn-sm" (click)="sortRequirementsByPriority()">按优先级排序</button>
              <button class="btn-ghost btn-sm" (click)="saveCurrentState()">保存状态</button>
            </div>
          </div>

          @for (requirement of requirementItems; track requirement.id) {
            <div class="requirement-item" [class]="getStatusClass(requirement.status)">
              <div class="requirement-header">
                <div class="requirement-info">
                  <h6>{{ requirement.title }}</h6>
                  <p>{{ requirement.description }}</p>
                  <div class="requirement-tags">
                    @for (tag of requirement.tags; track tag) {
                      <span class="tag">{{ tag }}</span>
                    }
                  </div>
                </div>
                <div class="requirement-meta">
                  <select class="priority-select" 
                          [value]="requirement.priority" 
                          (change)="onPriorityChange(requirement.id, $event)">
                    <option value="high">高优先级</option>
                    <option value="medium">中优先级</option>
                    <option value="low">低优先级</option>
                  </select>
                  <span class="status-badge" [class]="getStatusClass(requirement.status)">
                    {{ requirement.status === 'confirmed' ? '已确认' : requirement.status === 'rejected' ? '已拒绝' : '待确认' }}
                  </span>
                </div>
              </div>
              
              <div class="requirement-actions">
                @if (requirement.status === 'pending') {
                  <button class="btn-success btn-sm" (click)="confirmRequirement(requirement.id)">确认</button>
                  <button class="btn-danger btn-sm" (click)="rejectRequirement(requirement.id, '需要进一步讨论')">拒绝</button>
                }
                <button class="btn-ghost btn-sm" (click)="requirement.showComments = !requirement.showComments">
                  评论 ({{ getCommentsForRequirement(requirement.id).length }})
                  @if (hasUnreadComments(requirement.id)) {
                    <span class="unread-indicator"></span>
                  }
                </button>
              </div>

              @if (requirement.showComments) {
                <div class="comments-section">
                  @if (getCommentsForRequirement(requirement.id).length > 0) {
                    <div class="comments-list">
                      @for (comment of getCommentsForRequirement(requirement.id); track comment.id) {
                        <div class="comment-item" [class.resolved]="comment.status === 'resolved'">
                          <div class="comment-header">
                            <span class="comment-author">{{ comment.author }}</span>
                            <span class="comment-role">{{ comment.role === 'designer' ? '设计师' : comment.role === 'customer-service' ? '客服' : '客户' }}</span>
                            <span class="comment-time">{{ comment.timestamp | date:'MM-dd HH:mm' }}</span>
                            @if (comment.status === 'pending') {
                              <button class="btn-ghost btn-xs" (click)="resolveComment(comment.id)">标记已解决</button>
                            }
                          </div>
                          <div class="comment-content">{{ comment.content }}</div>
                        </div>
                      }
                    </div>
                  }
                  <div class="add-comment">
                    <textarea #commentInput placeholder="添加评论..." rows="2"></textarea>
                    <button class="btn-primary btn-sm" (click)="addCommentToRequirement(requirement.id, commentInput.value); commentInput.value = ''">
                      发送
                    </button>
                  </div>
                </div>
              }
            </div>
          }
        </div>
      </div>
    }

    <!-- 进度管理标签页 -->
    @if (activeTab === 'progress') {
      <div class="progress-section">
        <!-- 整体进度 -->
        <div class="overall-progress">
          <div class="section-header">
            <h5>整体进度</h5>
          </div>
          
          <div class="progress-container">
            <div class="progress-visual">
              <div class="linear-progress">
                <div class="progress-track">
                  <div class="progress-bar-fill" [style.width.%]="getProgressPercentage()"></div>
                </div>
                <div class="progress-text">{{ getProgressPercentage() }}%</div>
              </div>
              
              <div class="circular-progress">
                <svg viewBox="0 0 120 120" class="progress-circle">
                  <circle cx="60" cy="60" r="54" fill="none" stroke="#e5e7eb" stroke-width="8"></circle>
                  <circle cx="60" cy="60" r="54" fill="none" stroke="#3b82f6" stroke-width="8"
                    stroke-linecap="round"
                    [attr.stroke-dasharray]="339.292"
                    [attr.stroke-dashoffset]="339.292 - (339.292 * getProgressPercentage() / 100)"
                    transform="rotate(-90 60 60)">
                  </circle>
                </svg>
                <div class="progress-text">
                  <div class="progress-percentage">{{ getProgressPercentage() }}%</div>
                  <div class="progress-label">完成度</div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 进度统计 -->
        <div class="progress-stats">
          <div class="stat-item">
              <div class="stat-number">{{ getRequirementCountByStatus('confirmed') }}</div>
              <div class="stat-label">已确认</div>
            </div>
            <div class="stat-item">
              <div class="stat-number">{{ getRequirementCountByStatus('pending') }}</div>
              <div class="stat-label">待确认</div>
            </div>
            <div class="stat-item">
              <div class="stat-number">{{ getRequirementCountByStatus('rejected') }}</div>
              <div class="stat-label">已拒绝</div>
            </div>
          <div class="stat-item">
            <div class="stat-number">{{ getUnresolvedCommentsCount() }}</div>
            <div class="stat-label">待解决评论</div>
          </div>
        </div>

        <!-- 历史状态 -->
        <div class="history-section">
          <div class="section-header">
            <h5>历史状态</h5>
            <div class="history-controls">
              <button class="btn-ghost btn-sm" (click)="saveCurrentState()">保存当前状态</button>
              <select class="history-select" (change)="onHistoryStateChange($event)">
                <option value="-1">选择历史状态</option>
                @for (state of historyStates; track $index) {
                  <option [value]="$index">{{ state.timestamp | date:'MM-dd HH:mm' }} - {{ state.author }}</option>
                }
              </select>
            </div>
          </div>

          @if (historyStates.length > 0) {
            <div class="history-timeline">
              @for (state of historyStates; track $index) {
                <div class="timeline-item" (click)="restoreHistoryState($index)">
                  <div class="timeline-marker"></div>
                  <div class="timeline-content">
                    <div class="timeline-header">
                      <span class="timeline-time">{{ state.timestamp | date:'MM-dd HH:mm' }}</span>
                      <span class="timeline-author">{{ state.author }}</span>
                    </div>
                    <div class="timeline-summary">
                      状态快照：{{ state.requirementItems.length }}个需求项，
                      {{ getRequirementCountByStatus('confirmed') }}个已确认
                    </div>
                  </div>
                </div>
              }
            </div>
          } @else {
            <div class="empty-history">
              <p>暂无历史状态记录</p>
              <button class="btn-primary btn-sm" (click)="saveCurrentState()">保存当前状态</button>
            </div>
          }
        </div>

        <!-- 需求状态分布 -->
        <div class="status-distribution">
          <h5>需求状态分布</h5>
          <div class="status-bars">
            <div class="status-bar">
              <div class="status-info">
                <span class="status-name">已确认</span>
                <span class="status-count">{{ getRequirementCountByStatus('confirmed') }}</span>
              </div>
              <div class="status-progress">
                <div class="progress-bar confirmed" 
                     [style.width.%]="getStatusPercentage('confirmed')"></div>
              </div>
            </div>
            
            <div class="status-bar">
              <div class="status-info">
                <span class="status-name">待确认</span>
                <span class="status-count">{{ getRequirementCountByStatus('pending') }}</span>
              </div>
              <div class="status-progress">
                <div class="progress-bar pending" 
                     [style.width.%]="getStatusPercentage('pending')"></div>
              </div>
            </div>
            
            <div class="status-bar">
              <div class="status-info">
                <span class="status-name">已拒绝</span>
                <span class="status-count">{{ getRequirementCountByStatus('rejected') }}</span>
              </div>
              <div class="status-progress">
                <div class="progress-bar rejected" 
                     [style.width.%]="getStatusPercentage('rejected')"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    }
  </div>
</div>

<!-- 保存状态和手动保存按钮 -->
<div class="save-section">
  <div class="save-status">
    <span class="save-icon" [class]="'save-icon-' + saveStatus">{{ getSaveStatusIcon() }}</span>
    <span class="save-text">{{ getSaveStatusText() }}</span>
  </div>
  
  <div class="save-actions">
    <button class="btn-secondary" 
            [disabled]="isSaving || !hasUnsavedChanges"
            (click)="manualSave()">
      @if (isSaving) {
        <span class="loading-spinner"></span>
        保存中...
      } @else {
        手动保存
      }
    </button>
    
    <div class="auto-save-toggle">
      <label class="toggle-label">
        <input type="checkbox" 
               [(ngModel)]="autoSaveEnabled"
               class="toggle-input">
        <span class="toggle-slider"></span>
        <span class="toggle-text">自动保存</span>
      </label>
    </div>
  </div>
</div>

<!-- 上传成功弹窗 -->
<app-upload-success-modal
  [isVisible]="showUploadSuccessModal"
  [uploadedFiles]="uploadedFiles"
  [uploadType]="uploadType"
  [analysisResult]="colorAnalysisResult"
  (closeModal)="onModalClose()"
  (analyzeColors)="onAnalyzeColors()"
  (viewReport)="onViewReport()">
</app-upload-success-modal>