<div class="max-w-4xl space-y-5">
  <section class="rounded-lg border border-border bg-card/40 p-5">
    <div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
      <div class="flex items-start gap-3">
        <div class="grid h-9 w-9 shrink-0 place-items-center rounded-lg bg-primary/10 text-primary">
          <ng-icon
            name="lucideBug"
            class="h-5 w-5"
          />
        </div>

        <div>
          <h4 class="text-sm font-semibold text-foreground">{{ 'settings.debugging.title' | translate }}</h4>
          <p class="mt-1 text-sm text-muted-foreground">
            {{ 'settings.debugging.description' | translate }}
          </p>
        </div>
      </div>

      <label class="relative inline-flex cursor-pointer items-center">
        <input
          type="checkbox"
          class="peer sr-only"
          [checked]="enabled()"
          (change)="onEnabledChange($event)"
        />
        <div
          class="h-5 w-10 rounded-full bg-secondary after:absolute after:left-[2px] after:top-0.5 after:h-4 after:w-4 after:rounded-full after:bg-white after:transition-all after:content-[''] peer-checked:bg-primary peer-checked:after:translate-x-full"
        ></div>
      </label>
    </div>
  </section>

  @if (isElectron) {
    <section class="rounded-lg border border-border bg-secondary/20 px-4 py-3">
      <div class="flex items-center justify-between gap-3">
        <div class="flex items-center gap-2 text-muted-foreground">
          <ng-icon
            name="lucideMemoryStick"
            class="h-4 w-4"
          />
          <span class="text-sm">{{ 'settings.debugging.processRam' | translate }}</span>
        </div>
        <span class="font-mono text-sm text-foreground">{{ ramLabel() ?? '-' }}</span>
      </div>
      <p class="mt-1 text-xs text-muted-foreground">{{ 'settings.debugging.ramHint' | translate }}</p>
    </section>
  }

  <section class="grid gap-3 sm:grid-cols-3">
    <div class="rounded-lg border border-border bg-secondary/20 p-4">
      <div class="flex items-center gap-2 text-muted-foreground">
        <ng-icon
          name="lucideClock3"
          class="h-4 w-4"
        />
        <span class="text-xs font-medium uppercase tracking-wide">{{ 'settings.debugging.capturedEvents' | translate }}</span>
      </div>
      <p class="mt-3 text-2xl font-semibold text-foreground">{{ entryCount() }}</p>
      <p class="mt-1 text-xs text-muted-foreground">{{ 'settings.debugging.lastUpdate' | translate: { label: lastUpdatedLabel() } }}</p>
    </div>

    <div class="rounded-lg border border-border bg-secondary/20 p-4">
      <div class="flex items-center gap-2 text-muted-foreground">
        <ng-icon
          name="lucideCircleAlert"
          class="h-4 w-4"
        />
        <span class="text-xs font-medium uppercase tracking-wide">{{ 'settings.debugging.errors' | translate }}</span>
      </div>
      <p class="mt-3 text-2xl font-semibold text-destructive">{{ errorCount() }}</p>
      <p class="mt-1 text-xs text-muted-foreground">{{ 'settings.debugging.errorsHint' | translate }}</p>
    </div>

    <div class="rounded-lg border border-border bg-secondary/20 p-4">
      <div class="flex items-center gap-2 text-muted-foreground">
        <ng-icon
          name="lucideTriangleAlert"
          class="h-4 w-4"
        />
        <span class="text-xs font-medium uppercase tracking-wide">{{ 'settings.debugging.warnings' | translate }}</span>
      </div>
      <p class="mt-3 text-2xl font-semibold text-yellow-400">{{ warningCount() }}</p>
      <p class="mt-1 text-xs text-muted-foreground">{{ 'settings.debugging.warningsHint' | translate }}</p>
    </div>
  </section>

  <section class="rounded-lg border border-border bg-card/40 p-5">
    <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
      <div>
        <h5 class="text-sm font-semibold text-foreground">{{ 'settings.debugging.console.title' | translate }}</h5>
        <p class="mt-1 text-sm text-muted-foreground">
          {{ 'settings.debugging.console.description' | translate }}
        </p>
      </div>

      <div class="flex flex-wrap items-center gap-2">
        <button
          type="button"
          (click)="openConsole()"
          [disabled]="!enabled()"
          class="rounded-lg bg-primary px-3 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 disabled:cursor-not-allowed disabled:opacity-50"
        >
          {{ isConsoleOpen() ? ('settings.debugging.console.openActive' | translate) : ('settings.debugging.console.open' | translate) }}
        </button>

        <button
          type="button"
          (click)="clearLogs()"
          [disabled]="entryCount() === 0"
          class="inline-flex items-center gap-1.5 rounded-lg bg-secondary px-3 py-2 text-sm font-medium text-foreground transition-colors hover:bg-secondary/80 disabled:cursor-not-allowed disabled:opacity-50"
        >
          <ng-icon
            name="lucideTrash2"
            class="h-4 w-4"
          />
          Clear logs
        </button>
      </div>
    </div>
  </section>
</div>
