<div class="space-y-6">
  <section class="rounded-lg border border-border bg-card/60 p-5">
    <div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
      <div>
        <h4 class="text-base font-semibold text-foreground">{{ 'settings.localApi.title' | translate }}</h4>
        <p class="mt-1 text-sm text-muted-foreground">
          Expose your client to local automation tools and scripts. Authentication is verified against your signaling server, and access is off by
          default.
        </p>
      </div>

      <span class="inline-flex items-center rounded-full border border-primary/30 bg-primary/10 px-3 py-1 text-xs font-medium text-primary">
        {{ statusLabel() }}
      </span>
    </div>
  </section>

  @if (!isElectron) {
    <section class="rounded-lg border border-border bg-secondary/30 p-5">
      <p class="text-sm text-muted-foreground">{{ 'settings.localApi.desktopOnly' | translate }}</p>
    </section>
  } @else {
    <section class="space-y-4 rounded-lg border border-border bg-card/60 p-5">
      <div>
        <h5 class="text-sm font-semibold text-foreground">{{ 'settings.localApi.server.title' | translate }}</h5>
        <p class="mt-1 text-sm text-muted-foreground">{{ 'settings.localApi.server.description' | translate }}</p>
      </div>

      <label class="flex items-start gap-3">
        <input
          type="checkbox"
          class="mt-1 h-4 w-4 rounded border-border text-primary focus:ring-primary"
          [checked]="settings().enabled"
          [disabled]="busy()"
          (change)="toggleEnabled($event)"
        />
        <span class="text-sm text-foreground">
          <span class="font-medium">{{ 'settings.localApi.server.run' | translate }}</span>
          <span class="mt-1 block text-xs text-muted-foreground">{{ 'settings.localApi.server.runHint' | translate }}</span>
        </span>
      </label>

      <label class="flex items-start gap-3">
        <input
          type="checkbox"
          class="mt-1 h-4 w-4 rounded border-border text-primary focus:ring-primary"
          [checked]="settings().docusaurusEnabled"
          [disabled]="busy() || !settings().enabled"
          (change)="toggleDocusaurus($event)"
        />
        <span class="text-sm text-foreground">
          <span class="font-medium">{{ 'settings.localApi.server.docusaurus' | translate }}</span>
          <span class="mt-1 block text-xs text-muted-foreground">{{ 'settings.localApi.server.docusaurusHint' | translate }}</span>
        </span>
      </label>

      <label class="flex items-start gap-3">
        <input
          type="checkbox"
          class="mt-1 h-4 w-4 rounded border-border text-primary focus:ring-primary"
          [checked]="settings().exposeOnLan"
          [disabled]="busy() || !settings().enabled"
          (change)="toggleExposeOnLan($event)"
        />
        <span class="text-sm text-foreground">
          <span class="font-medium">{{ 'settings.localApi.server.exposeLan' | translate }}</span>
          <span class="mt-1 block text-xs text-muted-foreground">
            {{ 'settings.localApi.server.exposeLanHint' | translate }}
          </span>
        </span>
      </label>

      <div class="grid gap-3 md:grid-cols-[200px_1fr_auto] md:items-end">
        <label class="space-y-2">
          <span class="text-xs font-semibold uppercase tracking-wider text-muted-foreground/70">{{
            'settings.localApi.server.port' | translate
          }}</span>
          <input
            type="number"
            min="1"
            max="65535"
            class="w-full rounded-lg border border-border bg-secondary px-3 py-2 text-sm text-foreground focus:outline-none focus:ring-1 focus:ring-primary"
            [value]="portText()"
            [disabled]="busy()"
            (input)="onPortInput($event)"
          />
        </label>

        <p class="text-xs text-muted-foreground">{{ 'settings.localApi.server.portHint' | translate }}</p>

        <button
          type="button"
          class="inline-flex items-center rounded-lg border border-border bg-secondary px-4 py-2 text-sm font-medium text-foreground transition-colors hover:bg-secondary/80 disabled:cursor-not-allowed disabled:opacity-60"
          [disabled]="!hasPendingPortChange() || busy()"
          (click)="savePort()"
        >
          Save port
        </button>
      </div>
    </section>

    <section class="space-y-4 rounded-lg border border-border bg-card/60 p-5">
      <div>
        <h5 class="text-sm font-semibold text-foreground">{{ 'settings.localApi.auth.title' | translate }}</h5>
        <p class="mt-1 text-sm text-muted-foreground">
          {{ 'settings.localApi.auth.description' | translate }}
        </p>
      </div>

      <textarea
        rows="4"
        spellcheck="false"
        [placeholder]="'settings.localApi.auth.placeholder' | translate"
        class="w-full rounded-lg border border-border bg-secondary px-3 py-2 font-mono text-xs text-foreground focus:outline-none focus:ring-1 focus:ring-primary"
        [value]="allowedServersText()"
        [disabled]="busy()"
        (input)="onAllowedServersInput($event)"
      ></textarea>

      <div class="flex justify-end">
        <button
          type="button"
          class="inline-flex items-center rounded-lg border border-border bg-secondary px-4 py-2 text-sm font-medium text-foreground transition-colors hover:bg-secondary/80 disabled:cursor-not-allowed disabled:opacity-60"
          [disabled]="!hasPendingAllowedServersChanges() || busy()"
          (click)="saveAllowedServers()"
        >
          Save allowed servers
        </button>
      </div>
    </section>

    <section class="space-y-4 rounded-lg border border-border bg-card/60 p-5">
      <div>
        <h5 class="text-sm font-semibold text-foreground">{{ 'settings.localApi.docs.title' | translate }}</h5>
        <p class="mt-1 text-sm text-muted-foreground">
          {{ 'settings.localApi.docs.description' | translate }}
        </p>
      </div>

      <label class="flex items-start gap-3">
        <input
          type="checkbox"
          class="mt-1 h-4 w-4 rounded border-border text-primary focus:ring-primary"
          [checked]="settings().scalarEnabled"
          [disabled]="busy() || !settings().enabled"
          (change)="toggleScalar($event)"
        />
        <span class="text-sm text-foreground">
          <span class="font-medium">{{ 'settings.localApi.docs.scalar' | translate }}</span>
          <span class="mt-1 block text-xs text-muted-foreground">
            {{ 'settings.localApi.docs.scalarHint' | translate }}
          </span>
        </span>
      </label>

      <div class="flex flex-wrap gap-3">
        <button
          type="button"
          class="inline-flex items-center rounded-lg border border-primary/40 bg-primary/10 px-4 py-2 text-sm font-medium text-primary transition-colors hover:bg-primary/20 disabled:cursor-not-allowed disabled:opacity-60"
          [disabled]="status().status !== 'running' || !settings().scalarEnabled"
          (click)="openDocs()"
        >
          Open API docs in browser
        </button>

        <button
          type="button"
          class="inline-flex items-center rounded-lg border border-primary/40 bg-primary/10 px-4 py-2 text-sm font-medium text-primary transition-colors hover:bg-primary/20 disabled:cursor-not-allowed disabled:opacity-60"
          [disabled]="busy()"
          (click)="openDocusaurusDocs()"
        >
          Open app docs in browser
        </button>

        <button
          type="button"
          class="inline-flex items-center rounded-lg border border-border bg-secondary px-4 py-2 text-sm font-medium text-foreground transition-colors hover:bg-secondary/80 disabled:cursor-not-allowed disabled:opacity-60"
          [disabled]="!status().baseUrl"
          (click)="copyBaseUrl()"
        >
          Copy base URL
        </button>
      </div>

      @if (status().baseUrl) {
        <p class="text-xs text-muted-foreground">
          {{ 'settings.localApi.docs.listeningAt' | translate }} <code class="rounded bg-secondary px-2 py-1">{{ status().baseUrl }}</code>
        </p>
      }
    </section>

    @if (errorMessage(); as message) {
      <p class="rounded-lg border border-destructive/40 bg-destructive/10 px-4 py-3 text-sm text-destructive">{{ message }}</p>
    }
  }
</div>
