<div class="designer-calendar-container">
  <div class="calendar-header">
    <div class="header-left">
      <h4>设计师日历</h4>
      <p>查看设计师工作负载和空闲时间</p>
    </div>
    <div class="header-actions">
      <button class="btn btn-sm btn-secondary" (click)="toggleView()">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          @if (viewMode === 'calendar') {
            <rect x="3" y="4" width="18" height="18" rx="2" ry="2"/>
            <line x1="16" y1="2" x2="16" y2="6"/>
            <line x1="8" y1="2" x2="8" y2="6"/>
            <line x1="3" y1="10" x2="21" y2="10"/>
          } @else {
            <line x1="8" y1="6" x2="21" y2="6"/>
            <line x1="8" y1="12" x2="21" y2="12"/>
            <line x1="8" y1="18" x2="21" y2="18"/>
            <line x1="3" y1="6" x2="3.01" y2="6"/>
            <line x1="3" y1="12" x2="3.01" y2="12"/>
            <line x1="3" y1="18" x2="3.01" y2="18"/>
          }
        </svg>
        {{ viewMode === 'calendar' ? '列表视图' : '日历视图' }}
      </button>
      <button class="btn btn-sm btn-secondary" (click)="refreshData()">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <polyline points="23 4 23 10 17 10"/>
          <polyline points="1 20 1 14 7 14"/>
          <path d="m3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/>
        </svg>
        刷新
      </button>
    </div>
  </div>

  <!-- 筛选器 -->
  <div class="calendar-filters">
    <div class="filter-group">
      <label class="filter-label">项目组</label>
      <select class="filter-select" [(ngModel)]="selectedGroup" (ngModelChange)="onGroupChange()">
        <option value="">全部项目组</option>
        @for (group of projectGroups; track group.id) {
          <option [value]="group.id">{{ group.name }}</option>
        }
      </select>
    </div>
    <div class="filter-group">
      <label class="filter-label">设计师状态</label>
      <select class="filter-select" [(ngModel)]="selectedStatus" (ngModelChange)="onStatusChange()">
        <option value="">全部状态</option>
        <option value="available">空闲</option>
        <option value="busy">忙碌</option>
        <option value="overloaded">满载</option>
        <option value="stagnant">停滞期</option>
      </select>
    </div>
    <div class="filter-group">
      <label class="filter-label">时间范围</label>
      <select class="filter-select" [(ngModel)]="timeRange" (ngModelChange)="onTimeRangeChange()">
        <option value="week">本周</option>
        <option value="month">本月</option>
        <option value="quarter">本季度</option>
      </select>
    </div>
    <div class="filter-group">
      <label class="filter-label">设计师搜索</label>
      <input class="filter-input" type="text" placeholder="输入姓名搜索" [(ngModel)]="designerSearch" (ngModelChange)="onDesignerSearchChange()" />
    </div>
    <div class="filter-group">
      <label class="checkbox-label">
        <input type="checkbox" [(ngModel)]="hideStagnantProjects" (ngModelChange)="onFilterChange()">
        <span class="checkmark"></span>
        过滤停滞期项目
      </label>
    </div>
  </div>

  <!-- 状态图例 -->
  <div class="status-legend">
    <h5 class="legend-title">📊 状态图例</h5>
    <div class="legend-items">
      <div class="legend-item">
        <div class="legend-color availability-free"></div>
        <span class="legend-text">空闲可接单</span>
      </div>
      <div class="legend-item">
        <div class="legend-color availability-partial"></div>
        <span class="legend-text">部分忙碌</span>
      </div>
      <div class="legend-item">
        <div class="legend-color availability-booked"></div>
        <span class="legend-text">完全忙碌</span>
      </div>
      <div class="legend-item">
        <div class="legend-color review-day"></div>
        <span class="legend-text">对图日</span>
      </div>
      <div class="legend-item">
        <div class="legend-color today"></div>
        <span class="legend-text">今日</span>
      </div>
    </div>
  </div>

  <!-- 日历视图 -->
  @if (viewMode === 'calendar') {
    <div class="calendar-view">
      <div class="calendar-navigation">
        <button class="nav-btn" (click)="previousPeriod()">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <polyline points="15 18 9 12 15 6"/>
          </svg>
        </button>
        <h3 class="current-period">{{ getCurrentPeriodLabel() }}</h3>
        <button class="nav-btn" (click)="nextPeriod()">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <polyline points="9 18 15 12 9 6"/>
          </svg>
        </button>
      </div>

      <div class="calendar-grid">
        <div class="calendar-header-row">
          <div class="designer-column">设计师</div>
          @for (date of calendarDates; track date) {
            <div class="date-column">
              <div class="date-label">{{ formatDate(date, 'MM/dd') }}</div>
              <div class="weekday-label">{{ formatDate(date, 'EEE') }}</div>
            </div>
          }
        </div>

        @for (designer of filteredDesigners; track designer.id) {
          <div class="calendar-row">
            <div class="designer-cell">
              <div class="designer-info">
                <div class="designer-avatar">
                  <img [src]="designer.avatar" [alt]="designer.name" (error)="onAvatarError($event)" />
                </div>
                <div class="designer-details">
                  <div class="designer-name">{{ designer.name }}</div>
                  <div class="designer-group">{{ designer.groupName }}</div>
                  <div class="designer-stats">
                    <span class="stat-item">{{ designer.currentProjects }}个项目</span>
                    <span class="stat-item" [class]="getIdleDaysClass(designer.idleDays ?? 0)">
                        {{ designer.idleDays ?? 0 }}天未接单
                    </span>
                  </div>
                </div>
              </div>
            </div>

            @for (date of calendarDates; track date) {
              <div class="date-cell">
                <div class="date-content" [class]="getDateCellClass(designer, date)">
                  @if (getDateEvents(designer, date).length > 0) {
                    <div class="event-indicators">
                      @for (event of getDateEvents(designer, date); track event.id) {
                        <div class="event-indicator" [class]="getEventClass(event)" [title]="event.title">
                          {{ event.type === 'review' ? '对' : event.type === 'project' ? '项' : '休' }}
                        </div>
                      }
                    </div>
                    <div class="events-popover">
                      @for (event of getDateEvents(designer, date); track event.id) {
                        <div class="popover-item">
                          <div class="popover-title">{{ event.title }}</div>
                          <div class="popover-meta">时长：{{ event.duration }}小时 · 类型：{{ getEventTypeText(event.type) }}</div>
                        </div>
                      }
                    </div>
                  } @else {
                    <div class="empty-indicator"></div>
                  }
                </div>
              </div>
            }
          </div>
        }
      </div>
    </div>
  }

  <!-- 列表视图 -->
  @if (viewMode === 'list') {
    <div class="list-view">
      @if (filteredDesigners.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"/>
              <circle cx="9" cy="7" r="4"/>
              <path d="m22 2-5 10-5-5 10-5z"/>
            </svg>
          </div>
          <p>暂无符合条件的设计师</p>
          <p class="empty-hint">请调整筛选条件或添加设计师</p>
        </div>
      } @else {
        <div class="designer-list">
          @for (designer of filteredDesigners; track designer.id) {
            <div class="designer-card">
              <div class="card-header">
                <div class="designer-info">
                  <div class="designer-avatar">
                    <img [src]="designer.avatar" [alt]="designer.name" (error)="onAvatarError($event)" />
                  </div>
                  <div class="designer-details">
                    <div class="designer-name">{{ designer.name }}</div>
                    <div class="designer-meta">
                      <span class="designer-group">{{ designer.groupName }}</span>
                      @if (designer.isLeader) {
                        <span class="leader-badge">组长</span>
                      }
                      <span class="status-indicator" [class]="designer.status"></span>
                      <span class="status-text">{{ getStatusText(designer.status) }}</span>
                    </div>
                  </div>
                </div>
                <div class="designer-actions">
                  <button class="action-btn" (click)="viewDesignerDetail(designer)" title="查看详情">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                      <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
                      <circle cx="12" cy="12" r="3"/>
                    </svg>
                  </button>
                  <button class="action-btn" (click)="assignToDesigner(designer)" title="分配任务">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                      <circle cx="12" cy="12" r="10"/>
                      <line x1="12" y1="8" x2="12" y2="16"/>
                      <line x1="8" y1="12" x2="16" y2="12"/>
                    </svg>
                  </button>
                </div>
              </div>

              <div class="card-content">
                <div class="workload-section">
                  <h5>工作负载</h5>
                  <div class="workload-stats">
                    <div class="stat-item">
                      <span class="stat-label">当前项目</span>
                      <span class="stat-value">{{ designer.currentProjects }}个</span>
                    </div>
                    <div class="stat-item">
                      <span class="stat-label">本月完成</span>
                      <span class="stat-value">{{ designer.completedThisMonth }}个</span>
                    </div>
                    <div class="stat-item">
                      <span class="stat-label">平均周期</span>
                      <span class="stat-value">{{ designer.averageCycle }}天</span>
                    </div>
                    <div class="stat-item">
                      <span class="stat-label">空闲天数</span>
                      <span class="stat-value" [class]="getIdleDaysClass(designer.idleDays ?? 0)">
                    {{ designer.idleDays ?? 0 }}天
                      </span>
                    </div>
                  </div>
                </div>

                <div class="schedule-section">
                  <h5>近期安排</h5>
                  @if ((designer.upcomingEvents || []).length === 0) {
                    <p class="no-events">暂无安排</p>
                  } @else {
                    <div class="event-list">
                      @for (event of (designer.upcomingEvents || []).slice(0, 3); track event.id) {
                        <div class="event-item">
                          <div class="event-date">{{ formatDate(event.date, 'MM/dd') }}</div>
                          <div class="event-content">
                            <div class="event-title">{{ event.title }}</div>
                            <div class="event-type" [class]="getEventClass(event)">
                              {{ getEventTypeText(event.type) }}
                            </div>
                          </div>
                        </div>
                      }
                      @if ((designer.upcomingEvents || []).length > 3) {
                        <div class="more-events">
                          还有 {{ (designer.upcomingEvents || []).length - 3 }} 个安排...
                        </div>
                      }
                    </div>
                  }
                </div>

                <div class="availability-section">
                  <h5>可用性分析</h5>
                  <div class="availability-info">
                    <div class="availability-item">
                      <span class="availability-label">下次可接单</span>
                      <span class="availability-value">{{ getNextAvailableDate(designer) }}</span>
                    </div>
                    <div class="availability-item">
                      <span class="availability-label">推荐分配</span>
                      <span class="availability-value" [class]="getRecommendationClass(designer)">
                        {{ getRecommendationText(designer) }}
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          }
        </div>
      }
    </div>
  }

  <!-- 统计摘要 -->
  <div class="calendar-summary">
    <div class="summary-stats">
      <div class="stat-card">
        <div class="stat-icon available">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <circle cx="12" cy="12" r="10"/>
            <polyline points="12 6 12 12 16 14"/>
          </svg>
        </div>
        <div class="stat-content">
          <div class="stat-value">{{ getDesignerCountByStatus('available') }}</div>
          <div class="stat-label">空闲设计师</div>
        </div>
      </div>
      <div class="stat-card">
        <div class="stat-icon busy">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <circle cx="12" cy="12" r="10"/>
            <line x1="12" y1="8" x2="12" y2="16"/>
            <line x1="8" y1="12" x2="16" y2="12"/>
          </svg>
        </div>
        <div class="stat-content">
          <div class="stat-value">{{ getDesignerCountByStatus('busy') }}</div>
          <div class="stat-label">忙碌设计师</div>
        </div>
      </div>
      <div class="stat-card">
        <div class="stat-icon overloaded">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <circle cx="12" cy="12" r="10"/>
            <line x1="15" y1="9" x2="9" y2="15"/>
            <line x1="9" y1="9" x2="15" y2="15"/>
          </svg>
        </div>
        <div class="stat-content">
          <div class="stat-value">{{ getDesignerCountByStatus('overloaded') }}</div>
          <div class="stat-label">满载设计师</div>
        </div>
      </div>
      <div class="stat-card">
        <div class="stat-icon stagnant">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <circle cx="12" cy="12" r="10"/>
            <path d="M8 12l2 2 4-4"/>
          </svg>
        </div>
        <div class="stat-content">
          <div class="stat-value">{{ getStagnantProjectsCount() }}</div>
          <div class="stat-label">停滞期项目</div>
        </div>
      </div>
    </div>
  </div>
</div>