@if (visible && calendarData) {
<div class="designer-calendar-overlay" (click)="onClose()">
  <div class="designer-calendar-modal" (click)="$event.stopPropagation()">
    <!-- 模态框头部 -->
    <div class="modal-header">
      <h3>{{ calendarData.designerName }} - 工作日历</h3>
      <button class="close-btn" (click)="onClose()">×</button>
    </div>

    <!-- 设计师统计信息 -->
    <div class="designer-stats">
      <div class="stats-grid">
        <div class="stat-item">
          <div class="stat-value">{{ calendarData.stats.idleDays }}</div>
          <div class="stat-label">空闲天数</div>
        </div>
        <div class="stat-item">
          <div class="stat-value">{{ calendarData.stats.totalOrders }}</div>
          <div class="stat-label">总订单数</div>
        </div>
        <div class="stat-item">
          <div class="stat-value">{{ calendarData.stats.recentOrders }}</div>
          <div class="stat-label">近期订单</div>
        </div>
        <div class="stat-item">
          <div class="stat-value" [class.warning]="calendarData.stats.stagnantProjects > 0">
            {{ calendarData.stats.stagnantProjects }}
          </div>
          <div class="stat-label">停滞项目</div>
        </div>
      </div>
      
      <!-- 工作负荷指示器 -->
      <div class="workload-indicator">
        <div class="workload-label">工作负荷</div>
        <div class="workload-bar">
          <div class="workload-fill" 
               [class]="getWorkloadClass(getWorkloadPercentage(calendarData.stats))"
               [style.width.%]="getWorkloadPercentage(calendarData.stats)">
          </div>
        </div>
        <div class="workload-percentage">{{ getWorkloadPercentage(calendarData.stats) }}%</div>
      </div>
      
      <!-- 设计师状态标识 -->
      <div class="designer-status">
        <span class="status-badge" [style.background-color]="getStatusColor(calendarData.stats)">
          {{ getStatusText(calendarData.stats) }}
        </span>
        @if (calendarData.stats.lastOrderDate) {
          <span class="last-order">最近订单: {{ calendarData.stats.lastOrderDate }}</span>
        }
      </div>
    </div>

    <!-- 日历导航 -->
    <div class="calendar-nav">
      <button class="nav-btn" (click)="previousMonth()">‹</button>
      <h4 class="month-title">{{ formatDate(currentMonth) }}</h4>
      <button class="nav-btn" (click)="nextMonth()">›</button>
    </div>

    <!-- 日历容器 -->
    <div class="calendar-container">
      <!-- 星期标题 -->
      <div class="calendar-header">
        @for (weekday of weekDays; track weekday) {
          <div class="weekday">{{ weekday }}</div>
        }
      </div>

      <!-- 日历网格 -->
      <div class="calendar-grid">
        @for (day of monthGrid; track day.date.getTime()) {
          <div class="calendar-day" 
               [class]="getDayClass(day)"
               [title]="day.tooltip"
               (click)="onDayClick(day)">
            
            <!-- 日期数字 -->
            <div class="day-number">{{ day.date.getDate() }}</div>
            
            <!-- 工作状态指示器 -->
            <div class="day-status">
              @if (day.isReviewDay) {
                <div class="status-indicator review">
                  <mat-icon>visibility</mat-icon>
                  <span>对图</span>
                </div>
              } @else if (day.orderCount > 0) {
                <div class="status-indicator busy">
                  <mat-icon>work</mat-icon>
                  <span>{{ day.orderCount }}单</span>
                </div>
              } @else if (day.isIdle && day.isCurrentMonth) {
                <div class="status-indicator idle">
                  <mat-icon>check_circle</mat-icon>
                  <span>空闲</span>
                </div>
              }
            </div>
            
            <!-- 工作负荷条 -->
            @if (day.isCurrentMonth && (day.orderCount > 0 || day.isReviewDay)) {
              <div class="workload-bar-mini">
                <div class="workload-fill-mini" 
                     [class]="day.isReviewDay ? 'review' : (day.orderCount >= 2 ? 'high' : 'medium')"
                     [style.width.%]="day.isReviewDay ? 100 : (day.orderCount * 50)">
                </div>
              </div>
            }
          </div>
        }
      </div>
    </div>

    <!-- 图例说明 -->
    <div class="calendar-legend">
      <div class="legend-item">
        <span class="legend-color idle"></span>
        <span class="legend-text">空闲可分配</span>
      </div>
      <div class="legend-item">
        <span class="legend-color busy"></span>
        <span class="legend-text">有订单</span>
      </div>
      <div class="legend-item">
        <span class="legend-color review"></span>
        <span class="legend-text">对图日期</span>
      </div>
      <div class="legend-item">
        <span class="legend-color today"></span>
        <span class="legend-text">今天</span>
      </div>
    </div>

    <!-- 操作提示 -->
    <div class="calendar-tips">
      <p><strong>使用说明：</strong></p>
      <ul>
        <li>🟢 绿色日期表示空闲，可以分配新订单</li>
        <li>🔵 蓝色日期表示有订单，工作负荷适中</li>
        <li>🔴 红色日期表示对图日期，完全不能分配其他工作</li>
        <li>📊 底部进度条显示当日工作负荷强度</li>
        <li>👆 点击空闲日期可以快速分配订单</li>
      </ul>
    </div>
  </div>
</div>
}