<section class="appointments-section">
  <div class="section-header">
    <div>
      <h2 class="section-title">My Appointments</h2>
      <p class="info-text">
        Slots auto-confirm when available. Otherwise, your care team approves the request.
      </p>
    </div>
    <button class="request-btn" (click)="onToggleRequestForm(true)" *ngIf="!showRequestForm">
      <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M12 5V19M5 12H19" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
      </svg>
      Request Appointment
    </button>
  </div>

  <div class="request-form-container" *ngIf="showRequestForm">
    <div class="create-form-container">
      <div class="form-heading">
        <div>
          <h3>Request Appointment</h3>
          <p>Select a doctor, choose a time, and we'll handle the rest.</p>
        </div>
        <button class="icon-btn" (click)="onToggleRequestForm(false)" title="Close form">
          <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>
      <form class="create-form" (ngSubmit)="onSubmitRequest()">
        <div class="form-group">
          <label for="doctorId" class="form-label">Select Doctor <span class="required-indicator">*</span></label>
          <select
            id="doctorId"
            [(ngModel)]="newAppointment.doctorId"
            name="doctorId"
            class="form-input"
            required
            (change)="onDoctorChange()"
          >
            <option value="">Choose a doctor...</option>
            <option *ngFor="let doctor of doctors" [value]="doctor.id">
              Dr. {{ doctor.firstName }} {{ doctor.lastName }} - {{ doctor.specialization }}
            </option>
          </select>
        </div>
        <div class="form-row">
          <div class="form-group">
            <label for="scheduledDate" class="form-label">Select Date <span class="required-indicator">*</span></label>
            <input
              id="scheduledDate"
              type="date"
              [(ngModel)]="newAppointment.scheduledDate"
              name="scheduledDate"
              class="form-input"
              required
              [min]="minDate"
              (change)="onDateChange()"
            />
          </div>
        </div>

        <div class="form-group" *ngIf="newAppointment.doctorId && newAppointment.scheduledDate">
          <label class="form-label">Available Time Slots</label>
          <div *ngIf="loadingSlots" class="loading-slots">
            <span>Loading enterprise availability...</span>
          </div>
          <div *ngIf="!loadingSlots && availableSlots.length === 0" class="no-slots">
            <p>No available slots for this date. Please select a different date.</p>
          </div>
          <div class="time-slots-grid" *ngIf="!loadingSlots && availableSlots.length > 0">
            <button
              type="button"
              class="time-slot-btn"
              *ngFor="let slot of availableSlots"
              [class.selected]="newAppointment.scheduledTime === slot"
              (click)="onSelectSlot(slot)"
            >
              {{ slot }}
            </button>
          </div>
          <input type="hidden" [(ngModel)]="newAppointment.scheduledTime" name="scheduledTime" required />
          <div *ngIf="newAppointment.scheduledTime" class="selected-time-info">
            <strong>Selected Time:</strong> {{ newAppointment.scheduledTime }}
          </div>
        </div>

        <div class="form-actions">
          <button type="button" class="cancel-btn" (click)="onToggleRequestForm(false)">Cancel</button>
          <button type="submit" class="submit-button">Request Appointment</button>
        </div>
      </form>
    </div>
  </div>

  <div class="appointment-group" *ngIf="upcomingAppointments.length > 0">
    <h3 class="group-title">Upcoming</h3>
    <div class="appointments-grid">
      <div class="appointment-card" *ngFor="let apt of upcomingAppointments">
        <div class="appointment-header">
          <div class="appointment-info">
            <h4 class="doctor-name">Dr. {{ apt.doctorFirstName }} {{ apt.doctorLastName }}</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>
              {{ formatDateFn(apt.scheduledDate) }} at {{ formatTimeFn(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]="statusClass(apt.status)">
            {{ apt.status }}
          </span>
        </div>
        <div class="appointment-actions" *ngIf="apt.status === 'SCHEDULED' || apt.status === 'CONFIRMED'">
          <button class="action-btn action-btn-cancel" (click)="onCancelAppointment(apt)" [disabled]="!apt.id">
            Cancel
          </button>
          <button class="action-btn action-btn-delete" (click)="onDeleteAppointment(apt)" [disabled]="!apt.id">
            <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-warning" *ngIf="!apt.id && (apt.status === 'SCHEDULED' || apt.status === 'CONFIRMED')">
          <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M12 9V13M12 17H12.01M21 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>
          <span>Action unavailable: Appointment ID missing. Contact support for assistance.</span>
        </div>
      </div>
    </div>
  </div>

  <div class="appointment-group" *ngIf="pastAppointments.length > 0">
    <h3 class="group-title">Past</h3>
    <div class="appointments-grid">
      <div class="appointment-card" *ngFor="let apt of pastAppointments">
        <div class="appointment-header">
          <div class="appointment-info">
            <h4 class="doctor-name">Dr. {{ apt.doctorFirstName }} {{ apt.doctorLastName }}</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>
              {{ formatDateFn(apt.scheduledDate) }} at {{ formatTimeFn(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]="statusClass(apt.status)">
            {{ apt.status }}
          </span>
        </div>
        <div class="appointment-actions">
          <button class="action-btn action-btn-delete" (click)="onDeleteAppointment(apt)" [disabled]="!apt.id">
            <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>

  <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>

