<!-- 全景图合成控制区域 -->
  <div class="synthesis-controls">
    <div class="control-header">
      <h4>全景图合成</h4>
      <div class="synthesis-status" [class]="'status-' + (isProcessing() ? 'processing' : 'idle')">
        {{ isProcessing() ? '合成中' : '就绪' }}
      </div>
    </div>
    
    <div class="quality-selector">
      <label>合成质量:</label>
      <div class="quality-options">
        <button class="quality-btn" 
                [class.active]="selectedQuality() === 'standard'"
                (click)="setQuality('standard')">
          标准
        </button>
        <button class="quality-btn" 
                [class.active]="selectedQuality() === 'high'"
                (click)="setQuality('high')">
          高清
        </button>
        <button class="quality-btn" 
                [class.active]="selectedQuality() === 'ultra'"
                (click)="setQuality('ultra')">
          超清
        </button>
      </div>
    </div>
    
    <div class="batch-controls">
      <label class="batch-toggle">
        <input type="checkbox" 
               [checked]="batchMode()" 
               (change)="toggleBatchMode()">
        批量处理模式
      </label>
      
      <div class="space-selection" *ngIf="batchMode()">
        <div class="space-item" 
             *ngFor="let space of synthesis?.spaces" 
             [class.selected]="selectedSpaces().includes(space.id)">
          <label class="space-checkbox">
            <input type="checkbox" 
                   [checked]="selectedSpaces().includes(space.id)"
                   (change)="toggleSpaceSelection(space.id)">
            {{ space.name }}
          </label>
          <span class="space-type">{{ getSpaceTypeLabel(space.type) }}</span>
        </div>
      </div>
    </div>
    
    <div class="action-buttons">
      <button class="btn btn-primary" 
              (click)="batchMode() ? startBatchSynthesis() : startSynthesis()"
              [disabled]="isProcessing()">
        <i class="fas fa-play"></i>
        {{ batchMode() ? '批量合成' : '开始合成' }}
      </button>
      
      <button class="btn btn-secondary" 
              (click)="previewSynthesis(synthesis.id)"
              [disabled]="!synthesis">
        <i class="fas fa-eye"></i>
        预览
      </button>
      
      <button class="btn btn-success" 
              (click)="downloadSynthesis(synthesis.id)"
              [disabled]="!synthesis || synthesis.status !== 'completed'">
        <i class="fas fa-download"></i>
        下载
      </button>
    </div>
  </div>

  <!-- 合成统计信息 -->
  <div class="synthesis-stats" *ngIf="synthesisTasks && synthesisTasks.length > 0">
    <div class="stats-header">
      <h4>合成统计</h4>
    </div>
    
    <div class="stats-grid">
      <div class="stat-item">
        <div class="stat-value">{{ stats().totalTasks }}</div>
        <div class="stat-label">总任务数</div>
      </div>
      <div class="stat-item">
        <div class="stat-value">{{ stats().completedTasks }}</div>
        <div class="stat-label">已完成</div>
      </div>
      <div class="stat-item">
        <div class="stat-value">{{ stats().processingTasks }}</div>
        <div class="stat-label">处理中</div>
      </div>
      <div class="stat-item">
        <div class="stat-value">{{ stats().failedTasks }}</div>
        <div class="stat-label">失败</div>
      </div>
      <div class="stat-item">
        <div class="stat-value">{{ stats().averageRenderTime }}<span class="time-suffix">分钟</span></div>
        <div class="stat-label">平均渲染时间</div>
      </div>
      <div class="stat-item">
        <div class="stat-value">{{ (stats().totalFileSize / 1024 / 1024).toFixed(1) }}<span class="size-suffix">MB</span></div>
        <div class="stat-label">总文件大小</div>
      </div>
    </div>
  </div>

  <!-- 任务列表 -->
  <div class="task-list" *ngIf="synthesisTasks && synthesisTasks.length > 0">
    <div class="task-header">
      <h4>合成任务</h4>
      <span class="task-count">{{ synthesisTasks.length }} 个任务</span>
    </div>
    
    <div class="task-items">
      <div class="task-item" 
           *ngFor="let task of synthesisTasks" 
           [class]="'status-' + task.status">
        <div class="task-info">
          <div class="task-name">{{ task.spaceName }}</div>
          <div class="task-meta">
            <span class="quality">{{ task.quality === 'standard' ? '标准' : task.quality === 'high' ? '高清' : '超清' }}</span>
            <span class="progress" *ngIf="task.status === 'processing'">{{ task.progress }}%</span>
            <span class="render-time" *ngIf="task.renderTime">{{ task.renderTime }}分钟</span>
          </div>
        </div>
        
        <div class="task-status">
          <span class="status-badge" [class]="'badge-' + task.status">
            {{ task.status === 'pending' ? '等待中' : 
               task.status === 'processing' ? '处理中' : 
               task.status === 'completed' ? '已完成' : '失败' }}
          </span>
        </div>
        
        <div class="task-actions">
          <button class="btn btn-sm btn-primary" 
                  (click)="previewSynthesis(task.id)"
                  *ngIf="task.status === 'completed'">
            <i class="fas fa-eye"></i>
          </button>
          
          <button class="btn btn-sm btn-success" 
                  (click)="downloadSynthesis(task.id)"
                  *ngIf="task.status === 'completed'">
            <i class="fas fa-download"></i>
          </button>
          
          <button class="btn btn-sm btn-warning" 
                  (click)="retryFailedTask(task.id)"
                  *ngIf="task.status === 'failed'">
            <i class="fas fa-redo"></i>
          </button>
          
          <button class="btn btn-sm btn-danger" 
                  (click)="cancelTask(task.id)"
                  *ngIf="task.status === 'processing'">
            <i class="fas fa-stop"></i>
          </button>
        </div>
      </div>
    </div>
  </div>