<div class="ios-container">
  <!-- iOS风格头部导航 -->
  <div class="ios-header">
    <button class="ios-back-btn" (click)="goBack()">
      <svg viewBox="0 0 24 24" fill="currentColor">
        <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
      </svg>
    </button>
    <h1>客户咨询</h1>
  </div>

  <!-- iOS风格内容区域 -->
  <div class="ios-content">
    <!-- iOS风格搜索栏 -->
    <div class="search-bar">
      <svg viewBox="0 0 24 24" fill="currentColor">
        <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
      </svg>
      <input 
        type="text" 
        placeholder="搜索客户姓名或咨询内容..."
        [(ngModel)]="searchTerm"
        (input)="onSearch()"
      />
    </div>

    <!-- 咨询列表 -->
    @if (filteredConsultations.length > 0) {
      <div class="consultation-list">
        @for (consultation of filteredConsultations; track consultation.id) {
          <div 
            class="consultation-card"
            [class.urgent]="consultation.priority === 'urgent'"
            (click)="viewConsultation(consultation)"
          >
            <!-- 卡片头部 -->
            <div class="card-header">
              <div class="customer-info">
                <div class="avatar">
                  {{ consultation.customerName.charAt(0) }}
                </div>
                <div>
                  <h3>{{ consultation.customerName }}</h3>
                  <p class="time">{{ consultation.createdAt | date:'MM-dd HH:mm' }}</p>
                </div>
              </div>
              <div 
                class="status-badge"
                [class.urgent]="consultation.priority === 'urgent'"
              >
                @if (consultation.priority === 'urgent') {
                  紧急
                } @else {
                  普通
                }
              </div>
            </div>

            <!-- 咨询内容 -->
            <p class="content">{{ consultation.content }}</p>

            <!-- 卡片底部操作按钮 -->
            <div class="card-footer">
              <button 
                class="ios-btn primary"
                (click)="handleConsultation(consultation, $event)"
              >
                处理咨询
              </button>
              <button 
                class="ios-btn secondary"
                (click)="viewDetails(consultation, $event)"
              >
                查看详情
              </button>
            </div>
          </div>
        }
      </div>
    } @else {
      <!-- 空状态 -->
      <div class="empty-state">
        @if (searchTerm) {
          <svg width="64" height="64" viewBox="0 0 24 24" fill="currentColor">
            <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
          </svg>
          <h3>未找到匹配记录</h3>
          <p>请尝试其他搜索关键词</p>
        } @else {
          <svg width="64" height="64" viewBox="0 0 24 24" fill="currentColor">
            <path d="M20 6h-2.18c.11-.31.18-.65.18-1a2.996 2.996 0 0 0-5.5-1.65l-.5.67-.5-.68C10.96 2.54 10.05 2 9 2 7.34 2 6 3.34 6 5c0 .35.07.69.18 1H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-5-2c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zM9 4c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1z"/>
          </svg>
          <h3>暂无咨询记录</h3>
          <p>当前没有客户咨询记录</p>
        }
      </div>
    }
  </div>
</div>