<div class="complaint-card">
  <!-- 统计数据概览 -->
  <div class="stats-overview">
    <h4>投诉处理概览</h4>
    <div class="stats-grid">
      <div class="stat-item total">
        <div class="stat-value">{{ stats().totalCount }}</div>
        <div class="stat-label">总投诉数</div>
      </div>
      <div class="stat-item pending">
        <div class="stat-value">{{ stats().pendingCount }}</div>
        <div class="stat-label">待处理</div>
      </div>
      <div class="stat-item processing">
        <div class="stat-value">{{ stats().processingCount }}</div>
        <div class="stat-label">处理中</div>
      </div>
      <div class="stat-item resolved">
        <div class="stat-value">{{ stats().resolvedCount }}</div>
        <div class="stat-label">已解决</div>
      </div>
      <div class="stat-item high-priority">
        <div class="stat-value">{{ stats().highPriorityCount }}</div>
        <div class="stat-label">高优先级</div>
      </div>
      <div class="stat-item resolution-time">
        <div class="stat-value">{{ stats().averageResolutionTime }}<span class="time-suffix">天</span></div>
        <div class="stat-label">平均解决时间</div>
      </div>
    </div>
  </div>

  <!-- 优先级统计 -->
  <div class="priority-stats">
    <h5>优先级分布</h5>
    <div class="priority-grid">
      @for (priority of priorities; track priority.value) {
        <div class="priority-item" [style.border-left-color]="priority.color">
          <span class="priority-label">{{ priority.label }}</span>
          <span class="priority-count">{{ stats().priorityStats[priority.value] || 0 }}</span>
        </div>
      }
    </div>
  </div>

  <!-- 类型统计 -->
  <div class="type-stats">
    <h5>问题类型统计</h5>
    <div class="type-grid">
      @for (type of complaintTypes; track type.value) {
        <div class="type-item">
          <span class="type-label">{{ type.label }}</span>
          <span class="type-count">{{ stats().typeStats[type.value] || 0 }}</span>
        </div>
      }
    </div>
  </div>

  <!-- 筛选区域 -->
  <div class="filter-section">
    <div class="search-row">
      <div class="search-group">
        <label>搜索：</label>
        <input 
          type="text" 
          class="search-input"
          placeholder="搜索投诉内容、客户姓名..."
          [value]="searchKeyword()"
          (input)="updateSearchKeyword($event.target.value)">
      </div>
    </div>

    <div class="filter-row">
      <div class="filter-group">
        <label>状态筛选：</label>
        <div class="filter-buttons">
          <button 
            class="filter-btn"
            [class.active]="statusFilter() === 'all'"
            (click)="updateStatusFilter('all')">
            全部
          </button>
          <button 
            class="filter-btn pending"
            [class.active]="statusFilter() === '待处理'"
            (click)="updateStatusFilter('待处理')">
            待处理
          </button>
          <button 
            class="filter-btn processing"
            [class.active]="statusFilter() === '处理中'"
            (click)="updateStatusFilter('处理中')">
            处理中
          </button>
          <button 
            class="filter-btn resolved"
            [class.active]="statusFilter() === '已解决'"
            (click)="updateStatusFilter('已解决')">
            已解决
          </button>
        </div>
      </div>
    </div>
    
    <div class="filter-row">
      <div class="filter-group">
        <label>优先级筛选：</label>
        <select 
          class="filter-select"
          [value]="priorityFilter()"
          (change)="updatePriorityFilter($event)">
          <option value="all">全部优先级</option>
          @for (priority of priorities; track priority.value) {
            <option [value]="priority.value">{{ priority.label }}</option>
          }
        </select>
      </div>
      
      <div class="filter-group">
        <label>类型筛选：</label>
        <select 
          class="filter-select"
          [value]="typeFilter()"
          (change)="updateTypeFilter($event)">
          <option value="all">全部类型</option>
          @for (type of complaintTypes; track type.value) {
            <option [value]="type.value">{{ type.label }}</option>
          }
        </select>
      </div>
    </div>
  </div>

  <!-- 投诉列表 -->
  <div class="complaints-list">
    @if (filteredComplaints() && filteredComplaints().length > 0) {
      <div class="list-body">
        @for (complaint of filteredComplaints(); track complaint.id) {
          <div class="complaint-item" [class]="getStatusClass(complaint)" [class.overdue]="isOverdue(complaint)">
            <div class="complaint-header">
              <div class="complaint-info">
                <div class="complaint-title">
                  <span class="type-tag">{{ getTypeLabel(getComplaintType(complaint)) }}</span>
                  @if (complaint.customerName) {
                    <span class="customer-name">{{ complaint.customerName }}</span>
                  }
                </div>
                <div class="priority-badge" [class]="getPriorityClass(complaint.priority || 'low')" [style.background-color]="getPriorityInfo(complaint.priority || 'low').color">
                  {{ getPriorityInfo(complaint.priority || 'low').label }}优先级
                </div>
              </div>
              <div class="complaint-meta">
                <span class="status-badge" [class]="getStatusClass(complaint)">
                  {{ complaint.status }}
                </span>
                @if (isOverdue(complaint)) {
                  <span class="overdue-badge">超时</span>
                }
              </div>
            </div>
            
            <div class="complaint-content">
              <p class="description">{{ complaint.description }}</p>
              @if (complaint.images && complaint.images.length > 0) {
                <div class="complaint-images">
                  @for (image of complaint.images; track $index) {
                    <img [src]="image" [alt]="'投诉图片' + ($index + 1)" class="complaint-image">
                  }
                </div>
              }
            </div>
            
            <div class="complaint-footer">
              <div class="time-info">
                <span class="submitted-time">提交时间：{{ complaint.submittedAt | date:'yyyy-MM-dd HH:mm' }}</span>
                <span class="days-progress">已处理 {{ getDaysInProgress(complaint) }} 天</span>
                @if (complaint.resolvedAt) {
                  <span class="resolved-time">解决时间：{{ complaint.resolvedAt | date:'yyyy-MM-dd HH:mm' }}</span>
                }
              </div>
              
              @if (complaint.handlerComment) {
                <div class="handler-response">
                  <strong>处理意见：</strong>
                  <p class="response-text">{{ complaint.handlerComment }}</p>
                  @if (complaint.handlerName) {
                    <span class="handler-name">处理人：{{ complaint.handlerName }}</span>
                  }
                </div>
              }
              
              @if (complaint.solution) {
                <div class="solution-section">
                  <strong>解决方案：</strong>
                  <p class="solution-text">{{ complaint.solution }}</p>
                </div>
              }
            </div>
          </div>
        }
      </div>
    } @else {
      <div class="empty-state">
        <div class="empty-icon">📋</div>
        <div class="empty-title">暂无投诉记录</div>
        <div class="empty-desc">当前筛选条件下没有找到相关的投诉记录</div>
      </div>
    }
  </div>
</div>