<div
  class="flex h-[min(70vh,42rem)] w-full flex-col overflow-hidden rounded-[1.65rem] border border-border/80 shadow-2xl ring-1 ring-white/5"
  role="dialog"
  aria-label="KLIPY GIF picker"
  style="background: hsl(var(--background) / 0.85); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px)"
>
  @if (!isMobile()) {
    <div class="flex items-start justify-between gap-4 border-b border-border/70 bg-secondary/15 px-5 py-4">
      <div>
        <div class="text-[11px] font-semibold uppercase tracking-[0.28em] text-primary">KLIPY</div>
        <h3 class="mt-1 text-lg font-semibold text-foreground">Choose a GIF</h3>
        <p class="mt-1 text-sm text-muted-foreground">
          {{ searchQuery.trim() ? 'Search results from KLIPY.' : 'Trending GIFs from KLIPY.' }}
        </p>
      </div>

      <button
        type="button"
        (click)="close()"
        class="inline-flex h-9 w-9 items-center justify-center rounded-full border border-border/70 bg-secondary/30 text-muted-foreground transition-colors hover:bg-secondary/80 hover:text-foreground"
        aria-label="Close GIF picker"
      >
        <ng-icon
          name="lucideX"
          class="h-4 w-4"
        />
      </button>
    </div>
  }

  <div class="border-b border-border/70 bg-secondary/10 px-5 py-4">
    <label class="relative block">
      <ng-icon
        name="lucideSearch"
        class="pointer-events-none absolute left-3 top-1/2 z-10 h-4 w-4 -translate-y-1/2 text-muted-foreground"
      />
      <input
        #searchInput
        type="text"
        [ngModel]="searchQuery"
        (ngModelChange)="onSearchQueryChanged($event)"
        [placeholder]="isMobile() ? 'Search KLIPY and add a gif to the chat' : 'Search KLIPY'"
        class="relative z-0 w-full rounded-xl border border-border/80 bg-background/70 px-10 py-3 text-sm text-foreground placeholder:text-muted-foreground shadow-sm backdrop-blur-sm focus:outline-none focus:ring-2 focus:ring-primary"
      />
    </label>
  </div>

  <div class="flex-1 overflow-y-auto px-5 py-4">
    @if (errorMessage()) {
      <div
        class="mb-4 flex items-center justify-between gap-3 rounded-xl border border-destructive/20 bg-destructive/5 px-4 py-3 text-sm text-destructive backdrop-blur-sm"
      >
        <span>{{ errorMessage() }}</span>
        <button
          type="button"
          (click)="retry()"
          class="rounded-lg bg-destructive px-3 py-1.5 text-xs font-medium text-destructive-foreground transition-colors hover:bg-destructive/90"
        >
          Retry
        </button>
      </div>
    }

    @if (loading() && results().length === 0) {
      <div class="flex h-full min-h-56 flex-col items-center justify-center gap-3 text-muted-foreground">
        <span class="h-6 w-6 animate-spin rounded-full border-2 border-primary/20 border-t-primary"></span>
        <p class="text-sm">Loading GIFs from KLIPY...</p>
      </div>
    } @else if (results().length === 0) {
      <div
        class="flex h-full min-h-56 flex-col items-center justify-center gap-3 rounded-2xl border border-dashed border-border/80 bg-secondary/10 px-6 text-center text-muted-foreground"
      >
        <div class="flex h-12 w-12 items-center justify-center rounded-full bg-primary/10 text-primary">
          <ng-icon
            name="lucideImage"
            class="h-5 w-5"
          />
        </div>
        <div>
          <p class="text-sm font-medium text-foreground">No GIFs found</p>
          <p class="mt-1 text-sm">Try another search term or clear the search to browse trending GIFs.</p>
        </div>
      </div>
    } @else {
      <div [class]="isMobile() ? 'grid grid-cols-2 gap-2' : 'columns-[12rem] gap-4'">
        @for (gif of results(); track gif.id) {
          <button
            type="button"
            (click)="selectGif(gif)"
            [class]="isMobile()
              ? 'group block w-full overflow-hidden rounded-xl border border-border/80 bg-secondary/10 text-left shadow-sm transition-transform duration-200 hover:-translate-y-0.5 hover:border-primary/50 hover:bg-secondary/30'
              : 'group mx-auto mb-4 inline-block w-full max-w-[15.5rem] break-inside-avoid align-top overflow-hidden rounded-2xl border border-border/80 bg-secondary/10 text-left shadow-sm transition-transform duration-200 hover:-translate-y-0.5 hover:border-primary/50 hover:bg-secondary/30'"
          >
            <div
              class="relative flex items-center justify-center overflow-hidden bg-secondary/30"
              [style.height.px]="gifCardHeight(gif)"
            >
              <img
                [appChatImageProxyFallback]="gif.previewUrl || gif.url"
                [signalSource]="signalSource()"
                [alt]="gif.title || 'KLIPY GIF'"
                class="h-full w-full object-contain p-1.5 transition-transform duration-200 group-hover:scale-[1.03]"
                loading="lazy"
              />
              <span
                class="pointer-events-none absolute bottom-2 left-2 rounded-full bg-black/70 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-[0.24em] text-white/90 backdrop-blur-sm"
              >
                KLIPY
              </span>
            </div>
            @if (!isMobile()) {
              <div class="px-3 py-2">
                <p class="truncate text-xs font-medium text-foreground">
                  {{ gif.title || 'KLIPY GIF' }}
                </p>
                <p class="mt-1 text-[10px] uppercase tracking-[0.22em] text-muted-foreground">Click to select</p>
              </div>
            }
          </button>
        }
      </div>

      @if (isMobile() && hasNext()) {
        <div class="mt-3 flex justify-center">
          <button
            type="button"
            (click)="loadMore()"
            [disabled]="loading()"
            class="inline-flex h-10 w-10 items-center justify-center rounded-full border border-border/80 bg-background/60 text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground disabled:cursor-not-allowed disabled:opacity-60"
            [attr.aria-label]="loading() ? 'Loading more GIFs' : 'Load more GIFs'"
          >
            @if (loading()) {
              <span class="h-4 w-4 animate-spin rounded-full border-2 border-primary/20 border-t-primary"></span>
            } @else {
              <ng-icon
                name="lucideChevronDown"
                class="h-5 w-5"
              />
            }
          </button>
        </div>
      }
    }
  </div>

  @if (!isMobile()) {
    <div class="flex items-center justify-between gap-4 border-t border-border/70 bg-secondary/10 px-5 py-4">
      <p class="text-xs text-muted-foreground">Click a GIF to select it. Powered by KLIPY.</p>

      @if (hasNext()) {
        <button
          type="button"
          (click)="loadMore()"
          [disabled]="loading()"
          class="rounded-full border border-border/80 bg-background/60 px-4 py-2 text-xs font-medium text-foreground transition-colors hover:bg-secondary disabled:cursor-not-allowed disabled:opacity-60"
        >
          {{ loading() ? 'Loading...' : 'Load more' }}
        </button>
      }
    </div>
  }
</div>
