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

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

    <!-- 按空间分组的交付物 -->
    @for (group of deliverablesBySpace; track group.spaceName) {
      <div class="card space-deliverables-card">
        <div class="card-header">
          <h3 class="card-title">
            <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
              <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M448 341.37V170.61A32 32 0 00432.11 143l-152-88.46a47.94 47.94 0 00-48.24 0L79.89 143A32 32 0 0064 170.61v170.76A32 32 0 0079.89 369l152 88.46a48 48 0 0048.24 0l152-88.46A32 32 0 00448 341.37z"/>
              <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M69 153.99l187 110 187-110m-187 110v223"/>
            </svg>
            {{ group.spaceName }}
          </h3>
        </div>
        <div class="card-content">
          @for (deliverable of group.items; track deliverable.processType) {
            <div class="deliverable-item">
              <div class="deliverable-header">
                <span class="badge" [class]="'badge-' + getProcessColor(deliverable.processType)">
                  {{ deliverable.processName }}
                </span>
                <span class="badge" [class]="'badge-' + getStatusColor(deliverable.status)">
                  {{ getStatusText(deliverable.status) }}
                </span>
              </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 {
                          <div class="file-icon">
                            <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                              <path d="M416 221.25V416a48 48 0 01-48 48H144a48 48 0 01-48-48V96a48 48 0 0148-48h98.75a32 32 0 0122.62 9.37l141.26 141.26a32 32 0 019.37 22.62z" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32"/>
                              <path d="M256 56v120a32 32 0 0032 32h120" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/>
                            </svg>
                            <span class="file-name">{{ file.name }}</span>
                          </div>
                        }
                        @if (canEdit && isDesigner && deliverable.status === 'draft') {
                          <button
                            class="delete-button"
                            (click)="deleteFile(deliverable.spaceId, deliverable.processType, file?.id)">
                            <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                              <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M368 368L144 144m224 0L144 368"/>
                            </svg>
                          </button>
                        }
                      </div>
                    }
                  </div>
                }

                @if (canEdit && isDesigner && deliverable.status !== 'approved') {
                  <input
                    type="file"
                    accept="image/*,video/*,.pdf"
                    (change)="uploadFile($event, deliverable.spaceId, deliverable.processType)"
                    [disabled]="uploading"
                    hidden
                    #fileInput />
                  <button
                    class="btn btn-outline btn-block"
                    (click)="fileInput.click()"
                    [disabled]="uploading">
                    <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                      <path d="M320 367.79h76c55 0 100-29.21 100-83.6s-53-81.47-96-83.6c-8.89-85.06-71-136.8-144-136.8-69 0-113.44 45.79-128 91.2-60 5.7-112 43.88-112 106.4s54 106.4 120 106.4h56" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/>
                      <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M320 255.79l-64-64-64 64m64 192.42V207.79"/>
                    </svg>
                    上传文件
                  </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) {
                      <button
                        class="btn btn-outline btn-sm"
                        (click)="performQualityCheck(deliverable.spaceId, deliverable.processType)">
                        开始自查
                      </button>
                    }
                  </div>

                  @if (deliverable.qualityCheck) {
                    <div class="checklist">
                      @for (item of deliverable.qualityCheck.items; track $index) {
                        <label class="checkbox-item">
                          <input type="checkbox" [(ngModel)]="item.passed" />
                          <span class="checkbox-label">{{ item.label }}</span>
                        </label>
                      }
                    </div>

                    <button
                      class="btn btn-primary btn-block"
                      (click)="deliverable.qualityCheck.checked = true; submitForReview(deliverable.spaceId, deliverable.processType)"
                      [disabled]="!isQualityCheckAllPassed(deliverable)">
                      <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                        <path d="M448 256c0-106-86-192-192-192S64 150 64 256s86 192 192 192 192-86 192-192z" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="32"/>
                        <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M352 176L217.6 336 160 272"/>
                      </svg>
                      提交审核
                    </button>
                  }
                </div>
              }

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

                  <div class="review-buttons">
                    <button
                      class="btn btn-success"
                      (click)="reviewDeliverable(deliverable.spaceId, deliverable.processType, 'approved', reviewComments.value || '')">
                      <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                        <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M416 128L192 384l-96-96"/>
                      </svg>
                      通过
                    </button>
                    <button
                      class="btn btn-danger"
                      (click)="reviewDeliverable(deliverable.spaceId, deliverable.processType, 'rejected', reviewComments.value || '')">
                      <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                        <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M368 368L144 144m224 0L144 368"/>
                      </svg>
                      驳回
                    </button>
                  </div>
                </div>
              }

              <!-- 审核结果 -->
              @if (deliverable.review) {
                <div class="review-result">
                  <div class="result-header">
                    <svg
                      class="icon result-icon"
                      [class.success]="deliverable.review.result === 'approved'"
                      [class.danger]="deliverable.review.result === 'rejected'"
                      xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 0 512 512">
                      @if (deliverable.review.result === 'approved') {
                        <path d="M448 256c0-106-86-192-192-192S64 150 64 256s86 192 192 192 192-86 192-192z" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="32"/>
                        <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M352 176L217.6 336 160 272"/>
                      } @else {
                        <path d="M448 256c0-106-86-192-192-192S64 150 64 256s86 192 192 192 192-86 192-192z" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="32"/>
                        <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M320 320L192 192m0 128l128-128"/>
                      }
                    </svg>
                    <span class="reviewer-name">{{ deliverable.review.reviewedBy.name }}</span>
                    <span class="review-time">{{ deliverable.review.reviewTime | date:'yyyy-MM-dd HH:mm' }}</span>
                  </div>
                  <p class="review-comments">{{ deliverable.review.comments }}</p>
                </div>
              }
            </div>
          }
        </div>
      </div>
    }

    <!-- 发起交付按钮 -->
    @if (canEdit && completionProgress === 100) {
      <button
        class="btn btn-primary btn-large btn-block"
        (click)="initiateDelivery()"
        [disabled]="saving">
        <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
          <path d="M461.81 53.81a4.4 4.4 0 00-3.3-3.39c-54.38-13.3-180 34.09-248.13 102.17a294.9 294.9 0 00-33.09 39.08c-21-1.9-42-.3-59.88 7.5-50.49 22.2-65.18 80.18-69.28 105.07a9 9 0 009.8 10.4l81.07-8.9a180.29 180.29 0 001.1 18.3 18.15 18.15 0 005.3 11.09l31.39 31.39a18.15 18.15 0 0011.1 5.3 179.91 179.91 0 0018.19 1.1l-8.89 81a9 9 0 0010.39 9.79c24.9-4 83-18.69 105.07-69.17 7.8-17.9 9.4-38.79 7.6-59.69a293.91 293.91 0 0039.19-33.09c68.38-68 115.47-190.86 102.37-247.95zM298.66 213.67a42.7 42.7 0 1160.38 0 42.65 42.65 0 01-60.38 0z" fill="currentColor"/>
          <path d="M109.64 352a45.06 45.06 0 00-26.35 12.84C65.67 382.52 64 448 64 448s65.52-1.67 83.15-19.31A44.73 44.73 0 00160 402.32" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/>
        </svg>
        完成交付
      </button>
    }
  </div>
}
