<ng-template #pageContent>
  <div class="h-full min-h-0 min-w-0 w-full overflow-x-hidden overflow-y-auto bg-background text-foreground">
    <div class="mx-auto w-full min-w-0 max-w-5xl space-y-8 p-4 sm:p-6 lg:py-8">
      <header class="min-w-0 space-y-1">
        <h1 class="text-2xl font-semibold text-foreground">
          @if (currentUser()) {
            {{ 'dashboard.welcomeBack' | translate: { name: currentUser()!.displayName || ('dashboard.welcomeGuestFallback' | translate) } }}
          } @else {
            {{ 'dashboard.welcomeTitle' | translate }}
          }
        </h1>
        <p class="text-sm text-muted-foreground">{{ 'dashboard.subtitle' | translate }}</p>
      </header>

      <div class="min-w-0">
        <div class="relative min-w-0">
          <ng-icon
            name="lucideSearch"
            class="absolute left-3 top-1/2 h-5 w-5 -translate-y-1/2 text-muted-foreground"
          />
          <input
            #searchInput
            type="text"
            appAutoFocus
            appSelectOnFocus
            appSubmitOnEnter
            (submitOnEnter)="submitSearch()"
            [attr.aria-label]="'dashboard.searchAriaLabel' | translate"
            class="h-12 w-full min-w-0 rounded-xl border border-border bg-secondary py-2 pl-11 pr-4 text-base text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary sm:pr-20"
            [placeholder]="isMobile() ? ('dashboard.searchPlaceholderMobile' | translate) : ('dashboard.searchPlaceholderDesktop' | translate)"
            [ngModel]="searchQuery()"
            (ngModelChange)="onSearchChange($event)"
          />
          <kbd
            class="pointer-events-none absolute right-3 top-1/2 hidden -translate-y-1/2 items-center gap-1 rounded border border-border bg-card px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground sm:flex"
          >
            {{ 'dashboard.searchShortcut' | translate }}
          </kbd>
        </div>

        @if (!isSearchMode() && recentSearches().length > 0) {
          <div class="mt-3 flex flex-wrap items-center gap-2">
            <span class="text-xs font-medium text-muted-foreground">{{ 'dashboard.recent' | translate }}</span>
            @for (term of recentSearches(); track term) {
              <span
                class="group inline-flex items-center gap-1 rounded-full border border-border bg-secondary py-1 pl-3 pr-1 text-xs text-foreground"
              >
                <button
                  type="button"
                  class="max-w-[10rem] truncate hover:text-primary"
                  (click)="applyRecentSearch(term)"
                >
                  {{ term }}
                </button>
                <button
                  type="button"
                  class="grid h-4 w-4 place-items-center rounded-full text-muted-foreground hover:bg-card hover:text-foreground"
                  [attr.aria-label]="'dashboard.removeRecent' | translate: { term }"
                  (click)="removeRecentSearch(term)"
                >
                  <ng-icon
                    name="lucideX"
                    class="h-3 w-3"
                  />
                </button>
              </span>
            }
            <button
              type="button"
              class="text-xs font-medium text-muted-foreground hover:text-foreground hover:underline"
              (click)="clearRecentSearches()"
            >
              {{ 'common.clear' | translate }}
            </button>
          </div>
        }
      </div>

      @if (isSearchMode()) {
        <section class="space-y-5">
          @if (inviteResult(); as invite) {
            <div>
              <h2 class="mb-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground">{{ 'dashboard.invite' | translate }}</h2>
              <button
                type="button"
                class="flex w-full items-center gap-3 rounded-lg border border-border bg-card p-3 text-left transition-colors hover:border-primary/50 hover:bg-card/80"
                (click)="openInvite()"
              >
                <div class="grid h-10 w-10 shrink-0 place-items-center rounded-lg bg-primary/10 text-primary">
                  <ng-icon
                    name="lucideTicket"
                    class="h-5 w-5"
                  />
                </div>
                <div class="min-w-0 flex-1">
                  <p class="truncate text-sm font-semibold text-foreground">{{ 'dashboard.openInvite' | translate }}</p>
                  <p class="truncate text-xs text-muted-foreground">{{ invite.inviteId }}</p>
                </div>
                <ng-icon
                  name="lucideArrowRight"
                  class="h-4 w-4 text-muted-foreground"
                />
              </button>
            </div>
          }

          @if (topServerResults().length > 0) {
            <div>
              <div class="mb-2 flex items-center justify-between">
                <h2 class="text-xs font-semibold uppercase tracking-wide text-muted-foreground">{{ 'dashboard.servers' | translate }}</h2>
                <a
                  routerLink="/servers"
                  class="text-xs font-medium text-primary hover:underline"
                  >{{ 'common.viewAll' | translate }}</a
                >
              </div>
              <div class="space-y-2">
                @for (server of topServerResults(); track server.id) {
                  <button
                    type="button"
                    class="flex w-full items-center gap-3 rounded-lg border border-border bg-card p-3 text-left transition-colors hover:border-primary/50 hover:bg-card/80"
                    (click)="openServer(server)"
                  >
                    <div
                      class="grid h-10 w-10 shrink-0 place-items-center overflow-hidden rounded-lg bg-secondary text-sm font-semibold text-foreground"
                    >
                      @if (server.icon) {
                        <div
                          aria-hidden="true"
                          class="h-full w-full bg-cover bg-center bg-no-repeat"
                          [style.backgroundImage]="'url(' + server.icon + ')'"
                        ></div>
                      } @else {
                        {{ serverInitial(server) }}
                      }
                    </div>
                    <div class="min-w-0 flex-1">
                      <p class="truncate text-sm font-semibold text-foreground">{{ server.name }}</p>
                      <p class="truncate text-xs text-muted-foreground">{{ serverMetaLabel(server) }}</p>
                    </div>
                    <ng-icon
                      name="lucideArrowRight"
                      class="h-4 w-4 text-muted-foreground"
                    />
                  </button>
                }
              </div>
            </div>
          }

          @if (topPeopleResults().length > 0) {
            <div>
              <div class="mb-2 flex items-center justify-between">
                <h2 class="text-xs font-semibold uppercase tracking-wide text-muted-foreground">{{ 'dashboard.people' | translate }}</h2>
                <a
                  routerLink="/people"
                  class="text-xs font-medium text-primary hover:underline"
                  >{{ 'common.viewAll' | translate }}</a
                >
              </div>
              <div class="space-y-2">
                @for (person of topPeopleResults(); track person.id) {
                  <a
                    routerLink="/people"
                    class="flex w-full items-center gap-3 rounded-lg border border-border bg-card p-3 text-left transition-colors hover:border-primary/50 hover:bg-card/80"
                  >
                    <app-user-avatar
                      [name]="personLabel(person)"
                      [avatarUrl]="person.avatarUrl"
                      size="md"
                      [status]="person.status"
                      [showStatusBadge]="true"
                    />
                    <div class="min-w-0 flex-1">
                      <p class="truncate text-sm font-semibold text-foreground">{{ personLabel(person) }}</p>
                      <p class="text-xs text-muted-foreground">{{ (isOnline(person) ? 'common.online' : 'common.offline') | translate }}</p>
                    </div>
                    <app-friend-button [user]="person" />
                  </a>
                }
              </div>
            </div>
          }

          @if (hasNoQuickResults() && !isSearching()) {
            <div class="rounded-lg border border-border bg-card px-4 py-8 text-center text-sm text-muted-foreground">
              {{ 'dashboard.noResults' | translate }}
              <span class="font-medium text-foreground">{{ searchQuery() }}</span
              >.
            </div>
          }
        </section>
      } @else {
        <!-- Primary actions -->
        <section class="grid min-w-0 gap-3 sm:grid-cols-3">
          <a
            routerLink="/people"
            class="group flex min-w-0 w-full items-center gap-3 rounded-xl border border-border bg-card p-4 transition-colors hover:border-primary/40 hover:bg-card/80"
          >
            <div class="grid h-11 w-11 shrink-0 place-items-center rounded-lg bg-purple-500/15 text-purple-400">
              <ng-icon
                name="lucideUsers"
                class="h-6 w-6"
              />
            </div>
            <div class="min-w-0 flex-1">
              <p class="text-sm font-semibold text-foreground">{{ 'dashboard.findPeople.title' | translate }}</p>
              <p class="mt-0.5 text-xs text-muted-foreground">{{ 'dashboard.findPeople.subtitle' | translate }}</p>
            </div>
            <ng-icon
              name="lucideArrowRight"
              class="h-4 w-4 text-muted-foreground transition-transform group-hover:translate-x-0.5"
            />
          </a>

          <a
            routerLink="/servers"
            class="group flex min-w-0 w-full items-center gap-3 rounded-xl border border-border bg-card p-4 transition-colors hover:border-primary/40 hover:bg-card/80"
          >
            <div class="grid h-11 w-11 shrink-0 place-items-center rounded-lg bg-blue-500/15 text-blue-400">
              <ng-icon
                name="lucideCompass"
                class="h-6 w-6"
              />
            </div>
            <div class="min-w-0 flex-1">
              <p class="text-sm font-semibold text-foreground">{{ 'dashboard.findServers.title' | translate }}</p>
              <p class="mt-0.5 text-xs text-muted-foreground">{{ 'dashboard.findServers.subtitle' | translate }}</p>
            </div>
            <ng-icon
              name="lucideArrowRight"
              class="h-4 w-4 text-muted-foreground transition-transform group-hover:translate-x-0.5"
            />
          </a>

          <a
            routerLink="/create-server"
            class="group flex min-w-0 w-full items-center gap-3 rounded-xl border border-emerald-500/40 bg-emerald-500/10 p-4 transition-colors hover:bg-emerald-500/15"
          >
            <div class="grid h-11 w-11 shrink-0 place-items-center rounded-lg bg-emerald-500/20 text-emerald-400">
              <ng-icon
                name="lucidePlus"
                class="h-6 w-6"
              />
            </div>
            <div class="min-w-0 flex-1">
              <p class="text-sm font-semibold text-foreground">{{ 'dashboard.createServer.title' | translate }}</p>
              <p class="mt-0.5 text-xs text-muted-foreground">{{ 'dashboard.createServer.subtitle' | translate }}</p>
            </div>
            <ng-icon
              name="lucideArrowRight"
              class="h-4 w-4 text-emerald-400 transition-transform group-hover:translate-x-0.5"
            />
          </a>
        </section>

        @if (isNewUser()) {
          <section class="rounded-xl border border-border bg-card p-6 text-center">
            <div class="mx-auto mb-3 grid h-12 w-12 place-items-center rounded-full bg-secondary">
              <ng-icon
                name="lucideServer"
                class="h-6 w-6 text-muted-foreground"
              />
            </div>
            <h2 class="text-base font-semibold text-foreground">{{ 'dashboard.getStarted.title' | translate }}</h2>
            <p class="mx-auto mt-1 max-w-sm text-sm text-muted-foreground">
              {{ 'dashboard.getStarted.description' | translate }}
            </p>
          </section>
        }

        <!-- People + Popular servers -->
        <section class="grid min-w-0 gap-4 lg:grid-cols-2">
          <div class="min-w-0 rounded-xl border border-border bg-card/40 p-4">
            <div class="mb-3 flex items-center justify-between">
              <h2 class="text-sm font-semibold text-foreground">{{ 'dashboard.peopleYouMightKnow' | translate }}</h2>
              <a
                routerLink="/people"
                class="text-xs font-medium text-primary hover:underline"
                >{{ 'common.seeAll' | translate }}</a
              >
            </div>
            @if (peopleYouMightKnow().length > 0) {
              <div class="space-y-1">
                @for (person of peopleYouMightKnow(); track person.id) {
                  <div class="flex min-w-0 items-center gap-3 rounded-lg px-2 py-2 transition-colors hover:bg-secondary/60">
                    <app-user-avatar
                      [name]="personLabel(person)"
                      [avatarUrl]="person.avatarUrl"
                      size="md"
                      [status]="person.status"
                      [showStatusBadge]="true"
                    />
                    <div class="min-w-0 flex-1">
                      <p class="truncate text-sm font-medium text-foreground">{{ personLabel(person) }}</p>
                      <p class="text-xs text-muted-foreground">{{ (isOnline(person) ? 'common.online' : 'common.offline') | translate }}</p>
                    </div>
                    <app-friend-button
                      class="shrink-0"
                      [user]="person"
                    />
                  </div>
                }
              </div>
            } @else {
              <p class="py-6 text-center text-sm text-muted-foreground">{{ 'dashboard.noPeopleSuggestions' | translate }}</p>
            }
          </div>

          <div class="min-w-0 rounded-xl border border-border bg-card/40 p-4">
            <div class="mb-3 flex items-center justify-between">
              <h2 class="text-sm font-semibold text-foreground">{{ 'dashboard.popularServers' | translate }}</h2>
              <a
                routerLink="/servers"
                class="text-xs font-medium text-primary hover:underline"
                >{{ 'common.seeAll' | translate }}</a
              >
            </div>
            @if (popularServers().length > 0) {
              <div class="space-y-1">
                @for (server of popularServers(); track server.id) {
                  <div class="flex min-w-0 items-center gap-3 rounded-lg px-2 py-2 transition-colors hover:bg-secondary/60">
                    <div
                      class="grid h-10 w-10 shrink-0 place-items-center overflow-hidden rounded-lg bg-secondary text-sm font-semibold text-foreground"
                    >
                      @if (server.icon) {
                        <div
                          aria-hidden="true"
                          class="h-full w-full bg-cover bg-center bg-no-repeat"
                          [style.backgroundImage]="'url(' + server.icon + ')'"
                        ></div>
                      } @else {
                        {{ serverInitial(server) }}
                      }
                    </div>
                    <div class="min-w-0 flex-1">
                      <p class="truncate text-sm font-medium text-foreground">{{ server.name }}</p>
                      <p class="truncate text-xs text-muted-foreground">{{ serverMetaLabel(server) }}</p>
                    </div>
                    <button
                      type="button"
                      class="shrink-0 rounded-md bg-primary px-3 py-1.5 text-xs font-semibold text-primary-foreground transition-colors hover:bg-primary/90"
                      (click)="openServer(server)"
                    >
                      {{ 'common.join' | translate }}
                    </button>
                  </div>
                }
              </div>
            } @else {
              <p class="py-6 text-center text-sm text-muted-foreground">{{ 'dashboard.noPopularServers' | translate }}</p>
            }
          </div>
        </section>

        <!-- Your friends -->
        @if (friends().length > 0) {
          <section>
            <div class="mb-3 flex items-center justify-between">
              <h2 class="text-sm font-semibold text-foreground">{{ 'dashboard.yourFriends' | translate }}</h2>
              <a
                routerLink="/people"
                class="text-xs font-medium text-primary hover:underline"
                >{{ 'common.manage' | translate }}</a
              >
            </div>
            <div class="grid min-w-0 grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3">
              @for (friend of friends(); track friend.id) {
                <div class="flex min-w-0 items-center gap-3 rounded-xl border border-border bg-card p-3">
                  <app-user-avatar
                    [name]="personLabel(friend)"
                    [avatarUrl]="friend.avatarUrl"
                    size="md"
                    [status]="friend.status"
                    [showStatusBadge]="true"
                  />
                  <div class="min-w-0 flex-1">
                    <p class="truncate text-sm font-medium text-foreground">{{ personLabel(friend) }}</p>
                    <p class="text-xs text-muted-foreground">{{ (isOnline(friend) ? 'common.online' : 'common.offline') | translate }}</p>
                  </div>
                  <app-friend-button [user]="friend" />
                </div>
              }
            </div>
          </section>
        }

        <!-- Recently active servers -->
        @if (recentlyActiveServers().length > 0) {
          <section>
            <h2 class="mb-3 text-sm font-semibold text-foreground">{{ 'dashboard.recentlyActiveServers' | translate }}</h2>
            <div class="grid min-w-0 grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-5">
              @for (room of recentlyActiveServers(); track room.id) {
                <button
                  type="button"
                  class="flex min-w-0 flex-col items-center gap-2 rounded-xl border border-border bg-card p-4 text-center transition-colors hover:border-primary/50 hover:bg-card/80"
                  (click)="openSavedRoom(room)"
                >
                  <div
                    class="grid h-12 w-12 shrink-0 place-items-center overflow-hidden rounded-xl bg-secondary text-base font-semibold text-foreground"
                  >
                    @if (room.icon) {
                      <div
                        aria-hidden="true"
                        class="h-full w-full bg-cover bg-center bg-no-repeat"
                        [style.backgroundImage]="'url(' + room.icon + ')'"
                      ></div>
                    } @else {
                      {{ room.name[0]?.toUpperCase() || '?' }}
                    }
                  </div>
                  <p class="w-full truncate text-sm font-medium text-foreground">{{ room.name }}</p>
                  <p class="text-xs text-muted-foreground">{{ 'dashboard.roomMembers' | translate: { count: room.userCount } }}</p>
                </button>
              }
            </div>
          </section>
        }
      }
    </div>
  </div>
</ng-template>

<ng-container [ngTemplateOutlet]="pageContent" />
