@if (isOpen()) {
  <!-- Backdrop -->
  <div
    class="fixed inset-0 z-[90] bg-black/80 backdrop-blur-sm transition-opacity duration-200"
    [class.opacity-100]="animating()"
    [class.opacity-0]="!animating()"
    (click)="onBackdropClick()"
  ></div>

  <!-- Modal -->
  <div class="fixed inset-0 z-[91] flex items-center justify-center p-4 pointer-events-none">
    <div
      class="pointer-events-auto bg-card border border-border rounded-xl shadow-2xl w-full max-w-4xl h-[min(680px,85vh)] flex overflow-hidden transition-all duration-200"
      [class.scale-100]="animating()"
      [class.opacity-100]="animating()"
      [class.scale-95]="!animating()"
      [class.opacity-0]="!animating()"
      (click)="$event.stopPropagation()"
    >
      <!-- Side Navigation -->
      <nav class="w-52 flex-shrink-0 bg-secondary/40 border-r border-border flex flex-col">
        <div class="p-4 border-b border-border">
          <h2 class="text-lg font-semibold text-foreground">Settings</h2>
        </div>

        <div class="flex-1 overflow-y-auto py-2">
          <!-- Global section -->
          <p
            class="px-4 py-1.5 text-[11px] font-semibold text-muted-foreground/70 uppercase tracking-wider"
          >
            General
          </p>
          @for (page of globalPages; track page.id) {
            <button
              (click)="navigate(page.id)"
              class="w-full flex items-center gap-2.5 px-4 py-2 text-sm transition-colors"
              [class.bg-primary/10]="activePage() === page.id"
              [class.text-primary]="activePage() === page.id"
              [class.font-medium]="activePage() === page.id"
              [class.text-foreground]="activePage() !== page.id"
              [class.hover:bg-secondary]="activePage() !== page.id"
            >
              <ng-icon [name]="page.icon" class="w-4 h-4" />
              {{ page.label }}
            </button>
          }

          <!-- Server section -->
          @if (savedRooms().length > 0) {
            <div class="mt-3 pt-3 border-t border-border">
              <p
                class="px-4 py-1.5 text-[11px] font-semibold text-muted-foreground/70 uppercase tracking-wider"
              >
                Server
              </p>

              <!-- Server selector -->
              <div class="px-3 pb-2">
                <select
                  class="w-full px-2 py-1.5 bg-secondary rounded-lg border border-border text-foreground text-xs focus:outline-none focus:ring-1 focus:ring-primary"
                  [value]="selectedServerId() || ''"
                  (change)="onServerSelect($event)"
                >
                  <option value="">Select a server…</option>
                  @for (room of savedRooms(); track room.id) {
                    <option [value]="room.id">{{ room.name }}</option>
                  }
                </select>
              </div>

              @if (selectedServerId() && isSelectedServerAdmin()) {
                @for (page of serverPages; track page.id) {
                  <button
                    (click)="navigate(page.id)"
                    class="w-full flex items-center gap-2.5 px-4 py-2 text-sm transition-colors"
                    [class.bg-primary/10]="activePage() === page.id"
                    [class.text-primary]="activePage() === page.id"
                    [class.font-medium]="activePage() === page.id"
                    [class.text-foreground]="activePage() !== page.id"
                    [class.hover:bg-secondary]="activePage() !== page.id"
                  >
                    <ng-icon [name]="page.icon" class="w-4 h-4" />
                    {{ page.label }}
                  </button>
                }
              }
            </div>
          }
        </div>
      </nav>

      <!-- Content -->
      <div class="flex-1 flex flex-col min-w-0">
        <!-- Header -->
        <div
          class="flex items-center justify-between px-6 py-4 border-b border-border flex-shrink-0"
        >
          <h3 class="text-lg font-semibold text-foreground">
            @switch (activePage()) {
              @case ('network') {
                Network
              }
              @case ('voice') {
                Voice & Audio
              }
              @case ('server') {
                Server Settings
              }
              @case ('members') {
                Members
              }
              @case ('bans') {
                Bans
              }
              @case ('permissions') {
                Permissions
              }
            }
          </h3>
          <button
            (click)="close()"
            class="p-2 hover:bg-secondary rounded-lg transition-colors text-muted-foreground hover:text-foreground"
          >
            <ng-icon name="lucideX" class="w-5 h-5" />
          </button>
        </div>

        <!-- Scrollable Content Area -->
        <div class="flex-1 overflow-y-auto p-6">
          @switch (activePage()) {
            @case ('network') {
              <app-network-settings />
            }
            @case ('voice') {
              <app-voice-settings />
            }
            @case ('server') {
              <app-server-settings
                [server]="selectedServer()"
                [isAdmin]="isSelectedServerAdmin()"
              />
            }
            @case ('members') {
              <app-members-settings
                [server]="selectedServer()"
                [isAdmin]="isSelectedServerAdmin()"
              />
            }
            @case ('bans') {
              <app-bans-settings
                [server]="selectedServer()"
                [isAdmin]="isSelectedServerAdmin()"
              />
            }
            @case ('permissions') {
              <app-permissions-settings
                #permissionsComp
                [server]="selectedServer()"
                [isAdmin]="isSelectedServerAdmin()"
              />
            }
          }
        </div>
      </div>
    </div>
  </div>
}