<!-- 设计师分配组件 -->
<div class="designer-assignment-container">
  <div class="assignment-header">
    <div class="header-left">
      <h4>设计师分配</h4>
      <p>支持多设计师协作，按报价项目分配工作量</p>
    </div>
    <div class="header-actions">
      <button 
        type="button" 
        class="btn-secondary btn-sm"
        (click)="showDesignerCalendar.set(!showDesignerCalendar())">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <rect x="3" y="4" width="18" height="14" rx="2" ry="2"></rect>
          <line x1="16" y1="2" x2="16" y2="6"></line>
          <line x1="8" y1="2" x2="8" y2="6"></line>
          <line x1="3" y1="10" x2="21" y2="10"></line>
        </svg>
        {{ showDesignerCalendar() ? '隐藏日历' : '查看日历' }}
      </button>
      
      <button 
        type="button" 
        class="btn-primary btn-sm"
        (click)="addDesignerAssignment()">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
          <circle cx="9" cy="7" r="4"></circle>
          <line x1="19" y1="8" x2="19" y2="14"></line>
          <line x1="22" y1="11" x2="16" y2="11"></line>
        </svg>
        添加设计师
      </button>
    </div>
  </div>

  <!-- 设计师日历视图 -->
  @if (showDesignerCalendar()) {
    <div class="designer-calendar-section">
      <app-designer-calendar 
        [designers]="availableDesigners()"
        [selectedDate]="selectedDate()"
        (designerSelected)="onDesignerSelect($event)"
        (assignmentRequested)="onDesignerSelect($event)">
      </app-designer-calendar>
    </div>
  }

  <!-- 项目组选择 -->
  <div class="project-group-section">
    <div class="group-selector">
      <label class="field-label">项目组分配</label>
      <select 
        [(ngModel)]="selectedProjectGroup" 
        (ngModelChange)="onProjectGroupChange($event)"
        class="field-select">
        <option value="">选择项目组</option>
        @for (group of projectGroups; track group.id) {
          <option [value]="group.id">{{ group.name }} (组长: {{ group.leader }})</option>
        }
      </select>
      <div class="field-hint">选择项目组后，组长可进一步分配具体任务给组员</div>
    </div>

    <!-- 跨组合作选项 -->
    @if (selectedProjectGroup) {
      <div class="cross-group-option">
        <label class="checkbox-label">
          <input 
            type="checkbox" 
            [(ngModel)]="allowCrossGroupCollaboration"
            (ngModelChange)="onCrossGroupChange($event)">
          <span class="checkmark"></span>
          允许跨组合作
        </label>
        <div class="field-hint">组长可以选择其他项目组成员参与协作</div>
      </div>
    }
  </div>

  <!-- 设计师分配列表 -->
  <div class="assignment-list">
    @if (designerAssignments().length === 0) {
      <div class="empty-state">
        <div class="empty-icon">
          <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
            <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
            <circle cx="9" cy="7" r="4"></circle>
            <path d="M22 21v-2a4 4 0 0 0-3-3.87"></path>
            <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
          </svg>
        </div>
        <p>暂未分配设计师</p>
        <p class="empty-hint">请先选择项目组或直接添加设计师</p>
      </div>
    } @else {
      @for (assignment of designerAssignments(); track assignment.id) {
        <div class="assignment-item">
          <div class="designer-info">
            <div class="designer-avatar">
              <img [src]="assignment.designer.avatar || '/assets/default-avatar.png'" 
                   [alt]="assignment.designer.name">
            </div>
            <div class="designer-details">
              <div class="designer-name">{{ assignment.designer.name }}</div>
              <div class="designer-meta">
                <span class="designer-group">{{ assignment.designer.groupName }}</span>
                @if (assignment.designer.isLeader) {
                  <span class="leader-badge">组长</span>
                }
                @if (assignment.isCrossGroup) {
                  <span class="cross-group-badge">跨组</span>
                }
              </div>
              <div class="designer-status">
                <span class="status-indicator" [class]="assignment.designer.status"></span>
                {{ getDesignerStatusText(assignment.designer.status) }}
              </div>
            </div>
          </div>

          <div class="assignment-details">
            <!-- 分配的报价项目 -->
            <div class="assigned-quotations">
              <label class="field-label">负责项目</label>
              <div class="quotation-chips">
                @for (quotationId of assignment.quotationItemIds; track quotationId) {
                  <div class="quotation-chip">
                    <span>{{ getQuotationItemName(quotationId) }}</span>
                    <button 
                      type="button" 
                      class="remove-quotation"
                      (click)="removeQuotationFromAssignment(assignment.id, quotationId)">
                      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <line x1="18" y1="6" x2="6" y2="18"></line>
                        <line x1="6" y1="6" x2="18" y2="18"></line>
                      </svg>
                    </button>
                  </div>
                }
                
                <!-- 添加项目按钮 -->
                <div class="add-quotation-dropdown" [class.open]="openDropdownId() === assignment.id">
                  <button 
                    type="button" 
                    class="add-quotation-btn"
                    (click)="toggleQuotationDropdown(assignment.id)">
                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                      <line x1="12" y1="5" x2="12" y2="19"></line>
                      <line x1="5" y1="12" x2="19" y2="12"></line>
                    </svg>
                  </button>
                  
                  @if (openDropdownId() === assignment.id) {
                    <div class="quotation-dropdown">
                      @for (item of getUnassignedQuotationItems(assignment.id); track item.id) {
                        <div 
                          class="dropdown-item"
                          (click)="addQuotationToAssignment(assignment.id, item.id)">
                          <span>{{ item.roomType }}</span>
                          <span class="item-amount">¥{{ item.amount | number:'1.2-2' }}</span>
                        </div>
                      }
                      @if (getUnassignedQuotationItems(assignment.id).length === 0) {
                        <div class="dropdown-empty">所有项目已分配</div>
                      }
                    </div>
                  }
                </div>
              </div>
            </div>

            <!-- 工作量统计 -->
            <div class="workload-info">
              <div class="workload-item">
                <span class="workload-label">分配金额:</span>
                <span class="workload-value">¥{{ assignment.assignedAmount | number:'1.2-2' }}</span>
              </div>
              <div class="workload-item">
                <span class="workload-label">工作量占比:</span>
                <span class="workload-value">{{ assignment.workloadPercentage | number:'1.1-1' }}%</span>
              </div>
            </div>
          </div>

          <div class="assignment-actions">
            <button 
              type="button" 
              class="action-btn edit-btn"
              (click)="editAssignment(assignment)">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
                <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
              </svg>
            </button>
            <button 
              type="button" 
              class="action-btn delete-btn"
              (click)="removeAssignment(assignment.id)">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <polyline points="3 6 5 6 21 6"></polyline>
                <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2 2v2"></path>
              </svg>
            </button>
          </div>
        </div>
      }
    }
  </div>

  <!-- 分配汇总 -->
  @if (designerAssignments().length > 0) {
    <div class="assignment-summary">
      <div class="summary-stats">
        <div class="stat-item">
          <span class="stat-label">参与设计师:</span>
          <span class="stat-value">{{ designerAssignments().length }} 人</span>
        </div>
        <div class="stat-item">
          <span class="stat-label">已分配金额:</span>
          <span class="stat-value">¥{{ totalAssignedAmount() | number:'1.2-2' }}</span>
        </div>
        <div class="stat-item">
          <span class="stat-label">分配进度:</span>
          <span class="stat-value" [class.complete]="assignmentProgress() >= 100">
            {{ assignmentProgress() | number:'1.1-1' }}%
          </span>
        </div>
      </div>
      
      @if (assignmentProgress() < 100) {
        <div class="assignment-warning">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path>
            <line x1="12" y1="9" x2="12" y2="13"></line>
            <line x1="12" y1="17" x2="12.01" y2="17"></line>
          </svg>
          还有 ¥{{ remainingAmount() | number:'1.2-2' }} 未分配给设计师
        </div>
      }
    </div>
  }
</div>