{{-- Global search palette.

     Opens on Ctrl+K / ⌘K from anywhere in the admin. Kept as a partial in the
     layout rather than a Livewire component on purpose: it has to be instant,
     and a round trip per keystroke through Livewire would not be. --}}
{{-- A relative path, deliberately.

     The admin routes are registered for billing.bilipoa.com first and for the
     seller's own subdomain second, and Laravel generates a named URL from the
     first match — so route('global-search') hands back a billing. URL even
     while a tenant is on their own host. Fetching that is cross-origin, the
     browser refuses to let the page read the response, and the palette shows
     "nothing matched" for a search that in fact returned results.

     Passing absolute=false keeps the request on whatever host the operator is
     actually using. --}}
<div x-data="searchPalette('{{ route('global-search', [], false) }}')"
     x-on:keydown.window.prevent.ctrl.k="open()"
     x-on:keydown.window.prevent.meta.k="open()"
     x-on:keydown.escape.window="close()">

    {{-- Trigger in the topbar --}}
    <button type="button" class="gsearch-trigger" x-on:click="open()">
        <i class="bi bi-search"></i>
        <span class="gsearch-trigger__label">{{ __('Search subscribers, routers, payments…') }}</span>
        <kbd class="gsearch-kbd">Ctrl+K</kbd>
    </button>

    <template x-if="isOpen">
        <div class="gsearch-scrim" x-on:click.self="close()">
            <div class="gsearch-modal" x-trap.noscroll="isOpen">

                <div class="gsearch-head">
                    <i class="bi bi-search"></i>
                    <input type="text" class="gsearch-input" x-model="query" x-ref="input"
                           x-on:input.debounce.220ms="run()"
                           x-on:keydown.down.prevent="move(1)"
                           x-on:keydown.up.prevent="move(-1)"
                           x-on:keydown.enter.prevent="go()"
                           placeholder="{{ __('Search anything...') }}" autocomplete="off" spellcheck="false">
                    <button type="button" class="gsearch-x" x-on:click="close()" aria-label="{{ __('Close') }}">&times;</button>
                </div>

                <div class="gsearch-body">
                    <template x-if="loading">
                        <p class="gsearch-hint">{{ __('Searching...') }}</p>
                    </template>

                    <template x-if="!loading && query.length < 2">
                        <p class="gsearch-hint">
                            {{ __('Type to search subscribers, payments, packages, routers and tickets.') }}
                        </p>
                    </template>

                    <template x-if="!loading && query.length >= 2 && flat.length === 0">
                        <p class="gsearch-hint">{{ __('Nothing matched') }} “<span x-text="query"></span>”.</p>
                    </template>

                    <template x-for="group in groups" :key="group.label">
                        <div class="gsearch-group">
                            <div class="gsearch-group__label">
                                <i class="bi" :class="group.icon"></i>
                                <span x-text="group.label"></span>
                            </div>

                            <template x-for="item in group.items" :key="item.url + item.title">
                                <a class="gsearch-item" :href="item.url"
                                   :class="{ 'is-active': flat[cursor] && flat[cursor].title === item.title && flat[cursor].url === item.url }"
                                   x-on:mouseenter="cursor = flat.findIndex(f => f.title === item.title && f.url === item.url)">
                                    <span class="gsearch-item__body">
                                        <span class="gsearch-item__title" x-text="item.title"></span>
                                        <span class="gsearch-item__meta" x-text="item.meta"></span>
                                    </span>
                                    <template x-if="item.badge">
                                        <span class="gsearch-item__badge" x-text="item.badge"></span>
                                    </template>
                                </a>
                            </template>
                        </div>
                    </template>
                </div>

                <div class="gsearch-foot">
                    <span><kbd>↑↓</kbd> {{ __('Navigate') }}</span>
                    <span><kbd>&crarr;</kbd> {{ __('Open') }}</span>
                    <span><kbd>esc</kbd> {{ __('Close') }}</span>
                </div>
            </div>
        </div>
    </template>
</div>

@once
    @push('scripts')
    <script>
        function searchPalette(endpoint) {
            return {
                isOpen: false,
                query: '',
                groups: [],
                loading: false,
                cursor: 0,
                // Rising counter so a slow response for an earlier keystroke
                // cannot overwrite results for a later one.
                seq: 0,

                // Every result flattened in display order, which is what the
                // arrow keys actually walk.
                get flat() {
                    return this.groups.flatMap(g => g.items);
                },

                open() {
                    this.isOpen = true;
                    this.$nextTick(() => this.$refs.input?.focus());
                },

                close() {
                    this.isOpen = false;
                    this.query = '';
                    this.groups = [];
                    this.cursor = 0;
                },

                async run() {
                    if (this.query.trim().length < 2) {
                        this.groups = [];
                        return;
                    }

                    const mine = ++this.seq;
                    this.loading = true;

                    try {
                        const res = await fetch(endpoint + '?q=' + encodeURIComponent(this.query), {
                            headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
                        });
                        if (mine !== this.seq) return;   // a newer keystroke won
                        if (!res.ok) { this.groups = []; return; }
                        const data = await res.json();
                        this.groups = data.groups || [];
                        this.cursor = 0;
                    } catch (e) {
                        if (mine === this.seq) this.groups = [];
                    } finally {
                        if (mine === this.seq) this.loading = false;
                    }
                },

                move(step) {
                    const n = this.flat.length;
                    if (n === 0) return;
                    this.cursor = (this.cursor + step + n) % n;
                },

                go() {
                    const target = this.flat[this.cursor];
                    if (target) window.location.href = target.url;
                },
            };
        }
    </script>
    @endpush
@endonce