<section class="doctors-section">
  <div class="section-header">
    <div>
      <h2 class="section-title">Available Doctors</h2>
      <p class="section-description">Enterprise-verified providers who have collaborated with you</p>
    </div>
  </div>

  <div class="doctors-grid" *ngIf="doctors.length > 0">
    <div class="doctor-card" *ngFor="let doctor of doctors" (click)="onViewDoctor(doctor.id)">
      <div class="doctor-header">
        <div class="doctor-avatar">
          <img
            *ngIf="doctor.avatarUrl"
            [src]="userService.getAvatarUrl(doctor.avatarUrl)"
            [alt]="doctor.firstName + ' ' + doctor.lastName"
            class="avatar-image"
          />
          <svg *ngIf="!doctor.avatarUrl" 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"/>
            <path d="M12 14V22M8 18H16" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </div>
        <div class="doctor-info">
          <h3 class="doctor-name">Dr. {{ doctor.firstName }} {{ doctor.lastName }}</h3>
          <p class="doctor-specialization">{{ doctor.specialization }}</p>
        </div>
        <span class="verified-badge" *ngIf="doctor.isVerified">
          <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M9 12L11 14L15 10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="currentColor" stroke-width="2"/>
          </svg>
          Verified
        </span>
      </div>
      <div class="doctor-details">
        <p class="doctor-experience">
          <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
          {{ doctor.yearsOfExperience }} years of experience
        </p>
        <p class="doctor-fee">
          <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M12 2V22M17 5H9.5C8.57174 5 7.6815 5.36875 7.02513 6.02513C6.36875 6.6815 6 7.57174 6 8.5C6 9.42826 6.36875 10.3185 7.02513 10.9749C7.6815 11.6313 8.57174 12 9.5 12H14.5C15.4283 12 16.3185 12.3687 16.9749 13.0251C17.6313 13.6815 18 14.5717 18 15.5C18 16.4283 17.6313 17.3185 16.9749 17.9749C16.3185 18.6313 15.4283 19 14.5 19H6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
          ${{ doctor.consultationFee || 'N/A' }} consultation fee
        </p>
        <p class="doctor-bio" *ngIf="doctor.biography">{{ doctor.biography }}</p>
      </div>
      <div class="doctor-actions">
        <button class="view-profile-btn" (click)="onViewDoctor(doctor.id); $event.stopPropagation()">
          View Full Profile
          <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M5 12H19M19 12L12 5M19 12L12 19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </button>
        <button class="btn-remove" (click)="onRemoveDoctor(doctor, $event)" [disabled]="loading" 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 from History
        </button>
      </div>
    </div>
  </div>

  <div class="empty-state" *ngIf="doctors.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 Doctors Available</h3>
    <p>There are no verified doctors in the system yet.</p>
  </div>

  <div class="modal-overlay" *ngIf="showDoctorProfileModal" (click)="onCloseModal()">
    <div class="modal-content profile-modal" (click)="$event.stopPropagation()">
      <div class="modal-header">
        <h2>Dr. {{ selectedDoctorProfile?.firstName }} {{ selectedDoctorProfile?.lastName }} - Full Profile</h2>
        <button class="modal-close" (click)="onCloseModal()">
          <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"/>
          </svg>
        </button>
      </div>
      <div class="modal-body" *ngIf="selectedDoctorProfile">
        <div class="profile-full-view">
          <div class="profile-section">
            <h3>Basic Information</h3>
            <div class="info-grid">
              <div class="info-item">
                <span class="info-label">Full Name:</span>
                <span class="info-value">Dr. {{ selectedDoctorProfile.firstName }} {{ selectedDoctorProfile.lastName }}</span>
              </div>
              <div class="info-item" *ngIf="selectedDoctorProfile.email">
                <span class="info-label">Email:</span>
                <span class="info-value">{{ selectedDoctorProfile.email }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">Phone:</span>
                <span class="info-value">{{ selectedDoctorProfile.phoneNumber }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">Specialization:</span>
                <span class="info-value">{{ selectedDoctorProfile.specialization }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">Experience:</span>
                <span class="info-value">{{ selectedDoctorProfile.yearsOfExperience }} years</span>
              </div>
              <div class="info-item" *ngIf="selectedDoctorProfile.medicalLicenseNumber">
                <span class="info-label">License Number:</span>
                <span class="info-value">{{ selectedDoctorProfile.medicalLicenseNumber }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">Consultation Fee:</span>
                <span class="info-value">${{ selectedDoctorProfile.consultationFee }}</span>
              </div>
            </div>
          </div>

          <div class="profile-section" *ngIf="selectedDoctorProfile.streetAddress || selectedDoctorProfile.city">
            <h3>Address</h3>
            <div class="info-grid">
              <div class="info-item" *ngIf="selectedDoctorProfile.streetAddress">
                <span class="info-label">Street:</span>
                <span class="info-value">{{ selectedDoctorProfile.streetAddress }}</span>
              </div>
              <div class="info-item" *ngIf="selectedDoctorProfile.city">
                <span class="info-label">City:</span>
                <span class="info-value">{{ selectedDoctorProfile.city }}</span>
              </div>
              <div class="info-item" *ngIf="selectedDoctorProfile.state">
                <span class="info-label">State:</span>
                <span class="info-value">{{ selectedDoctorProfile.state }}</span>
              </div>
              <div class="info-item" *ngIf="selectedDoctorProfile.zipCode">
                <span class="info-label">Zip Code:</span>
                <span class="info-value">{{ selectedDoctorProfile.zipCode }}</span>
              </div>
              <div class="info-item" *ngIf="selectedDoctorProfile.country">
                <span class="info-label">Country:</span>
                <span class="info-value">{{ selectedDoctorProfile.country }}</span>
              </div>
            </div>
          </div>

          <div class="profile-section" *ngIf="selectedDoctorProfile.educationDegree || selectedDoctorProfile.educationUniversity">
            <h3>Education</h3>
            <div class="info-grid">
              <div class="info-item" *ngIf="selectedDoctorProfile.educationDegree">
                <span class="info-label">Degree:</span>
                <span class="info-value">{{ selectedDoctorProfile.educationDegree }}</span>
              </div>
              <div class="info-item" *ngIf="selectedDoctorProfile.educationUniversity">
                <span class="info-label">University:</span>
                <span class="info-value">{{ selectedDoctorProfile.educationUniversity }}</span>
              </div>
              <div class="info-item" *ngIf="selectedDoctorProfile.educationGraduationYear">
                <span class="info-label">Graduation Year:</span>
                <span class="info-value">{{ selectedDoctorProfile.educationGraduationYear }}</span>
              </div>
            </div>
          </div>

          <div class="profile-section" *ngIf="selectedDoctorProfile.certifications?.length">
            <h3>Certifications</h3>
            <div class="tags-list">
              <span class="tag" *ngFor="let cert of selectedDoctorProfile.certifications">{{ cert }}</span>
            </div>
          </div>

          <div class="profile-section" *ngIf="selectedDoctorProfile.languagesSpoken?.length">
            <h3>Languages Spoken</h3>
            <div class="tags-list">
              <span class="tag" *ngFor="let lang of selectedDoctorProfile.languagesSpoken">{{ lang }}</span>
            </div>
          </div>

          <div class="profile-section" *ngIf="selectedDoctorProfile.hospitalAffiliations?.length">
            <h3>Hospital Affiliations</h3>
            <div class="tags-list">
              <span class="tag" *ngFor="let hospital of selectedDoctorProfile.hospitalAffiliations">{{ hospital }}</span>
            </div>
          </div>

          <div class="profile-section" *ngIf="selectedDoctorProfile.insuranceAccepted?.length">
            <h3>Insurance Accepted</h3>
            <div class="tags-list">
              <span class="tag" *ngFor="let insurance of selectedDoctorProfile.insuranceAccepted">{{ insurance }}</span>
            </div>
          </div>

          <div class="profile-section" *ngIf="selectedDoctorProfile.professionalMemberships?.length">
            <h3>Professional Memberships</h3>
            <div class="tags-list">
              <span class="tag" *ngFor="let membership of selectedDoctorProfile.professionalMemberships">{{ membership }}</span>
            </div>
          </div>

          <div class="profile-section" *ngIf="selectedDoctorProfile.biography">
            <h3>Biography</h3>
            <p class="biography-text">{{ selectedDoctorProfile.biography }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

