<div class="modal-overlay" [class.visible]="visible" (click)="closeModal()">
  <div class="modal-container" (click)="$event.stopPropagation()">
    <div class="modal-header">
      <h2>设计师组分配</h2>
      <button class="close-btn" (click)="closeModal()">
        <svg width="24" height="24" 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="modal-body">
      <!-- 项目组选择 -->
      <div class="team-selection-section">
        <h3>选择项目组</h3>
        <div class="team-grid">
          @for (team of projectTeams; track team.id) {
            <div 
              class="team-card" 
              [class.selected]="internalSelectedTeamId === team.id"
              (click)="selectTeam(team.id)"
            >
              <div class="team-header">
                <h4>{{ team.name }}</h4>
                <span class="team-leader">组长：{{ team.leaderName }}</span>
              </div>
              <div class="team-description">{{ team.description }}</div>
              <div class="team-stats">
                <div class="stat-item">
                  <span class="stat-label">成员</span>
                  <span class="stat-value">{{ team.members.length }}人</span>
                </div>
                <div class="stat-item">
                  <span class="stat-label">空闲</span>
                  <span class="stat-value idle">{{ getIdleDesignersCount(team) }}人</span>
                </div>
              </div>
            </div>
          }
        </div>
      </div>

      <!-- 设计师列表 -->
      @if (internalSelectedTeamId) {
        <div class="designer-selection-section">
          <div class="section-header">
            <h3>{{ getSelectedTeam()?.name }} - 设计师列表</h3>
            <div class="selection-summary">
              已选择：{{ internalSelectedDesigners.length + internalCrossTeamCollaborators.length }}人
            </div>
          </div>

          <!-- 推荐设计师 -->
          @if (getRecommendedDesigners().length > 0) {
            <div class="recommended-section">
              <h4>
                <span class="recommend-icon">⭐</span>
                推荐分配（长期闲置优先）
              </h4>
              <div class="designer-grid">
                @for (designer of getRecommendedDesigners(); track designer.id) {
                  <div 
                    class="designer-card recommended"
                    [class.selected]="isDesignerSelected(designer)"
                    (click)="toggleDesignerSelection(designer)"
                  >
                    <div class="designer-avatar">
                      @if (designer.avatar) {
                        <img [src]="designer.avatar" [alt]="designer.name">
                      } @else {
                        <div class="avatar-placeholder">{{ designer.name.charAt(0) }}</div>
                      }
                      <div class="status-dot" [style.background-color]="getDesignerStatusColor(designer.status)"></div>
                    </div>
                    
                    <div class="designer-info">
                      <div class="designer-name">
                        {{ designer.name }}
                        @if (designer.isTeamLeader) {
                          <span class="leader-badge">组长</span>
                        }
                      </div>
                      
                      <div class="designer-status">
                        <span class="status-text" [style.color]="getDesignerStatusColor(designer.status)">
                          {{ getDesignerStatusText(designer.status) }}
                        </span>
                        <span class="workload" [class]="getWorkloadClass(designer.workload)">
                          {{ designer.workload }}%
                        </span>
                      </div>

                      <div class="designer-metrics">
                        <div class="metric-item" [class]="getIdleDaysClass(designer.idleDays)">
                          <span class="metric-label">{{ getRecentOrdersText(designer) }}</span>
                        </div>
                        
                        @if (designer.availableDates.length > 0) {
                          <div class="metric-item">
                            <span class="metric-label">{{ getAvailableDatesText(designer) }}</span>
                          </div>
                        }

                        @if (designer.reviewDates.length > 0) {
                          <div class="metric-item review-dates">
                            <span class="metric-label">对图日期：{{ designer.reviewDates.join(', ') }}</span>
                          </div>
                        }
                      </div>

                      <div class="designer-skills">
                        @for (skill of designer.skills.slice(0, 2); track skill) {
                          <span class="skill-tag">{{ skill }}</span>
                        }
                        @if (designer.skills.length > 2) {
                          <span class="skill-more">+{{ designer.skills.length - 2 }}</span>
                        }
                      </div>
                    </div>

                    <div class="designer-actions">
                      <button 
                        class="calendar-btn"
                        (click)="$event.stopPropagation(); showDesignerDetailCalendar(designer)"
                        title="查看详细日历"
                      >
                        📅
                      </button>
                    </div>
                  </div>
                }
              </div>
            </div>
          }

          <!-- 所有团队成员 -->
          <div class="all-members-section">
            <h4>所有团队成员</h4>
            <div class="designer-grid">
              @for (designer of getSelectedTeam()?.members; track designer.id) {
                <div 
                  class="designer-card"
                  [class.selected]="isDesignerSelected(designer)"
                  [class.busy]="designer.status === 'busy'"
                  [class.reviewing]="designer.status === 'reviewing'"
                  (click)="toggleDesignerSelection(designer)"
                >
                  <div class="designer-avatar">
                    @if (designer.avatar) {
                      <img [src]="designer.avatar" [alt]="designer.name">
                    } @else {
                      <div class="avatar-placeholder">{{ designer.name.charAt(0) }}</div>
                    }
                    <div class="status-dot" [style.background-color]="getDesignerStatusColor(designer.status)"></div>
                  </div>
                  
                  <div class="designer-info">
                    <div class="designer-name">
                      {{ designer.name }}
                      @if (designer.isTeamLeader) {
                        <span class="leader-badge">组长</span>
                      }
                    </div>
                    
                    <div class="designer-status">
                      <span class="status-text" [style.color]="getDesignerStatusColor(designer.status)">
                        {{ getDesignerStatusText(designer.status) }}
                      </span>
                      <span class="workload" [class]="getWorkloadClass(designer.workload)">
                        {{ designer.workload }}%
                      </span>
                    </div>

                    <div class="designer-metrics">
                      <div class="metric-item" [class]="getIdleDaysClass(designer.idleDays)">
                        <span class="metric-label">{{ getRecentOrdersText(designer) }}</span>
                      </div>
                      
                      @if (designer.availableDates.length > 0) {
                        <div class="metric-item">
                          <span class="metric-label">{{ getAvailableDatesText(designer) }}</span>
                        </div>
                      }

                      @if (designer.reviewDates.length > 0) {
                        <div class="metric-item review-dates">
                          <span class="metric-label">对图日期：{{ designer.reviewDates.join(', ') }}</span>
                        </div>
                      }
                    </div>

                    <div class="designer-skills">
                      @for (skill of designer.skills.slice(0, 2); track skill) {
                        <span class="skill-tag">{{ skill }}</span>
                      }
                      @if (designer.skills.length > 2) {
                        <span class="skill-more">+{{ designer.skills.length - 2 }}</span>
                      }
                    </div>
                  </div>

                  <div class="designer-actions">
                    <button 
                      class="calendar-btn"
                      (click)="$event.stopPropagation(); showDesignerDetailCalendar(designer)"
                      title="查看详细日历"
                    >
                      📅
                    </button>
                  </div>
                </div>
              }
            </div>
          </div>

          <!-- 跨组合作选项 -->
          <div class="cross-team-section">
            <div class="cross-team-header">
              <label class="checkbox-label">
                <input 
                  type="checkbox" 
                  [(ngModel)]="allowCrossTeamSelection"
                >
                <span class="checkmark"></span>
                允许跨组合作
              </label>
              <span class="cross-team-hint">可从其他项目组选择成员参与协作</span>
            </div>

            @if (allowCrossTeamSelection) {
              <div class="cross-team-designers">
                <h4>其他项目组成员</h4>
                <div class="designer-grid">
                  @for (designer of getOtherTeamDesigners(); track designer.id) {
                    <div 
                      class="designer-card cross-team"
                      [class.selected]="isCrossTeamCollaborator(designer)"
                      (click)="toggleCrossTeamCollaborator(designer)"
                    >
                      <div class="designer-avatar">
                        @if (designer.avatar) {
                          <img [src]="designer.avatar" [alt]="designer.name">
                        } @else {
                          <div class="avatar-placeholder">{{ designer.name.charAt(0) }}</div>
                        }
                        <div class="status-dot" [style.background-color]="getDesignerStatusColor(designer.status)"></div>
                      </div>
                      
                      <div class="designer-info">
                        <div class="designer-name">
                          {{ designer.name }}
                          <span class="team-tag">{{ designer.teamName }}</span>
                        </div>
                        
                        <div class="designer-status">
                          <span class="status-text" [style.color]="getDesignerStatusColor(designer.status)">
                            {{ getDesignerStatusText(designer.status) }}
                          </span>
                          <span class="workload" [class]="getWorkloadClass(designer.workload)">
                            {{ designer.workload }}%
                          </span>
                        </div>

                        <div class="designer-metrics">
                          <div class="metric-item" [class]="getIdleDaysClass(designer.idleDays)">
                            <span class="metric-label">{{ getRecentOrdersText(designer) }}</span>
                          </div>
                        </div>
                      </div>

                      <div class="designer-actions">
                        <button 
                          class="calendar-btn"
                          (click)="$event.stopPropagation(); showDesignerDetailCalendar(designer)"
                          title="查看详细日历"
                        >
                          📅
                        </button>
                      </div>
                    </div>
                  }
                </div>
              </div>
            }
          </div>
        </div>
      }
    </div>

    <div class="modal-footer">
      <div class="selection-summary">
        @if (selectedDesigners.length > 0) {
          <div class="summary-item">
            <span class="summary-label">主要团队：</span>
            <span class="summary-value">{{ getSelectedDesignersNames() }}</span>
          </div>
        }
        @if (internalCrossTeamCollaborators.length > 0) {
          <div class="summary-item">
            <span class="summary-label">跨组合作：</span>
            <span class="summary-value">{{ getCrossTeamCollaboratorsNames() }}</span>
          </div>
        }
      </div>
      
      <div class="modal-actions">
        <button class="btn-secondary" (click)="closeModal()">取消</button>
        <button 
          class="btn-primary" 
          [disabled]="!canConfirmAssignment()"
          (click)="confirmAssignment()"
        >
          确认分配
        </button>
      </div>
    </div>
  </div>
</div>

<!-- 设计师日历弹窗 -->
@if (showDesignerCalendar) {
  <div class="designer-calendar-modal">
    <div class="modal-mask" (click)="closeDesignerCalendar()"></div>
    <div class="modal-content">
      <h3>设计师工作日历</h3>
      <button class="close-btn" (click)="closeDesignerCalendar()">关闭</button>
      <!-- 统一使用控制流指令：@if 与 @for -->
      @if (selectedCalendarDesigners.length > 0) {
        <app-designer-calendar
          [designers]="selectedCalendarDesigners">
        </app-designer-calendar>
      } @else {
        <div class="empty">暂无数据</div>
      }
    </div>
  </div>
}

<!-- 设计师详细日历弹窗 -->
@if (showDesignerCalendar && selectedDesignerForCalendar) {
  <div class="calendar-modal-overlay" (click)="closeDesignerCalendar()">
    <div class="calendar-modal-container" (click)="$event.stopPropagation()">
      <div class="calendar-modal-header">
        <h3>{{ selectedDesignerForCalendar.name }} - 详细日历</h3>
        <button class="close-btn" (click)="closeDesignerCalendar()">
          <svg width="20" height="20" 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="calendar-modal-body">
        <app-designer-calendar 
          [designers]="selectedCalendarDesigners"
          [showSingleDesigner]="true"
        ></app-designer-calendar>
      </div>
    </div>
  </div>
}