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

<!-- 交付执行内容 -->
@if (!loading) {
  <div class="stage-delivery-container">
    <!-- 完成进度卡片 -->
    <ion-card class="progress-card">
      <ion-card-content>
        <div class="progress-info">
          <h3>交付进度</h3>
          <div class="progress-value">{{ completionProgress }}%</div>
        </div>
        <ion-progress-bar [value]="completionProgress / 100" color="success"></ion-progress-bar>
        <p class="progress-detail">
          已完成 {{ getApprovedCount() }} / {{ deliverables.length }} 项
        </p>
      </ion-card-content>
    </ion-card>

    <!-- 按空间分组的交付物 -->
    @for (group of deliverablesBySpace; track group.spaceName) {
      <ion-card class="space-deliverables-card">
        <ion-card-header>
          <ion-card-title>
            <ion-icon name="cube-outline"></ion-icon>
            {{ group.spaceName }}
          </ion-card-title>
        </ion-card-header>
        <ion-card-content>
          @for (deliverable of group.items; track deliverable.processType) {
            <div class="deliverable-item">
              <div class="deliverable-header">
                <ion-badge [color]="getProcessColor(deliverable.processType)">
                  {{ deliverable.processName }}
                </ion-badge>
                <ion-badge [color]="getStatusColor(deliverable.status)">
                  {{ getStatusText(deliverable.status) }}
                </ion-badge>
              </div>

              <!-- 文件列表 -->
              <div class="files-section">
                @if (deliverable.files.length === 0) {
                  <p class="empty-text">暂无文件</p>
                } @else {
                  <div class="files-grid">
                    @for (file of deliverable.files; track $index) {
                      <div class="file-item">
                        @if (file.type === 'image') {
                          <img [src]="file.url" [alt]="file.name" />
                        } @else {
                          <ion-icon name="document-outline"></ion-icon>
                          <span>{{ file.name }}</span>
                        }
                        @if (canEdit && isDesigner && deliverable.status === 'draft') {
                          <ion-button
                            fill="clear"
                            size="small"
                            color="danger"
                            (click)="deleteFile(group.spaceName, deliverable.processType, $index)">
                            <ion-icon name="close-outline"></ion-icon>
                          </ion-button>
                        }
                      </div>
                    }
                  </div>
                }

                @if (canEdit && isDesigner && deliverable.status !== 'approved') {
                  <input
                    type="file"
                    accept="image/*,video/*,.pdf"
                    (change)="uploadFile($event, group.spaceName, deliverable.processType)"
                    [disabled]="uploading"
                    hidden
                    #fileInput />
                  <ion-button
                    expand="block"
                    fill="outline"
                    size="small"
                    (click)="fileInput.click()"
                    [disabled]="uploading">
                    <ion-icon name="cloud-upload-outline" slot="start"></ion-icon>
                    上传文件
                  </ion-button>
                }
              </div>

              <!-- 质量自查（设计师） -->
              @if (isDesigner && deliverable.files.length > 0 && deliverable.status === 'draft') {
                <div class="quality-check-section">
                  <div class="section-header">
                    <h4>质量自查</h4>
                    @if (!deliverable.qualityCheck) {
                      <ion-button
                        size="small"
                        fill="outline"
                        (click)="performQualityCheck(group.spaceName, deliverable.processType)">
                        开始自查
                      </ion-button>
                    }
                  </div>

                  @if (deliverable.qualityCheck) {
                    <ion-list lines="none">
                      @for (item of deliverable.qualityCheck.items; track $index) {
                        <ion-item>
                          <ion-checkbox [(ngModel)]="item.passed"></ion-checkbox>
                          <ion-label>{{ item.label }}</ion-label>
                        </ion-item>
                      }
                    </ion-list>

                    <ion-button
                      expand="block"
                      color="primary"
                      (click)="deliverable.qualityCheck.checked = true; submitForReview(group.spaceName, deliverable.processType)"
                      [disabled]="!isQualityCheckAllPassed(deliverable)">
                      <ion-icon name="checkmark-circle-outline" slot="start"></ion-icon>
                      提交审核
                    </ion-button>
                  }
                </div>
              }

              <!-- 组长审核 -->
              @if (isTeamLeader && deliverable.status === 'submitted') {
                <div class="review-section">
                  <h4>审核操作</h4>
                  <ion-item>
                    <ion-label position="stacked">审核意见</ion-label>
                    <ion-textarea
                      rows="3"
                      placeholder="请填写审核意见"
                      #reviewComments></ion-textarea>
                  </ion-item>

                  <div class="review-buttons">
                    <ion-button
                      expand="block"
                      color="success"
                      (click)="reviewDeliverable(group.spaceName, deliverable.processType, 'approved', reviewComments.value || '')">
                      <ion-icon name="checkmark-outline" slot="start"></ion-icon>
                      通过
                    </ion-button>
                    <ion-button
                      expand="block"
                      color="danger"
                      (click)="reviewDeliverable(group.spaceName, deliverable.processType, 'rejected', reviewComments.value || '')">
                      <ion-icon name="close-outline" slot="start"></ion-icon>
                      驳回
                    </ion-button>
                  </div>
                </div>
              }

              <!-- 审核结果 -->
              @if (deliverable.review) {
                <div class="review-result">
                  <div class="result-header">
                    <ion-icon [name]="deliverable.review.result === 'approved' ? 'checkmark-circle' : 'close-circle'"
                      [color]="deliverable.review.result === 'approved' ? 'success' : 'danger'"></ion-icon>
                    <span>{{ deliverable.review.reviewedBy.name }}</span>
                    <span class="time">{{ deliverable.review.reviewTime | date:'yyyy-MM-dd HH:mm' }}</span>
                  </div>
                  <p>{{ deliverable.review.comments }}</p>
                </div>
              }
            </div>
          }
        </ion-card-content>
      </ion-card>
    }

    <!-- 发起交付按钮 -->
    @if (canEdit && completionProgress === 100) {
      <ion-button
        expand="block"
        color="primary"
        size="large"
        (click)="initiateDelivery()"
        [disabled]="saving">
        <ion-icon name="rocket-outline" slot="start"></ion-icon>
        完成交付
      </ion-button>
    }
  </div>
}
