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

<!-- 订单分配内容 -->
@if (!loading) {
  <div class="stage-order-container">
    <!-- 1. 客户信息卡片 -->
    <div class="card customer-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="currentColor" d="M258.9 48C141.92 46.42 46.42 141.92 48 258.9c1.56 112.19 92.91 203.54 205.1 205.1 117 1.6 212.48-93.9 210.88-210.88C462.44 140.91 371.09 49.56 258.9 48zM385.32 375.25a4 4 0 01-6.14-.32 124.27 124.27 0 00-32.35-29.59C321.37 329 289.11 320 256 320s-65.37 9-90.83 25.34a124.24 124.24 0 00-32.35 29.58 4 4 0 01-6.14.32A175.32 175.32 0 0180 259c-1.63-97.31 78.22-178.76 175.57-179S432 158.81 432 256a175.32 175.32 0 01-46.68 119.25z"/><path fill="currentColor" d="M256 144c-19.72 0-37.55 7.39-50.22 20.82s-19 32-17.57 51.93C191.11 256 221.52 288 256 288s64.83-32 67.79-71.24c1.48-19.74-4.8-38.14-17.68-51.82C293.39 151.44 275.59 144 256 144z"/>
          </svg>
          客户信息
        </h3>
      </div>
      <div class="card-content">
        <div class="info-list">
          <div class="info-item">
            <div class="info-text">
              <p class="info-label">客户姓名</p>
              <h4 class="info-value">{{ customer?.get('name') }}</h4>
            </div>
          </div>
          <div class="info-item">
            <div class="info-text">
              <p class="info-label">来源渠道</p>
              <h4 class="info-value">{{ customer?.get('source') }}</h4>
            </div>
          </div>
          @if (customer?.get('data')?.preferences) {
            <div class="info-item">
              <div class="info-text">
                <p class="info-label">风格偏好</p>
                <div class="preference-tags">
                  @for (style of customer?.get('data')?.preferences?.style || []; track style) {
                    <span class="badge badge-tertiary">{{ style }}</span>
                  }
                </div>
              </div>
            </div>
          }
        </div>
      </div>
    </div>

    <!-- 2. 项目基本信息 -->
    <div class="card project-info-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="currentColor" 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"/><path fill="currentColor" d="M256 56v120a32 32 0 0032 32h120"/>
          </svg>
          项目基本信息
        </h3>
      </div>
      <div class="card-content">
        <div class="form-list">
          <!-- 项目名称 -->
          <div class="form-group">
            <label class="form-label">项目名称 <span class="required">*</span></label>
            <input
              class="form-input"
              type="text"
              [(ngModel)]="projectInfo.title"
              [disabled]="!canEdit"
              placeholder="请输入项目名称" />
          </div>

          <!-- 项目类型 -->
          <div class="form-group">
            <label class="form-label">项目类型 <span class="required">*</span></label>
            <select
              class="form-select"
              [(ngModel)]="projectInfo.type"
              [disabled]="!canEdit">
              <option value="">请选择项目类型</option>
              <option value="整屋设计">整屋设计</option>
              <option value="局部改造">局部改造</option>
              <option value="软装设计">软装设计</option>
            </select>
          </div>

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

          <!-- 项目描述 -->
          <div class="form-group">
            <label class="form-label">项目描述</label>
            <textarea
              class="form-textarea"
              [(ngModel)]="projectInfo.description"
              [disabled]="!canEdit"
              rows="3"
              placeholder="请输入项目描述"></textarea>
          </div>
        </div>
      </div>
    </div>

    <!-- 3. 报价明细 -->
    <div class="card quotation-card">
      <div class="card-header">
        <h3 class="card-title">
          <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
            <rect x="112" y="128" width="288" height="320" rx="48" ry="48" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32"/>
            <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M176 128V80a32 32 0 0132-32h96a32 32 0 0132 32v48"/>
            <path fill="currentColor" d="M320 304h-32v-24a8 8 0 00-8-8h-48a8 8 0 00-8 8v24h-32a8 8 0 00-8 8v16a8 8 0 008 8h32v24a8 8 0 008 8h48a8 8 0 008-8v-24h32a8 8 0 008-8v-16a8 8 0 00-8-8z"/>
          </svg>
          报价明细
        </h3>
        <p class="card-subtitle">按空间和工序配置价格</p>
      </div>
      <div class="card-content">
        @for (space of quotation.spaces; track space.name) {
          <div class="space-section">
            <div class="space-header">
              <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                <path fill="currentColor" d="M440 432H72a40 40 0 01-40-40V120a40 40 0 0140-40h75.89a40 40 0 0122.19 6.72l27.84 18.56a40 40 0 0022.19 6.72H440a40 40 0 0140 40v240a40 40 0 01-40 40z"/>
              </svg>
              <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)">
                    <label class="checkbox-wrapper">
                      <input
                        type="checkbox"
                        class="checkbox-input"
                        [checked]="isProcessEnabled(space, processType.key)"
                        [disabled]="!canEdit" />
                      <span class="checkbox-custom"></span>
                    </label>
                    <span class="badge" [attr.data-color]="processType.color">
                      {{ processType.name }}
                    </span>
                  </div>

                  @if (isProcessEnabled(space, processType.key)) {
                    <div class="process-inputs">
                      <div class="input-group">
                        <label class="input-label">单价</label>
                        <div class="input-with-note">
                          <input
                            class="input-field"
                            type="number"
                            [ngModel]="getProcessPrice(space, processType.key)"
                            (ngModelChange)="setProcessPrice(space, processType.key, $event); onProcessChange()"
                            [disabled]="!canEdit"
                            placeholder="0" />
                          <span class="input-note">元/{{ getProcessUnit(space, processType.key) }}</span>
                        </div>
                      </div>

                      <div class="input-group">
                        <label class="input-label">数量</label>
                        <div class="input-with-note">
                          <input
                            class="input-field"
                            type="number"
                            [ngModel]="getProcessQuantity(space, processType.key)"
                            (ngModelChange)="setProcessQuantity(space, processType.key, $event); onProcessChange()"
                            [disabled]="!canEdit"
                            placeholder="0" />
                          <span class="input-note">{{ getProcessUnit(space, processType.key) }}</span>
                        </div>
                      </div>

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

    <!-- 4. 设计师分配 -->
    <div class="card designer-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="currentColor" d="M402 168c-2.93 40.67-33.1 72-66 72s-63.12-31.32-66-72c-3-42.31 26.37-72 66-72s69 30.46 66 72z"/><path fill="currentColor" d="M336 304c-65.17 0-127.84 32.37-143.54 95.41-2.08 8.34 3.15 16.59 11.72 16.59h263.65c8.57 0 13.77-8.25 11.72-16.59C463.85 335.36 401.18 304 336 304z"/><path fill="currentColor" d="M200 185.94c-2.34 32.48-26.72 58.06-53 58.06s-50.7-25.57-53-58.06C91.61 152.15 115.34 128 147 128s55.39 24.77 53 57.94z"/><path fill="currentColor" d="M206 306c-18.05-8.27-37.93-11.45-59-11.45-52 0-102.1 25.85-114.65 76.2-1.65 6.66 2.53 13.25 9.37 13.25H154"/>
          </svg>
          设计师分配
        </h3>
        <p class="card-subtitle">选择负责的组员</p>
      </div>
      <div class="card-content">
        @if (designers.length === 0) {
          <div class="empty-state">
            <svg class="icon-large" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
              <path fill="currentColor" d="M258.9 48C141.92 46.42 46.42 141.92 48 258.9c1.56 112.19 92.91 203.54 205.1 205.1 117 1.6 212.48-93.9 210.88-210.88C462.44 140.91 371.09 49.56 258.9 48zM385.32 375.25a4 4 0 01-6.14-.32 124.27 124.27 0 00-32.35-29.59C321.37 329 289.11 320 256 320s-65.37 9-90.83 25.34a124.24 124.24 0 00-32.35 29.58 4 4 0 01-6.14.32A175.32 175.32 0 0180 259c-1.63-97.31 78.22-178.76 175.57-179S432 158.81 432 256a175.32 175.32 0 01-46.68 119.25z"/>
            </svg>
            <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)">
                <div class="designer-avatar">
                  @if (designer.get('data')?.avatar) {
                    <img [src]="designer.get('data').avatar" alt="设计师头像" />
                  } @else {
                    <svg class="icon avatar-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                      <path fill="currentColor" d="M256 48C141.31 48 48 141.31 48 256s93.31 208 208 208 208-93.31 208-208S370.69 48 256 48zm0 60a60 60 0 11-60 60 60 60 0 0160-60zm0 336c-63.6 0-119.92-36.47-146.39-89.68C109.74 329.09 176.24 296 256 296s146.26 33.09 146.39 58.32C376.92 407.53 319.6 444 256 444z"/>
                    </svg>
                  }
                </div>
                <div class="designer-info">
                  <h4>{{ designer.get('name') }}</h4>
                  <p>{{ getDesignerWorkload(designer) }}</p>
                </div>
                @if (selectedDesigner?.id === designer.id) {
                  <svg class="icon selected-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                    <path fill="currentColor" d="M256 48C141.31 48 48 141.31 48 256s93.31 208 208 208 208-93.31 208-208S370.69 48 256 48zm-38 312.38L137.4 280.8a24 24 0 0133.94-33.94l50.2 50.2 95.74-95.74a24 24 0 0133.94 33.94z"/>
                  </svg>
                }
              </div>
            }
          </div>
        }
      </div>
    </div>

    <!-- 5. 操作按钮 -->
    @if (canEdit) {
      <div class="action-buttons">
        <button
          class="btn btn-outline"
          (click)="saveDraft()"
          [disabled]="saving">
          <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
            <path fill="currentColor" d="M380.93 57.37A32 32 0 00358.3 48H94.22A46.21 46.21 0 0048 94.22v323.56A46.21 46.21 0 0094.22 464h323.56A46.36 46.36 0 00464 417.78V153.7a32 32 0 00-9.37-22.63zM256 416a64 64 0 1164-64 63.92 63.92 0 01-64 64zm48-224H112a16 16 0 01-16-16v-64a16 16 0 0116-16h192a16 16 0 0116 16v64a16 16 0 01-16 16z"/>
          </svg>
          保存草稿
        </button>

        <button
          class="btn btn-primary"
          (click)="submitForApproval()"
          [disabled]="saving">
          <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
            <path fill="currentColor" d="M256 48C141.31 48 48 141.31 48 256s93.31 208 208 208 208-93.31 208-208S370.69 48 256 48zm-38 312.38L137.4 280.8a24 24 0 0133.94-33.94l50.2 50.2 95.74-95.74a24 24 0 0133.94 33.94z"/>
          </svg>
          提交审批
        </button>
      </div>
    }
  </div>
}
