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

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

  @if (loading()) {
    <div class="loading-state"><p-progressSpinner strokeWidth="3" /><p>{{ 'COMMON.LOADING' | translate }}</p></div>
  } @else {
    <div class="roles-grid">
      @for (role of roles(); track role.id) {
        <div class="role-card">
          <div class="role-header">
            <div class="role-icon">
              <i [class]="getRoleIcon(role.name)"></i>
            </div>
            <div class="role-info">
              <h3>{{ translateRoleName(role.name) }}</h3>
              <p-tag [value]="role.permissions.length + ' ' + ('ROLES.PERMISSIONS' | translate)" [severity]="getRoleSeverity(role.name)" />
            </div>
          </div>
          <div class="role-perms-preview">
            @for (perm of role.permissions.slice(0, 4); track perm) {
              <span class="perm-chip">{{ translatePermission(perm) }}</span>
            }
            @if (role.permissions.length > 4) {
              <span class="perm-more">+{{ role.permissions.length - 4 }}</span>
            }
          </div>
          <div class="role-footer">
            <p-button [label]="'ROLES.VIEW_DETAILS' | translate" icon="pi pi-eye" severity="secondary" [text]="true" size="small" (onClick)="viewRole(role)" />
            <div class="role-actions">
              <p-button icon="pi pi-pencil" [rounded]="true" [text]="true" severity="info" (onClick)="editRole(role)" [pTooltip]="'COMMON.EDIT' | translate" />
              <p-button icon="pi pi-trash" [rounded]="true" [text]="true" severity="danger" (onClick)="deleteRole(role)" [pTooltip]="'COMMON.DELETE' | translate" />
            </div>
          </div>
        </div>
      }
    </div>
  }
</div>

<!-- Role Detail Dialog (read-only) -->
<p-dialog
  [header]="selectedRole() ? translateRoleName(selectedRole()!.name) : ''"
  [visible]="detailDialogVisible()"
  (visibleChange)="detailDialogVisible.set($event)"
  [modal]="true"
  [dismissableMask]="true"
  [style]="{ width: '650px' }"
  [contentStyle]="{ 'max-height': '70vh', 'overflow-y': 'auto' }"
>
  @if (selectedRole(); as role) {
    <div class="dialog-summary">
      <i [class]="getRoleIcon(role.name)"></i>
      <div>
        <strong>{{ translateRoleName(role.name) }}</strong>
        <span>{{ role.permissions.length }} {{ 'ROLES.PERMISSIONS' | translate }}</span>
      </div>
    </div>

    <p-accordion [multiple]="true" [value]="openPanels()">
      @for (group of viewPermissionGroups(); track group.module) {
        <p-accordion-panel [value]="group.module">
          <p-accordion-header>
            <div class="acc-header">
              <i [class]="getModuleIcon(group.module)"></i>
              <span>{{ translateModule(group.module) }}</span>
              <p-badge [value]="'' + group.permissions.length" severity="warn" />
            </div>
          </p-accordion-header>
          <p-accordion-content>
            <div class="perm-list">
              @for (perm of group.permissions; track perm) {
                <div class="perm-item">
                  <i class="pi pi-check-circle"></i>
                  <span>{{ translatePermission(perm) }}</span>
                </div>
              }
            </div>
          </p-accordion-content>
        </p-accordion-panel>
      }
    </p-accordion>
  }
  <ng-template #footer>
    <p-button [label]="'COMMON.CLOSE' | translate" severity="secondary" (onClick)="detailDialogVisible.set(false)" />
  </ng-template>
</p-dialog>

<!-- Create/Edit Role Dialog -->
<p-dialog
  [header]="editingRole() ? ('ROLES.EDIT_ROLE' | translate) : ('ROLES.NEW_ROLE' | translate)"
  [visible]="formDialogVisible()"
  (visibleChange)="formDialogVisible.set($event)"
  [modal]="true"
  [dismissableMask]="true"
  [style]="{ width: '800px' }"
  [contentStyle]="{ 'max-height': '75vh', 'overflow-y': 'auto' }"
>
  <div class="form-dialog-content">
    <!-- Role Name -->
    <div class="form-field">
      <label>{{ 'ROLES.ROLE_NAME' | translate }} *</label>
      <input pInputText [ngModel]="roleName()" (ngModelChange)="roleName.set($event)" [placeholder]="'ROLES.ROLE_NAME_PLACEHOLDER' | translate" />
    </div>

    <!-- Tabs: Permissions | Nav Customization -->
    <p-tabs [value]="formActiveTab()" (valueChange)="onFormTabChange($event)">
      <p-tablist>
        <p-tab [value]="0">
          <i class="pi pi-lock" style="margin-inline-end: 0.4rem"></i>
          {{ 'ROLES.SELECT_PERMISSIONS' | translate }}
          <span class="tab-badge">{{ selectedPermissions().size }}</span>
        </p-tab>
        <p-tab [value]="1">
          <i class="pi pi-th-large" style="margin-inline-end: 0.4rem"></i>
          {{ 'ROLES.NAV_CUSTOMIZATION' | translate }}
          @if (hiddenRoutes().size > 0) {
            <span class="tab-badge hidden-badge">{{ hiddenRoutes().size }}</span>
          }
        </p-tab>
      </p-tablist>

      <p-tabpanels>
        <!-- Permissions Tab -->
        <p-tabpanel [value]="0">
          <div class="permissions-section">
            <div class="permissions-header">
              <span class="perm-count">{{ selectedPermissions().size }} {{ 'ROLES.SELECTED' | translate }}</span>
            </div>

            <p-accordion [multiple]="true" [value]="formOpenPanels()">
              @for (group of allPermissionGroups(); track group.module) {
                <p-accordion-panel [value]="group.module">
                  <p-accordion-header>
                    <div class="acc-header">
                      <i [class]="getModuleIcon(group.module)"></i>
                      <span>{{ translateModule(group.module) }}</span>
                      <p-badge [value]="selectedCount(group) + '/' + group.permissions.length" [severity]="isModuleAllSelected(group) ? 'success' : isModulePartialSelected(group) ? 'warn' : 'secondary'" />
                    </div>
                  </p-accordion-header>
                  <p-accordion-content>
                    <div class="perm-select-list">
                      <!-- Select All for module -->
                      <div class="perm-select-item select-all-row">
                        <p-checkbox [binary]="true" [ngModel]="isModuleAllSelected(group)" (ngModelChange)="toggleModuleAll(group)" />
                        <label class="select-all-label" (click)="toggleModuleAll(group)">{{ 'ROLES.SELECT_ALL' | translate }} {{ translateModule(group.module) }}</label>
                      </div>
                      <!-- Individual permissions -->
                      @for (perm of group.permissions; track perm.key) {
                        <div class="perm-select-item">
                          <p-checkbox [binary]="true" [ngModel]="isPermissionSelected(perm.key)" (ngModelChange)="togglePermission(perm.key)" />
                          <label (click)="togglePermission(perm.key)">{{ translatePermission(perm.key) }}</label>
                        </div>
                      }
                    </div>
                  </p-accordion-content>
                </p-accordion-panel>
              }
            </p-accordion>
          </div>
        </p-tabpanel>

        <!-- Nav Customization Tab -->
        <p-tabpanel [value]="1">
          <div class="nav-custom-section">
            <div class="nav-custom-hint">
              <i class="pi pi-info-circle"></i>
              <span>{{ 'ROLES.NAV_HINT' | translate }}</span>
            </div>

            @if (loadingNavConfig()) {
              <div class="loading-state"><p-progressSpinner strokeWidth="3" /></div>
            } @else {
              <p-accordion [multiple]="true" [value]="navOpenPanels()">
                @for (mod of navModules; track mod.id) {
                  <p-accordion-panel [value]="mod.id">
                    <p-accordion-header>
                      <div class="acc-header">
                        <i [class]="mod.icon"></i>
                        <span>{{ mod.label | translate }}</span>
                        <p-badge [value]="navVisibleCount(mod) + '/' + navTotalCount(mod)" [severity]="isNavModuleAllVisible(mod) ? 'success' : isNavModulePartial(mod) ? 'warn' : 'danger'" />
                      </div>
                    </p-accordion-header>
                    <p-accordion-content>
                      <div class="nav-custom-list">
                        <!-- Select All for module -->
                        <div class="perm-select-item select-all-row">
                          <p-checkbox [binary]="true" [ngModel]="isNavModuleAllVisible(mod)" (ngModelChange)="toggleNavModuleAll(mod)" />
                          <label class="select-all-label" (click)="toggleNavModuleAll(mod)">{{ 'ROLES.SHOW_ALL' | translate }}</label>
                        </div>

                        @for (group of mod.groups; track group.label) {
                          <!-- Group header with toggle -->
                          <div class="nav-group-header">
                            <p-checkbox [binary]="true" [ngModel]="isNavGroupAllVisible(mod, group.label)" (ngModelChange)="toggleNavGroupAll(mod, group.label)" />
                            <label class="group-label" (click)="toggleNavGroupAll(mod, group.label)">{{ group.label | translate }}</label>
                          </div>
                          <!-- Individual nav items -->
                          @for (item of group.items; track item.route) {
                            <div class="nav-link-item" [class.hidden-link]="!isNavLinkVisible(item.route)">
                              <p-checkbox [binary]="true" [ngModel]="isNavLinkVisible(item.route)" (ngModelChange)="toggleNavLink(item.route)" />
                              <i [class]="item.icon" class="nav-item-icon" (click)="toggleNavLink(item.route)"></i>
                              <label (click)="toggleNavLink(item.route)">{{ item.label | translate }}</label>
                            </div>
                          }
                        }
                      </div>
                    </p-accordion-content>
                  </p-accordion-panel>
                }
              </p-accordion>
            }
          </div>
        </p-tabpanel>
      </p-tabpanels>
    </p-tabs>
  </div>

  <ng-template #footer>
    <p-button [label]="'COMMON.CANCEL' | translate" severity="secondary" (onClick)="formDialogVisible.set(false)" />
    <p-button
      [label]="'COMMON.SAVE' | translate"
      icon="pi pi-check"
      (onClick)="onSave()"
      [loading]="saving()"
    />
  </ng-template>
</p-dialog>
