<div class="border-b border-border bg-card/90 px-4 py-3">
  <div class="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
    <div>
      <div class="flex items-center gap-2">
        <span class="text-sm font-semibold text-foreground">{{ 'shared.debugConsole.title' | translate }}</span>
        @if (activeTab() === 'logs') {
          <span class="rounded-full bg-secondary px-2 py-0.5 text-[11px] font-medium text-muted-foreground">
            {{ 'shared.debugConsole.visibleCount' | translate: { count: visibleCount() } }}
          </span>
        } @else {
          <span class="rounded-full bg-secondary px-2 py-0.5 text-[11px] font-medium text-muted-foreground">
            {{
              'shared.debugConsole.networkSummary' | translate: { clients: networkSummary().clientCount, links: networkSummary().peerConnectionCount }
            }}
          </span>
        }
      </div>
      <p class="mt-1 text-xs text-muted-foreground">
        {{ activeTab() === 'logs' ? ('shared.debugConsole.logsDescription' | translate) : ('shared.debugConsole.networkDescription' | translate) }}
      </p>
    </div>

    <div class="flex flex-wrap items-center gap-2">
      <button
        type="button"
        (click)="toggleDetached()"
        class="inline-flex items-center gap-1.5 rounded-lg bg-secondary px-2.5 py-2 text-xs font-medium text-foreground transition-colors hover:bg-secondary/80"
      >
        {{ getDetachLabel() }}
      </button>

      <button
        type="button"
        (click)="toggleAutoScroll()"
        class="inline-flex items-center gap-1.5 rounded-lg bg-secondary px-2.5 py-2 text-xs font-medium text-foreground transition-colors hover:bg-secondary/80"
        [attr.aria-pressed]="autoScroll()"
      >
        <ng-icon
          [name]="autoScroll() ? 'lucidePause' : 'lucidePlay'"
          class="h-3.5 w-3.5"
        />
        {{ (autoScroll() ? 'shared.debugConsole.pauseAutoScroll' : 'shared.debugConsole.resumeAutoScroll') | translate }}
      </button>

      <!-- Export dropdown -->
      <div
        class="relative"
        data-export-menu
      >
        <button
          type="button"
          (click)="toggleExportMenu()"
          class="inline-flex items-center gap-1.5 rounded-lg bg-secondary px-2.5 py-2 text-xs font-medium text-foreground transition-colors hover:bg-secondary/80"
          [attr.aria-expanded]="exportMenuOpen()"
          aria-haspopup="true"
          [title]="'shared.debugConsole.exportLogsTitle' | translate"
        >
          <ng-icon
            name="lucideDownload"
            class="h-3.5 w-3.5"
          />
          {{ 'shared.debugConsole.export' | translate }}
        </button>

        @if (exportMenuOpen()) {
          <div class="absolute right-0 top-full z-10 mt-1 min-w-[11rem] rounded-lg border border-border bg-card p-1 shadow-xl">
            @if (activeTab() === 'logs') {
              <p class="px-2.5 py-1.5 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
                {{ 'shared.debugConsole.logsSection' | translate }}
              </p>
              <button
                type="button"
                (click)="exportLogs('csv')"
                class="flex w-full items-center gap-2 rounded-md px-2.5 py-1.5 text-xs text-foreground transition-colors hover:bg-secondary"
              >
                {{ 'shared.debugConsole.exportCsv' | translate }}
              </button>
              <button
                type="button"
                (click)="exportLogs('txt')"
                class="flex w-full items-center gap-2 rounded-md px-2.5 py-1.5 text-xs text-foreground transition-colors hover:bg-secondary"
              >
                {{ 'shared.debugConsole.exportTxt' | translate }}
              </button>
            } @else {
              <p class="px-2.5 py-1.5 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
                {{ 'shared.debugConsole.networkSection' | translate }}
              </p>
              <button
                type="button"
                (click)="exportNetwork('csv')"
                class="flex w-full items-center gap-2 rounded-md px-2.5 py-1.5 text-xs text-foreground transition-colors hover:bg-secondary"
              >
                {{ 'shared.debugConsole.exportCsv' | translate }}
              </button>
              <button
                type="button"
                (click)="exportNetwork('txt')"
                class="flex w-full items-center gap-2 rounded-md px-2.5 py-1.5 text-xs text-foreground transition-colors hover:bg-secondary"
              >
                {{ 'shared.debugConsole.exportTxt' | translate }}
              </button>
            }
          </div>
        }
      </div>

      <button
        type="button"
        (click)="clear()"
        class="inline-flex items-center gap-1.5 rounded-lg bg-secondary px-2.5 py-2 text-xs font-medium text-foreground transition-colors hover:bg-secondary/80"
      >
        <ng-icon
          name="lucideTrash2"
          class="h-3.5 w-3.5"
        />
        {{ 'shared.debugConsole.clear' | translate }}
      </button>

      <button
        type="button"
        (click)="close()"
        class="inline-flex items-center gap-1.5 rounded-lg bg-secondary px-2.5 py-2 text-xs font-medium text-foreground transition-colors hover:bg-secondary/80"
      >
        <ng-icon
          name="lucideX"
          class="h-3.5 w-3.5"
        />
        {{ 'shared.debugConsole.close' | translate }}
      </button>
    </div>
  </div>

  <div class="mt-3 flex flex-wrap items-center gap-2">
    @for (tab of tabs; track tab) {
      <button
        type="button"
        (click)="setActiveTab(tab)"
        [class]="getTabButtonClass(tab)"
        [attr.aria-pressed]="activeTab() === tab"
      >
        {{ getTabLabel(tab) }}
      </button>
    }
  </div>

  @if (activeTab() === 'logs') {
    <div class="mt-3 grid gap-3 xl:grid-cols-[minmax(0,1fr)_12rem]">
      <label class="relative block">
        <span class="sr-only">{{ 'shared.debugConsole.searchLogsSrOnly' | translate }}</span>
        <ng-icon
          name="lucideSearch"
          class="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground"
        />
        <input
          type="search"
          class="w-full rounded-lg border border-border bg-background py-2 pl-9 pr-3 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary"
          [placeholder]="'shared.debugConsole.searchPlaceholder' | translate"
          [value]="searchTerm()"
          (input)="onSearchInput($event)"
        />
      </label>

      <label class="relative block">
        <span class="sr-only">{{ 'shared.debugConsole.filterBySourceSrOnly' | translate }}</span>
        <select
          class="w-full rounded-lg border border-border bg-background px-3 py-2 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-primary"
          [value]="selectedSource()"
          (change)="onSourceChange($event)"
        >
          <option value="all">{{ 'shared.debugConsole.allSources' | translate }}</option>
          @for (source of sourceOptions(); track source) {
            <option [value]="source">{{ source }}</option>
          }
        </select>
      </label>
    </div>

    <div class="mt-3 flex flex-wrap items-center gap-2">
      <div class="mr-1 inline-flex items-center gap-1.5 text-[11px] font-medium uppercase tracking-wide text-muted-foreground">
        <ng-icon
          name="lucideFilter"
          class="h-3.5 w-3.5"
        />
        {{ 'shared.debugConsole.levelsLabel' | translate }}
      </div>

      @for (level of levels; track level) {
        <button
          type="button"
          (click)="toggleLevel(level)"
          [class]="getLevelButtonClass(level)"
          [attr.aria-pressed]="levelState()[level]"
        >
          {{ getLevelLabel(level) }}
          <span class="ml-1 text-[11px] opacity-80">{{ levelCounts()[level] }}</span>
        </button>
      }
    </div>
  } @else {
    <div class="mt-3 rounded-xl border border-border/80 bg-background/70 px-3 py-3 text-xs text-muted-foreground">
      <p>{{ 'shared.debugConsole.networkTrafficHint' | translate }}</p>

      <div class="mt-2 flex flex-wrap gap-2 text-[11px]">
        <span class="rounded-full border border-border bg-secondary/70 px-2 py-0.5">
          {{ 'shared.debugConsole.networkBadges.typing' | translate: { count: networkSummary().typingCount } }}
        </span>
        <span class="rounded-full border border-border bg-secondary/70 px-2 py-0.5">
          {{ 'shared.debugConsole.networkBadges.speaking' | translate: { count: networkSummary().speakingCount } }}
        </span>
        <span class="rounded-full border border-border bg-secondary/70 px-2 py-0.5">
          {{ 'shared.debugConsole.networkBadges.streaming' | translate: { count: networkSummary().streamingCount } }}
        </span>
        <span class="rounded-full border border-border bg-secondary/70 px-2 py-0.5">
          {{ 'shared.debugConsole.networkBadges.memberships' | translate: { count: networkSummary().membershipCount } }}
        </span>
      </div>
    </div>
  }
</div>
