<ng-container *transloco="let t; prefix: 'settingsProfile'">
<div class="user-profile-dialog">

  <div class="panel-header">
    <div class="header-icon-wrapper">
      <i class="pi pi-user header-icon"></i>
    </div>
    <div class="header-text">
      <h2 class="panel-title">{{ t('title') }}</h2>
      <p class="panel-description">
        {{ t('description') }}
      </p>
    </div>
    <p-button
      icon="pi pi-times"
      [text]="true"
      [rounded]="true"
      severity="secondary"
      (onClick)="closeDialog()"
      class="close-button">
    </p-button>
  </div>

  <div class="form-container">
    <div class="form-section">
      <h3 class="section-title">
        <i class="pi pi-id-card"></i>
        {{ t('basicInfo') }}
      </h3>

      <div class="form-field">
        <label class="field-label">{{ t('username') }}</label>
        <input
          disabled
          id="username"
          type="text"
          pInputText
          [(ngModel)]="editUserData.username"
          class="field-input"
          [placeholder]="t('usernamePlaceholder')"/>
      </div>

      <div class="form-field">
        <label class="field-label">{{ t('fullName') }}</label>
        <input
          [disabled]="!isEditing"
          id="fullname"
          type="text"
          pInputText
          [(ngModel)]="editUserData.name"
          class="field-input"
          [placeholder]="t('fullNamePlaceholder')"/>
      </div>

      <div class="form-field">
        <label class="field-label">{{ t('email') }}</label>
        <input
          [disabled]="!isEditing"
          id="email"
          type="email"
          pInputText
          [(ngModel)]="editUserData.email"
          class="field-input"
          [placeholder]="t('emailPlaceholder')"/>
      </div>

      <div class="edit-actions">
        @if (!isEditing) {
          <p-button [label]="t('editProfile')" severity="info" icon="pi pi-pencil" [outlined]="true" (onClick)="toggleEdit()"></p-button>
        }
        @if (isEditing) {
          <div class="edit-buttons">
            <p-button [label]="'common.cancel' | transloco" severity="secondary" [outlined]="true" icon="pi pi-times" (onClick)="toggleEdit()"></p-button>
            <p-button [label]="t('saveChanges')" severity="success" [outlined]="true" icon="pi pi-check" (onClick)="updateProfile()"></p-button>
          </div>
        }
      </div>
    </div>

    <div class="gradient-divider"></div>

    <div class="form-section">
      <h3 class="section-title">
        <i class="pi pi-shield"></i>
        {{ t('security') }}
      </h3>

      <form [formGroup]="changePasswordForm" (ngSubmit)="submitPasswordChange()">
        <div class="form-field">
          <label class="field-label" for="currentPassword">{{ t('currentPassword') }}</label>
          <p-password
            id="currentPassword"
            formControlName="currentPassword"
            [feedback]="false"
            class="field-input"
            [inputStyle]="{'width': '100%'}">
          </p-password>
          @if (changePasswordForm.get('currentPassword')?.invalid &&
                (changePasswordForm.get('currentPassword')?.dirty || changePasswordForm.get('currentPassword')?.touched)) {
            <small class="field-error">
              <i class="pi pi-exclamation-circle"></i>
              @if (changePasswordForm.get('currentPassword')?.errors?.['required']) {
                <span>{{ t('validation.currentPasswordRequired') }}</span>
              }
            </small>
          }
        </div>

        <div class="form-field">
          <label class="field-label" for="newPassword">{{ t('newPassword') }}</label>
          <p-password
            id="newPassword"
            formControlName="newPassword"
            [feedback]="false"
            class="field-input"
            [inputStyle]="{'width': '100%'}">
          </p-password>
          @if (changePasswordForm.get('newPassword')?.invalid &&
                (changePasswordForm.get('newPassword')?.dirty || changePasswordForm.get('newPassword')?.touched)) {
            <small class="field-error">
              <i class="pi pi-exclamation-circle"></i>
              @if (changePasswordForm.get('newPassword')?.errors?.['required']) {
                <span>{{ t('validation.newPasswordRequired') }}</span>
              }
              @if (changePasswordForm.get('newPassword')?.errors?.['minlength']) {
                <span>{{ t('validation.passwordMinLength') }}</span>
              }
            </small>
          }
        </div>

        <div class="form-field">
          <label class="field-label" for="confirmNewPassword">{{ t('confirmNewPassword') }}</label>
          <p-password
            id="confirmNewPassword"
            formControlName="confirmNewPassword"
            [feedback]="false"
            class="field-input"
            [inputStyle]="{'width': '100%'}">
          </p-password>
          @if (changePasswordForm.get('confirmNewPassword')?.invalid &&
                (changePasswordForm.get('confirmNewPassword')?.dirty || changePasswordForm.get('confirmNewPassword')?.touched)) {
            <small class="field-error">
              <i class="pi pi-exclamation-circle"></i>
              @if (changePasswordForm.get('confirmNewPassword')?.errors?.['required']) {
                <span>{{ t('validation.confirmPasswordRequired') }}</span>
              }
            </small>
          }
          @if (changePasswordForm.errors?.['passwordMismatch'] &&
                changePasswordForm.get('confirmNewPassword')?.touched) {
            <small class="field-error">
              <i class="pi pi-exclamation-circle"></i>
              <span>{{ t('validation.passwordMismatch') }}</span>
            </small>
          }
        </div>

        <div class="password-actions">
          <p-button type="submit" severity="info" [outlined]="true" [label]="t('changePassword')" icon="pi pi-key" [disabled]="changePasswordForm.invalid"></p-button>
        </div>
      </form>
    </div>
  </div>

</div>

@if (!currentUser) {
  <div class="loading-state">
    <i class="pi pi-spin pi-spinner loading-icon"></i>
    <p>{{ t('loading') }}</p>
  </div>
}
</ng-container>
