<section class="appointments-section">
  <h2 class="section-title">My Appointments</h2>

  <!-- Upcoming Appointments -->
  <div class="appointment-group" *ngIf="getUpcomingAppointments().length > 0">
    <h3 class="group-title">Upcoming</h3>
    <div class="appointments-grid">
      <div class="appointment-card" *ngFor="let apt of getUpcomingAppointments()">
        <div class="appointment-header">
          <div class="appointment-info">
            <h4 class="patient-name">{{ apt.patientFirstName }} {{ apt.patientLastName }}</h4>
            <p class="appointment-date">
              <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <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"/>
              </svg>
              {{ formatDate(apt.scheduledDate) }} at {{ formatTime(apt.scheduledTime) }}
            </p>
            <p class="appointment-duration">
              <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2Z" stroke="currentColor" stroke-width="2"/>
                <path d="M12 6V12L16 14" stroke="currentColor" stroke-width="2"/>
              </svg>
              {{ apt.durationInMinutes }} minutes
            </p>
          </div>
          <span class="status-badge" [ngClass]="getStatusClass(apt.status)">
            {{ apt.status }}
          </span>
        </div>
        <div class="appointment-actions" *ngIf="apt.status === 'SCHEDULED'">
          <button class="action-btn action-btn-confirm" (click)="confirmAppointment(apt)" [disabled]="!apt.id">
            Confirm
          </button>
          <button class="action-btn action-btn-cancel" (click)="cancelAppointment(apt)" [disabled]="!apt.id">
            Cancel
          </button>
          <button class="action-btn action-btn-delete" (click)="deleteAppointment(apt)" [disabled]="!apt.id" title="Delete Appointment">
            <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"/>
            </svg>
            Delete
          </button>
        </div>
        <div class="appointment-actions" *ngIf="apt.status === 'CONFIRMED'">
          <button class="action-btn action-btn-complete" (click)="completeAppointment(apt)" [disabled]="!apt.id">
            Mark Complete
          </button>
          <button class="action-btn action-btn-cancel" (click)="cancelAppointment(apt)" [disabled]="!apt.id">
            Cancel
          </button>
          <button class="action-btn action-btn-delete" (click)="deleteAppointment(apt)" [disabled]="!apt.id" title="Delete Appointment">
            <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"/>
            </svg>
            Delete
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- Past Appointments -->
  <div class="appointment-group" *ngIf="getPastAppointments().length > 0">
    <h3 class="group-title">Past</h3>
    <div class="appointments-grid">
      <div class="appointment-card" *ngFor="let apt of getPastAppointments()">
        <div class="appointment-header">
          <div class="appointment-info">
            <h4 class="patient-name">{{ apt.patientFirstName }} {{ apt.patientLastName }}</h4>
            <p class="appointment-date">
              <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <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"/>
              </svg>
              {{ formatDate(apt.scheduledDate) }} at {{ formatTime(apt.scheduledTime) }}
            </p>
            <p class="appointment-duration">
              <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2Z" stroke="currentColor" stroke-width="2"/>
                <path d="M12 6V12L16 14" stroke="currentColor" stroke-width="2"/>
              </svg>
              {{ apt.durationInMinutes }} minutes
            </p>
          </div>
          <span class="status-badge" [ngClass]="getStatusClass(apt.status)">
            {{ apt.status }}
          </span>
        </div>
        <div class="appointment-actions">
          <button class="action-btn action-btn-delete" (click)="deleteAppointment(apt)" [disabled]="!apt.id" title="Delete Appointment">
            <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"/>
            </svg>
            Delete
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- Empty State -->
  <div class="empty-state" *ngIf="appointments.length === 0">
    <svg class="empty-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <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"/>
    </svg>
    <h3>No Appointments</h3>
    <p>You don't have any appointments scheduled yet.</p>
  </div>
</section>