<p-toast />
<p-confirmDialog />

<div class="users-page">
  <app-page-header title="USERS.TITLE" subtitle="USERS.SUBTITLE" (refresh)="retry()">
    <p-button [label]="'USERS.NEW_USER' | translate" icon="pi pi-plus" (onClick)="openNew()" />
  </app-page-header>

  <ng-template #bodyTpl let-user>
      <tr>
        <td>
          <div class="user-name">
            <span class="name-primary">{{ user.name_ar || user.name }}</span>
            @if (user.name_en) {
              <span class="name-secondary">{{ user.name_en }}</span>
            }
          </div>
        </td>
        <td>{{ user.email }}</td>
        <td>
          <div class="role-badges">
            @for (role of (user.roles || []); track role) {
              <p-tag [value]="('ROLES.' + role.toUpperCase()) | translate" [severity]="getRoleSeverity(role)" />
            }
            @if (!user.roles || user.roles.length === 0) {
              <span class="no-role">—</span>
            }
          </div>
        </td>
        <td>
          <div class="branch-badges">
            @for (branch of (user.branches || []); track branch.id) {
              <p-tag [value]="branch.name" severity="info" />
            }
            @if (!user.branches || user.branches.length === 0) {
              <span class="text-text-muted text-xs">{{ 'USERS.ALL_BRANCHES' | translate }}</span>
            }
          </div>
        </td>
        <td>{{ user.locale === 'ar' ? 'العربية' : 'English' }}</td>
        <td>
          <p-tag
            [value]="user.is_active ? ('COMMON.ACTIVE' | translate) : ('COMMON.INACTIVE' | translate)"
            [severity]="user.is_active ? 'success' : 'danger'"
          />
        </td>
        <td>
          <div class="action-buttons">
            <p-button
              icon="pi pi-pencil"
              [rounded]="true"
              [text]="true"
              severity="info"
              (onClick)="editUser(user)"
            />
            <p-button
              icon="pi pi-trash"
              [rounded]="true"
              [text]="true"
              severity="danger"
              (onClick)="deleteUser(user)"
            />
          </div>
        </td>
      </tr>
    </ng-template>
  <app-data-table [data]="(users$ | async) || []" [loading]="!!(loading$ | async)" [error]="(error$ | async) ?? null" (retry)="retry()" [columns]="columns" [bodyTpl]="bodyTpl">
  </app-data-table>
</div>

<!-- Create/Edit User Dialog -->
<app-form-dialog [(visible)]="dialogVisible" [header]="editingUser() ? ('USERS.EDIT_USER' | translate) : ('USERS.NEW_USER' | translate)" [saving]="!!(saving$ | async)" (save)="onSave()" [width]="'500px'">
  <form [formGroup]="userForm" class="dialog-form">
    <div class="form-field">
      <label>{{ 'USERS.NAME_AR' | translate }} *</label>
      <input pInputText formControlName="name_ar" />
      @if (userForm.get('name_ar')?.touched && userForm.get('name_ar')?.hasError('required')) {
        <small class="p-error">{{ 'COMMON.REQUIRED' | translate }}</small>
      }
    </div>
    <div class="form-field">
      <label>{{ 'USERS.NAME_EN' | translate }}</label>
      <input pInputText formControlName="name_en" />
    </div>
    <div class="form-field">
      <label>{{ 'USERS.EMAIL' | translate }} *</label>
      <input pInputText formControlName="email" type="email" />
      @if (userForm.get('email')?.touched && userForm.get('email')?.hasError('required')) {
        <small class="p-error">{{ 'COMMON.REQUIRED' | translate }}</small>
      }
      @if (userForm.get('email')?.touched && userForm.get('email')?.hasError('email')) {
        <small class="p-error">{{ 'USERS.INVALID_EMAIL' | translate }}</small>
      }
    </div>
    <div class="form-field">
      <label>{{ 'USERS.PASSWORD' | translate }} {{ editingUser() ? '' : '*' }}</label>
      <input pInputText formControlName="password" type="password" [placeholder]="editingUser() ? ('USERS.PASSWORD_OPTIONAL' | translate) : ''" />
      @if (userForm.get('password')?.touched && userForm.get('password')?.hasError('required')) {
        <small class="p-error">{{ 'COMMON.REQUIRED' | translate }}</small>
      }
      @if (userForm.get('password')?.touched && userForm.get('password')?.hasError('minlength')) {
        <small class="p-error">{{ 'USERS.PASSWORD_MIN' | translate }}</small>
      }
    </div>
    <div class="form-field">
      <label>{{ 'USERS.PHONE' | translate }}</label>
      <input pInputText formControlName="phone" />
    </div>
    <div class="form-field">
      <label>{{ 'USERS.ROLE' | translate }} *</label>
      <p-select formControlName="role" [options]="roleOptions" optionLabel="label" optionValue="value" />
    </div>
    <div class="form-row">
      <div class="form-field">
        <label>{{ 'USERS.LOCALE' | translate }}</label>
        <p-select formControlName="locale" [options]="localeOptions" optionLabel="label" optionValue="value" />
      </div>
      <div class="form-field">
        <label>{{ 'USERS.BRANCHES' | translate }}</label>
        <p-multiSelect
          formControlName="branch_ids"
          [options]="(branches$ | async) || []"
          optionLabel="name"
          optionValue="id"
          [placeholder]="'USERS.SELECT_BRANCHES' | translate"
          [showClear]="true"
          display="chip"
          [style]="{ width: '100%' }"
          appendTo="body"
        />
        <small class="text-text-muted text-[0.65rem]">{{ 'USERS.BRANCHES_HINT' | translate }}</small>
      </div>
    </div>
    <div class="form-field switch-field">
      <label>{{ 'COMMON.ACTIVE' | translate }}</label>
      <p-toggleSwitch formControlName="is_active" />
    </div>
  </form>
</app-form-dialog>
