@if (visible && calendarData) {
<div class="designer-calendar-overlay" (click)="onClose()">
  <div class="designer-calendar-modal" (click)="$event.stopPropagation()">
    <!-- 模态框头部 -->
    <div class="modal-header">
      <div class="header-left">
        <div class="designer-avatar">
          <span class="avatar-icon">👤</span>
        </div>
        <div class="header-info">
          <h3>{{ calendarData.designerName }}</h3>
          <p class="header-subtitle">工作日历与排期管理</p>
        </div>
      </div>
      <button class="close-btn" (click)="onClose()">
        <span class="close-icon">✕</span>
      </button>
    </div>

    <!-- 筛选和统计区域 -->
    <div class="filter-stats-section">
      <!-- 快速筛选器 -->
      <div class="quick-filters">
        <div class="filter-group">
          <label class="filter-label">
            <span class="label-icon">📅</span>
            <span class="label-text">项目目标</span>
          </label>
          <select class="filter-select modern-select">
            <option value="all">全部项目目标</option>
            <option value="current">当前项目</option>
            <option value="upcoming">即将开始</option>
          </select>
        </div>

        <div class="filter-group">
          <label class="filter-label">
            <span class="label-icon">📊</span>
            <span class="label-text">设计师状态</span>
          </label>
          <select class="filter-select modern-select">
            <option value="all">全部状态</option>
            <option value="idle">空闲可分配</option>
            <option value="busy">工作中</option>
            <option value="review">对图日</option>
          </select>
        </div>

        <div class="filter-group">
          <label class="filter-label">
            <span class="label-icon">⏰</span>
            <span class="label-text">时间范围</span>
          </label>
          <select class="filter-select modern-select">
            <option value="month">本月</option>
            <option value="week">本周</option>
            <option value="custom">自定义</option>
          </select>
        </div>

        <div class="filter-group checkbox-group">
          <label class="checkbox-label">
            <input type="checkbox" class="modern-checkbox">
            <span class="checkbox-text">仅显示空闲日期</span>
          </label>
        </div>
      </div>
    </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)"
               [attr.data-status]="getDayStatus(day)"
               [title]="getDayTooltip(day)"
               (click)="onDayClick(day)">
            
            <!-- 日期数字 -->
            <div class="day-number">{{ day.date.getDate() }}</div>
            
            <!-- 工作状态文本 -->
            <div class="day-status-text">
              @if (day.isReviewDay) {
                <span class="status-label review-label">对图</span>
              } @else if (day.orderCount > 0) {
                <span class="status-label busy-label">{{ day.orderCount }}单</span>
              } @else if (day.isIdle && day.isCurrentMonth) {
                <span class="status-label idle-label">空闲</span>
              }
            </div>
            
            <!-- 工作负荷指示条 -->
            @if (day.isCurrentMonth && (day.orderCount > 0 || day.isReviewDay)) {
              <div class="workload-indicator-bar">
                <div class="workload-fill" 
                     [class]="day.isReviewDay ? 'review-fill' : (day.orderCount >= 2 ? 'high-fill' : 'medium-fill')"
                     [style.width.%]="day.isReviewDay ? 100 : Math.min(day.orderCount * 40, 100)">
                </div>
              </div>
            }
          </div>
        }
      </div>
    </div>

    <!-- 图例说明 -->
    <div class="calendar-legend">
      <div class="legend-item">
        <span class="legend-color idle-color"></span>
        <span class="legend-text">空闲可分配（绿色）</span>
      </div>
      <div class="legend-item">
        <span class="legend-color busy-color"></span>
        <span class="legend-text">有订单工作中（蓝色）</span>
      </div>
      <div class="legend-item">
        <span class="legend-color review-color"></span>
        <span class="legend-text">对图日期不可分配（红色）</span>
      </div>
      <div class="legend-item">
        <span class="legend-color today-color"></span>
        <span class="legend-text">今天（橙色边框）</span>
      </div>
    </div>

    <!-- 操作提示 -->
    <div class="calendar-tips">
      <p><strong>颜色说明：</strong></p>
      <ul>
        <li>🟢 <strong>绿色背景</strong> - 空闲日期，可以分配新订单</li>
        <li>🔵 <strong>蓝色背景</strong> - 有订单工作中，根据订单数量显示深浅</li>
        <li>🔴 <strong>红色背景</strong> - 对图日期，完全不能分配其他工作</li>
        <li>🟠 <strong>橙色边框</strong> - 今天的日期</li>
        <li>📊 <strong>底部彩条</strong> - 工作负荷强度指示</li>
        <li>👆 点击空闲日期可以快速分配订单</li>
      </ul>
    </div>
  </div>
</div>
}