<header class="dashboard-header">
  <h1>设计组长工作台</h1>
  <!-- 核心数据指标卡片 -->
  <div class="dashboard-metrics">
    <div class="metric-card" (click)="filterByStatus('overdue')">
      <div class="metric-icon warning">⚠️</div>
      <div class="metric-content">
        <div class="metric-count">{{ overdueProjects.length }}</div>
        <div class="metric-label">已延期项目</div>
      </div>
    </div>
    <div class="metric-card" (click)="filterByStatus('pendingApproval')">
      <div class="metric-icon info">📋</div>
      <div class="metric-content">
        <div class="metric-count">{{ pendingApprovalProjects.length }}</div>
        <div class="metric-label">待组长确认项目</div>
      </div>
    </div>
    <div class="metric-card" (click)="filterByStatus('pendingAssignment')">
      <div class="metric-icon primary">🎯</div>
      <div class="metric-content">
        <div class="metric-count">{{ pendingAssignmentProjects.length }}</div>
        <div class="metric-label">待分配方案项目</div>
      </div>
    </div>
  </div>
</header>

<main class="dashboard-main">
  <!-- 项目监控大盘 -->
  <section class="monitoring-section">
    <div class="section-header">
      <h2>项目监控大盘</h2>
      <div class="section-filters">
        <select (change)="filterProjects($event)" class="custom-select">
          <option value="all">全部项目</option>
          <option value="soft">软装项目</option>
          <option value="hard">硬装项目</option>
        </select>
        <select (change)="filterByUrgency($event)" class="custom-select">
          <option value="all">全部紧急程度</option>
          <option value="high">高</option>
          <option value="medium">中</option>
          <option value="low">低</option>
        </select>
        <select (change)="onStatusChange($event)" class="custom-select">
          <option value="all">全部状态</option>
          <option value="progress">进行中</option>
          <option value="completed">已完成</option>
          <option value="overdue">已延期</option>
          <option value="pendingApproval">待确认</option>
          <option value="pendingAssignment">待分配</option>
        </select>
        <!-- 支持数百项目的下拉筛选 -->
        <select [(ngModel)]="selectedProjectId" (change)="selectProject()" class="custom-select project-selector">
          <option value="">选择项目</option>
          <option *ngFor="let project of projects" [value]="project.id">{{ project.name }}</option>
        </select>
      </div>
    </div>
    
    <!-- 项目看板 - 横向展开10个项目阶段 -->
    <div class="project-kanban">
      <!-- 阶段标题 -->
      <div class="kanban-header">
        <div class="kanban-column-header" *ngFor="let stage of projectStages">
          <h3>{{ stage.name }}</h3>
          <span class="stage-count">{{ getProjectCountByStage(stage.id) }}</span>
        </div>
      </div>
      <!-- 项目卡片 -->
      <div class="kanban-body">
        <div class="kanban-column" *ngFor="let stage of projectStages">
          <div *ngFor="let project of getProjectsByStage(stage.id)" 
               class="project-card" 
               [class.overdue]="project.isOverdue" 
               [class.high-urgency]="project.urgency === 'high'">
            <div class="project-card-header">
              <h4 [routerLink]="['/team-leader/project-review', project.id]">{{ project.name }}</h4>
              <span class="project-urgency" [class]="'urgency-' + project.urgency">{{ getUrgencyLabel(project.urgency) }}</span>
            </div>
            <div class="project-card-content">
              <p>负责人: {{ project.designerName }}</p>
              <p class="deadline">{{ project.isOverdue ? '超期' + project.overdueDays + '天' : '截止: ' + (project.expectedEndDate | date:'MM-dd') }}</p>
            </div>
            <div class="project-card-footer">
              <button (click)="viewProjectDetails(project.id)" class="btn-view">查看详情</button>
              <button (click)="quickAssignProject(project.id)" *ngIf="stage.id === 'pendingAssignment'" class="btn-assign">分配</button>
            </div>
          </div>
          <!-- 空状态 -->
          <div *ngIf="getProjectsByStage(stage.id).length === 0" class="empty-column">
            <span class="empty-icon">📦</span>
            <p>暂无项目</p>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- 待办任务优先级排序 -->
  <section class="todo-section">
    <div class="section-header">
      <h2>待办任务</h2>
    </div>
    
    <div class="todo-list">
      <div *ngFor="let task of todoTasks" class="todo-item" [class.priority-high]="task.priority === 'high'" [class.priority-medium]="task.priority === 'medium'" [class.priority-low]="task.priority === 'low'">
        <div class="todo-header">
          <h3>{{ task.title }}</h3>
          <span class="task-priority">{{ getPriorityLabel(task.priority) }}</span>
        </div>
        <div class="todo-info">
          <p>{{ task.description }}</p>
          <p class="task-deadline">截止时间: {{ task.deadline | date:'yyyy-MM-dd HH:mm' }}</p>
        </div>
        <div class="todo-actions">
          <button (click)="navigateToTask(task)" class="btn-handle">处理任务</button>
        </div>
      </div>
    </div>
  </section>

  <!-- 快速操作面板 -->
  <section class="quick-actions-section">
    <div class="section-header">
      <h2>快速操作</h2>
    </div>
    
    <div class="quick-actions-grid">
      <div class="action-card" (click)="navigateToTeamManagement()">
        <div class="action-icon">👥</div>
        <h3>团队管理</h3>
        <p>查看组员能力和绩效</p>
      </div>
      <div class="action-card" (click)="navigateToProjectReview()">
        <div class="action-icon">📊</div>
        <h3>项目评审</h3>
        <p>审核和分配新项目</p>
      </div>
      <div class="action-card" (click)="navigateToQualityManagement()">
        <div class="action-icon">✅</div>
        <h3>质量管理</h3>
        <p>查看整改任务和标准</p>
      </div>
      <div class="action-card" (click)="openWorkloadEstimator()">
        <div class="action-icon">⏱️</div>
        <h3>工作量预估</h3>
        <p>前往项目详情页使用</p>
      </div>
    </div>
  </section>

  <!-- 超期项目提醒 -->
  <div *ngIf="showAlert && overdueProjects.length > 0" class="overdue-alert">
    <div class="alert-content">
      <h3>⚠️ 超期项目提醒</h3>
      <ul>
        <li *ngFor="let project of overdueProjects.slice(0, 3)">
          {{ project.name }} ({{ project.designerName }} 负责) - 超期{{ project.overdueDays }}天
        </li>
      </ul>
      <div class="alert-actions">
        <button (click)="viewAllOverdueProjects()" class="btn-view-all">查看全部</button>
        <button (click)="closeAlert()" class="btn-close">关闭</button>
      </div>
    </div>
  </div>
</main>