{{-- Single unified popup: Emoji | Stickers | GIF --}}
<div
    x-data="mediaPicker()"
    class="picker pad-top"
    :class="{ open: isOpen }"
    id="chat-media-picker"
    @pointerdown.window="handleOutsideClick($event)"
    @picker-close.window="close()"
>
    <div class="picker-header pad-top">
        <div class="picker-header-row">
        <div class="picker-tabs picker-main-tabs">
            <button
                type="button"
                class="picker-tab"
                :class="{ active: tab === 'emoji' }"
                @click="openTab('emoji')"
                title="Emoji"
            >
                <i class="fa-regular fa-face-smile"></i>
            </button>
            <button
                type="button"
                id="sticker-toggle"
                class="picker-tab"
                :class="{ active: tab === 'sticker' }"
                @click="openTab('sticker')"
                title="Stickers"
            >
                <i class="fa-regular fa-note-sticky"></i>
            </button>
            <button
                type="button"
                id="gif-toggle"
                class="picker-tab"
                :class="{ active: tab === 'gif' }"
                @click="openTab('gif')"
                title="GIF"
            >
                <span class="gif-label">GIF</span>
            </button>
        </div>
        <button
            type="button"
            class="picker-close-btn"
            @click="close()"
            title="Close"
            aria-label="Close picker"
        >
            <i class="fa-solid fa-xmark"></i>
        </button>
        </div>
    </div>

    <div class="picker-body">
        {{-- Emoji tab --}}
        <div class="picker-panel picker-panel-emoji" x-show="tab === 'emoji'">
            <emoji-picker id="emoji-picker" class="dark"></emoji-picker>
        </div>

        {{-- Stickers tab --}}
        <div class="picker-panel picker-panel-sticker" x-show="tab === 'sticker'">
            <div class="picker-subheader">
                <input
                    type="search"
                    x-model="stickerSearch"
                    @input.debounce.300ms="loadStickers(true)"
                    placeholder="Search stickers..."
                    class="picker-search"
                >
            </div>
            <div class="picker-tabs picker-category-tabs">
                <template x-for="cat in categories" :key="cat">
                    <button
                        type="button"
                        class="picker-tab"
                        :class="{ active: activeCategory === cat }"
                        @click="setStickerCategory(cat)"
                        x-text="cat"
                    ></button>
                </template>
            </div>
            <div class="picker-grid" @scroll.passive="onStickerScroll($event)">
                <template x-if="stickerLoading && stickers.length === 0">
                    <p class="picker-empty">Loading stickers...</p>
                </template>
                <template x-if="!stickerLoading && stickers.length === 0">
                    <p class="picker-empty">No stickers found.</p>
                </template>
                <template x-for="item in stickers" :key="item.id">
                    <button type="button" class="picker-sticker-btn" @click="selectSticker(item)" :title="item.name">
                        <img :src="item.url" :alt="item.name" loading="lazy" class="picker-sticker-img">
                    </button>
                </template>
                <p x-show="stickerLoadingMore" class="picker-loading-more">Loading more...</p>
            </div>
        </div>

        {{-- GIF tab --}}
        <div class="picker-panel picker-panel-gif" x-show="tab === 'gif'">
            <div class="picker-subheader">
                <input
                    type="search"
                    x-model="gifSearch"
                    @input.debounce.400ms="searchGifs(true)"
                    placeholder="Search GIFs..."
                    class="picker-search"
                >
            </div>
            <div class="picker-tabs picker-category-tabs" x-show="!gifSearch">
                <button type="button" class="picker-tab" :class="{ active: gifMode === 'trending' }" @click="loadTrending(true)">Trending</button>
                <button type="button" class="picker-tab" :class="{ active: gifMode === 'recent' }" @click="showRecentGifs()">Recent</button>
            </div>
            <div class="picker-grid gif-grid" @scroll.passive="onGifScroll($event)">
                <template x-if="!gifConfigured">
                    <p class="picker-empty">Add GIPHY_API_KEY in .env to enable GIF search.</p>
                </template>
                <template x-if="gifConfigured && gifLoading && gifs.length === 0">
                    <p class="picker-empty">Loading GIFs...</p>
                </template>
                <template x-if="gifConfigured && !gifLoading && gifs.length === 0">
                    <p class="picker-empty">No GIFs found.</p>
                </template>
                <template x-for="item in gifs" :key="item.id + '-' + item.url">
                    <button type="button" class="picker-gif-btn" @click="selectGif(item)">
                        <img :src="item.preview_url || item.url" :alt="item.title" loading="lazy" class="picker-gif-img">
                    </button>
                </template>
                <p x-show="gifLoadingMore" class="picker-loading-more">Loading more...</p>
            </div>
        </div>
    </div>
</div>