<!-- 欢迎区域 -->
<section class="welcome-section">
  <div class="welcome-header">
    <div>
      <h2>您好，客服小李 👋</h2>
      <p>今天是 {{ currentDate.toLocaleDateString('zh-CN', { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long' }) }}，祝您工作顺利！</p>
    </div>
    <button class="attendance-view-btn" (click)="viewAttendance()" title="查看人员考勤">
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor">
        <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
        <line x1="16" y1="2" x2="16" y2="6"></line>
        <line x1="8" y1="2" x2="8" y2="6"></line>
        <line x1="3" y1="10" x2="21" y2="10"></line>
      </svg>
      查看考勤
    </button>
  </div>
</section>

<!-- 数据看板 -->
<section class="stats-dashboard">
  <div class="stats-grid">
      <div class="stat-card" (click)="handleNewConsultationsClick()" title="点击查看新咨询详情">
        <div class="stat-icon primary">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor">
            <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path>
          </svg>
        </div>
        <div class="stat-content">
          <div class="stat-value">{{ stats.newConsultations() }}</div>
          <div class="stat-label">新咨询数</div>
        </div>
        <div class="stat-trend positive">
          <span>+12%</span>
        </div>
      </div>

      <div class="stat-card" (click)="handlePendingAssignmentsClick()" title="点击查看待派单详情">
        <div class="stat-icon secondary">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor">
            <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
            <polyline points="22 4 12 14.01 9 11.01"></polyline>
          </svg>
        </div>
        <div class="stat-content">
          <div class="stat-value">{{ stats.pendingAssignments() }}</div>
          <div class="stat-label">待派单数</div>
        </div>
        <div class="stat-trend neutral">
          <span>持平</span>
        </div>
      </div>

      <div class="stat-card" (click)="handleExceptionProjectsClick()" title="点击查看异常项目详情">
        <div class="stat-icon warning">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor">
            <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path>
            <line x1="12" y1="9" x2="12" y2="13"></line>
            <line x1="12" y1="17" x2="12.01" y2="17"></line>
          </svg>
        </div>
        <div class="stat-content">
          <div class="stat-value">{{ stats.exceptionProjects() }}</div>
          <div class="stat-label">异常项目</div>
        </div>
        <div class="stat-trend negative">
          <span>+1</span>
        </div>
      </div>

      <div class="stat-card" (click)="handleAfterSalesClick()" title="点击查看售后服务详情">
        <div class="stat-icon success">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor">
            <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path>
          </svg>
        </div>
        <div class="stat-content">
          <div class="stat-value">{{ stats.afterSalesCount() }}</div>
          <div class="stat-label">售后服务</div>
        </div>
        <div class="stat-trend positive">
          <span>+3</span>
        </div>
      </div>

    </div>

    <!-- 新增：核心指标渐变数字卡片 -->
    <div class="core-metrics-grid">
      <div class="core-metric-card gradient-green">
        <div class="metric-icon">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor">
            <path d="M3 12l2-2 4 4 8-8 2 2-10 10z"></path>
          </svg>
        </div>
        <div class="metric-content">
          <div class="metric-value">{{ stats.conversionRateToday() }}%</div>
          <div class="metric-label">当日成交率</div>
        </div>
      </div>
      <div class="core-metric-card gradient-orange">
        <div class="metric-icon">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor">
            <circle cx="12" cy="12" r="10"></circle>
            <line x1="12" y1="8" x2="12" y2="12"></line>
            <line x1="12" y1="16" x2="12.01" y2="16"></line>
          </svg>
        </div>
        <div class="metric-content">
          <div class="metric-value">{{ stats.pendingComplaints() }}</div>
          <div class="metric-label">待处理投诉数</div>
        </div>
      </div>
      <div class="core-metric-card gradient-blue">
        <div class="metric-icon">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor">
            <path d="M21 15v4a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h7"></path>
          </svg>
        </div>
        <div class="metric-content">
          <div class="metric-value">{{ stats.unRepliedConsultations() }}</div>
          <div class="metric-label">未回复咨询数</div>
        </div>
      </div>
    </div>
</section>

<!-- 新客户触达 与 老客户回访 -->
<section class="crm-queues">
  <div class="crm-grid">
    <!-- 新客户触达 -->
    <div class="crm-card">
      <div class="crm-header">
        <div class="crm-title-section">
          <h3>新客户触达</h3>
          <div class="crm-stats">
            <div class="stat-item">
              <span class="stat-number">{{ stats.newCustomerReachCount() }}</span>
              <span class="stat-label">待触达</span>
            </div>
            <div class="stat-item">
              <span class="stat-number success">{{ stats.newCustomerConversionRate() }}%</span>
              <span class="stat-label">转化率</span>
            </div>
          </div>
        </div>
        <a class="view-all-link" (click)="goToConsultationList()">查看全部</a>
      </div>
      <div class="crm-list">
        @for (c of newReachOutCustomers(); track c.name) {
        <div class="crm-item">
          <div class="crm-item-main">
            <div class="avatar small">{{ c.name.charAt(0) }}</div>
            <div class="info">
              <div class="name">{{ c.name }}</div>
              <div class="meta">
                <span class="tag" [class.value-tag]="c.customerTag === 'value-sensitive'" [class.price-tag]="c.customerTag === 'price-sensitive'">
                  {{ c.customerTag === 'value-sensitive' ? '品质敏感' : '价格敏感' }}
                </span>
                <span class="tag">{{ c.demandType }}</span>
                <span class="time">上次沟通：{{ formatDate(c.lastContactAt) }}</span>
              </div>
              <div class="strategy-info">
                <div class="recommended-phrase">{{ c.recommendedPhrase }}</div>
                <div class="case-strategy">策略：{{ c.caseStrategy }}</div>
              </div>
            </div>
          </div>
          <button class="ios-btn mini" (click)="goToConsultationList()">触达</button>
        </div>
        }
        @if (newReachOutCustomers().length === 0) {
        <div class="empty-state small">暂无待触达客户</div>
        }
      </div>
    </div>

    <!-- 老客户回访 -->
    <div class="crm-card">
      <div class="crm-header">
        <div class="crm-title-section">
          <h3>老客户回访</h3>
          <div class="crm-stats">
            <div class="stat-item">
              <span class="stat-number">{{ stats.oldCustomerFollowUpCount() }}</span>
              <span class="stat-label">待回访</span>
            </div>
            <div class="stat-item">
              <span class="stat-number warning">{{ stats.oldCustomerRetentionRate() }}%</span>
              <span class="stat-label">留存率</span>
            </div>
          </div>
        </div>
        <a class="view-all-link" (click)="goToConsultationList()">查看全部</a>
      </div>
      <div class="crm-list">
        @for (c of oldCustomerFollowUps(); track c.name) {
        <div class="crm-item">
          <div class="crm-item-main">
            <div class="avatar small alt">{{ c.name.charAt(0) }}</div>
            <div class="info">
              <div class="name">{{ c.name }}</div>
              <div class="meta">
                <span class="tag" [class.value-tag]="c.customerTag === 'value-sensitive'" [class.price-tag]="c.customerTag === 'price-sensitive'">
                  {{ c.customerTag === 'value-sensitive' ? '品质敏感' : '价格敏感' }}
                </span>
                <span class="tag">{{ c.demandType }}</span>
                <span class="time">上次沟通：{{ formatDate(c.lastContactAt) }}</span>
              </div>
              <div class="strategy-info">
                <div class="recommended-phrase">{{ c.recommendedPhrase }}</div>
                <div class="case-strategy">策略：{{ c.caseStrategy }}</div>
              </div>
            </div>
          </div>
          <button class="ios-btn mini outline" (click)="goToConsultationList()">回访</button>
        </div>
        }
        @if (oldCustomerFollowUps().length === 0) {
        <div class="empty-state small">暂无待回访客户</div>
        }
      </div>
    </div>
    </div>
  </section>

<!-- 紧急待办和项目动态流 -->
<div class="content-grid">
  <!-- 紧急待办列表 -->
  <section class="urgent-tasks-section">
    <div class="section-header">
      <h3>紧急待办</h3>
      <div style="display: flex; gap: 12px; align-items: center;">
        <button 
          class="btn-primary"
          (click)="showTaskForm()"
          style="font-size: 14px; padding: 6px 16px;"
        >
          添加紧急事项
        </button>
        <a href="/customer-service/project-list" class="view-all-link">查看全部</a>
      </div>
    </div>
    
    <div class="tasks-list">
      @if (urgentTasks().length === 0) {
      <div class="empty-state">
        <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor">
          <circle cx="12" cy="12" r="10"></circle>
          <polyline points="12 6 12 12 16 14"></polyline>
        </svg>
        <p>暂无紧急待办事项</p>
      </div>
      }
      
      @for (task of urgentTasks(); track task.id) {
      <div class="task-item" [class.completed]="task.isCompleted" [class.overdue]="task.isOverdue">
        <div class="task-checkbox">
          <input type="checkbox" [checked]="task.isCompleted" (change)="markTaskAsCompleted(task.id)">
        </div>
        <div class="task-content">
          <h4 class="task-title">{{ task.title || '未命名任务' }}</h4>
          <p class="task-project">{{ task.projectName || '未知项目' }}</p>
          <div class="task-meta">
            <span class="task-time">{{ formatDate(task.deadline) }}</span>
            <span class="task-status">{{ getTaskStatus(task) }}</span>
          </div>
          
          <!-- 任务处理状态（使用本地变量 s 消除可选链告警） -->
          <ng-container *ngIf="taskProcessingState()[task.id] as s">
            <ng-container *ngIf="s.inProgress === true">
              <div class="task-progress-container">
                <div class="task-progress-bar" [style.width]="s.progress + '%'">
                  <span class="task-progress-text">{{ s.progress }}%</span>
                </div>
              </div>
            </ng-container>
          </ng-container>
        </div>
            <div class="task-actions">
          <ng-container *ngIf="taskProcessingState()[task.id] as s; else noTaskActionState">
            <button 
              class="btn-primary"
              [class.processing]="s.inProgress === true"
              (click)="handleAssignment(task.id)"
              [disabled]="(s.inProgress === true) || task.isCompleted"
            >
              {{ s.inProgress === true ? '处理中' : '处理' }}
            </button>
          </ng-container>
          <ng-template #noTaskActionState>
            <button class="btn-primary" (click)="handleAssignment(task.id)" [disabled]="task.isCompleted">处理</button>
          </ng-template>
          </div>
      </div>
      }
    </div>
  </section>

  <!-- iOS风格的添加紧急事项面板 -->
  @if (isTaskFormVisible()) {
  <div class="ios-modal-overlay" (click)="hideTaskForm()">
    <div class="ios-panel" (click)="$event.stopPropagation()">
      <div class="ios-panel-header">
        <h3>添加紧急事项</h3>
        <button class="ios-close-button" (click)="hideTaskForm()">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor">
            <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="ios-panel-content">
        <form (ngSubmit)="handleAddTaskSubmit()">
          <div class="form-group">
            <label for="taskTitle">任务标题 *</label>
            <input 
              type="text" 
              id="taskTitle" 
              [(ngModel)]="newTask.title" 
              [ngModelOptions]="{standalone: true}"
              placeholder="请输入任务标题"
              required
              class="ios-input"
            >
          </div>
          
          <div class="form-group">
            <label for="projectName">项目名称 *</label>
            <input 
              type="text" 
              id="projectName" 
              [(ngModel)]="newTask.projectName" 
              [ngModelOptions]="{standalone: true}"
              placeholder="请输入项目名称"
              required
              class="ios-input"
            >
          </div>
          
          <div class="form-group">
            <label for="projectStage">项目阶段 *</label>
            <select 
              id="projectStage" 
              [(ngModel)]="newTask.stage" 
              [ngModelOptions]="{standalone: true}"
              required
              class="ios-select"
            >
              <option value="前期沟通">前期沟通</option>
              <option value="建模">建模</option>
              <option value="软装">软装</option>
              <option value="渲染">渲染</option>
              <option value="后期">后期</option>
              <option value="完成">完成</option>
            </select>
          </div>
          
          <div class="form-group">
            <label for="taskDeadline">截止时间 *</label>
            
            <!-- 显示当前选择的截止时间 -->
            <div class="deadline-display ios-input" (click)="deadlineDropdownVisible = !deadlineDropdownVisible">
              {{ getDisplayDeadline() || '请选择截止时间' }}
              <span class="dropdown-arrow" [class.rotate]="deadlineDropdownVisible">▼</span>
            </div>
            
            <!-- 预设时长下拉选择框 -->
            <div class="deadline-dropdown" [class.visible]="deadlineDropdownVisible">
              @for (preset of timePresets; track preset.hours) {
              <div class="dropdown-option" 
                   [class.selected]="selectedPreset === preset.hours.toString()"
                   (click)="handlePresetSelection(preset.hours.toString())">
                {{ preset.label }}
              </div>
              }
              
              <!-- 当天24:00前选项 -->
              <div class="dropdown-option" 
                   [class.selected]="selectedPreset === 'today'"
                   (click)="handlePresetSelection('today')">
                今日24:00前
              </div>
              
              <!-- 自定义时间选项 -->
              <div class="dropdown-divider"></div>
              <div class="dropdown-option custom-option" (click)="handlePresetSelection('custom')">
                自定义时间
              </div>
            </div>
            
            <!-- 错误提示信息 -->
            @if (deadlineError) {
            <div class="error-message">{{ deadlineError }}</div>
            }
          </div>
          
          <!-- 自定义时间选择弹窗 -->
          @if (isCustomTimeVisible) {
          <div class="custom-time-modal">
            <div class="modal-backdrop"></div>
            <div class="modal-content">
              <div class="modal-header">
                <h3>选择自定义时间</h3>
                <button class="close-button" (click)="closeCustomTimePicker()">×</button>
              </div>
              
              <div class="modal-body">
                <!-- 日期选择 -->
                <div class="date-picker">
                  <label>日期</label>
                  <input
                    type="date"
                    [(ngModel)]="customDate"
                    min="{{ todayDate }}"
                    max="{{ sevenDaysLaterDate }}"
                    class="ios-input"
                  />
                </div>
                
                <!-- 时间选择 -->
                <div class="time-picker">
                  <label>时间</label>
                  <input
                    type="time"
                    [(ngModel)]="customTime"
                    class="ios-input"
                  />
                </div>
                
                <!-- 错误提示信息 -->
                @if (deadlineError) {
                <div class="error-message">{{ deadlineError }}</div>
                }
              </div>
              
              <div class="modal-footer">
                <button class="cancel-button" (click)="closeCustomTimePicker()">取消</button>
                <button class="confirm-button" (click)="handleCustomTimeSelection()">确定</button>
              </div>
            </div>
          </div>
          }
          
          <div class="form-group">
            <label for="taskPriority">优先级</label>
            <select 
              id="taskPriority" 
              [(ngModel)]="newTask.priority" 
              [ngModelOptions]="{standalone: true}"
              class="ios-select"
            >
              <option value="high">高</option>
              <option value="medium">中</option>
              <option value="low">低</option>
            </select>
          </div>
          
          <div class="form-group">
            <label for="taskDescription">任务描述</label>
            <textarea 
              id="taskDescription" 
              [(ngModel)]="newTask.description" 
              [ngModelOptions]="{standalone: true}"
              placeholder="请输入任务描述"
              rows="3"
              class="ios-textarea"
            ></textarea>
          </div>
        </form>
      </div>
      
      <div class="ios-panel-footer">
        <button type="button" class="ios-cancel-button" (click)="hideTaskForm()">取消</button>
        <button type="button" class="ios-submit-button" (click)="handleAddTaskSubmit()" [disabled]="isSubmitDisabled">确定</button>
      </div>
    </div>
  </div>
  }

  <!-- 项目动态流 -->
  <section class="project-updates-section">
    <div class="section-header">
      <h3>项目动态</h3>
      <div class="search-box">
        <input 
          type="text" 
          [value]="searchTerm()"
          (input)="searchTerm.set($event.target.value)"
          placeholder="搜索动态..." 
          class="search-input"
        />
      </div>
    </div>
    
    <div class="updates-list">
      @if (filteredUpdates().length === 0) {
      <div class="empty-state">
        <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor">
          <circle cx="12" cy="12" r="10"></circle>
          <line x1="2" y1="12" x2="22" y2="12"></line>
          <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path>
        </svg>
        <p>暂无项目动态</p>
      </div>
      }
      
      @for (update of filteredUpdates(); track update) {
      <div class="update-item">
        <div class="update-icon">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor">
            <path d="M22 12h-4l-3 9L9 3l-3 9H2"></path>
          </svg>
        </div>
        <div class="update-content">
          @if ('name' in update && update.name && 'status' in update && update.status) {
          <div class="update-title">
            项目 <strong>{{ update.name }}</strong> 状态更新为 {{ update.status }}
          </div>
          }
          @if ('content' in update) {
          <div class="update-title">
            <strong>{{ getCustomerName(update) }}</strong> 提交了反馈
          </div>
          }
          @if ('content' in update && update.content) {
          <p class="update-text">{{ update.content }}</p>
          }
          <div class="update-meta">
            <span class="update-time">{{ getFormattedDate(update) }}</span>
            <span class="update-status {{ getUpdateStatusClass(update) }}">
              {{ getUpdateStatus(update) }}
            </span>
          </div>
        </div>
      </div>
      }
    </div>
  </section>

<!-- 回到顶部按钮 -->
<button class="back-to-top" (click)="scrollToTop()" [class.visible]="showBackToTop()">
  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor">
    <polyline points="18 15 12 9 6 15"></polyline>
  </svg>
</button>
