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

<!-- 订单分配内容 -->
@if (!loading) {
  <div class="stage-order-container">
    <!-- 1. 客户信息卡片 -->
    <ion-card class="customer-card">
      <ion-card-header>
        <ion-card-title>
          <ion-icon name="person-outline"></ion-icon>
          客户信息
        </ion-card-title>
      </ion-card-header>
      <ion-card-content>
        <ion-list lines="none">
          <ion-item>
            <ion-label>
              <p>客户姓名</p>
              <h3>{{ customer?.get('name') }}</h3>
            </ion-label>
          </ion-item>
          <ion-item>
            <ion-label>
              <p>来源渠道</p>
              <h3>{{ customer?.get('source') }}</h3>
            </ion-label>
          </ion-item>
          @if (customer?.get('data')?.preferences) {
            <ion-item>
              <ion-label>
                <p>风格偏好</p>
                <div class="preference-tags">
                  @for (style of customer?.get('data')?.preferences?.style || []; track style) {
                    <ion-badge color="tertiary">{{ style }}</ion-badge>
                  }
                </div>
              </ion-label>
            </ion-item>
          }
        </ion-list>
      </ion-card-content>
    </ion-card>

    <!-- 2. 项目基本信息 -->
    <ion-card class="project-info-card">
      <ion-card-header>
        <ion-card-title>
          <ion-icon name="document-text-outline"></ion-icon>
          项目基本信息
        </ion-card-title>
      </ion-card-header>
      <ion-card-content>
        <ion-list lines="full">
          <!-- 项目名称 -->
          <ion-item>
            <ion-label position="stacked">项目名称 <span class="required">*</span></ion-label>
            <ion-input
              [(ngModel)]="projectInfo.title"
              [disabled]="!canEdit"
              placeholder="请输入项目名称"></ion-input>
          </ion-item>

          <!-- 项目类型 -->
          <ion-item>
            <ion-label position="stacked">项目类型 <span class="required">*</span></ion-label>
            <ion-select
              [(ngModel)]="projectInfo.type"
              [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>
          </ion-item>

          <!-- 交付期限 -->
          <ion-item>
            <ion-label position="stacked">交付期限 <span class="required">*</span></ion-label>
            <ion-input
              type="date"
              [(ngModel)]="projectInfo.deadline"
              [disabled]="!canEdit"
              placeholder="请选择交付期限"></ion-input>
          </ion-item>

          <!-- 项目描述 -->
          <ion-item>
            <ion-label position="stacked">项目描述</ion-label>
            <ion-textarea
              [(ngModel)]="projectInfo.description"
              [disabled]="!canEdit"
              rows="3"
              placeholder="请输入项目描述"></ion-textarea>
          </ion-item>
        </ion-list>
      </ion-card-content>
    </ion-card>

    <!-- 3. 报价明细 -->
    <ion-card class="quotation-card">
      <ion-card-header>
        <ion-card-title>
          <ion-icon name="calculator-outline"></ion-icon>
          报价明细
        </ion-card-title>
        <ion-card-subtitle>按空间和工序配置价格</ion-card-subtitle>
      </ion-card-header>
      <ion-card-content>
        @for (space of quotation.spaces; track space.name) {
          <div class="space-section">
            <div class="space-header">
              <ion-icon name="cube-outline"></ion-icon>
              <h3>{{ space.name }}</h3>
            </div>

            <div class="process-grid">
              @for (processType of processTypes; track processType.key) {
                <div
                  class="process-item"
                  [class.enabled]="isProcessEnabled(space, processType.key)">
                  <div class="process-header" (click)="canEdit && toggleProcess(space, processType.key)">
                    <ion-checkbox
                      [checked]="isProcessEnabled(space, processType.key)"
                      [disabled]="!canEdit"></ion-checkbox>
                    <ion-badge [color]="processType.color">
                      {{ processType.name }}
                    </ion-badge>
                  </div>

                  @if (isProcessEnabled(space, processType.key)) {
                    <div class="process-inputs">
                      <ion-item lines="none">
                        <ion-label position="stacked">单价</ion-label>
                        <ion-input
                          type="number"
                          [ngModel]="getProcessPrice(space, processType.key)"
                          (ngModelChange)="setProcessPrice(space, processType.key, $event); onProcessChange()"
                          [disabled]="!canEdit"
                          placeholder="0"></ion-input>
                        <ion-note slot="end">元/{{ getProcessUnit(space, processType.key) }}</ion-note>
                      </ion-item>

                      <ion-item lines="none">
                        <ion-label position="stacked">数量</ion-label>
                        <ion-input
                          type="number"
                          [ngModel]="getProcessQuantity(space, processType.key)"
                          (ngModelChange)="setProcessQuantity(space, processType.key, $event); onProcessChange()"
                          [disabled]="!canEdit"
                          placeholder="0"></ion-input>
                        <ion-note slot="end">{{ getProcessUnit(space, processType.key) }}</ion-note>
                      </ion-item>

                      <div class="process-subtotal">
                        小计: ¥{{ calculateProcessSubtotal(space, processType.key).toFixed(2) }}
                      </div>
                    </div>
                  }
                </div>
              }
            </div>
          </div>
        }

        <!-- 总价 -->
        <div class="total-section">
          <div class="total-label">报价总额</div>
          <div class="total-amount">¥{{ quotation.total.toFixed(2) }}</div>
        </div>
      </ion-card-content>
    </ion-card>

    <!-- 4. 设计师分配 -->
    <ion-card class="designer-card">
      <ion-card-header>
        <ion-card-title>
          <ion-icon name="people-outline"></ion-icon>
          设计师分配
        </ion-card-title>
        <ion-card-subtitle>选择负责的组员</ion-card-subtitle>
      </ion-card-header>
      <ion-card-content>
        @if (designers.length === 0) {
          <div class="empty-state">
            <ion-icon name="person-outline"></ion-icon>
            <p>暂无可用设计师</p>
          </div>
        } @else {
          <div class="designer-grid">
            @for (designer of designers; track designer.id) {
              <div
                class="designer-item"
                [class.selected]="selectedDesigner?.id === designer.id"
                (click)="canEdit && selectDesigner(designer)">
                <ion-avatar>
                  @if (designer.get('data')?.avatar) {
                    <img [src]="designer.get('data').avatar" alt="设计师头像" />
                  } @else {
                    <ion-icon name="person-circle-outline"></ion-icon>
                  }
                </ion-avatar>
                <div class="designer-info">
                  <h4>{{ designer.get('name') }}</h4>
                  <p>{{ getDesignerWorkload(designer) }}</p>
                </div>
                @if (selectedDesigner?.id === designer.id) {
                  <ion-icon name="checkmark-circle" class="selected-icon"></ion-icon>
                }
              </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)="submitForApproval()"
          [disabled]="saving">
          <ion-icon name="checkmark-circle-outline" slot="start"></ion-icon>
          提交审批
        </ion-button>
      </div>
    }
  </div>
}
