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

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

.complaint-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(140px, 1fr));
      gap: ios.$ios-spacing-md;

      .stat-item {
        text-align: center;
        padding: ios.$ios-spacing-md;
        background: ios.$ios-background-secondary;
        border-radius: ios.$ios-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;

          .time-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;
        }

        &.total .stat-value { color: ios.$ios-primary; }
        &.pending .stat-value { color: ios.$ios-warning; }
        &.processing .stat-value { color: #1890ff; }
        &.resolved .stat-value { color: ios.$ios-success; }
        &.high-priority .stat-value { color: ios.$ios-danger; }
        &.resolution-time .stat-value { color: #722ed1; }
      }
    }
  }

  // 优先级统计 - 小卡片样式
  .priority-stats {
    margin-bottom: ios.$ios-spacing-lg;
    padding: ios.$ios-spacing-md;
    background: ios.$ios-background-secondary;
    border-radius: ios.$ios-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;
    }

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

      .priority-card {
        background: ios.$ios-background;
        border-radius: ios.$ios-radius-md;
        border: 2px solid;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        transition: all 0.3s ease;

        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
        }

        .priority-card-header {
          padding: ios.$ios-spacing-sm ios.$ios-spacing-md;
          color: white;
          text-align: center;

          .priority-card-label {
            font-size: ios.$ios-font-size-sm;
            font-weight: ios.$ios-font-weight-semibold;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
          }
        }

        .priority-card-body {
          padding: ios.$ios-spacing-md;
          text-align: center;
          background: ios.$ios-background;

          .priority-card-count {
            font-size: 28px;
            font-weight: ios.$ios-font-weight-bold;
            color: ios.$ios-text-primary;
            line-height: 1;
            margin-bottom: 4px;
          }

          .priority-card-suffix {
            font-size: ios.$ios-font-size-xs;
            color: ios.$ios-text-secondary;
            font-weight: ios.$ios-font-weight-medium;
          }
        }
      }
    }
  }

  // 类型统计
  .type-stats {
    margin-bottom: ios.$ios-spacing-lg;
    padding: ios.$ios-spacing-md;
    background: ios.$ios-background-secondary;
    border-radius: ios.$ios-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;
    }

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

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

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

        .type-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: ios.$ios-radius-md;
    border: 1px solid ios.$ios-border;

    .search-row {
      margin-bottom: ios.$ios-spacing-md;

      .search-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;
        }

        .search-input {
          flex: 1;
          padding: ios.$ios-spacing-sm;
          border: 1px solid ios.$ios-border;
          border-radius: ios.$ios-radius-sm;
          background: ios.$ios-background;
          color: ios.$ios-text-primary;
          font-size: ios.$ios-font-size-sm;

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

          &::placeholder {
            color: ios.$ios-text-secondary;
          }
        }
      }
    }

    .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: ios.$ios-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;
            }

            &.processing.active {
              background: #1890ff;
              border-color: #1890ff;
            }

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

        .filter-select {
          padding: ios.$ios-spacing-xs ios.$ios-spacing-sm;
          border: 1px solid ios.$ios-border;
          border-radius: ios.$ios-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;
          }
        }
      }
    }
  }

  // 投诉列表样式
  .complaints-list {
    margin-top: 20px;

    .complaints-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
      gap: 16px;
      padding: 0;
    }

    .complaint-card-item {
      background: #ffffff;
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      border: 1px solid #e8e8e8;
      overflow: hidden;
      transition: all 0.3s ease;
      display: flex;
      flex-direction: column;

      &:hover {
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
        transform: translateY(-2px);
      }

      &.overdue {
        border-left: 4px solid #ff4757;
        
        .card-header {
          background: linear-gradient(135deg, #fff5f5 0%, #ffffff 100%);
        }
      }

      // 卡片头部
        .card-header {
          padding: 12px 16px;
          background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
          border-bottom: 1px solid #e9ecef;
          display: flex;
          justify-content: space-between;
          align-items: center;

        .header-left {
          display: flex;
          align-items: center;
          gap: 12px;
          flex: 1;

          .type-tag {
            background: #007bff;
            color: white;
            padding: 4px 12px;
            border-radius: 16px;
            font-size: 12px;
            font-weight: 500;
            white-space: nowrap;

            &.quality {
              background: #dc3545;
            }

            &.service {
              background: #28a745;
            }

            &.delivery {
              background: #ffc107;
              color: #212529;
            }

            &.other {
              background: #6c757d;
            }
          }

          .priority-badge {
            color: white;
            padding: 4px 10px;
            border-radius: 12px;
            font-size: 11px;
            font-weight: 500;
            white-space: nowrap;
          }
        }

        .header-right {
          display: flex;
          align-items: center;
          gap: 8px;

          .status-badge {
            padding: 4px 12px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 500;
            white-space: nowrap;

            &.pending {
              background: #fff3cd;
              color: #856404;
              border: 1px solid #ffeaa7;
            }

            &.processing {
              background: #d1ecf1;
              color: #0c5460;
              border: 1px solid #bee5eb;
            }

            &.resolved {
              background: #d4edda;
              color: #155724;
              border: 1px solid #c3e6cb;
            }
          }

          .overdue-badge {
            background: #ff4757;
            color: white;
            padding: 2px 8px;
            border-radius: 10px;
            font-size: 10px;
            font-weight: 600;
            animation: pulse 2s infinite;
          }
        }
      }

      // 卡片主体
      .card-body {
        padding: 16px;
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 12px;

        .customer-info {
          display: flex;
          align-items: center;
          padding: 8px 12px;
          background: #f8f9fa;
          border-radius: 8px;
          border-left: 3px solid #007bff;

          .customer-label {
            font-weight: 500;
            color: #495057;
            margin-right: 8px;
          }

          .customer-name {
            color: #007bff;
            font-weight: 600;
          }
        }

        .complaint-description {
          h4 {
            margin: 0 0 8px 0;
            font-size: 14px;
            font-weight: 600;
            color: #343a40;
          }

          p {
            margin: 0;
            color: #6c757d;
            line-height: 1.5;
            font-size: 14px;
          }
        }

        .complaint-images {
          h5 {
            margin: 0 0 8px 0;
            font-size: 13px;
            font-weight: 600;
            color: #495057;
          }

          .images-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
            gap: 6px;
            max-width: 100%;
          }

          .complaint-image {
            width: 100%;
            height: 60px;
            object-fit: cover;
            border-radius: 4px;
            border: 1px solid #dee2e6;
            cursor: pointer;
            transition: transform 0.2s ease;

            &:hover {
              transform: scale(1.05);
            }
          }
        }

        .time-section {
          background: #f8f9fa;
          padding: 12px;
          border-radius: 8px;
          border: 1px solid #e9ecef;

          .time-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 6px;

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

            .time-label {
              font-size: 13px;
              color: #6c757d;
              font-weight: 500;
            }

            .time-value {
              font-size: 13px;
              color: #495057;
              font-weight: 600;
            }
          }
        }

        .handler-section {
          background: #e3f2fd;
          padding: 12px;
          border-radius: 8px;
          border-left: 3px solid #2196f3;

          h5 {
            margin: 0 0 8px 0;
            font-size: 13px;
            font-weight: 600;
            color: #1976d2;
          }

          .handler-comment {
            margin: 0 0 8px 0;
            color: #424242;
            font-size: 13px;
            line-height: 1.4;
          }

          .handler-info {
            display: flex;
            align-items: center;

            .handler-label {
              font-size: 12px;
              color: #757575;
              margin-right: 6px;
            }

            .handler-name {
              font-size: 12px;
              color: #1976d2;
              font-weight: 600;
            }
          }
        }

        .solution-section {
          background: #e8f5e8;
          padding: 12px;
          border-radius: 8px;
          border-left: 3px solid #4caf50;

          h5 {
            margin: 0 0 8px 0;
            font-size: 13px;
            font-weight: 600;
            color: #388e3c;
          }

          .solution-text {
            margin: 0;
            color: #424242;
            font-size: 13px;
            line-height: 1.4;
          }
        }
      }

      // 卡片底部
      .card-footer {
        padding: 12px 16px;
        background: #f8f9fa;
        border-top: 1px solid #e9ecef;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 8px;

        .action-btn {
          display: flex;
          align-items: center;
          gap: 6px;
          padding: 8px 16px;
          border: none;
          border-radius: 6px;
          font-size: 13px;
          font-weight: 500;
          cursor: pointer;
          transition: all 0.2s ease;
          white-space: nowrap;

          .btn-icon {
            font-size: 14px;
          }

          &.process-btn {
            background: #007bff;
            color: white;

            &:hover {
              background: #0056b3;
              transform: translateY(-1px);
            }
          }

          &.complete-btn {
            background: #28a745;
            color: white;

            &:hover {
              background: #1e7e34;
              transform: translateY(-1px);
            }
          }

          &.detail-btn {
            background: #6c757d;
            color: white;

            &:hover {
              background: #545b62;
              transform: translateY(-1px);
            }
          }
        }

        .completed-status {
          display: flex;
          align-items: center;
          gap: 6px;
          color: #28a745;
          font-weight: 600;
          font-size: 13px;

          .completed-icon {
            background: #28a745;
            color: white;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
          }
        }
      }
    }

    // 空状态样式
    .empty-state {
      text-align: center;
      padding: 60px 20px;
      color: #6c757d;

      .empty-icon {
        font-size: 48px;
        margin-bottom: 16px;
        opacity: 0.5;
      }

      .empty-title {
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 8px;
        color: #495057;
      }

      .empty-description {
        font-size: 14px;
        color: #6c757d;
      }
    }
  }

  // 响应式设计 - 中等屏幕
  @media (max-width: 1024px) {
    .complaints-list {
      .complaints-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 14px;
      }
    }
  }

  // 响应式设计 - 小屏幕
  @media (max-width: 768px) {
    .complaints-list {
      .complaints-grid {
        grid-template-columns: 1fr;
        gap: 12px;
      }

      .complaint-card-item {
        .card-header {
          padding: 10px 12px;
          flex-direction: column;
          align-items: flex-start;
          gap: 6px;

          .header-left {
            width: 100%;
          }

          .header-right {
            width: 100%;
            justify-content: flex-end;
          }
        }

        .card-body {
          padding: 12px;
          gap: 10px;
        }

        .card-footer {
          padding: 10px 12px;
          flex-direction: column;
          gap: 6px;

          .action-btn {
            width: 100%;
            justify-content: center;
          }
        }
      }
    }
  }

  // 响应式设计 - 超小屏幕
  @media (max-width: 480px) {
    .complaints-list {
      .complaints-grid {
        gap: 10px;
      }

      .complaint-card-item {
        .card-header {
          padding: 8px 10px;
        }

        .card-body {
          padding: 10px;
          gap: 8px;

          .complaint-images .images-grid {
            grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
            gap: 4px;
          }

          .complaint-image {
            height: 50px;
          }
        }

        .card-footer {
          padding: 8px 10px;
        }
      }
    }
  }

  // 动画效果
  @keyframes pulse {
    0% {
      opacity: 1;
    }
    50% {
      opacity: 0.5;
    }
    100% {
      opacity: 1;
    }
  }

  // 响应式设计
  @media (max-width: 768px) {
    .stats-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: ios.$ios-spacing-sm;
    }

    .priority-stats .priority-grid,
    .type-stats .type-grid {
      grid-template-columns: 1fr;
    }

    .filter-section {
      .search-row .search-group {
        flex-direction: column;
        align-items: stretch;
      }

      .filter-row {
        flex-direction: column;
        align-items: stretch;

        .filter-group {
          flex-direction: column;
          align-items: stretch;

          .filter-buttons {
            justify-content: center;
          }
        }
      }
    }

    .complaints-list .complaint-item .complaint-header {
      flex-direction: column;
      gap: ios.$ios-spacing-sm;
    }
  }
}