<div class="p-6 max-w-2xl mx-auto">
  <div class="flex items-center gap-3 mb-6">
    <button
      type="button"
      (click)="goBack()"
      class="grid h-9 w-9 place-items-center rounded-lg transition-colors hover:bg-secondary"
      [title]="'settings.standalone.goBack' | translate"
    >
      <ng-icon
        name="lucideArrowLeft"
        class="w-5 h-5 text-muted-foreground"
      />
    </button>
    <ng-icon
      name="lucideSettings"
      class="w-6 h-6 text-primary"
    />
    <h1 class="text-2xl font-bold text-foreground">{{ 'settings.title' | translate }}</h1>
  </div>

  <button
    type="button"
    (click)="openPluginStore()"
    class="mb-6 flex items-center gap-2 rounded-lg bg-secondary px-3 py-1.5 text-sm text-foreground transition-colors hover:bg-secondary/80"
  >
    <ng-icon
      name="lucidePackage"
      class="h-4 w-4"
    />
    {{ 'settings.standalone.pluginStore' | translate }}
  </button>

  <!-- Server Endpoints Section -->
  <div class="bg-card border border-border rounded-lg p-6 mb-6">
    <div class="flex items-center justify-between mb-4">
      <div class="flex items-center gap-2">
        <ng-icon
          name="lucideGlobe"
          class="w-5 h-5 text-muted-foreground"
        />
        <h2 class="text-lg font-semibold text-foreground">{{ 'settings.network.serverEndpoints.title' | translate }}</h2>
      </div>
      <div class="flex items-center gap-2">
        @if (hasMissingDefaultServers()) {
          <button
            type="button"
            (click)="restoreDefaultServers()"
            class="px-3 py-1.5 text-sm bg-secondary text-foreground rounded-lg hover:bg-secondary/80 transition-colors"
          >
            Restore Defaults
          </button>
        }
        <button
          type="button"
          (click)="testAllServers()"
          [disabled]="isTesting()"
          class="flex items-center gap-2 px-3 py-1.5 text-sm bg-secondary text-foreground rounded-lg hover:bg-secondary/80 transition-colors disabled:opacity-50"
        >
          <ng-icon
            name="lucideRefreshCw"
            class="w-4 h-4"
            [class.animate-spin]="isTesting()"
          />
          Test All
        </button>
      </div>
    </div>

    <p class="text-sm text-muted-foreground mb-4">
      {{ 'settings.network.serverEndpoints.description' | translate }}
    </p>

    <!-- Server List -->
    <div class="space-y-3 mb-4">
      @for (server of servers(); track server.id) {
        <div
          class="flex items-center gap-3 p-3 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"
        >
          <!-- Status Indicator -->
          <div
            class="w-3 h-3 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'"
            [title]="server.status"
          ></div>

          <!-- Server Info -->
          <div class="flex-1 min-w-0">
            <div class="flex items-center gap-2">
              <span class="font-medium text-foreground truncate">{{ server.name }}</span>
              @if (server.isActive) {
                <span class="text-xs bg-primary text-primary-foreground px-2 py-0.5 rounded-full">{{
                  'settings.network.serverEndpoints.active' | translate
                }}</span>
              }
            </div>
            <p class="text-sm text-muted-foreground truncate">{{ server.url }}</p>
            @if (server.latency !== undefined && server.status === 'online') {
              <p class="text-xs text-muted-foreground">{{ server.latency }}ms</p>
            }
            @if (server.status === 'incompatible') {
              <p class="text-xs text-destructive">{{ 'settings.network.serverEndpoints.incompatible' | translate }}</p>
            }
          </div>

          <!-- Actions -->
          <div class="flex items-center gap-2 flex-shrink-0">
            @if (!server.isActive && server.status !== 'incompatible') {
              <button
                type="button"
                (click)="setActiveServer(server.id)"
                class="grid h-9 w-9 place-items-center rounded-lg transition-colors hover:bg-secondary"
                [title]="'settings.network.serverEndpoints.activate' | translate"
              >
                <ng-icon
                  name="lucideCheck"
                  class="w-4 h-4 text-muted-foreground hover:text-primary"
                />
              </button>
            }
            @if (server.isActive && hasMultipleActiveServers()) {
              <button
                type="button"
                (click)="deactivateServer(server.id)"
                class="grid h-9 w-9 place-items-center rounded-lg transition-colors hover:bg-secondary"
                [title]="'settings.network.serverEndpoints.deactivate' | translate"
              >
                <ng-icon
                  name="lucideX"
                  class="w-4 h-4 text-muted-foreground hover:text-foreground"
                />
              </button>
            }
            @if (hasMultipleServers()) {
              <button
                type="button"
                (click)="removeServer(server.id)"
                class="grid h-9 w-9 place-items-center rounded-lg transition-colors hover:bg-destructive/10"
                [title]="'settings.network.serverEndpoints.remove' | translate"
              >
                <ng-icon
                  name="lucideTrash2"
                  class="w-4 h-4 text-muted-foreground hover:text-destructive"
                />
              </button>
            }
          </div>
        </div>
      }
    </div>

    <!-- Add New Server -->
    <div class="border-t border-border pt-4">
      <h3 class="text-sm font-medium text-foreground mb-3">{{ 'settings.network.serverEndpoints.addNew' | translate }}</h3>
      <div class="flex gap-3">
        <div class="flex-1 space-y-2">
          <input
            type="text"
            appSelectOnFocus
            [(ngModel)]="newServerName"
            [placeholder]="'settings.network.serverEndpoints.serverNamePlaceholder' | translate"
            class="w-full px-3 py-2 bg-secondary rounded-lg border border-border text-foreground 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-2 bg-secondary rounded-lg border border-border text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary"
          />
        </div>
        <button
          type="button"
          (click)="addServer()"
          [disabled]="!newServerName || !newServerUrl"
          class="grid h-10 w-10 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-5 h-5"
          />
        </button>
      </div>
      @if (addError()) {
        <p class="text-sm text-destructive mt-2">{{ addError() }}</p>
      }
    </div>
  </div>

  <!-- Connection Settings -->
  <div class="bg-card border border-border rounded-lg p-6 mb-6">
    <div class="flex items-center gap-2 mb-4">
      <ng-icon
        name="lucideServer"
        class="w-5 h-5 text-muted-foreground"
      />
      <h2 class="text-lg font-semibold text-foreground">{{ 'settings.network.connection.title' | translate }}</h2>
    </div>

    <div class="space-y-4">
      <div class="flex items-center justify-between">
        <div>
          <p class="font-medium text-foreground">{{ 'settings.network.connection.autoReconnect.label' | translate }}</p>
          <p class="text-sm text-muted-foreground">{{ 'settings.network.connection.autoReconnect.description' | 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-11 h-6 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-5 after:w-5 after:transition-all"
          ></div>
        </label>
      </div>

      <div class="flex items-center justify-between">
        <div>
          <p class="font-medium text-foreground">{{ 'settings.network.connection.searchAllServers.label' | translate }}</p>
          <p class="text-sm text-muted-foreground">{{ 'settings.network.connection.searchAllServers.description' | 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-11 h-6 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-5 after:w-5 after:transition-all"
          ></div>
        </label>
      </div>
    </div>
  </div>

  <!-- Voice Settings -->
  <div class="bg-card border border-border rounded-lg p-6">
    <div class="flex items-center gap-2 mb-4">
      <ng-icon
        name="lucideAudioLines"
        class="w-5 h-5 text-muted-foreground"
      />
      <h2 class="text-lg font-semibold text-foreground">{{ 'settings.voice.standalone.title' | translate }}</h2>
    </div>

    <div class="space-y-4">
      <!-- Notification Volume -->
      <div>
        <div class="flex items-center justify-between mb-2">
          <div>
            <p class="font-medium text-foreground">{{ 'settings.voice.standalone.notificationVolume.label' | translate }}</p>
            <p class="text-sm text-muted-foreground">{{ 'settings.voice.standalone.notificationVolume.description' | translate }}</p>
          </div>
          <span class="text-sm font-medium text-muted-foreground tabular-nums w-10 text-right">
            {{ audioService.notificationVolume() * 100 | number: '1.0-0' }}%
          </span>
        </div>
        <div class="flex items-center gap-3">
          <input
            type="range"
            min="0"
            max="1"
            step="0.01"
            [ngModel]="audioService.notificationVolume()"
            (ngModelChange)="onNotificationVolumeChange($event)"
            class="flex-1 h-2 rounded-full appearance-none bg-secondary accent-primary cursor-pointer"
          />
          <button
            type="button"
            (click)="previewNotificationSound()"
            class="px-3 py-1.5 text-sm bg-secondary text-foreground rounded-lg hover:bg-secondary/80 transition-colors"
            [title]="'settings.voice.volume.previewTitle' | translate"
          >
            Test
          </button>
        </div>
      </div>

      <div class="flex items-center justify-between">
        <div>
          <p class="font-medium text-foreground">{{ 'settings.voice.quality.noiseReduction.label' | translate }}</p>
          <p class="text-sm text-muted-foreground">{{ 'settings.voice.quality.noiseReduction.descriptionLong' | translate }}</p>
        </div>
        <label class="relative inline-flex items-center cursor-pointer">
          <input
            type="checkbox"
            [(ngModel)]="noiseReduction"
            (change)="saveVoiceSettings()"
            class="sr-only peer"
          />
          <div
            class="w-11 h-6 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-5 after:w-5 after:transition-all"
          ></div>
        </label>
      </div>
    </div>
  </div>
</div>
