<div class="customer-review-card">
  <!-- 统计数据概览 -->
  <div class="stats-overview">
    <div class="stats-header">
      <h4>客户评价概览</h4>
      <div class="view-controls">
        <button class="view-toggle-btn" (click)="toggleViewMode()">
          @if (viewMode() === 'simple') {
            切换到详细视图
          } @else {
            切换到简单视图
          }
        </button>
        <button class="export-btn" (click)="exportReviewReport()">
          导出报告
        </button>
      </div>
    </div>
    
    <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 score">
        <div class="stat-value">{{ stats().averageScore }}<span class="score-suffix">/5</span></div>
        <div class="stat-label">平均评分</div>
        <div class="star-display">
          @for (star of getStarRating(stats().averageScore); track $index) {
            <span class="star">{{ star }}</span>
          }
        </div>
      </div>
      <div class="stat-item satisfied">
        <div class="stat-value">{{ stats().satisfiedCount }}</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>
  </div>

  <!-- 详细评价维度统计 (仅在详细视图模式下显示) -->
  @if (viewMode() === 'detailed' && stats().dimensionAverages) {
    <div class="dimension-stats">
      <h5>评价维度分析</h5>
      <div class="dimension-grid">
        @for (dimension of reviewDimensions; track dimension.key) {
          @if (stats().dimensionAverages[dimension.key]) {
            <div class="dimension-item">
              <div class="dimension-header">
                <span class="dimension-label">{{ dimension.label }}</span>
                <span class="dimension-score" [class]="getDimensionScoreClass(stats().dimensionAverages[dimension.key]!)">
                  {{ (stats().dimensionAverages[dimension.key]! | number:'1.1-1') }}
                </span>
              </div>
              <div class="dimension-stars">
                @for (star of getDimensionStars(stats().dimensionAverages[dimension.key]!); track $index) {
                  <span class="star">{{ star }}</span>
                }
              </div>
              <div class="dimension-desc">{{ dimension.description }}</div>
            </div>
          }
        }
      </div>
    </div>
  }

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

  <!-- 详细评价界面 -->
  @if (viewMode() === 'detailed') {
    <div class="detailed-review-section">
      <div class="detailed-header">
        <h4>详细评价管理</h4>
      </div>

      <!-- 详细评价表单 -->
      @if (showDetailedForm) {
        <div class="detailed-form">
          <!-- 多维度评价表单 -->
          <div class="dimension-form">
            <h4>多维度评价</h4>
            <div class="dimension-grid">
              @for (dimension of reviewDimensions; track dimension.key) {
                <div class="dimension-item">
                  <label>{{ dimension.label }}</label>
                  <div class="star-rating">
                    @for (star of [1,2,3,4,5]; track $index) {
                      <span 
                        class="star" 
                        [class.active]="(currentRatings[dimension.key] || 0) > $index"
                        (click)="setDimensionRating(dimension.key, $index + 1)">
                        ★
                      </span>
                    }
                  </div>
                  <span class="rating-text">{{ currentRatings[dimension.key] || 0 }}/5</span>
                </div>
              }
            </div>
          </div>

          <!-- 场景评价 -->
          <div class="scene-evaluation">
            <h4>场景评价</h4>
            <div class="scene-grid">
              @for (scene of sceneTypes; track scene.value) {
                <div class="scene-item">
                  <div class="scene-header">
                    <span class="scene-name">{{ scene.label }}</span>
                    <div class="star-rating">
                      @for (star of [1,2,3,4,5]; track $index) {
                        <span 
                          class="star" 
                          [class.active]="(currentSceneRatings[scene.value] || 0) > $index"
                          (click)="setSceneRating(scene.value, $index + 1)">
                          ★
                        </span>
                      }
                    </div>
                    <span class="rating-text">{{ currentSceneRatings[scene.value] || 0 }}/5</span>
                  </div>
                  <textarea 
                    class="scene-feedback"
                    [(ngModel)]="currentSceneFeedback[scene.value]"
                    placeholder="请输入对该场景的具体反馈...">
                  </textarea>
                </div>
              }
            </div>
          </div>

          <!-- 优化建议 -->
          <div class="optimization-suggestions">
            <h4>下次合作，您希望我们优化哪些点？</h4>
            <div class="suggestion-grid">
              @for (category of optimizationCategories; track category.key) {
                <label class="suggestion-item">
                  <input 
                    type="checkbox" 
                    [(ngModel)]="selectedOptimizations[category.key]">
                  <span class="checkmark"></span>
                  <div class="suggestion-content">
                    <span class="suggestion-label">{{ category.label }}</span>
                    <span class="suggestion-desc">{{ category.description }}</span>
                  </div>
                </label>
              }
            </div>
            <div class="custom-suggestion">
              <label>其他建议：</label>
              <textarea 
                [(ngModel)]="customOptimizationSuggestion"
                placeholder="请输入您的其他建议和意见...">
              </textarea>
            </div>
          </div>

          <!-- 操作按钮 -->
          <div class="form-actions">
            <button class="btn btn-primary" (click)="saveDetailedReview()">
              保存评价
            </button>
            <button class="btn btn-secondary" (click)="cancelDetailedReview()">
              取消
            </button>
          </div>
        </div>
      } @else {
        <!-- 创建详细评价按钮 -->
        <div class="create-review-section">
          <button class="btn btn-primary" (click)="showDetailedForm = true">
            <i class="icon-plus"></i>
            创建详细评价
          </button>
        </div>
      }

      <!-- 详细评价列表 -->
      @if (detailedReviews && detailedReviews.length > 0) {
        <div class="detailed-reviews-list">
          <div class="list-header">
            <h5>详细评价记录</h5>
            <span class="review-count">{{ detailedReviews.length }} 条记录</span>
          </div>

          <div class="review-items">
            @for (review of detailedReviews; track review.id) {
              <div class="review-item">
                <div class="review-header">
                  <div class="customer-info">
                    <span class="customer-name">{{ review.customerName }}</span>
                    <span class="review-date">{{ review.submittedAt | date:'yyyy-MM-dd' }}</span>
                  </div>
                  <div class="overall-rating">
                    <span class="rating-label">总体评分：</span>
                    <div class="stars">
                      @for (i of getDimensionStars(review.dimensions.overall); track $index) {
                        <span>★</span>
                      }
                    </div>
                    <span class="rating-number">{{ review.dimensions.overall }}/5</span>
                  </div>
                </div>

                <div class="review-dimensions">
                  @for (dim of reviewDimensions; track dim.key) {
                    <div class="dimension-summary">
                      <span class="dim-label">{{ dim.label }}:</span>
                      <div class="dim-rating">
                        <div class="stars mini">
                          @for (i of getDimensionStars(review.dimensions[dim.key] || 0); track $index) {
                            <span>★</span>
                          }
                        </div>
                        <span class="dim-score" [class]="getDimensionScoreClass(review.dimensions[dim.key] || 0)">
                          {{ review.dimensions[dim.key] || 0 }}
                        </span>
                      </div>
                    </div>
                  }
                </div>

                @if (review.sceneReviews && review.sceneReviews.length > 0) {
                  <div class="scene-reviews">
                    <h6>场景评价</h6>
                    @for (scene of review.sceneReviews; track scene.sceneType) {
                      <div class="scene-summary">
                        <div class="scene-info">
                          <span class="scene-name">{{ getSceneTypeLabel(scene.sceneType) }}</span>
                          <div class="scene-rating">
                            <div class="stars mini">
                              @for (i of getDimensionStars(scene.rating); track $index) {
                                <span>★</span>
                              }
                            </div>
                            <span class="scene-score">{{ scene.rating }}/5</span>
                          </div>
                        </div>
                        @if (scene.feedback) {
                          <div class="scene-feedback">
                            {{ scene.feedback }}
                          </div>
                        }
                      </div>
                    }
                  </div>
                }

                @if (review.optimizationSuggestions) {
                  <div class="optimization-suggestions">
                    <h6>优化建议</h6>
                    <div class="suggestions-list">
                      @for (suggestion of review.optimizationSuggestions; track $index) {
                        <span class="suggestion-tag">
                          {{ suggestion }}
                        </span>
                      }
                    </div>
                    @if (review.improvementSuggestions) {
                      <div class="custom-suggestion">
                        <strong>其他建议：</strong>{{ review.improvementSuggestions }}
                      </div>
                    }
                  </div>
                }

              </div>
            }
          </div>
        </div>
      }
    </div>
  }

  <!-- 筛选区域 -->
  <div class="filter-section">
    <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 satisfied"
            [class.active]="statusFilter() === 'satisfied'"
            (click)="updateStatusFilter('satisfied')">
            满意
          </button>
          <button 
            class="filter-btn unsatisfied"
            [class.active]="statusFilter() === 'unsatisfied'"
            (click)="updateStatusFilter('unsatisfied')">
            不满意
          </button>
        </div>
      </div>
    </div>
    
    <div class="filter-row">
      <div class="filter-group">
        <label>分类筛选：</label>
        <select 
          class="filter-select"
          [value]="categoryFilter()"
          (change)="updateCategoryFilter($event)">
          <option value="all">全部分类</option>
          @for (category of categories; track category.value) {
            <option [value]="category.value">{{ category.label }}</option>
          }
        </select>
      </div>
      
      <div class="filter-group">
        <label>评分筛选：</label>
        <select 
          class="filter-select"
          [value]="scoreFilter()"
          (change)="updateScoreFilter($event)">
          <option value="all">全部评分</option>
          <option value="high">高分 (4-5分)</option>
          <option value="medium">中等 (2-4分)</option>
          <option value="low">低分 (1-2分)</option>
        </select>
      </div>
      
      <div class="filter-group">
        <button class="btn btn-secondary" (click)="resetFilters()">
          重置筛选
        </button>
      </div>
    </div>
  </div>

  <!-- 评价列表 -->
  <div class="reviews-list">
    @if (filteredFeedbacks() && filteredFeedbacks().length > 0) {
      <div class="list-body">
        @for (feedback of filteredFeedbacks(); track feedback.id) {
          <div class="review-item" [class]="getStatusClass(feedback)">
            <div class="review-header">
              <div class="customer-info">
                <span class="customer-name">{{ feedback.customerName || '客户' }}</span>
                <span class="category-tag">{{ getCategoryLabel(getFeedbackCategory(feedback)) }}</span>
              </div>
              <div class="review-meta">
                @if (feedback.rating !== undefined) {
                  <div class="score-display" [class]="getScoreClass(feedback.rating)">
                    <div class="score-stars">
                      @for (star of getStarRating(feedback.rating); track $index) {
                        <span class="star">{{ star }}</span>
                      }
                    </div>
                    <span class="score-number">{{ feedback.rating }}/5</span>
                  </div>
                }
                <span class="status-badge" [class]="getStatusClass(feedback)">
                  {{ feedback.status }}
                </span>
              </div>
            </div>
            
            <div class="review-content">
              <p class="feedback-text">{{ feedback.content }}</p>
              @if (feedback.problemLocation) {
                <div class="problem-location">
                  <strong>问题位置：</strong>{{ feedback.problemLocation }}
                </div>
              }
              @if (feedback.referenceCase) {
                <div class="reference-case">
                  <strong>参考案例：</strong>{{ feedback.referenceCase }}
                </div>
              }
            </div>
            
            <div class="review-footer">
              <div class="time-info">
                <span class="created-time">{{ feedback.createdAt | date:'yyyy-MM-dd HH:mm' }}</span>
                @if (feedback.updatedAt && feedback.updatedAt !== feedback.createdAt) {
                  <span class="updated-time">更新于 {{ feedback.updatedAt | date:'yyyy-MM-dd HH:mm' }}</span>
                }
              </div>
              
              <!-- 处理按钮区域 -->
              <div class="action-buttons">
                @if (feedback.status === '待处理') {
                  <button 
                    class="action-btn process-btn"
                    (click)="startProcessing(feedback.id)">
                    <i class="fas fa-play"></i>
                    开始处理
                  </button>
                  <button 
                    class="action-btn reply-btn"
                    (click)="openReplyModal(feedback)">
                    <i class="fas fa-reply"></i>
                    回复客户
                  </button>
                } @else if (feedback.status === '处理中') {
                  <button 
                    class="action-btn complete-btn"
                    (click)="markAsResolved(feedback.id)">
                    <i class="fas fa-check"></i>
                    标记完成
                  </button>
                  <button 
                    class="action-btn reply-btn"
                    (click)="openReplyModal(feedback)">
                    <i class="fas fa-reply"></i>
                    回复客户
                  </button>
                } @else {
                  <button 
                    class="action-btn view-btn"
                    (click)="viewDetails(feedback)">
                    <i class="fas fa-eye"></i>
                    查看详情
                  </button>
                }
              </div>
              
              @if (feedback.response) {
                <div class="response-section">
                  <strong>处理回复：</strong>
                  <p class="response-text">{{ feedback.response }}</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>