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

<!-- 售后归档内容 -->
@if (!loading) {
  <div class="stage-aftercare-container">
    <!-- 1. 尾款管理 -->
    <ion-card class="payment-card">
      <ion-card-header>
        <ion-card-title>
          <ion-icon name="cash-outline"></ion-icon>
          尾款管理
        </ion-card-title>
        <ion-badge [color]="getPaymentStatusColor()">
          {{ getPaymentStatusText() }}
        </ion-badge>
      </ion-card-header>
      <ion-card-content>
        <div class="payment-summary">
          <div class="summary-item">
            <span class="label">总金额</span>
            <span class="value">¥{{ finalPayment.totalAmount.toLocaleString() }}</span>
          </div>
          <div class="summary-item">
            <span class="label">已支付</span>
            <span class="value success">¥{{ finalPayment.paidAmount.toLocaleString() }}</span>
          </div>
          <div class="summary-item">
            <span class="label">待支付</span>
            <span class="value warning">¥{{ finalPayment.remainingAmount.toLocaleString() }}</span>
          </div>
        </div>

        <ion-progress-bar
          [value]="finalPayment.totalAmount > 0 ? finalPayment.paidAmount / finalPayment.totalAmount : 0"
          color="success"></ion-progress-bar>

        <!-- 支付凭证列表 -->
        @if (finalPayment.paymentVouchers.length > 0) {
          <div class="vouchers-section">
            <h4>支付凭证</h4>
            <ion-list lines="full">
              @for (voucher of finalPayment.paymentVouchers; track $index) {
                <ion-item>
                  <ion-thumbnail slot="start">
                    <img [src]="voucher.url" alt="支付凭证" />
                  </ion-thumbnail>
                  <ion-label>
                    <h3>¥{{ voucher.amount.toLocaleString() }}</h3>
                    <p>{{ voucher.paymentMethod }}</p>
                    <p>{{ voucher.paymentTime | date:'yyyy-MM-dd HH:mm' }}</p>
                  </ion-label>
                </ion-item>
              }
            </ion-list>
          </div>
        }

        @if (canEdit && finalPayment.status !== 'completed') {
          <input
            type="file"
            accept="image/*"
            (change)="uploadPaymentVoucher($event)"
            [disabled]="uploading"
            hidden
            #voucherInput />
          <ion-button
            expand="block"
            fill="outline"
            (click)="voucherInput.click()"
            [disabled]="uploading">
            <ion-icon name="camera-outline" slot="start"></ion-icon>
            上传支付凭证
          </ion-button>
        }
      </ion-card-content>
    </ion-card>

    <!-- 2. 客户评价 -->
    <ion-card class="feedback-card">
      <ion-card-header>
        <ion-card-title>
          <ion-icon name="star-outline"></ion-icon>
          客户评价
        </ion-card-title>
      </ion-card-header>
      <ion-card-content>
        @if (!customerFeedback.submitted) {
          <div class="feedback-form">
            <!-- 综合评分 -->
            <div class="rating-section">
              <label>综合评分 <span class="required">*</span></label>
              <div class="stars">
                @for (star of [1,2,3,4,5]; track star) {
                  <ion-icon
                    [name]="star <= customerFeedback.rating ? 'star' : 'star-outline'"
                    [class.active]="star <= customerFeedback.rating"
                    (click)="setRating('rating', star)"></ion-icon>
                }
              </div>
            </div>

            <!-- 分项评分 -->
            <div class="rating-section">
              <label>服务态度</label>
              <div class="stars">
                @for (star of [1,2,3,4,5]; track star) {
                  <ion-icon
                    [name]="star <= customerFeedback.serviceRating ? 'star' : 'star-outline'"
                    [class.active]="star <= customerFeedback.serviceRating"
                    (click)="setRating('serviceRating', star)"></ion-icon>
                }
              </div>
            </div>

            <div class="rating-section">
              <label>设计质量</label>
              <div class="stars">
                @for (star of [1,2,3,4,5]; track star) {
                  <ion-icon
                    [name]="star <= customerFeedback.qualityRating ? 'star' : 'star-outline'"
                    [class.active]="star <= customerFeedback.qualityRating"
                    (click)="setRating('qualityRating', star)"></ion-icon>
                }
              </div>
            </div>

            <div class="rating-section">
              <label>交付及时性</label>
              <div class="stars">
                @for (star of [1,2,3,4,5]; track star) {
                  <ion-icon
                    [name]="star <= customerFeedback.timelinessRating ? 'star' : 'star-outline'"
                    [class.active]="star <= customerFeedback.timelinessRating"
                    (click)="setRating('timelinessRating', star)"></ion-icon>
                }
              </div>
            </div>

            <!-- 文字评价 -->
            <ion-item>
              <ion-label position="stacked">评价内容</ion-label>
              <ion-textarea
                [(ngModel)]="customerFeedback.comments"
                rows="4"
                placeholder="请分享您的体验和感受"></ion-textarea>
            </ion-item>

            <ion-item>
              <ion-label position="stacked">改进建议</ion-label>
              <ion-textarea
                [(ngModel)]="customerFeedback.improvements"
                rows="3"
                placeholder="您希望我们改进的地方"></ion-textarea>
            </ion-item>

            <ion-item lines="none">
              <ion-checkbox [(ngModel)]="customerFeedback.wouldRecommend"></ion-checkbox>
              <ion-label>我愿意推荐给朋友</ion-label>
            </ion-item>

            <ion-button
              expand="block"
              color="primary"
              (click)="submitFeedback()"
              [disabled]="saving">
              <ion-icon name="checkmark-circle-outline" slot="start"></ion-icon>
              提交评价
            </ion-button>
          </div>
        } @else {
          <div class="feedback-result">
            <div class="rating-display">
              <div class="stars-large">
                @for (star of [1,2,3,4,5]; track star) {
                  <ion-icon
                    [name]="star <= customerFeedback.rating ? 'star' : 'star-outline'"
                    [class.active]="star <= customerFeedback.rating"></ion-icon>
                }
              </div>
              <p class="rating-text">{{ customerFeedback.rating }}.0 分</p>
            </div>

            @if (customerFeedback.comments) {
              <div class="comment-box">
                <p>{{ customerFeedback.comments }}</p>
              </div>
            }

            <ion-badge color="success">
              <ion-icon name="checkmark-circle"></ion-icon>
              已提交评价
            </ion-badge>
          </div>
        }
      </ion-card-content>
    </ion-card>

    <!-- 3. 项目复盘 -->
    <ion-card class="retrospective-card">
      <ion-card-header>
        <ion-card-title>
          <ion-icon name="analytics-outline"></ion-icon>
          项目复盘
        </ion-card-title>
      </ion-card-header>
      <ion-card-content>
        @if (!projectRetrospective) {
          <div class="empty-state">
            <ion-icon name="document-text-outline"></ion-icon>
            <p>尚未生成项目复盘</p>
            @if (canEdit) {
              <ion-button
                expand="block"
                color="primary"
                (click)="generateRetrospective()"
                [disabled]="generating">
                @if (generating) {
                  <ion-spinner name="crescent" slot="start"></ion-spinner>
                  生成中...
                } @else {
                  <ion-icon name="sparkles-outline" slot="start"></ion-icon>
                  生成复盘
                }
              </ion-button>
            }
          </div>
        } @else {
          <div class="retrospective-content">
            <p class="summary">{{ projectRetrospective.summary }}</p>

            <div class="section">
              <h4><ion-icon name="trophy-outline"></ion-icon> 项目亮点</h4>
              <ul>
                @for (item of projectRetrospective.highlights; track item) {
                  <li>{{ item }}</li>
                }
              </ul>
            </div>

            <div class="section">
              <h4><ion-icon name="alert-circle-outline"></ion-icon> 遇到的挑战</h4>
              <ul>
                @for (item of projectRetrospective.challenges; track item) {
                  <li>{{ item }}</li>
                }
              </ul>
            </div>

            <div class="section">
              <h4><ion-icon name="bulb-outline"></ion-icon> 经验教训</h4>
              <ul>
                @for (item of projectRetrospective.lessons; track item) {
                  <li>{{ item }}</li>
                }
              </ul>
            </div>

            <div class="section">
              <h4><ion-icon name="compass-outline"></ion-icon> 改进建议</h4>
              <ul>
                @for (item of projectRetrospective.recommendations; track item) {
                  <li>{{ item }}</li>
                }
              </ul>
            </div>

            @if (canEdit) {
              <ion-button
                expand="block"
                fill="outline"
                (click)="generateRetrospective()"
                [disabled]="generating">
                <ion-icon name="refresh-outline" slot="start"></ion-icon>
                重新生成
              </ion-button>
            }
          </div>
        }
      </ion-card-content>
    </ion-card>

    <!-- 4. 归档操作 -->
    @if (!archiveStatus.archived) {
      @if (canEdit) {
        <ion-card class="archive-card">
          <ion-card-content>
            <div class="archive-checklist">
              <h3>归档前检查</h3>
              <ion-list lines="none">
                <ion-item>
                  <ion-icon
                    [name]="finalPayment.status === 'completed' ? 'checkmark-circle' : 'ellipse-outline'"
                    [color]="finalPayment.status === 'completed' ? 'success' : 'medium'"
                    slot="start"></ion-icon>
                  <ion-label>尾款已结清</ion-label>
                </ion-item>
                <ion-item>
                  <ion-icon
                    [name]="customerFeedback.submitted ? 'checkmark-circle' : 'ellipse-outline'"
                    [color]="customerFeedback.submitted ? 'success' : 'medium'"
                    slot="start"></ion-icon>
                  <ion-label>客户已评价</ion-label>
                </ion-item>
                <ion-item>
                  <ion-icon
                    [name]="projectRetrospective ? 'checkmark-circle' : 'ellipse-outline'"
                    [color]="projectRetrospective ? 'success' : 'medium'"
                    slot="start"></ion-icon>
                  <ion-label>项目复盘已完成</ion-label>
                </ion-item>
              </ion-list>
            </div>

            <ion-button
              expand="block"
              color="success"
              size="large"
              (click)="archiveProject()"
              [disabled]="saving || finalPayment.status !== 'completed' || !customerFeedback.submitted || !projectRetrospective">
              <ion-icon name="archive-outline" slot="start"></ion-icon>
              归档项目
            </ion-button>
          </ion-card-content>
        </ion-card>
      }
    } @else {
      <ion-card class="archived-card">
        <ion-card-content>
          <div class="archived-status">
            <ion-icon name="checkmark-circle" color="success"></ion-icon>
            <h3>项目已归档</h3>
            <p>归档人: {{ archiveStatus.archivedBy?.name }}</p>
            <p>归档时间: {{ archiveStatus.archiveTime | date:'yyyy-MM-dd HH:mm' }}</p>
          </div>
        </ion-card-content>
      </ion-card>
    }
  </div>
}
