<div class="max-w-3xl space-y-5">
  <!-- Server Endpoints -->
  <section>
    <div class="flex items-center justify-between mb-3">
      <div class="flex items-center gap-2">
        <ng-icon
          name="lucideGlobe"
          class="w-5 h-5 text-muted-foreground"
        />
        <h4 class="text-sm font-semibold text-foreground">{{ 'settings.network.serverEndpoints.title' | translate }}</h4>
      </div>
      <div class="flex items-center gap-2">
        @if (hasMissingDefaultServers()) {
          <button
            type="button"
            (click)="restoreDefaultServers()"
            class="px-2.5 py-1 text-xs bg-secondary text-foreground rounded-lg hover:bg-secondary/80 transition-colors"
          >
            {{ 'settings.network.serverEndpoints.restoreDefaults' | translate }}
          </button>
        }
        <button
          type="button"
          (click)="testAllServers()"
          [disabled]="isTesting()"
          class="flex items-center gap-1.5 px-2.5 py-1 text-xs bg-secondary text-foreground rounded-lg hover:bg-secondary/80 transition-colors disabled:opacity-50"
        >
          <ng-icon
            name="lucideRefreshCw"
            class="w-3.5 h-3.5"
            [class.animate-spin]="isTesting()"
          />
          {{ 'settings.network.serverEndpoints.testAll' | translate }}
        </button>
      </div>
    </div>

    <p class="text-xs text-muted-foreground mb-3">
      {{ 'settings.network.serverEndpoints.descriptionModal' | translate }}
    </p>

    @if (provisionNotice(); as notice) {
      <div class="mb-3 rounded-lg border border-border bg-secondary/40 px-3 py-2 text-xs text-foreground">
        {{
          'auth.provision.usernameCollision'
            | translate
              : {
                  serverName: notice.serverName,
                  preferredUsername: notice.preferredUsername,
                  provisionedUsername: notice.provisionedUsername
                }
        }}
        <button
          type="button"
          class="ml-2 text-primary hover:underline"
          (click)="dismissProvisionNotice()"
        >
          {{ 'common.dismiss' | translate }}
        </button>
      </div>
    }

    <!-- Server List -->
    <div class="space-y-2 mb-3">
      @for (server of servers(); track server.id) {
        <div
          class="flex items-center gap-3 p-2.5 rounded-lg border transition-colors"
          [class.border-primary]="server.isActive"
          [class.bg-primary/5]="server.isActive"
          [class.border-border]="!server.isActive"
          [class.bg-secondary/30]="!server.isActive"
        >
          <div
            class="w-2.5 h-2.5 rounded-full flex-shrink-0"
            [class.bg-green-500]="server.status === 'online'"
            [class.bg-red-500]="server.status === 'offline'"
            [class.bg-yellow-500]="server.status === 'checking'"
            [class.bg-muted]="server.status === 'unknown'"
            [class.bg-orange-500]="server.status === 'incompatible'"
          ></div>
          <div class="flex-1 min-w-0">
            <div class="flex items-center gap-2">
              <span class="text-sm font-medium text-foreground truncate">{{ server.name }}</span>
              @if (server.isActive) {
                <span class="text-[10px] bg-primary text-primary-foreground px-1.5 py-0.5 rounded-full">{{
                  'settings.network.serverEndpoints.active' | translate
                }}</span>
              }
            </div>
            <p class="text-xs text-muted-foreground truncate">{{ server.url }}</p>
            @if (server.latency !== undefined && server.status === 'online') {
              <p class="text-[10px] text-muted-foreground">{{ server.latency }}ms</p>
            }
            <p class="text-[10px] text-muted-foreground">{{ authStatusKey(server.url) | translate }}</p>
            @if (server.status === 'incompatible') {
              <p class="text-[10px] text-destructive">{{ 'settings.network.serverEndpoints.incompatible' | translate }}</p>
            }
          </div>
          <div class="flex items-center gap-1 flex-shrink-0">
            @if (!signalServerAuth.hasValidCredential(server.url)) {
              <button
                type="button"
                (click)="authorizeServer(server.url)"
                class="px-2 py-1 text-[10px] rounded-lg bg-secondary text-foreground hover:bg-secondary/80 transition-colors"
              >
                {{ 'settings.network.serverEndpoints.auth.signIn' | translate }}
              </button>
            }
            @if (!server.isActive && server.status !== 'incompatible') {
              <button
                type="button"
                (click)="setActiveServer(server.id)"
                class="grid h-8 w-8 place-items-center rounded-lg transition-colors hover:bg-secondary"
                [title]="'settings.network.serverEndpoints.activate' | translate"
              >
                <ng-icon
                  name="lucideCheck"
                  class="w-3.5 h-3.5 text-muted-foreground hover:text-primary"
                />
              </button>
            }
            @if (server.isActive && hasMultipleActiveServers()) {
              <button
                type="button"
                (click)="deactivateServer(server.id)"
                class="grid h-8 w-8 place-items-center rounded-lg transition-colors hover:bg-secondary"
                [title]="'settings.network.serverEndpoints.deactivate' | translate"
              >
                <ng-icon
                  name="lucideX"
                  class="w-3.5 h-3.5 text-muted-foreground hover:text-foreground"
                />
              </button>
            }
            @if (hasMultipleServers()) {
              <button
                type="button"
                (click)="removeServer(server.id)"
                class="grid h-8 w-8 place-items-center rounded-lg transition-colors hover:bg-destructive/10"
                [title]="'settings.network.serverEndpoints.removeShort' | translate"
              >
                <ng-icon
                  name="lucideTrash2"
                  class="w-3.5 h-3.5 text-muted-foreground hover:text-destructive"
                />
              </button>
            }
          </div>
        </div>
      }
    </div>

    <!-- Add New Server -->
    <div class="border-t border-border pt-3">
      <h4 class="text-xs font-medium text-foreground mb-2">{{ 'settings.network.serverEndpoints.addNew' | translate }}</h4>
      <div class="flex gap-2">
        <div class="flex-1 space-y-1.5">
          <input
            type="text"
            appSelectOnFocus
            [(ngModel)]="newServerName"
            [placeholder]="'settings.network.serverEndpoints.serverNamePlaceholderShort' | translate"
            class="w-full px-3 py-1.5 bg-secondary rounded-lg border border-border text-foreground text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary"
          />
          <input
            type="url"
            appSelectOnFocus
            appSubmitOnEnter
            (submitOnEnter)="addServer()"
            [(ngModel)]="newServerUrl"
            [placeholder]="'settings.network.serverEndpoints.serverUrlPlaceholder' | translate"
            class="w-full px-3 py-1.5 bg-secondary rounded-lg border border-border text-foreground text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary"
          />
        </div>
        <button
          type="button"
          data-testid="add-signal-server-button"
          (click)="addServer()"
          [disabled]="!newServerName || !newServerUrl"
          class="grid h-9 w-9 place-items-center self-end rounded-lg bg-primary text-primary-foreground transition-colors hover:bg-primary/90 disabled:cursor-not-allowed disabled:opacity-50"
        >
          <ng-icon
            name="lucidePlus"
            class="w-4 h-4"
          />
        </button>
      </div>
      @if (addError()) {
        <p class="text-xs text-destructive mt-1.5">{{ addError() }}</p>
      }
    </div>
  </section>

  <!-- Connection Settings -->
  <section>
    <div class="flex items-center gap-2 mb-3">
      <ng-icon
        name="lucideServer"
        class="w-5 h-5 text-muted-foreground"
      />
      <h4 class="text-sm font-semibold text-foreground">{{ 'settings.network.connection.titleShort' | translate }}</h4>
    </div>
    <div class="space-y-3">
      <div class="flex items-center justify-between">
        <div>
          <p class="text-sm font-medium text-foreground">{{ 'settings.network.connection.autoReconnect.label' | translate }}</p>
          <p class="text-xs text-muted-foreground">{{ 'settings.network.connection.autoReconnect.descriptionShort' | translate }}</p>
        </div>
        <label class="relative inline-flex items-center cursor-pointer">
          <input
            type="checkbox"
            [(ngModel)]="autoReconnect"
            (change)="saveConnectionSettings()"
            class="sr-only peer"
          />
          <div
            class="w-10 h-5 bg-secondary rounded-full peer peer-checked:bg-primary peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:rounded-full after:h-4 after:w-4 after:transition-all"
          ></div>
        </label>
      </div>
      <div class="flex items-center justify-between">
        <div>
          <p class="text-sm font-medium text-foreground">{{ 'settings.network.connection.searchAllServers.label' | translate }}</p>
          <p class="text-xs text-muted-foreground">{{ 'settings.network.connection.searchAllServers.descriptionShort' | translate }}</p>
        </div>
        <label class="relative inline-flex items-center cursor-pointer">
          <input
            type="checkbox"
            [(ngModel)]="searchAllServers"
            (change)="saveConnectionSettings()"
            class="sr-only peer"
          />
          <div
            class="w-10 h-5 bg-secondary rounded-full peer peer-checked:bg-primary peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:rounded-full after:h-4 after:w-4 after:transition-all"
          ></div>
        </label>
      </div>
    </div>
  </section>

  <!-- ICE Server Settings (STUN / TURN) -->
  <app-ice-server-settings />
</div>
