<div class="team-assignment-modal">
  <div class="modal-backdrop" (click)="closeDialog()"></div>
  
  <div class="modal-content">
    <!-- 模态框头部 -->
    <div class="modal-header">
      <h2 class="modal-title">分配项目组员</h2>
      <button class="close-btn" (click)="closeDialog()">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
          <path d="M18 6L6 18M6 6l12 12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
        </svg>
      </button>
    </div>

    <!-- 模态框内容 -->
    <div class="modal-body">
      <div class="assignment-form">
        <!-- 项目信息概览 -->
        <div class="project-overview">
          <h3>项目信息</h3>
          <div class="project-info">
            <div class="info-item">
              <span class="label">客户姓名：</span>
              <span class="value">{{ projectData?.customerName || '未设置' }}</span>
            </div>
            <div class="info-item">
              <span class="label">装修类型：</span>
              <span class="value">{{ projectData?.decorationType || '未设置' }}</span>
            </div>
            <div class="info-item">
              <span class="label">项目面积：</span>
              <span class="value">{{ projectData?.area || '未设置' }}㎡</span>
            </div>
            <div class="info-item">
              <span class="label">首稿时间：</span>
              <span class="value">{{ projectData?.firstDraftDate || '未设置' }}</span>
            </div>
          </div>
        </div>

        <!-- 组员选择 -->
        <div class="team-selection">
          <h3>选择项目组员</h3>
          
          <!-- 设计师选择 -->
          <div class="role-section">
            <h4>主设计师</h4>
            <div class="member-grid">
              @for (designer of designers; track designer.id) {
                <div class="member-card" 
                     [class.selected]="selectedDesigner?.id === designer.id"
                     (click)="selectDesigner(designer)">
                  <div class="member-avatar">
                    <img [src]="designer.avatar || '/assets/default-avatar.png'" [alt]="designer.name">
                  </div>
                  <div class="member-info">
                    <div class="member-name">{{ designer.name }}</div>
                    <div class="member-role">{{ designer.role }}</div>
                    <div class="task-status" [class]="getTaskStatusClass(designer.taskCount)">
                      当前任务：{{ designer.taskCount }}个
                    </div>
                  </div>
                  @if (selectedDesigner?.id === designer.id) {
                    <div class="selected-indicator">
                      <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
                        <path d="M20 6L9 17l-5-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                      </svg>
                    </div>
                  }
                </div>
              }
            </div>
          </div>

          <!-- 助理设计师选择 -->
          <div class="role-section">
            <h4>助理设计师</h4>
            <div class="member-grid">
              @for (assistant of assistants; track assistant.id) {
                <div class="member-card" 
                     [class.selected]="selectedAssistant?.id === assistant.id"
                     (click)="selectAssistant(assistant)">
                  <div class="member-avatar">
                    <img [src]="assistant.avatar || '/assets/default-avatar.png'" [alt]="assistant.name">
                  </div>
                  <div class="member-info">
                    <div class="member-name">{{ assistant.name }}</div>
                    <div class="member-role">{{ assistant.role }}</div>
                    <div class="task-status" [class]="getTaskStatusClass(assistant.taskCount)">
                      当前任务：{{ assistant.taskCount }}个
                    </div>
                  </div>
                  @if (selectedAssistant?.id === assistant.id) {
                    <div class="selected-indicator">
                      <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
                        <path d="M20 6L9 17l-5-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                      </svg>
                    </div>
                  }
                </div>
              }
            </div>
          </div>

          <!-- 项目经理选择 -->
          <div class="role-section">
            <h4>项目经理</h4>
            <div class="member-grid">
              @for (manager of managers; track manager.id) {
                <div class="member-card" 
                     [class.selected]="selectedManager?.id === manager.id"
                     (click)="selectManager(manager)">
                  <div class="member-avatar">
                    <img [src]="manager.avatar || '/assets/default-avatar.png'" [alt]="manager.name">
                  </div>
                  <div class="member-info">
                    <div class="member-name">{{ manager.name }}</div>
                    <div class="member-role">{{ manager.role }}</div>
                    <div class="task-status" [class]="getTaskStatusClass(manager.taskCount)">
                      当前任务：{{ manager.taskCount }}个
                    </div>
                  </div>
                  @if (selectedManager?.id === manager.id) {
                    <div class="selected-indicator">
                      <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
                        <path d="M20 6L9 17l-5-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                      </svg>
                    </div>
                  }
                </div>
              }
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 模态框底部 -->
    <div class="modal-footer">
      <button class="cancel-btn" (click)="closeDialog()">取消</button>
      <button class="confirm-btn" 
              [disabled]="!isAssignmentValid()" 
              (click)="confirmAssignment()">
        @if (isSubmitting) {
          分配中...
        } @else {
          确认分配
        }
      </button>
    </div>
  </div>
</div>