<section class="profile-section">
  <div class="profile-header-section">
    <div class="profile-header-content">
      <h2 class="section-title">My Profile</h2>
      <p class="section-description">View and manage your personal and medical information</p>
    </div>
    <button class="edit-profile-btn" (click)="onStartEdit()" *ngIf="!showEditProfile">
      <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M11 4H4C3.46957 4 2.96086 4.21071 2.58579 4.58579C2.21071 4.96086 2 5.46957 2 6V20C2 20.5304 2.21071 21.0391 2.58579 21.4142C2.96086 21.7893 3.46957 22 4 22H18C18.5304 22 19.0391 21.7893 19.4142 21.4142C19.7893 21.0391 20 20.5304 20 20V13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        <path d="M18.5 2.5C18.8978 2.10217 19.4374 1.87868 20 1.87868C20.5626 1.87868 21.1022 2.10217 21.5 2.5C21.8978 2.89782 22.1213 3.43739 22.1213 4C22.1213 4.56261 21.8978 5.10217 21.5 5.5L12 15L8 16L9 12L18.5 2.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
      Edit Profile
    </button>
  </div>

  <div class="profile-card" *ngIf="!showEditProfile">
    <div class="profile-header">
      <div class="profile-avatar-wrapper">
        <div class="profile-avatar">
          <img
            *ngIf="currentUser?.avatarUrl"
            [src]="userService.getAvatarUrl(currentUser?.avatarUrl)"
            [alt]="currentUser?.firstName + ' ' + currentUser?.lastName"
            class="avatar-image-large"
          />
          <svg *ngIf="!currentUser?.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"/>
          </svg>
        </div>
        <button class="avatar-upload-btn" (click)="fileInput.click()" title="Upload photo">
          <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M21 15V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M17 8L12 3L7 8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M12 3V15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </button>
        <input #fileInput type="file" accept="image/*" style="display: none;" (change)="onAvatarChange($event)" />
      </div>
      <div class="profile-name">
        <h3>{{ currentUser?.firstName }} {{ currentUser?.lastName }}</h3>
        <p>{{ currentUser?.email }}</p>
      </div>
    </div>
    <div class="profile-details">
      <div class="detail-row">
        <span class="detail-label">Phone Number</span>
        <span class="detail-value">{{ currentUser?.phoneNumber || patientProfile?.emergencyContactPhone || 'N/A' }}</span>
      </div>
      <div class="detail-row" *ngIf="patientInfo">
        <span class="detail-label">Blood Type</span>
        <span class="detail-value">{{ patientInfo.bloodType || 'Not specified' }}</span>
      </div>
      <div class="detail-row" *ngIf="patientInfo">
        <span class="detail-label">Allergies</span>
        <span class="detail-value">
          <span *ngIf="patientInfo.allergies && patientInfo.allergies.length > 0">
            {{ patientInfo.allergies.join(', ') }}
          </span>
          <span *ngIf="!patientInfo.allergies || patientInfo.allergies.length === 0">None</span>
        </span>
      </div>
      <div class="detail-row" *ngIf="patientInfo">
        <span class="detail-label">Emergency Contact</span>
        <span class="detail-value">
          <span *ngIf="patientInfo.emergencyContactName">
            {{ patientInfo.emergencyContactName }}
            <span *ngIf="patientInfo.emergencyContactPhone"> - {{ patientInfo.emergencyContactPhone }}</span>
          </span>
          <span *ngIf="!patientInfo.emergencyContactName">Not specified</span>
        </span>
      </div>
      <div class="detail-row">
        <span class="detail-label">Account Status</span>
        <span class="detail-value">
          <span class="status-badge" [ngClass]="currentUser?.isActive ? 'status-confirmed' : 'status-cancelled'">
            {{ currentUser?.isActive ? 'Active' : 'Inactive' }}
          </span>
        </span>
      </div>
    </div>
  </div>

  <div class="edit-profile-form" *ngIf="showEditProfile && editProfileData">
    <div class="form-header">
      <h3 class="form-title">
        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M11 4H4C3.46957 4 2.96086 4.21071 2.58579 4.58579C2.21071 4.96086 2 5.46957 2 6V20C2 20.5304 2.21071 21.0391 2.58579 21.4142C2.96086 21.7893 3.46957 22 4 22H18C18.5304 22 19.0391 21.7893 19.4142 21.4142C19.7893 21.0391 20 20.5304 20 20V13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M18.5 2.5C18.8978 2.10217 19.4374 1.87868 20 1.87868C20.5626 1.87868 21.1022 2.10217 21.5 2.5C21.8978 2.89782 22.1213 3.43739 22.1213 4C22.1213 4.56261 21.8978 5.10217 21.5 5.5L12 15L8 16L9 12L18.5 2.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
        Edit Profile
      </h3>
      <p class="form-subtitle">Update your personal and medical information</p>
    </div>

    <form class="profile-form" (ngSubmit)="onSaveProfile()" #profileForm="ngForm">
      <div class="form-section">
        <div class="section-header">
          <h4 class="section-subtitle">
            <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>
            Basic Information
          </h4>
          <p class="section-description">Your personal contact details</p>
        </div>
        <div class="form-grid">
          <div class="form-group">
            <label class="form-label" for="firstName">First Name <span class="required-indicator">*</span></label>
            <input
              type="text"
              id="firstName"
              [(ngModel)]="editUserData.firstName"
              name="firstName"
              class="form-input"
              minlength="2"
              maxlength="50"
              pattern="[A-Za-z\\s]{2,50}"
              required
            />
            <span class="form-hint">2-50 characters, letters only</span>
          </div>
          <div class="form-group">
            <label class="form-label" for="lastName">Last Name <span class="required-indicator">*</span></label>
            <input
              type="text"
              id="lastName"
              [(ngModel)]="editUserData.lastName"
              name="lastName"
              class="form-input"
              minlength="2"
              maxlength="50"
              pattern="[A-Za-z\\s]{2,50}"
              required
            />
            <span class="form-hint">2-50 characters, letters only</span>
          </div>
          <div class="form-group">
            <label class="form-label" for="phoneNumber">Phone Number <span class="required-indicator">*</span></label>
            <input
              type="tel"
              id="phoneNumber"
              [(ngModel)]="editUserData.phoneNumber"
              name="phoneNumber"
              class="form-input"
              minlength="10"
              maxlength="15"
              pattern="[+]?[0-9]{10,15}"
              required
            />
            <span class="form-hint">10-15 digits, can include country code with +</span>
          </div>
        </div>
      </div>

      <div class="form-section">
        <div class="section-header">
          <h4 class="section-subtitle">
            <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12 2L2 7V10C2 16 6 21.4 12 22C18 21.4 22 16 22 10V7L12 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            Medical Information
          </h4>
          <p class="section-description">Important health details for emergency situations</p>
        </div>

        <div class="form-grid">
          <div class="form-group">
            <label class="form-label" for="bloodType">Blood Type</label>
            <select id="bloodType" [(ngModel)]="editProfileData.bloodType" name="bloodType" class="form-input form-select">
              <option value="">Select blood type</option>
              <option value="A+">A+</option>
              <option value="A-">A-</option>
              <option value="B+">B+</option>
              <option value="B-">B-</option>
              <option value="AB+">AB+</option>
              <option value="AB-">AB-</option>
              <option value="O+">O+</option>
              <option value="O-">O-</option>
            </select>
            <span class="form-hint">Required for medical emergencies</span>
          </div>
          <div class="form-group">
            <label class="form-label" for="emergencyContactName">Emergency Contact Name <span class="required-indicator">*</span></label>
            <input
              type="text"
              id="emergencyContactName"
              [(ngModel)]="editProfileData.emergencyContactName"
              name="emergencyContactName"
              class="form-input"
              minlength="2"
              maxlength="50"
              required
            />
            <span class="form-hint">2-50 characters</span>
          </div>
          <div class="form-group">
            <label class="form-label" for="emergencyContactPhone">Emergency Contact Phone <span class="required-indicator">*</span></label>
            <input
              type="tel"
              id="emergencyContactPhone"
              [(ngModel)]="editProfileData.emergencyContactPhone"
              name="emergencyContactPhone"
              class="form-input"
              minlength="10"
              maxlength="15"
              pattern="[+]?[0-9]{10,15}"
              required
            />
            <span class="form-hint">10-15 digits, can include country code with +</span>
          </div>
          <div class="form-group form-group-full">
            <label class="form-label" for="allergies">Allergies</label>
            <div class="allergies-input-container">
              <div class="allergies-input">
                <input
                  type="text"
                  id="allergies"
                  [ngModel]="newAllergy"
                  (ngModelChange)="newAllergyChange.emit($event)"
                  name="newAllergy"
                  class="form-input"
                  placeholder="Enter allergy name (e.g., Penicillin, Peanuts)"
                  (keyup.enter)="onAddAllergy()"
                  maxlength="100"
                />
                <button type="button" class="add-btn" (click)="onAddAllergy()" title="Add allergy">
                  <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" stroke-linejoin="round"/>
                  </svg>
                </button>
              </div>
              <span class="form-hint">Add known allergies for medical safety</span>
              <div class="allergies-list" *ngIf="editProfileData.allergies && editProfileData.allergies.length > 0">
                <div class="allergy-tag" *ngFor="let allergy of editProfileData.allergies; let i = index">
                  <span class="allergy-name">{{ allergy }}</span>
                  <button type="button" class="remove-allergy" (click)="onRemoveAllergy(i)" title="Remove">
                    <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>
              <div class="allergies-empty" *ngIf="!editProfileData.allergies || editProfileData.allergies.length === 0">
                <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="currentColor" stroke-width="2"/>
                  <path d="M12 8V12M12 16H12.01" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                </svg>
                <span>No allergies added yet</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Additional enterprise fields -->
      <div class="form-section">
        <div class="section-header">
          <h4 class="section-subtitle">
            <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M21 10C21 17 12 23 12 23C12 23 3 17 3 10C3 7.61305 3.94821 5.32387 5.63604 3.63604C7.32387 1.94821 9.61305 1 12 1C14.3869 1 16.6761 1.94821 18.364 3.63604C20.0518 5.32387 21 7.61305 21 10Z" stroke="currentColor" stroke-width="2"/>
              <path d="M12 13C13.6569 13 15 11.6569 15 10C15 8.34315 13.6569 7 12 7C10.3431 7 9 8.34315 9 10C9 11.6569 10.3431 13 12 13Z" stroke="currentColor" stroke-width="2"/>
            </svg>
            Additional Information
          </h4>
          <p class="section-description">Complete your profile for better care</p>
        </div>

        <div class="form-grid">
          <div class="form-group">
            <label class="form-label" for="dateOfBirth">Date of Birth</label>
            <input type="date" id="dateOfBirth" [(ngModel)]="editProfileData.dateOfBirth" name="dateOfBirth" class="form-input" />
          </div>
          <div class="form-group">
            <label class="form-label" for="gender">Gender</label>
            <select id="gender" [(ngModel)]="editProfileData.gender" name="gender" class="form-input form-select">
              <option value="">Select gender</option>
              <option value="Male">Male</option>
              <option value="Female">Female</option>
              <option value="Other">Other</option>
            </select>
          </div>
          <div class="form-group">
            <label class="form-label" for="streetAddress">Street Address</label>
            <input type="text" id="streetAddress" [(ngModel)]="editProfileData.streetAddress" name="streetAddress" class="form-input" />
          </div>
          <div class="form-group">
            <label class="form-label" for="city">City</label>
            <input type="text" id="city" [(ngModel)]="editProfileData.city" name="city" class="form-input" />
          </div>
          <div class="form-group">
            <label class="form-label" for="state">State</label>
            <input type="text" id="state" [(ngModel)]="editProfileData.state" name="state" class="form-input" />
          </div>
          <div class="form-group">
            <label class="form-label" for="zipCode">Zip/Postal Code</label>
            <input type="text" id="zipCode" [(ngModel)]="editProfileData.zipCode" name="zipCode" class="form-input" />
          </div>
          <div class="form-group">
            <label class="form-label" for="country">Country</label>
            <input type="text" id="country" [(ngModel)]="editProfileData.country" name="country" class="form-input" />
          </div>
          <div class="form-group form-group-full">
            <h5 class="subsection-title">Insurance Information</h5>
          </div>
          <div class="form-group">
            <label class="form-label" for="insuranceProvider">Insurance Provider</label>
            <input type="text" id="insuranceProvider" [(ngModel)]="editProfileData.insuranceProvider" name="insuranceProvider" class="form-input" />
          </div>
          <div class="form-group">
            <label class="form-label" for="insurancePolicyNumber">Policy Number</label>
            <input type="text" id="insurancePolicyNumber" [(ngModel)]="editProfileData.insurancePolicyNumber" name="insurancePolicyNumber" class="form-input" />
          </div>
          <div class="form-group form-group-full">
            <h5 class="subsection-title">Primary Care Physician</h5>
          </div>
          <div class="form-group">
            <label class="form-label" for="primaryCarePhysicianName">Physician Name</label>
            <input type="text" id="primaryCarePhysicianName" [(ngModel)]="editProfileData.primaryCarePhysicianName" name="primaryCarePhysicianName" class="form-input" />
          </div>
          <div class="form-group">
            <label class="form-label" for="primaryCarePhysicianPhone">Physician Phone</label>
            <input type="tel" id="primaryCarePhysicianPhone" [(ngModel)]="editProfileData.primaryCarePhysicianPhone" name="primaryCarePhysicianPhone" class="form-input" />
          </div>
          <div class="form-group form-group-full">
            <label class="form-label" for="medicalHistorySummary">Medical History Summary</label>
            <textarea
              id="medicalHistorySummary"
              [(ngModel)]="editProfileData.medicalHistorySummary"
              name="medicalHistorySummary"
              class="form-input form-textarea"
              rows="4"
              maxlength="2000"
            ></textarea>
            <div class="textarea-footer">
              <span class="form-hint">Brief summary of medical history (max 2000 characters)</span>
              <span class="char-counter" *ngIf="editProfileData.medicalHistorySummary">
                {{ (editProfileData.medicalHistorySummary || '').length }}/2000
              </span>
            </div>
          </div>
          <div class="form-group form-group-full">
            <label class="form-label" for="currentMedications">Current Medications</label>
            <div class="allergies-input-container">
              <div class="allergies-input">
                <input
                  type="text"
                  id="currentMedications"
                  [ngModel]="newMedication"
                  (ngModelChange)="newMedicationChange.emit($event)"
                  name="newMedication"
                  class="form-input"
                  placeholder="Enter medication name"
                  (keyup.enter)="onAddMedication()"
                  maxlength="200"
                />
                <button type="button" class="add-btn" (click)="onAddMedication()" title="Add medication">
                  <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" stroke-linejoin="round"/>
                  </svg>
                </button>
              </div>
              <span class="form-hint">Add all medications you're currently taking</span>
              <div class="allergies-list" *ngIf="editProfileData.currentMedications && editProfileData.currentMedications.length > 0">
                <div class="allergy-tag" *ngFor="let medication of editProfileData.currentMedications; let i = index">
                  <span class="allergy-name">{{ medication }}</span>
                  <button type="button" class="remove-allergy" (click)="onRemoveMedication(i)" title="Remove">
                    <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>
              <div class="allergies-empty" *ngIf="!editProfileData.currentMedications || editProfileData.currentMedications.length === 0">
                <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="currentColor" stroke-width="2"/>
                  <path d="M12 8V12M12 16H12.01" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                </svg>
                <span>No medications added yet</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="form-actions">
        <button type="button" class="cancel-btn" (click)="onCancelEdit()">
          <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>
          Cancel
        </button>
        <button type="submit" class="submit-button" [disabled]="profileForm.invalid">
          <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M20 6L9 17L4 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
          Save Changes
        </button>
      </div>
    </form>
  </div>
</section>

