@if (consultations && consultations.length > 0) {
  <div class="ios-container">
    <header class="ios-header">
      <button class="ios-back-btn" (click)="goBack()">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor">
          <path d="M19 12H5M12 19l-7-7 7-7"/>
        </svg>
      </button>
      <h1>客户咨询记录</h1>
    </header>

    <div class="ios-content">
      <div class="search-bar">
        <input type="text" placeholder="搜索咨询记录..." [(ngModel)]="searchKeyword" (input)="filterConsultations()">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor">
          <circle cx="11" cy="11" r="8"/>
          <line x1="21" y1="21" x2="16.65" y2="16.65"/>
        </svg>
      </div>

      <div class="consultation-list">
        @for (item of filteredConsultations; track item.id) {
          <div class="consultation-card" [class.urgent]="item.priority === 'high'">
            <div class="card-header">
              <div class="customer-info">
                <div class="avatar" [style.background-color]="getAvatarColor(item.customer)">
                  {{item.customer.charAt(0)}}
                </div>
                <div>
                  <h3>{{item.customer}}</h3>
                  <p class="time">{{item.time}}</p>
                </div>
              </div>
              <span class="status-badge" [class.urgent]="item.priority === 'high'">
                {{item.priority === 'high' ? '紧急' : '普通'}}
              </span>
            </div>
            <p class="content">{{item.content}}</p>
            <div class="card-footer">
              <button class="ios-btn primary" (click)="viewDetails(item)">查看详情</button>
              <button class="ios-btn secondary" (click)="assignHandler(item)">分配处理</button>
            </div>
          </div>
        }
      </div>

      @if (filteredConsultations.length === 0 && searchKeyword) {
        <div class="empty-state">
          <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1">
            <circle cx="11" cy="11" r="8"></circle>
            <path d="m21 21-4.35-4.35"></path>
          </svg>
          <h3>未找到匹配记录</h3>
          <p>尝试其他关键词搜索</p>
        </div>
      }
    </div>
  </div>
}
@else {
  <div class="ios-container">
    <header class="ios-header">
      <button class="ios-back-btn" (click)="goBack()">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor">
          <path d="M19 12H5M12 19l-7-7 7-7"/>
        </svg>
      </button>
      <h1>客户咨询记录</h1>
    </header>

    <div class="ios-content">
      <div class="empty-state">
        <svg width="80" height="80" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1">
          <circle cx="11" cy="11" r="8"></circle>
          <path d="m21 21-4.35-4.35"></path>
        </svg>
        <h3>暂无咨询记录</h3>
        <p>还没有客户咨询记录</p>
      </div>
    </div>
  </div>
}