<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.updates.desktop.title' | translate }}</h4>
        <p class="mt-1 text-sm text-muted-foreground">
          {{ 'settings.updates.desktop.description' | translate }}
        </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 (isCapacitor) {
    <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.updates.mobile.title' | translate }}</h4>
          <p class="mt-1 text-sm text-muted-foreground">
            {{ 'settings.updates.mobile.description' | translate }}
          </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">
          {{ mobileStatusLabel() }}
        </span>
      </div>
    </section>

    @if (!mobileState().isSupported) {
      <section class="rounded-lg border border-border bg-secondary/30 p-5">
        <p class="text-sm text-muted-foreground">{{ 'settings.updates.mobile.unsupported' | translate }}</p>
      </section>
    } @else {
      <section class="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
        <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">{{ 'settings.updates.installed' | translate }}</p>
          <p class="mt-2 text-lg font-semibold text-foreground">{{ mobileState().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">{{ 'settings.updates.storeVersion' | translate }}</p>
          <p class="mt-2 text-lg font-semibold text-foreground">{{ mobileState().availableVersion || ('settings.updates.unknown' | translate) }}</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">{{ 'settings.updates.lastChecked' | translate }}</p>
          <p class="mt-2 text-sm font-medium text-foreground">
            {{ mobileState().lastCheckedAt ? (mobileState().lastCheckedAt | date: 'medium') : ('settings.updates.notCheckedYet' | translate) }}
          </p>
        </div>
      </section>

      <section class="space-y-4 rounded-lg border border-border bg-card/60 p-5">
        <div class="rounded-lg border border-border bg-secondary/20 p-4">
          <p class="text-sm font-medium text-foreground">{{ 'settings.updates.status' | translate }}</p>
          <p class="mt-1 text-sm text-muted-foreground">
            {{ mobileState().statusMessage || ('settings.updates.waitingMobile' | translate) }}
          </p>
        </div>

        <div class="flex flex-wrap gap-3">
          <button
            type="button"
            (click)="refreshMobileReleaseInfo()"
            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"
          >
            Check for updates
          </button>

          @if (mobileState().status === 'update-available') {
            <button
              type="button"
              (click)="openMobileAppStore()"
              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"
            >
              Open app store
            </button>

            @if (mobileState().immediateUpdateAllowed || mobileState().flexibleUpdateAllowed) {
              <button
                type="button"
                (click)="installMobileUpdateNow()"
                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"
              >
                Install update
              </button>
            }

            @if (mobileState().flexibleUpdateAllowed && mobileState().status === 'downloading') {
              <button
                type="button"
                (click)="completeMobileFlexibleUpdate()"
                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 finish update
              </button>
            }
          }
        </div>
      </section>
    }
  }

  @if (!isElectron && !isCapacitor) {
    <section class="rounded-lg border border-border bg-secondary/30 p-5">
      <p class="text-sm text-muted-foreground">{{ 'settings.updates.unsupported' | translate }}</p>
    </section>
  }

  @if (isElectron) {
    <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">{{ 'settings.updates.installed' | translate }}</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">
          {{ 'settings.updates.latestInManifest' | translate }}
        </p>
        <p class="mt-2 text-lg font-semibold text-foreground">{{ state().latestVersion || ('settings.updates.unknown' | translate) }}</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">{{ 'settings.updates.targetVersion' | translate }}</p>
        <p class="mt-2 text-lg font-semibold text-foreground">{{ state().targetVersion || ('settings.updates.automatic' | translate) }}</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">{{ 'settings.updates.lastChecked' | translate }}</p>
        <p class="mt-2 text-sm font-medium text-foreground">
          {{ state().lastCheckedAt ? (state().lastCheckedAt | date: 'medium') : ('settings.updates.notCheckedYet' | translate) }}
        </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">{{ 'settings.updates.policy.title' | translate }}</h5>
        <p class="mt-1 text-sm text-muted-foreground">
          {{ 'settings.updates.policy.description' | translate }}
        </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">{{
            'settings.updates.policy.mode' | translate
          }}</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">{{ 'settings.updates.policy.modeAuto' | translate }}</option>
            <option value="version">{{ 'settings.updates.policy.modeVersion' | translate }}</option>
            <option value="off">{{ 'settings.updates.policy.modeOff' | translate }}</option>
          </select>
        </label>

        <label class="space-y-2">
          <span class="text-xs font-semibold uppercase tracking-wider text-muted-foreground/70">{{
            'settings.updates.policy.pinnedVersion' | translate
          }}</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="">{{ 'settings.updates.policy.chooseRelease' | translate }}</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">{{ 'settings.updates.status' | translate }}</p>
        <p class="mt-1 text-sm text-muted-foreground">
          {{ state().statusMessage || ('settings.updates.waitingDesktop' | translate) }}
        </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">{{ 'settings.updates.manifest.title' | translate }}</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()
              ? ('settings.updates.manifest.usingDefaults' | translate)
              : ('settings.updates.manifest.usingSaved' | translate)
          }}
        </p>
        <p class="mt-1">{{ 'settings.updates.manifest.emptyHint' | translate }}</p>
      </div>

      <label class="block space-y-2">
        <span class="text-xs font-semibold uppercase tracking-wider text-muted-foreground/70">{{
          'settings.updates.manifest.urlsLabel' | translate
        }}</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]="'settings.updates.manifest.placeholder' | translate"
        ></textarea>
      </label>

      @if (!state().defaultManifestUrls.length && isUsingConnectedServerDefaults()) {
        <p class="text-sm text-muted-foreground">{{ 'settings.updates.manifest.noServerManifest' | translate }}</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">{{ 'settings.updates.serverBlocked.title' | translate }}</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">
              {{ 'settings.updates.serverBlocked.connectedServer' | translate }}
            </p>
            <p class="mt-1">{{ state().serverVersion || ('settings.updates.serverBlocked.notReported' | translate) }}</p>
          </div>

          <div>
            <p class="font-semibold uppercase tracking-wider text-muted-foreground/70">
              {{ 'settings.updates.serverBlocked.requiredMinimum' | translate }}
            </p>
            <p class="mt-1">{{ state().minimumServerVersion || ('settings.updates.unknown' | translate) }}</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">
        {{ 'settings.updates.resolvedManifest.title' | translate }}
      </p>
      <p class="mt-2 break-all text-sm text-muted-foreground">{{ state().manifestUrl || ('settings.updates.resolvedManifest.empty' | translate) }}</p>
    </section>
  }
</div>
