@use '../../styles/_ios-theme.scss' as ios;
@use '../../../../styles/variables' as vars;

:host { display: block; height: 100%; }

.customer-review-card {
  padding: ios.$ios-spacing-md;
  background: ios.$ios-background;
  border-radius: 12px;
  border: 1px solid ios.$ios-border;

  // 统计数据概览
  .stats-overview {
    margin-bottom: ios.$ios-spacing-lg;
    
    h4 {
      margin: 0 0 ios.$ios-spacing-md 0;
      font-size: ios.$ios-font-size-lg;
      font-weight: ios.$ios-font-weight-semibold;
      color: ios.$ios-text-primary;
    }

    .stats-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
      gap: ios.$ios-spacing-md;

      .stat-item {
        text-align: center;
        padding: ios.$ios-spacing-md;
        background: ios.$ios-background-secondary;
        border-radius: vars.$ios-border-radius-md;
        border: 1px solid ios.$ios-border;

        .stat-value {
          font-size: ios.$ios-font-size-xl;
          font-weight: ios.$ios-font-weight-bold;
          color: ios.$ios-text-primary;
          margin-bottom: ios.$ios-spacing-xs;

          .score-suffix {
            font-size: ios.$ios-font-size-sm;
            color: ios.$ios-text-secondary;
          }
        }

        .stat-label {
          font-size: ios.$ios-font-size-xs;
          color: ios.$ios-text-secondary;
          margin-bottom: ios.$ios-spacing-xs;
        }

        .star-display {
          .star {
            color: #FFD700;
            font-size: ios.$ios-font-size-sm;
          }
        }

        &.total .stat-value { color: ios.$ios-primary; }
        &.score .stat-value { color: #FF6B35; }
        &.satisfied .stat-value { color: ios.$ios-success; }
        &.pending .stat-value { color: ios.$ios-warning; }
      }
    }
  }

  // 分类统计
  .category-stats {
    margin-bottom: ios.$ios-spacing-lg;
    padding: ios.$ios-spacing-md;
    background: ios.$ios-background-secondary;
    border-radius: vars.$ios-border-radius-md;
    border: 1px solid ios.$ios-border;

    h5 {
      margin: 0 0 ios.$ios-spacing-md 0;
      font-size: ios.$ios-font-size-md;
      font-weight: ios.$ios-font-weight-semibold;
      color: ios.$ios-text-primary;
    }

    .category-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
      gap: ios.$ios-spacing-sm;

      .category-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: ios.$ios-spacing-sm;
        background: ios.$ios-background;
        border-radius: vars.$ios-border-radius-sm;
        border: 1px solid ios.$ios-border;

        .category-label {
          font-size: ios.$ios-font-size-xs;
          color: ios.$ios-text-secondary;
        }

        .category-count {
          font-size: ios.$ios-font-size-sm;
          font-weight: ios.$ios-font-weight-semibold;
          color: ios.$ios-primary;
        }
      }
    }
  }

  // 筛选区域
  .filter-section {
    margin-bottom: ios.$ios-spacing-lg;
    padding: ios.$ios-spacing-md;
    background: ios.$ios-background-secondary;
    border-radius: vars.$ios-border-radius-md;
    border: 1px solid ios.$ios-border;

    .filter-row {
      display: flex;
      flex-wrap: wrap;
      gap: ios.$ios-spacing-md;
      margin-bottom: ios.$ios-spacing-md;

      &:last-child {
        margin-bottom: 0;
      }

      .filter-group {
        display: flex;
        align-items: center;
        gap: ios.$ios-spacing-sm;

        label {
          font-size: ios.$ios-font-size-sm;
          color: ios.$ios-text-secondary;
          white-space: nowrap;
        }

        .filter-buttons {
          display: flex;
          gap: ios.$ios-spacing-xs;

          .filter-btn {
            padding: ios.$ios-spacing-xs ios.$ios-spacing-sm;
            border: 1px solid ios.$ios-border;
            background: ios.$ios-background;
            color: ios.$ios-text-secondary;
            border-radius: vars.$ios-border-radius-sm;
            font-size: ios.$ios-font-size-xs;
            cursor: pointer;
            transition: all 0.2s ease;

            &:hover {
              background: ios.$ios-background-secondary;
            }

            &.active {
              background: ios.$ios-primary;
              color: white;
              border-color: ios.$ios-primary;
            }

            &.pending.active {
              background: ios.$ios-warning;
              border-color: ios.$ios-warning;
            }

            &.satisfied.active {
              background: ios.$ios-success;
              border-color: ios.$ios-success;
            }

            &.unsatisfied.active {
              background: ios.$ios-danger;
              border-color: ios.$ios-danger;
            }
          }
        }

        .filter-select {
          padding: ios.$ios-spacing-xs ios.$ios-spacing-sm;
          border: 1px solid ios.$ios-border;
          border-radius: vars.$ios-border-radius-sm;
          background: ios.$ios-background;
          color: ios.$ios-text-primary;
          font-size: ios.$ios-font-size-xs;
          min-width: 120px;

          &:focus {
            outline: none;
            border-color: ios.$ios-primary;
          }
        }
      }
    }
  }

  // 评价列表
  .review-list {
    .review-item {
      padding: ios.$ios-spacing-md;
      margin-bottom: ios.$ios-spacing-md;
      background: ios.$ios-background;
      border: 1px solid ios.$ios-border;
      border-radius: vars.$ios-border-radius-md;

      .review-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: ios.$ios-spacing-md;

        .reviewer-info {
          display: flex;
          align-items: center;
          gap: ios.$ios-spacing-sm;

          .reviewer-name {
            font-size: ios.$ios-font-size-md;
            font-weight: ios.$ios-font-weight-semibold;
            color: ios.$ios-text-primary;
          }

          .review-date {
            font-size: ios.$ios-font-size-xs;
            color: ios.$ios-text-secondary;
          }
        }
      }
    }
  }

  // 空状态
  .empty-state {
    padding: ios.$ios-spacing-xl;
    text-align: center;
    color: ios.$ios-text-secondary;

    .empty-icon {
      font-size: 3rem;
      margin-bottom: ios.$ios-spacing-md;
      opacity: 0.5;
    }

    .empty-title {
      font-size: ios.$ios-font-size-lg;
      font-weight: ios.$ios-font-weight-semibold;
      color: ios.$ios-text-primary;
      margin-bottom: ios.$ios-spacing-sm;
    }

    .empty-desc {
      font-size: ios.$ios-font-size-sm;
      color: ios.$ios-text-secondary;
    }
  }

  // 操作按钮样式
  .action-buttons {
    display: flex;
    gap: ios.$ios-spacing-sm;
    margin-top: ios.$ios-spacing-md;
    flex-wrap: wrap;

    .action-btn {
      padding: ios.$ios-spacing-xs ios.$ios-spacing-sm;
      border: none;
      border-radius: vars.$ios-border-radius-sm;
      font-size: ios.$ios-font-size-sm;
      font-weight: ios.$ios-font-weight-medium;
      cursor: pointer;
      transition: all 0.2s ease;
      min-width: 80px;

      &.process-btn {
        background: ios.$ios-primary;
        color: white;

        &:hover {
          background: darken(ios.$ios-primary, 10%);
        }
      }

      &.reply-btn {
        background: ios.$ios-success;
        color: white;

        &:hover {
          background: darken(ios.$ios-success, 10%);
        }
      }

      &.complete-btn {
        background: ios.$ios-warning;
        color: white;

        &:hover {
          background: darken(ios.$ios-warning, 10%);
        }
      }

      &.view-btn {
        background: ios.$ios-color-system-gray-1-light;
        color: white;

        &:hover {
          background: darken(ios.$ios-color-system-gray-1-light, 10%);
        }
      }

      &:active {
        transform: translateY(1px);
      }
    }
  }

  // 响应式设计
  @media (max-width: 768px) {
    .action-buttons {
      .action-btn {
        flex: 1;
        min-width: auto;
      }
    }
  }
}