@php
    $variant = $variant ?? 'desktop';
    $adminSearchJs = [
        'url' => route('admin.search.suggestions'),
        'searchAllUrl' => route('admin.search'),
        'labels' => [
            'news' => __('News'),
            'users' => __('Users'),
            'noSuggestions' => __('No suggestions.'),
            'showAll' => __('Show all results'),
            'loading' => __('Searching...'),
            'published' => __('Published'),
            'draft' => __('Draft'),
        ],
    ];
    $wrapperClass = $variant === 'desktop'
        ? 'relative hidden md:block flex-1 max-w-md min-w-0'
        : 'relative w-full';
@endphp

<div
    class="{{ $wrapperClass }}"
    x-data="adminSearchSuggest({{ \Illuminate\Support\Js::from($adminSearchJs) }})"
>
    <form
        action="{{ route('admin.search') }}"
        method="GET"
        class="flex items-center gap-2 bg-gray-100 dark:bg-dark-700 rounded-lg px-3 py-2"
        @submit="closePanel()"
    >
        <i class="fas fa-search text-gray-400 shrink-0"></i>
        <input
            type="search"
            name="q"
            value="{{ request('q') }}"
            x-ref="searchInput"
            autocomplete="off"
            placeholder="{{ __('Search...') }}"
            @input="onInput()"
            @focus="onFocus()"
            @keydown.escape.prevent="closePanel()"
            class="bg-transparent border-none outline-none text-sm w-full min-w-0 text-gray-700 dark:text-gray-300 placeholder-gray-400"
        >
    </form>

    <div
        x-show="open"
        x-transition:enter="transition ease-out duration-100"
        x-transition:enter-start="opacity-0 -translate-y-1"
        x-transition:enter-end="opacity-100 translate-y-0"
        x-cloak
        class="absolute left-0 right-0 top-full mt-1 z-[60] rounded-xl border border-gray-200 dark:border-dark-700 bg-white dark:bg-dark-800 shadow-xl max-h-[min(70vh,22rem)] overflow-y-auto"
        @click.away="closePanel()"
    >
        <template x-if="loading">
            <div class="px-4 py-6 text-center text-sm text-gray-500 dark:text-gray-400">
                <i class="fas fa-spinner fa-spin mr-2"></i>
                <span x-text="config.labels.loading"></span>
            </div>
        </template>

        <template x-if="!loading && hasSearched && news.length === 0 && users.length === 0">
            <div class="p-4 text-sm">
                <p class="text-gray-500 dark:text-gray-400 mb-3" x-text="config.labels.noSuggestions"></p>
                <a
                    :href="showAllUrl()"
                    class="inline-flex items-center gap-2 text-primary-600 dark:text-primary-400 font-medium hover:underline"
                    @click="closePanel()"
                >
                    <span x-text="config.labels.showAll"></span>
                    <i class="fas fa-arrow-right text-xs"></i>
                </a>
            </div>
        </template>

        <template x-if="!loading && (news.length > 0 || users.length > 0)">
            <div class="py-2">
                <template x-if="news.length > 0">
                    <div class="mb-1">
                        <div class="px-3 py-1.5 text-xs font-semibold uppercase tracking-wide text-gray-400 dark:text-gray-500" x-text="config.labels.news"></div>
                        <template x-for="item in news" :key="'n-' + item.id">
                            <a
                                :href="item.url"
                                class="flex items-center justify-between gap-3 px-3 py-2.5 hover:bg-gray-50 dark:hover:bg-dark-700/80 text-left"
                                @click="closePanel()"
                            >
                                <span class="text-sm font-medium text-gray-900 dark:text-white truncate min-w-0" x-text="item.title"></span>
                                <span
                                    class="shrink-0 text-[10px] uppercase font-semibold px-1.5 py-0.5 rounded"
                                    :class="item.published ? 'bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300' : 'bg-amber-100 text-amber-800 dark:bg-amber-900/40 dark:text-amber-200'"
                                    x-text="item.published ? config.labels.published : config.labels.draft"
                                ></span>
                            </a>
                        </template>
                    </div>
                </template>

                <template x-if="users.length > 0">
                    <div>
                        <div class="px-3 py-1.5 text-xs font-semibold uppercase tracking-wide text-gray-400 dark:text-gray-500" x-text="config.labels.users"></div>
                        <template x-for="item in users" :key="'u-' + item.id">
                            <a
                                :href="item.url"
                                class="flex items-center gap-3 px-3 py-2.5 hover:bg-gray-50 dark:hover:bg-dark-700/80 text-left"
                                @click="closePanel()"
                            >
                                <div class="min-w-0 flex-1">
                                    <p class="text-sm font-medium text-gray-900 dark:text-white truncate" x-text="item.name"></p>
                                    <p class="text-xs text-gray-500 dark:text-gray-400 truncate" x-text="item.email"></p>
                                </div>
                                <i class="fas fa-chevron-right text-gray-400 text-xs shrink-0"></i>
                            </a>
                        </template>
                    </div>
                </template>

                <div class="border-t border-gray-100 dark:border-dark-700 mt-1 pt-1 px-3 pb-2">
                    <a
                        :href="showAllUrl()"
                        class="text-xs text-primary-600 dark:text-primary-400 hover:underline"
                        @click="closePanel()"
                        x-text="config.labels.showAll"
                    ></a>
                </div>
            </div>
        </template>
    </div>
</div>

@once
    @push('scripts')
        <script>
            document.addEventListener('alpine:init', () => {
                Alpine.data('adminSearchSuggest', (config) => ({
                    config,
                    news: [],
                    users: [],
                    open: false,
                    loading: false,
                    hasSearched: false,
                    debounceTimer: null,
                    requestId: 0,

                    onInput() {
                        clearTimeout(this.debounceTimer);
                        const input = this.$refs.searchInput;
                        const q = input ? input.value.trim() : '';
                        if (q.length < 2) {
                            this.news = [];
                            this.users = [];
                            this.hasSearched = false;
                            this.open = false;
                            this.loading = false;
                            return;
                        }
                        this.debounceTimer = setTimeout(() => this.load(q), 200);
                    },

                    onFocus() {
                        const input = this.$refs.searchInput;
                        const q = input ? input.value.trim() : '';
                        if (q.length < 2) {
                            return;
                        }
                        if (!this.hasSearched && !this.loading) {
                            this.load(q);
                        } else {
                            this.open = true;
                        }
                    },

                    async load(q) {
                        const id = ++this.requestId;
                        this.loading = true;
                        this.open = true;
                        this.hasSearched = false;
                        try {
                            const res = await fetch(config.url + '?q=' + encodeURIComponent(q), {
                                headers: {
                                    'Accept': 'application/json',
                                    'X-Requested-With': 'XMLHttpRequest',
                                },
                                credentials: 'same-origin',
                            });
                            if (id !== this.requestId) {
                                return;
                            }
                            const data = await res.json();
                            if (id !== this.requestId) {
                                return;
                            }
                            this.news = data.news || [];
                            this.users = data.users || [];
                            this.hasSearched = true;
                        } catch (e) {
                            if (id === this.requestId) {
                                this.news = [];
                                this.users = [];
                                this.hasSearched = true;
                            }
                        } finally {
                            if (id === this.requestId) {
                                this.loading = false;
                            }
                        }
                    },

                    closePanel() {
                        this.open = false;
                    },

                    showAllUrl() {
                        const input = this.$refs.searchInput;
                        const q = input ? input.value.trim() : '';
                        const base = config.searchAllUrl;
                        return q ? (base + '?q=' + encodeURIComponent(q)) : base;
                    },
                }));
            });
        </script>
    @endpush
@endonce
