<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">Desktop app updates</h4>
        <p class="mt-1 text-sm text-muted-foreground">
          Use a hosted release manifest to check for new packaged desktop builds and apply them after a restart.
        </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">Automatic updates are only available in the packaged Electron desktop app.</p>
    </section>
  } @else {
    <section class="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
      <div class="rounded-lg border border-border bg-secondary/20 p-4">
        <p class="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground/70">Installed</p>
        <p class="mt-2 text-lg font-semibold text-foreground">{{ state().currentVersion }}</p>
      </div>

      <div class="rounded-lg border border-border bg-secondary/20 p-4">
        <p class="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground/70">Latest in manifest</p>
        <p class="mt-2 text-lg font-semibold text-foreground">{{ state().latestVersion || 'Unknown' }}</p>
      </div>

      <div class="rounded-lg border border-border bg-secondary/20 p-4">
        <p class="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground/70">Target version</p>
        <p class="mt-2 text-lg font-semibold text-foreground">{{ state().targetVersion || 'Automatic' }}</p>
      </div>

      <div class="rounded-lg border border-border bg-secondary/20 p-4">
        <p class="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground/70">Last checked</p>
        <p class="mt-2 text-sm font-medium text-foreground">
          {{ state().lastCheckedAt ? (state().lastCheckedAt | date: 'medium') : 'Not checked yet' }}
        </p>
      </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">Update policy</h5>
        <p class="mt-1 text-sm text-muted-foreground">
          Choose whether the app tracks the newest release, stays on a specific release, or turns updates off entirely.
        </p>
      </div>

      <div class="grid gap-4 md:grid-cols-2">
        <label class="space-y-2">
          <span class="text-xs font-semibold uppercase tracking-wider text-muted-foreground/70">Mode</span>
          <select
            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]="state().autoUpdateMode"
            (change)="onModeChange($event)"
          >
            <option value="auto">Newest release</option>
            <option value="version">Specific version</option>
            <option value="off">Turn off auto updates</option>
          </select>
        </label>

        <label class="space-y-2">
          <span class="text-xs font-semibold uppercase tracking-wider text-muted-foreground/70">Pinned version</span>
          <select
            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 disabled:cursor-not-allowed disabled:opacity-60"
            [disabled]="state().autoUpdateMode !== 'version' || state().availableVersions.length === 0"
            [value]="state().preferredVersion || ''"
            (change)="onVersionChange($event)"
          >
            <option value="">Choose a release...</option>
            @for (version of state().availableVersions; track version) {
              <option [value]="version">{{ version }}</option>
            }
          </select>
        </label>
      </div>

      <div class="rounded-lg border border-border bg-secondary/20 p-4">
        <p class="text-sm font-medium text-foreground">Status</p>
        <p class="mt-1 text-sm text-muted-foreground">
          {{ state().statusMessage || 'Waiting for release information from the active server.' }}
        </p>
      </div>

      <div class="flex flex-wrap gap-3">
        <button
          type="button"
          (click)="refreshReleaseInfo()"
          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"
        >
          Refresh release info
        </button>

        @if (state().restartRequired) {
          <button
            type="button"
            (click)="restartNow()"
            class="inline-flex items-center rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
          >
            Restart to update
          </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">Manifest URL priority</h5>
        <p class="mt-1 text-sm text-muted-foreground">
          Add one manifest URL per line. The app tries them from top to bottom and falls back to the next URL when a manifest cannot be loaded or is
          invalid.
        </p>
      </div>

      <div class="rounded-lg border border-border bg-secondary/20 p-4 text-sm text-muted-foreground">
        <p class="font-medium text-foreground">
          {{ isUsingConnectedServerDefaults() ? 'Using connected server defaults' : 'Using saved manifest URLs' }}
        </p>
        <p class="mt-1">When this list is empty, the app automatically uses manifest URLs reported by your configured servers.</p>
      </div>

      <label class="block space-y-2">
        <span class="text-xs font-semibold uppercase tracking-wider text-muted-foreground/70">Manifest URLs</span>
        <textarea
          rows="6"
          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]="manifestUrlsText()"
          (input)="onManifestUrlsInput($event)"
          placeholder="https://example.com/releases/latest/download/release-manifest.json"
        ></textarea>
      </label>

      @if (!state().defaultManifestUrls.length && isUsingConnectedServerDefaults()) {
        <p class="text-sm text-muted-foreground">None of your configured servers currently report a manifest URL.</p>
      }

      <div class="flex flex-wrap gap-3">
        <button
          type="button"
          (click)="saveManifestUrls()"
          class="inline-flex items-center rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
        >
          Save manifest URLs
        </button>

        <button
          type="button"
          (click)="useConnectedServerDefaults()"
          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"
        >
          Use connected server defaults
        </button>
      </div>
    </section>

    @if (state().serverBlocked) {
      <section class="rounded-lg border border-red-500/30 bg-red-500/10 p-5">
        <h5 class="text-sm font-semibold text-foreground">Server update required</h5>
        <p class="mt-1 text-sm text-muted-foreground">{{ state().serverBlockMessage }}</p>
        <div class="mt-3 grid gap-2 text-xs text-muted-foreground sm:grid-cols-2">
          <div>
            <p class="font-semibold uppercase tracking-wider text-muted-foreground/70">Connected server</p>
            <p class="mt-1">{{ state().serverVersion || 'Not reported' }}</p>
          </div>

          <div>
            <p class="font-semibold uppercase tracking-wider text-muted-foreground/70">Required minimum</p>
            <p class="mt-1">{{ state().minimumServerVersion || 'Unknown' }}</p>
          </div>
        </div>
      </section>
    }

    <section class="rounded-lg border border-border bg-secondary/20 p-4">
      <p class="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground/70">Resolved manifest URL</p>
      <p class="mt-2 break-all text-sm text-muted-foreground">{{ state().manifestUrl || 'No working manifest URL has been resolved yet.' }}</p>
    </section>
  }
</div>
