<!-- 加载中 -->
@if (loading) {
  <div class="loading-container">
    <div class="spinner">
      <div class="spinner-circle"></div>
    </div>
    <p>加载需求信息...</p>
  </div>
}

<!-- 确认需求内容 -->
@if (!loading) {
  <div class="stage-requirements-container">
    <!-- 多产品切换器 -->
    @if (isMultiProductProject) {
      <div class="space-selector">
        <div class="space-tabs">
          @for (product of projectProducts; track product.id) {
            <button
              class="space-tab"
              [class.active]="activeProductId == product.id"
              (click)="selectProduct(product.id)">
              <span class="space-icon">{{ getSpaceIcon(product.type) }}</span>
              <span>{{ getProductDisplayName(product) }}</span>
              <span class="progress-indicator" [style.width]="calculateProductCompletion(product.id) + '%'"></span>
            </button>
          }
        </div>
      </div>
    }

    <!-- 需求分段导航 -->
    <div class="requirements-segment">
      <div class="segment-buttons">
        <button
          class="segment-btn"
          [class.active]="requirementsSegment == 'global'"
          (click)="selectRequirementsSegment('global')">
          全局需求
        </button>
        @if (isMultiProductProject) {
          <button
            class="segment-btn"
            [class.active]="requirementsSegment == 'spaces'"
            (click)="selectRequirementsSegment('spaces')">
            产品需求
          </button>
          <button
            class="segment-btn"
            [class.active]="requirementsSegment == 'cross-space'"
            (click)="selectRequirementsSegment('cross-space')">
            跨产品协调
          </button>
        }
      </div>
    </div>

    <!-- 全局需求 -->
    @if (requirementsSegment == 'global') {
      <div class="global-requirements">
        <!-- 参考图片 -->
        <div class="card reference-images-card">
          <div class="card-header">
            <h3 class="card-title">
              <span class="icon">📷</span>
              参考图片
            </h3>
            <p class="card-subtitle">上传风格、空间或材质参考图</p>
            <div class="ai-analysis-actions">
              @if (referenceImages.length > 0 && canEdit) {
                <button
                  class="btn btn-sm btn-primary"
                  (click)="analyzeReferenceImages()"
                  [disabled]="aiAnalyzingImages">
                  @if (aiAnalyzingImages) {
                    <div class="spinner-small">
                      <div class="spinner-circle"></div>
                    </div>
                    AI分析中...
                  } @else {
                    <ion-icon name="sparkles"></ion-icon>
                    AI分析图片
                  }
                </button>
              }
            </div>
          </div>
          <div class="card-content">
            <!-- AI图片分析结果 -->
            @if (aiAnalysisResults.imageAnalysis && aiAnalysisResults.imageAnalysis.length > 0) {
              <div class="ai-analysis-results">
                <div class="analysis-header">
                  <span class="badge badge-success">
                    <ion-icon name="checkmark-circle"></ion-icon>
                    AI分析完成
                  </span>
                </div>
                <div class="analysis-grid">
                  @for (analysis of aiAnalysisResults.imageAnalysis; track analysis.imageId) {
                    
                    @if (analysisImageMap[analysis.imageId]) {
                      <div class="analysis-item">
                        <div class="analysis-image">
                          <img [src]="analysisImageMap[analysis.imageId]?.url" [alt]="analysisImageMap[analysis.imageId]?.name" />
                          <div class="confidence-badge">
                            <span>AI识别置信度: {{ (analysis.confidence * 100).toFixed(1) }}%</span>
                          </div>
                        </div>
                        <div class="analysis-content">
                          <div class="analysis-section">
                            <h5>风格元素</h5>
                            <div class="tags">
                              @for (element of analysis.styleElements; track $index) {
                                <span class="badge badge-secondary">{{ element }}</span>
                              }
                            </div>
                          </div>
                          <div class="analysis-section">
                            <h5>色彩搭配</h5>
                            <div class="color-palette">
                              @for (color of analysis.colorPalette; track $index) {
                                <div class="color-swatch" [style.background-color]="color" [title]="color"></div>
                              }
                            </div>
                          </div>
                          <div class="analysis-section">
                            <h5>材质分析</h5>
                            <div class="tags">
                              @for (material of analysis.materialAnalysis; track $index) {
                                <span class="badge badge-tertiary">{{ material }}</span>
                              }
                            </div>
                          </div>
                          <div class="analysis-section">
                            <h5>布局特征</h5>
                            <div class="tags">
                              @for (feature of analysis.layoutFeatures; track $index) {
                                <span class="badge badge-outline">{{ feature }}</span>
                              }
                            </div>
                          </div>
                          <div class="analysis-section">
                            <h5>空间氛围</h5>
                            <p>{{ analysis.mood }}</p>
                          </div>
                        </div>
                      </div>
                    }
                  }
                </div>
              </div>
            }

            <div class="images-grid">
              @for (image of getFilteredReferenceImages(); track image.id) {
                <div class="image-item">
                  <img [src]="image.url" [alt]="image.name" />
                  <div class="image-overlay">
                    <span class="badge" [class]="getImageTypeBadgeClass(image.type)">
                      {{ getImageTypeLabel(image.type) }}
                    </span>
                    @if (image.spaceId) {
                      <span class="badge badge-outline">{{ getProductDisplayNameById(image.spaceId || '') }}</span>
                    }
                    @if (hasImageAnalysis(image.id)) {
                      <span class="badge badge-success">
                        <ion-icon name="sparkles"></ion-icon>
                        已分析
                      </span>
                    }
                    @if (canEdit) {
                      <button
                        class="btn-icon btn-danger"
                        (click)="deleteReferenceImage(image.id)">
                        <ion-icon name="trash"></ion-icon>
                      </button>
                    }
                  </div>
                </div>
              }

              @if (canEdit) {
                <div class="upload-placeholder">
                  <input
                    type="file"
                    id="referenceFileInput"
                    accept="image/*"
                    multiple
                    (change)="uploadReferenceImage($event, activeProductId)"
                    [disabled]="uploading"
                    hidden />
                  <button
                    class="btn btn-outline"
                    (click)="triggerFileClick('referenceFileInput')"
                    [disabled]="uploading">
                    <ion-icon name="add"></ion-icon>
                    上传图片
                  </button>
                </div>
              }
            </div>
          </div>
        </div>

        <!-- CAD文件 -->
        <div class="card cad-files-card">
          <div class="card-header">
            <h3 class="card-title">
              <span class="icon">📄</span>
              CAD文件
            </h3>
            <p class="card-subtitle">上传户型图或施工图纸</p>
            <div class="ai-analysis-actions">
              @if (cadFiles.length > 0 && canEdit) {
                <button
                  class="btn btn-sm btn-primary"
                  (click)="analyzeCADFiles()"
                  [disabled]="aiAnalyzingCAD">
                  @if (aiAnalyzingCAD) {
                    <div class="spinner-small">
                      <div class="spinner-circle"></div>
                    </div>
                    AI分析中...
                  } @else {
                    <ion-icon name="sparkles"></ion-icon>
                    AI分析CAD
                  }
                </button>
              }
            </div>
          </div>
          <div class="card-content">
            <!-- AI CAD分析结果 -->
            @if (aiAnalysisResults.cadAnalysis && aiAnalysisResults.cadAnalysis.length > 0) {
              <div class="ai-analysis-results">
                <div class="analysis-header">
                  <span class="badge badge-success">
                    <ion-icon name="checkmark-circle"></ion-icon>
                    CAD分析完成
                  </span>
                </div>
                <div class="cad-analysis-grid">
                  @for (analysis of aiAnalysisResults.cadAnalysis; track analysis.fileId) {

                    @if (analysisFileMap[analysis.fileId]) {
                      <div class="cad-analysis-item">
                        <div class="cad-file-info">
                          <ion-icon name="document-text" class="file-icon"></ion-icon>
                          <div class="file-details">
                            <h4>{{ analysisFileMap[analysis.fileId]?.name }}</h4>
                            <p>{{ formatFileSize(analysisFileMap[analysis.fileId]?.size || 0) }}</p>
                          </div>
                        </div>
                        <div class="cad-analysis-content">
                          <div class="analysis-section">
                            <h5>空间结构</h5>
                            <div class="structure-info">
                              <div class="info-item">
                                <span class="label">总面积：</span>
                                <span class="value">{{ analysis.spaceStructure.totalArea }}</span>
                              </div>
                              <div class="info-item">
                                <span class="label">房间数量：</span>
                                <span class="value">{{ analysis.spaceStructure.roomCount }}</span>
                              </div>
                              <div class="info-item">
                                <span class="label">布局类型：</span>
                                <span class="value">{{ analysis.spaceStructure.layoutType }}</span>
                              </div>
                            </div>
                          </div>
                          <div class="analysis-section">
                            <h5>尺寸信息</h5>
                            <div class="dimensions-info">
                              <div class="info-item">
                                <span class="label">长度：</span>
                                <span class="value">{{ analysis.dimensions.length }}</span>
                              </div>
                              <div class="info-item">
                                <span class="label">宽度：</span>
                                <span class="value">{{ analysis.dimensions.width }}</span>
                              </div>
                              <div class="info-item">
                                <span class="label">层高：</span>
                                <span class="value">{{ analysis.dimensions.height }}</span>
                              </div>
                            </div>
                          </div>
                          <div class="analysis-section">
                            <h5>限制因素</h5>
                            <div class="tags">
                              @for (constraint of analysis.constraints; track $index) {
                                <span class="badge badge-warning">{{ constraint }}</span>
                              }
                            </div>
                          </div>
                          <div class="analysis-section">
                            <h5>优化机会</h5>
                            <div class="tags">
                              @for (opportunity of analysis.opportunities; track $index) {
                                <span class="badge badge-success">{{ opportunity }}</span>
                              }
                            </div>
                          </div>
                        </div>
                      </div>
                    }
                  }
                </div>
              </div>
            }

            @if (getFilteredCADFiles().length == 0) {
              <div class="empty-state">
                <ion-icon name="document-outline" class="icon-large"></ion-icon>
                <p>暂无CAD文件</p>
              </div>
            } @else {
              <div class="file-list">
                @for (file of getFilteredCADFiles(); track file.id) {
                  <div class="file-item">
                    <ion-icon name="document-text" class="file-icon"></ion-icon>
                    <div class="file-info">
                      <h4>{{ file.name }}</h4>
                      <p>{{ formatFileSize(file.size) }} · {{ file.uploadTime | date:'yyyy-MM-dd HH:mm' }}</p>
                      @if (file.spaceId) {
                        <span class="badge badge-outline">{{ getProductDisplayNameById(file.spaceId || '') }}</span>
                      }
                      @if (hasCadAnalysis(file.id)) {
                        <span class="badge badge-success">
                          <ion-icon name="sparkles"></ion-icon>
                          已分析
                        </span>
                      }
                    </div>
                    @if (canEdit) {
                      <button
                        class="btn-icon btn-danger"
                        (click)="deleteCAD(file.id)">
                        <ion-icon name="trash"></ion-icon>
                      </button>
                    }
                  </div>
                }
              </div>
            }

            @if (canEdit) {
              <input
                type="file"
                accept=".dwg,.dxf,.pdf"
                multiple
                (change)="uploadCAD($event, activeProductId)"
                [disabled]="uploading"
                hidden
                id="cadFileInput" />
              <button
                class="btn btn-outline btn-block"
                (click)="triggerFileClick('cadFileInput')"
                [disabled]="uploading">
                <ion-icon name="cloud-upload"></ion-icon>
                上传CAD文件
              </button>
            }
          </div>
        </div>

        <!-- 风格偏好 -->
        <div class="card style-preferences-card">
          <div class="card-header">
            <h3 class="card-title">
              <span class="icon">🎨</span>
              风格偏好
            </h3>
          </div>
          <div class="card-content">
            <div class="form-group">
              <label class="form-label">风格偏好 <span class="required">*</span></label>
              <input
                type="text"
                class="form-input"
                [(ngModel)]="globalRequirements.stylePreference"
                [disabled]="!canEdit"
                placeholder="如：现代简约、北欧、轻奢等" />
            </div>

            <!-- 色彩方案 -->
            <div class="color-scheme">
              <div class="form-group">
                <label class="form-label">色彩氛围</label>
                <select
                  class="form-select"
                  [(ngModel)]="globalRequirements.colorScheme.atmosphere"
                  [disabled]="!canEdit">
                  <option value="">请选择</option>
                  <option value="温馨">温馨</option>
                  <option value="高级">高级</option>
                  <option value="简约">简约</option>
                  <option value="时尚">时尚</option>
                  <option value="北欧">北欧</option>
                  <option value="中式">中式</option>
                  <option value="欧式">欧式</option>
                </select>
              </div>

              <div class="color-inputs">
                <div class="form-group">
                  <label class="form-label">主色调</label>
                  <input
                    type="color"
                    class="form-color-input"
                    [(ngModel)]="globalRequirements.colorScheme.primary"
                    [disabled]="!canEdit" />
                </div>
                <div class="form-group">
                  <label class="form-label">副色调</label>
                  <input
                    type="color"
                    class="form-color-input"
                    [(ngModel)]="globalRequirements.colorScheme.secondary"
                    [disabled]="!canEdit" />
                </div>
                <div class="form-group">
                  <label class="form-label">点缀色</label>
                  <input
                    type="color"
                    class="form-color-input"
                    [(ngModel)]="globalRequirements.colorScheme.accent"
                    [disabled]="!canEdit" />
                </div>
              </div>
            </div>

            <!-- 预算范围 -->
            <div class="budget-range">
              <h4>预算范围（万元）</h4>
              <div class="budget-inputs">
                <div class="form-group">
                  <label class="form-label">最低</label>
                  <input
                    type="number"
                    class="form-input"
                    [(ngModel)]="globalRequirements.overallBudget.min"
                    [disabled]="!canEdit"
                    placeholder="0" />
                </div>
                <span class="separator">-</span>
                <div class="form-group">
                  <label class="form-label">最高</label>
                  <input
                    type="number"
                    class="form-input"
                    [(ngModel)]="globalRequirements.overallBudget.max"
                    [disabled]="!canEdit"
                    placeholder="0" />
                </div>
              </div>
            </div>

            <!-- 质量等级 -->
            <div class="quality-level">
              <label class="form-label">质量等级</label>
              <div class="radio-group">
                <label class="radio-item">
                  <input
                    type="radio"
                    name="qualityLevel"
                    value="standard"
                    [(ngModel)]="globalRequirements.qualityLevel"
                    [disabled]="!canEdit" />
                  <span class="radio-label">{{ getQualityLevelName('standard') }}</span>
                </label>
                <label class="radio-item">
                  <input
                    type="radio"
                    name="qualityLevel"
                    value="premium"
                    [(ngModel)]="globalRequirements.qualityLevel"
                    [disabled]="!canEdit" />
                  <span class="radio-label">{{ getQualityLevelName('premium') }}</span>
                </label>
                <label class="radio-item">
                  <input
                    type="radio"
                    name="qualityLevel"
                    value="luxury"
                    [(ngModel)]="globalRequirements.qualityLevel"
                    [disabled]="!canEdit" />
                  <span class="radio-label">{{ getQualityLevelName('luxury') }}</span>
                </label>
              </div>
            </div>

            <!-- 特殊需求 -->
            <div class="form-group">
              <label class="form-label">特殊需求</label>
              <textarea
                class="form-textarea"
                [(ngModel)]="globalRequirements.specialRequirements"
                [disabled]="!canEdit"
                rows="3"
                placeholder="描述任何特殊需求或注意事项"></textarea>
            </div>
          </div>
        </div>
      </div>
    }

    <!-- 空间需求 -->
    @if (requirementsSegment == 'spaces' && isMultiProductProject) {
      <div class="space-requirements">
        @for (space of projectProducts; track space.id) {
          <div class="card space-requirement-card" [class.active]="activeProductId == space.id">
            <div class="card-header">
              <h3 class="card-title">
                <span class="space-icon">{{ getSpaceIcon(space.type) }}</span>
                {{ getSpaceDisplayName(space) }}
              </h3>
              <span class="completion-badge">{{ calculateProductCompletion(space.id) }}%</span>
            </div>
            <div class="card-content">
              <!-- 这里可以添加空间特定的需求字段 -->
              <div class="form-group">
                <label class="form-label">空间特殊要求</label>
                <textarea
                  class="form-textarea"
                  [(ngModel)]="currentProductSpecificRequirements"
                  [disabled]="!canEdit"
                  rows="2"
                  placeholder="描述该空间的特殊要求"></textarea>
              </div>

              <!-- 空间特定的参考图片 -->
              <div class="space-reference-images">
                <h4>空间参考图片</h4>
                <div class="images-grid small">
                  @for (image of getSpaceReferenceImages(space.id); track image.id) {
                    <div class="image-item small">
                      <img [src]="image.url" [alt]="image.name" />
                      <div class="image-overlay">
                        @if (canEdit) {
                          <button
                            class="btn-icon btn-danger"
                            (click)="deleteReferenceImage(image.id)">
                            <ion-icon name="trash"></ion-icon>
                          </button>
                        }
                      </div>
                    </div>
                  }

                  @if (canEdit) {
                    <div class="upload-placeholder small">
                      <input
                        type="file"
                        accept="image/*"
                        multiple
                        (change)="uploadReferenceImage($event, space.id)"
                        [disabled]="uploading"
                        hidden
                        id="spaceFileInput_{{ space.id }}" />
                      <button
                        class="btn btn-outline btn-sm"
                        (click)="triggerFileClick('spaceFileInput_' + space.id)"
                        [disabled]="uploading">
                        <ion-icon name="add"></ion-icon>
                      </button>
                    </div>
                  }
                </div>
              </div>
            </div>
          </div>
        }
      </div>
    }

    <!-- 跨空间协调需求 -->
    @if (requirementsSegment == 'cross-space' && isMultiProductProject) {
      <div class="cross-space-requirements">
        <div class="card">
          <div class="card-header">
            <h3 class="card-title">
              <ion-icon name="links"></ion-icon>
              跨空间协调需求
            </h3>
            <button class="btn btn-outline btn-sm" (click)="createCrossProductRequirement()">
              <ion-icon name="add"></ion-icon>
              添加协调需求
            </button>
          </div>
          <div class="card-content">
            @if (crossSpaceRequirements.length == 0) {
              <div class="empty-state">
                <ion-icon name="links-outline" class="icon-large"></ion-icon>
                <p>暂无跨空间协调需求</p>
              </div>
            } @else {
              <div class="cross-space-list">
                @for (requirement of crossSpaceRequirements; track requirement.id) {
                  <div class="cross-space-item">
                    <div class="item-header">
                      <span class="badge badge-primary">{{ getCrossSpaceRequirementTypeName(requirement.type) }}</span>
                      <button
                        class="btn-icon btn-danger"
                        (click)="deleteCrossProductRequirement(requirement.id)">
                        <ion-icon name="trash"></ion-icon>
                      </button>
                    </div>
                    <p class="description">{{ requirement.description }}</p>
                    <div class="related-spaces">
                      <span class="label">涉及空间：</span>
                      <div class="space-tags">
                        @for (spaceId of getRelatedSpaceIds(requirement); track spaceId) {
                          <span class="badge badge-outline">
                            {{ getProductDisplayNameById(spaceId) }}
                          </span>
                        }
                      </div>
                    </div>
                  </div>
                }
              </div>
            }
          </div>
        </div>
      </div>
    }

    <!-- 综合AI分析 -->
    @if (aiAnalysisResults.comprehensiveAnalysis) {
      <div class="card comprehensive-analysis-card">
        <div class="card-header">
          <h3 class="card-title">
            <ion-icon name="analytics"></ion-icon>
            综合AI分析
          </h3>
          <span class="badge badge-success">
            <ion-icon name="checkmark-circle"></ion-icon>
            分析完成
          </span>
        </div>
        <div class="card-content">
          <div class="comprehensive-analysis-content">
            <!-- 整体风格 -->
            <div class="analysis-section">
              <h4>整体风格定位</h4>
              <p>{{ aiAnalysisResults.comprehensiveAnalysis.overallStyle }}</p>
            </div>

            <!-- AI推荐色彩方案 -->
            <div class="analysis-section">
              <h4>AI推荐色彩方案</h4>
              <div class="ai-color-scheme">
                <div class="color-item">
                  <div class="color-swatch" [style.background-color]="aiAnalysisResults.comprehensiveAnalysis.colorScheme.primary" [title]="aiAnalysisResults.comprehensiveAnalysis.colorScheme.primary"></div>
                  <span class="color-label">主色调</span>
                </div>
                <div class="color-item">
                  <div class="color-swatch" [style.background-color]="aiAnalysisResults.comprehensiveAnalysis.colorScheme.secondary" [title]="aiAnalysisResults.comprehensiveAnalysis.colorScheme.secondary"></div>
                  <span class="color-label">副色调</span>
                </div>
                <div class="color-item">
                  <div class="color-swatch" [style.background-color]="aiAnalysisResults.comprehensiveAnalysis.colorScheme.accent" [title]="aiAnalysisResults.comprehensiveAnalysis.colorScheme.accent"></div>
                  <span class="color-label">点缀色</span>
                </div>
              </div>
            </div>

            <!-- 材质推荐 -->
            <div class="analysis-section">
              <h4>AI材质推荐</h4>
              <div class="tags">
                @for (material of aiAnalysisResults.comprehensiveAnalysis.materialRecommendations; track $index) {
                  <span class="badge badge-tertiary">{{ material }}</span>
                }
              </div>
            </div>

            <!-- 布局优化建议 -->
            <div class="analysis-section">
              <h4>布局优化建议</h4>
              <ul class="optimization-list">
                @for (optimization of aiAnalysisResults.comprehensiveAnalysis.layoutOptimization; track $index) {
                  <li>{{ optimization }}</li>
                }
              </ul>
            </div>

            <!-- AI预算评估 -->
            <div class="analysis-section">
              <h4>AI预算评估</h4>
              <div class="budget-assessment">
                <div class="budget-range">
                  <span class="label">预估范围：</span>
                  <span class="value">¥{{ aiAnalysisResults.comprehensiveAnalysis.budgetAssessment.estimatedMin?.toLocaleString() }} - ¥{{ aiAnalysisResults.comprehensiveAnalysis.budgetAssessment.estimatedMax?.toLocaleString() }}</span>
                </div>
                <div class="risk-level">
                  <span class="label">风险等级：</span>
                  <span class="badge" [class]="getRiskLevelClass(aiAnalysisResults.comprehensiveAnalysis.budgetAssessment.riskLevel)">
                    {{ getRiskLevelName(aiAnalysisResults.comprehensiveAnalysis.budgetAssessment.riskLevel) }}
                  </span>
                </div>
              </div>
            </div>

            <!-- 风险因素 -->
            <div class="analysis-section">
              <h4>潜在风险因素</h4>
              <div class="tags">
                @for (risk of aiAnalysisResults.comprehensiveAnalysis.riskFactors; track $index) {
                  <span class="badge badge-warning">{{ risk }}</span>
                }
              </div>
            </div>
          </div>
        </div>
      </div>
    }

    <!-- AI生成方案 -->
    <div class="card ai-solution-card">
      <div class="card-header">
        <h3 class="card-title">
          <ion-icon name="sparkles"></ion-icon>
          AI设计方案
        </h3>
        <div class="completion-indicator">
          <span class="label">需求完成度</span>
          <div class="progress-bar">
            <div class="progress-fill" [style.width]="calculateRequirementsCompleteness() + '%'"></div>
          </div>
          <span class="progress-text">{{ calculateRequirementsCompleteness() }}%</span>
        </div>
      </div>
      <div class="card-content">
        @if (!aiSolution) {
          <div class="empty-state">
            <ion-icon name="sparkles-outline" class="icon-large"></ion-icon>
            <p>尚未生成AI方案</p>
            @if (canEdit) {
              <button
                class="btn btn-primary"
                (click)="generateAISolution()"
                [disabled]="generating || aiGeneratingComprehensive">
                @if (generating || aiGeneratingComprehensive) {
                  <div class="spinner-small">
                    <div class="spinner-circle"></div>
                  </div>
                  生成中...
                } @else {
                  <ion-icon name="sparkles"></ion-icon>
                  生成AI方案
                }
              </button>
            }
          </div>
        } @else {
          <div class="ai-solution-content">
            <div class="solution-header">
              <span class="badge badge-success">
                <ion-icon name="checkmark"></ion-icon>
                已生成
              </span>
              @if (canEdit) {
                <button
                  class="btn btn-outline btn-sm"
                  (click)="generateAISolution()"
                  [disabled]="generating || aiGeneratingComprehensive">
                  <ion-icon name="refresh"></ion-icon>
                  重新生成
                </button>
              }
            </div>

            <div class="solution-summary">
              <p>{{ aiSolution.content }}</p>
            </div>

            <!-- 空间方案 -->
            <div class="spaces-solution">
              @for (space of aiSolution.spaces; track space.id) {
                <div class="space-solution-item">
                  <div class="space-header">
                    <span class="space-icon">{{ getSpaceIcon(space.type) }}</span>
                    <h4>{{ space.name }}</h4>
                    <span class="badge" [class]="getProcessBadgeClass(space.type)">{{ getSpaceTypeName(space.type) }}</span>
                  </div>
                  <p class="style-desc">{{ space.styleDescription }}</p>

                  <div class="solution-details">
                    <div class="detail-item">
                      <span class="label">预估造价：</span>
                      <span class="value">¥{{ space.estimatedCost }}</span>
                    </div>
                    <div class="detail-item">
                      <span class="label">工期：</span>
                      <span class="value">{{ space.timeline }}</span>
                    </div>
                  </div>

                  <div class="color-palette">
                    <span class="label">色彩搭配：</span>
                    <div class="colors">
                      @for (color of space.colorPalette; track color) {
                        <div class="color-swatch" [style.background-color]="color" [title]="color"></div>
                      }
                    </div>
                  </div>

                  <div class="materials">
                    <span class="label">材质选择：</span>
                    <div class="tags">
                      @for (material of space.materials; track material) {
                        <span class="badge badge-tertiary">{{ material }}</span>
                      }
                    </div>
                  </div>

                  <div class="furniture">
                    <span class="label">家具推荐：</span>
                    <div class="tags">
                      @for (item of space.furnitureRecommendations; track item) {
                        <span class="badge badge-secondary">{{ item }}</span>
                      }
                    </div>
                  </div>
                </div>
              }
            </div>

            <!-- 跨空间协调方案 -->
            @if (aiSolution.crossSpaceCoordination && isMultiProductProject) {
              <div class="cross-space-coordination">
                <h4>跨空间协调方案</h4>
                <div class="coordination-items">
                  <div class="coordination-item">
                    <span class="icon">🎨</span>
                    <div>
                      <h5>风格统一</h5>
                      <p>{{ aiSolution.crossSpaceCoordination.styleConsistency.description }}</p>
                    </div>
                  </div>
                  <div class="coordination-item">
                    <ion-icon name="git-network"></ion-icon>
                    <div>
                      <h5>功能流线</h5>
                      <p>{{ aiSolution.crossSpaceCoordination.functionalFlow.description }}</p>
                    </div>
                  </div>
                  <div class="coordination-item">
                    <ion-icon name="time"></ion-icon>
                    <div>
                      <h5>时间协调</h5>
                      <p>{{ aiSolution.crossSpaceCoordination.timelineCoordination.strategy }}</p>
                    </div>
                  </div>
                </div>
              </div>
            }

            <!-- 预算与时间线 -->
            <div class="summary">
              <div class="summary-item">
                <ion-icon name="cash"></ion-icon>
                <div>
                  <p class="label">预估总造价</p>
                  <h3>¥{{ aiSolution.estimatedCost }}</h3>
                </div>
              </div>

              <div class="summary-item">
                <ion-icon name="time"></ion-icon>
                <div>
                  <p class="label">项目周期</p>
                  <p>{{ aiSolution.timeline }}</p>
                </div>
              </div>
            </div>
          </div>
        }
      </div>
    </div>

    <!-- AI聊天助手 -->
    <div class="card ai-chat-card">
      <div class="card-header">
        <h3 class="card-title">
          <ion-icon name="chatbubbles"></ion-icon>
          AI设计助手
        </h3>
        <button
          class="btn btn-sm btn-outline"
          (click)="toggleAIChat()">
          <ion-icon [name]="showAIChat ? 'chevron-up' : 'chevron-down'"></ion-icon>
          {{ showAIChat ? '收起' : '展开' }}
        </button>
      </div>
      @if (showAIChat) {
        <div class="card-content">
          <div class="ai-chat-container">
            <!-- 聊天消息列表 -->
            <div class="chat-messages" #chatMessages>
              @for (message of aiChatMessages; track message.id) {
                <div class="message" [class.user-message]="message.role == 'user'" [class.ai-message]="message.role == 'assistant'">
                  <div class="message-avatar">
                    @if (message.role == 'user') {
                      <ion-icon name="person-circle"></ion-icon>
                    } @else {
                      <ion-icon name="sparkles"></ion-icon>
                    }
                  </div>
                  <div class="message-content">
                    <div class="message-text">{{ message.content }}</div>
                    <div class="message-time">{{ message.timestamp | date:'HH:mm' }}</div>
                  </div>
                </div>
              }
              @if (aiChatMessages.length == 0) {
                <div class="empty-chat">
                  <ion-icon name="chatbubble-ellipses-outline" class="icon-large"></ion-icon>
                  <p>向AI设计助手咨询任何家装问题</p>
                </div>
              }
            </div>

            <!-- 输入区域 -->
            <div class="chat-input">
              <div class="input-group">
                <input
                  type="text"
                  class="form-input"
                  [ngModel]="aiChatInput"
                  (ngModelChange)="onAiChatInputChange($event)"
                  (keydown.enter)="sendAIChatMessage()"
                  placeholder="询问家装设计相关问题..."
                  [disabled]="aiAnalyzing" />
                <button
                  class="btn btn-primary"
                  (click)="sendAIChatMessage()"
                  [disabled]="isAiChatSendDisabled()">
                  <ion-icon name="send"></ion-icon>
                </button>
              </div>
            </div>
          </div>
        </div>
      }
    </div>

    <!-- 操作按钮 -->
    @if (canEdit) {
      <div class="action-buttons">
        <button
          class="btn btn-outline"
          (click)="saveDraft()"
          [disabled]="isSaving()">
          <ion-icon name="save"></ion-icon>
          保存草稿
        </button>

        <button
          class="btn btn-primary"
          (click)="submitRequirements()"
          [disabled]="isSubmitDisabled()">
          <ion-icon name="checkmark"></ion-icon>
          确认需求
        </button>
      </div>
    }
  </div>
}