<section class="patients-section">
  <div class="section-header">
    <div>
      <h2 class="section-title">Search Patients</h2>
      <p class="section-description">Search all patients in the system. Create appointments or start chats with them.</p>
    </div>
    <button class="refresh-button" (click)="loadPatients()" [disabled]="loading || loadingPatients" title="Refresh Patients">
      <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M1 4V10H7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        <path d="M23 20V14H17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        <path d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10M23 14L18.36 18.36A9 9 0 0 1 3.51 15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
      Refresh
    </button>
  </div>
  
  <!-- Search Bar -->
  <div class="search-container" style="display: block !important; visibility: visible !important; opacity: 1 !important;">
    <div class="search-box" style="display: flex !important; visibility: visible !important;">
      <svg class="search-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
      <input 
        type="text" 
        class="search-input" 
        placeholder="Search patients by name, email, or phone..."
        [ngModel]="searchTerm"
        (ngModelChange)="searchTerm = $event; onSearchChange()"
        (input)="onSearchChange()"
        (keyup)="onSearchChange()"
      />
      <button 
        class="clear-search-btn" 
        *ngIf="searchTerm" 
        (click)="clearSearch()"
        title="Clear search"
      >
        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </button>
    </div>
    <div class="search-results-info" *ngIf="searchTerm && patients.length > 0">
      Showing {{ filteredPatients.length }} of {{ patients.length }} patient{{ patients.length !== 1 ? 's' : '' }}
    </div>
  </div>

  <div class="patients-grid" *ngIf="filteredPatients.length > 0">
    <div class="patient-card" *ngFor="let patient of filteredPatients">
      <div class="patient-header">
        <div class="patient-avatar">
          <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M20 21V19C20 17.9391 19.5786 16.9217 18.8284 16.1716C18.0783 15.4214 17.0609 15 16 15H8C6.93913 15 5.92172 15.4214 5.17157 16.1716C4.42143 16.9217 4 17.9391 4 19V21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M12 11C14.2091 11 16 9.20914 16 7C16 4.79086 14.2091 3 12 3C9.79086 3 8 4.79086 8 7C8 9.20914 9.79086 11 12 11Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </div>
        <div class="patient-info">
          <h3 class="patient-name">{{ patient.firstName }} {{ patient.lastName }}</h3>
          <p class="patient-email" *ngIf="patient.email">{{ patient.email }}</p>
          <p class="patient-id" *ngIf="patient.id">ID: {{ patient.id }}</p>
        </div>
      </div>
      <div class="patient-details">
        <div class="detail-row" *ngIf="patient.phoneNumber">
          <span class="detail-label">Phone:</span>
          <span class="detail-value">{{ patient.phoneNumber }}</span>
        </div>
        <div class="detail-row" *ngIf="patient.bloodType">
          <span class="detail-label">Blood Type:</span>
          <span class="detail-value">{{ patient.bloodType }}</span>
        </div>
      </div>
      <div class="patient-actions">
        <button class="btn-action btn-chat" (click)="startChat(patient)" [disabled]="loading || loadingPatients" title="Start chat">
          <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" width="16" height="16">
            <path d="M21 15C21 15.5304 20.7893 16.0391 20.4142 16.4142C20.0391 16.7893 19.5304 17 19 17H7L3 21V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H19C19.5304 3 20.0391 3.21071 20.4142 3.58579C20.7893 3.96086 21 4.46957 21 5V15Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
          Chat
        </button>
        <button class="btn-action btn-appointment" (click)="createAppointment(patient)" [disabled]="loading || loadingPatients" title="Create appointment">
          <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" width="16" height="16">
            <path d="M8 2V6M16 2V6M3 10H21M5 4H19C20.1046 4 21 4.89543 21 6V20C21 21.1046 20.1046 22 19 22H5C3.89543 22 3 21.1046 3 20V6C3 4.89543 3.89543 4 5 4Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
          Appointment
        </button>
        <button class="btn-action btn-remove" (click)="removePatientFromHistory(patient)" [disabled]="loading || loadingPatients" title="Remove from history">
          <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" width="16" height="16">
            <path d="M3 6H5H21M8 6V4C8 3.46957 8.21071 2.96086 8.58579 2.58579C8.96086 2.21071 9.46957 2 10 2H14C14.5304 2 15.0391 2.21071 15.4142 2.58579C15.7893 2.96086 16 3.46957 16 4V6M19 6V20C19 20.5304 18.7893 21.0391 18.4142 21.4142C18.0391 21.7893 17.5304 22 17 22H7C6.46957 22 5.96086 21.7893 5.58579 21.4142C5.21071 21.0391 5 20.5304 5 20V6H19Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M10 11V17M14 11V17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
          Remove
        </button>
      </div>
    </div>
  </div>
  <div class="empty-state" *ngIf="!loadingPatients && patients.length === 0">
    <svg class="empty-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M20 21V19C20 17.9391 19.5786 16.9217 18.8284 16.1716C18.0783 15.4214 17.0609 15 16 15H8C6.93913 15 5.92172 15.4214 5.17157 16.1716C4.42143 16.9217 4 17.9391 4 19V21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
      <path d="M12 11C14.2091 11 16 9.20914 16 7C16 4.79086 14.2091 3 12 3C9.79086 3 8 4.79086 8 7C8 9.20914 9.79086 11 12 11Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>
    <h3>No Patients Found</h3>
    <p>No patients are registered in the system yet. Use the search bar to find patients.</p>
  </div>
  
  <div class="loading-state" *ngIf="loadingPatients">
    <div class="spinner"></div>
    <p>Loading patients...</p>
  </div>
  
  <div class="empty-state search-empty" *ngIf="patients.length > 0 && filteredPatients.length === 0">
    <svg class="empty-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>
    <h3>No Patients Found</h3>
    <p>No patients match your search criteria. Try adjusting your search terms.</p>
    <button class="clear-search-link" (click)="clearSearch()">Clear search</button>
  </div>
</section>