<div class="min-h-full bg-background px-4 py-8 sm:px-6 lg:px-8">
  <div class="mx-auto flex min-h-[calc(100vh-8rem)] max-w-4xl items-center justify-center">
    <div class="w-full overflow-hidden rounded-3xl border border-border bg-card/90 shadow-2xl backdrop-blur">
      <div class="border-b border-border bg-gradient-to-br from-primary/20 via-transparent to-blue-500/10 px-6 py-8 sm:px-10">
        <div
          class="inline-flex items-center rounded-full border border-border bg-secondary/70 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.25em] text-muted-foreground"
        >
          Invite link
        </div>
        <h1 class="mt-4 text-3xl font-semibold tracking-tight text-foreground sm:text-4xl">
          @if (invite()) {
            Join {{ invite()!.server.name }}
          } @else {
            Toju server invite
          }
        </h1>
        <p class="mt-3 max-w-2xl text-sm leading-6 text-muted-foreground sm:text-base">
          @switch (status()) {
            @case ('redirecting') {
              Sign in to continue with this invite.
            }
            @case ('joining') {
              We are connecting you to the invited server.
            }
            @case ('error') {
              This invite could not be completed automatically.
            }
            @default {
              Loading invite details and preparing the correct signal server.
            }
          }
        </p>
      </div>

      <div class="grid gap-6 px-6 py-8 sm:px-10 lg:grid-cols-[1.2fr,0.8fr]">
        <section class="space-y-4">
          <div class="rounded-2xl border border-border bg-secondary/20 p-5">
            <h2 class="text-sm font-semibold uppercase tracking-[0.2em] text-muted-foreground">Status</h2>
            <p class="mt-3 text-lg font-medium text-foreground">{{ message() }}</p>
          </div>

          @if (invite()) {
            <div class="rounded-2xl border border-border bg-secondary/20 p-5">
              <h2 class="text-sm font-semibold uppercase tracking-[0.2em] text-muted-foreground">Server</h2>
              <p class="mt-3 text-xl font-semibold text-foreground">{{ invite()!.server.name }}</p>
              @if (invite()!.server.description) {
                <p class="mt-2 text-sm leading-6 text-muted-foreground">{{ invite()!.server.description }}</p>
              }
              <div class="mt-4 flex flex-wrap gap-2 text-xs">
                @if (invite()!.server.isPrivate) {
                  <span class="rounded-full bg-secondary px-2.5 py-1 text-muted-foreground">Private</span>
                }
                @if (invite()!.server.hasPassword) {
                  <span class="rounded-full bg-secondary px-2.5 py-1 text-muted-foreground">Password bypassed by invite</span>
                }
                <span class="rounded-full bg-primary/10 px-2.5 py-1 text-primary"> Expires {{ invite()!.expiresAt | date: 'medium' }} </span>
              </div>
            </div>
          }
        </section>

        <aside class="space-y-4">
          <div class="rounded-2xl border border-border bg-secondary/20 p-5">
            <h2 class="text-sm font-semibold uppercase tracking-[0.2em] text-muted-foreground">What happens next</h2>
            <ul class="mt-4 space-y-3 text-sm leading-6 text-muted-foreground">
              <li>• The linked signal server is added to your configured server list if needed.</li>
              <li>• Invite links bypass private and password restrictions.</li>
              <li>• Banned users still cannot join through invites.</li>
            </ul>
          </div>

          @if (status() === 'error') {
            <button
              type="button"
              (click)="goToSearch()"
              class="inline-flex w-full items-center justify-center rounded-2xl bg-primary px-4 py-3 text-sm font-semibold text-primary-foreground transition-colors hover:bg-primary/90"
            >
              Back to server search
            </button>
          }
        </aside>
      </div>
    </div>
  </div>
</div>
