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

<!-- 确认需求内容 -->
@if (!loading) {
  <div class="stage-requirements-container">
    <!-- 1. 参考图片 -->
    <ion-card class="reference-images-card">
      <ion-card-header>
        <ion-card-title>
          <ion-icon name="images-outline"></ion-icon>
          参考图片
        </ion-card-title>
        <ion-card-subtitle>上传风格、空间或材质参考图</ion-card-subtitle>
      </ion-card-header>
      <ion-card-content>
        <div class="images-grid">
          @for (image of referenceImages; track $index) {
            <div class="image-item">
              <img [src]="image.url" [alt]="image.name" />
              <div class="image-overlay">
                <ion-badge [color]="getImageTypeColor(image.type)">
                  {{ getImageTypeLabel(image.type) }}
                </ion-badge>
                @if (canEdit) {
                  <ion-button
                    fill="clear"
                    size="small"
                    color="danger"
                    (click)="deleteReferenceImage($index)">
                    <ion-icon name="trash-outline"></ion-icon>
                  </ion-button>
                }
              </div>
            </div>
          }

          @if (canEdit) {
            <div class="upload-placeholder">
              <input
                type="file"
                accept="image/*"
                (change)="uploadReferenceImage($event)"
                [disabled]="uploading"
                hidden
                #fileInput />
              <ion-button
                fill="outline"
                (click)="fileInput.click()"
                [disabled]="uploading">
                <ion-icon name="add-outline" slot="start"></ion-icon>
                上传图片
              </ion-button>
            </div>
          }
        </div>
      </ion-card-content>
    </ion-card>

    <!-- 2. CAD文件 -->
    <ion-card class="cad-files-card">
      <ion-card-header>
        <ion-card-title>
          <ion-icon name="document-outline"></ion-icon>
          CAD文件
        </ion-card-title>
        <ion-card-subtitle>上传户型图或施工图纸</ion-card-subtitle>
      </ion-card-header>
      <ion-card-content>
        @if (cadFiles.length === 0) {
          <div class="empty-state">
            <ion-icon name="document-outline"></ion-icon>
            <p>暂无CAD文件</p>
          </div>
        } @else {
          <ion-list lines="full">
            @for (file of cadFiles; track $index) {
              <ion-item>
                <ion-icon name="document-text-outline" slot="start"></ion-icon>
                <ion-label>
                  <h3>{{ file.name }}</h3>
                  <p>{{ formatFileSize(file.size) }} · {{ file.uploadTime | date:'yyyy-MM-dd HH:mm' }}</p>
                </ion-label>
                @if (canEdit) {
                  <ion-button
                    fill="clear"
                    color="danger"
                    slot="end"
                    (click)="deleteCAD($index)">
                    <ion-icon name="trash-outline"></ion-icon>
                  </ion-button>
                }
              </ion-item>
            }
          </ion-list>
        }

        @if (canEdit) {
          <input
            type="file"
            accept=".dwg,.dxf,.pdf"
            (change)="uploadCAD($event)"
            [disabled]="uploading"
            hidden
            #cadInput />
          <ion-button
            expand="block"
            fill="outline"
            (click)="cadInput.click()"
            [disabled]="uploading">
            <ion-icon name="cloud-upload-outline" slot="start"></ion-icon>
            上传CAD文件
          </ion-button>
        }
      </ion-card-content>
    </ion-card>

    <!-- 3. 需求清单 -->
    <ion-card class="requirements-card">
      <ion-card-header>
        <ion-card-title>
          <ion-icon name="list-outline"></ion-icon>
          需求清单
        </ion-card-title>
      </ion-card-header>
      <ion-card-content>
        <!-- 空间信息 -->
        <div class="section">
          <div class="section-header">
            <h3>空间信息</h3>
            @if (canEdit) {
              <ion-button size="small" fill="outline" (click)="addSpace()">
                <ion-icon name="add-outline" slot="start"></ion-icon>
                添加空间
              </ion-button>
            }
          </div>

          @if (requirements.spaces.length === 0) {
            <p class="empty-text">请添加至少一个空间</p>
          } @else {
            @for (space of requirements.spaces; track $index) {
              <div class="space-item">
                <div class="space-header">
                  <ion-badge color="primary">{{ $index + 1 }}</ion-badge>
                  @if (canEdit) {
                    <ion-button
                      fill="clear"
                      size="small"
                      color="danger"
                      (click)="removeSpace($index)">
                      <ion-icon name="close-outline"></ion-icon>
                    </ion-button>
                  }
                </div>

                <ion-list lines="none">
                  <ion-item>
                    <ion-label position="stacked">空间名称 <span class="required">*</span></ion-label>
                    <ion-input
                      [(ngModel)]="space.name"
                      [disabled]="!canEdit"
                      placeholder="如：客厅、主卧等"></ion-input>
                  </ion-item>

                  <ion-item>
                    <ion-label position="stacked">面积（㎡） <span class="required">*</span></ion-label>
                    <ion-input
                      type="number"
                      [(ngModel)]="space.area"
                      [disabled]="!canEdit"
                      placeholder="0"></ion-input>
                  </ion-item>

                  <ion-item>
                    <ion-label position="stacked">空间描述</ion-label>
                    <ion-textarea
                      [(ngModel)]="space.description"
                      [disabled]="!canEdit"
                      rows="2"
                      placeholder="描述空间用途、功能需求等"></ion-textarea>
                  </ion-item>
                </ion-list>
              </div>
            }
          }
        </div>

        <!-- 风格偏好 -->
        <div class="section">
          <ion-item>
            <ion-label position="stacked">风格偏好 <span class="required">*</span></ion-label>
            <ion-input
              [(ngModel)]="requirements.stylePreference"
              [disabled]="!canEdit"
              placeholder="如：现代简约、北欧、轻奢等"></ion-input>
          </ion-item>
        </div>

        <!-- 色彩方案 -->
        <div class="section">
          <div class="section-header">
            <h3>色彩方案</h3>
            @if (canEdit) {
              <ion-button size="small" fill="outline" (click)="openColorAnalysis()">
                <ion-icon name="color-palette-outline" slot="start"></ion-icon>
                色彩分析
              </ion-button>
            }
          </div>

          <ion-item>
            <ion-label position="stacked">色彩氛围</ion-label>
            <ion-select
              [(ngModel)]="requirements.colorScheme.atmosphere"
              [disabled]="!canEdit"
              placeholder="请选择">
              <ion-select-option value="温馨">温馨</ion-select-option>
              <ion-select-option value="高级">高级</ion-select-option>
              <ion-select-option value="简约">简约</ion-select-option>
              <ion-select-option value="时尚">时尚</ion-select-option>
            </ion-select>
          </ion-item>
        </div>

        <!-- 预算范围 -->
        <div class="section">
          <h3>预算范围（万元）</h3>
          <div class="budget-range">
            <ion-item>
              <ion-label position="stacked">最低</ion-label>
              <ion-input
                type="number"
                [(ngModel)]="requirements.budget.min"
                [disabled]="!canEdit"
                placeholder="0"></ion-input>
            </ion-item>
            <span class="separator">-</span>
            <ion-item>
              <ion-label position="stacked">最高</ion-label>
              <ion-input
                type="number"
                [(ngModel)]="requirements.budget.max"
                [disabled]="!canEdit"
                placeholder="0"></ion-input>
            </ion-item>
          </div>
        </div>

        <!-- 特殊需求 -->
        <div class="section">
          <ion-item>
            <ion-label position="stacked">特殊需求</ion-label>
            <ion-textarea
              [(ngModel)]="requirements.specialRequirements"
              [disabled]="!canEdit"
              rows="3"
              placeholder="描述任何特殊需求或注意事项"></ion-textarea>
          </ion-item>
        </div>
      </ion-card-content>
    </ion-card>

    <!-- 4. AI生成方案 -->
    <ion-card class="ai-solution-card">
      <ion-card-header>
        <ion-card-title>
          <ion-icon name="sparkles-outline"></ion-icon>
          AI设计方案
        </ion-card-title>
        <ion-card-subtitle>基于需求智能生成设计方案</ion-card-subtitle>
      </ion-card-header>
      <ion-card-content>
        @if (!aiSolution) {
          <div class="empty-state">
            <ion-icon name="bulb-outline"></ion-icon>
            <p>尚未生成AI方案</p>
            @if (canEdit) {
              <ion-button
                expand="block"
                color="primary"
                (click)="generateAISolution()"
                [disabled]="generating">
                @if (generating) {
                  <ion-spinner name="crescent" slot="start"></ion-spinner>
                  生成中...
                } @else {
                  <ion-icon name="sparkles-outline" slot="start"></ion-icon>
                  生成AI方案
                }
              </ion-button>
            }
          </div>
        } @else {
          <div class="ai-solution-content">
            <div class="solution-header">
              <ion-badge color="success">
                <ion-icon name="checkmark-circle-outline"></ion-icon>
                已生成
              </ion-badge>
              @if (canEdit) {
                <ion-button
                  size="small"
                  fill="outline"
                  (click)="generateAISolution()"
                  [disabled]="generating">
                  <ion-icon name="refresh-outline" slot="start"></ion-icon>
                  重新生成
                </ion-button>
              }
            </div>

            <!-- 空间方案 -->
            <div class="spaces-solution">
              @for (space of aiSolution.spaces; track $index) {
                <div class="space-solution-item">
                  <h4>{{ space.name }}</h4>
                  <p class="style-desc">{{ space.styleDescription }}</p>

                  <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"></div>
                      }
                    </div>
                  </div>

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

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

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

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

    <!-- 5. 操作按钮 -->
    @if (canEdit) {
      <div class="action-buttons">
        <ion-button
          expand="block"
          fill="outline"
          (click)="saveDraft()"
          [disabled]="saving">
          <ion-icon name="save-outline" slot="start"></ion-icon>
          保存草稿
        </ion-button>

        <ion-button
          expand="block"
          color="primary"
          (click)="submitRequirements()"
          [disabled]="saving || !aiSolution">
          <ion-icon name="checkmark-circle-outline" slot="start"></ion-icon>
          确认需求
        </ion-button>
      </div>
    }
  </div>
}
