{% from "templates/wiki/macros/buttons.html" import render_icon %}

{# Search modal — mirrors the frappe-ui docs CommandPalette (Dialog bare/xl,
   top position, 10vh padding): overlay tokens, surface-elevation-1 panel,
   borderless input with inset search icon, kbd-hint footer #}
<div x-data="wikiSearch()"
     x-cloak
     @open-search.window="open()"
     @keydown.window.meta.k.prevent="open()"
     @keydown.window.ctrl.k.prevent="open()"
     @keydown.escape.window="close()"
     class="relative z-50">

    <!-- Backdrop -->
    <div x-show="isOpen"
         x-transition:enter="transition-opacity ease-out duration-100"
         x-transition:enter-start="opacity-0"
         x-transition:enter-end="opacity-100"
         x-transition:leave="transition-opacity ease-in duration-150"
         x-transition:leave-start="opacity-100"
         x-transition:leave-end="opacity-0"
         @click="close()"
         class="fixed inset-0 z-50 bg-black-overlay-200 [[data-theme=dark]_&]:bg-black-overlay-700">
    </div>

    <!-- Modal Container - top-positioned like the docs palette -->
    <div x-show="isOpen"
         class="fixed inset-0 z-50 flex items-start justify-center pt-[10vh] px-4"
         @click.self="close()">

        <!-- Modal -->
        <div x-show="isOpen"
             x-transition:enter="transition ease-out duration-100"
             x-transition:enter-start="opacity-50 scale-[0.98]"
             x-transition:enter-end="opacity-100 scale-100"
             x-transition:leave="transition ease-in duration-150"
             x-transition:leave-start="opacity-100 scale-100"
             x-transition:leave-end="opacity-50 scale-[0.98]"
             @click.stop
             class="flex flex-col w-full max-w-xl bg-[var(--surface-elevation-1)] rounded-7 shadow-xl overflow-hidden">

            <!-- Search Input -->
            <div class="relative">
                <div class="absolute inset-y-0 left-0 flex items-center pl-4.5">
                    {{ render_icon("search", "text-[var(--ink-gray-6)]") }}
                </div>
                <input type="text"
                       x-ref="searchInput" aria-label="{{ _('Search documentation') }}"
                       x-model="query"
                       autocomplete="off"
                       @input.debounce.200ms="search()"
                       placeholder="{{ _('Search documentation') }}"
                       class="w-full border-none bg-transparent py-3 pl-11.5 pr-4.5 text-base text-[var(--ink-gray-7)] placeholder-[var(--ink-gray-4)] outline-none focus:ring-0">
            </div>

            <!-- Results -->
            <div class="max-h-96 overflow-auto border-t border-[var(--outline-gray-1)] [[data-theme=dark]_&]:border-[var(--outline-gray-2)]">
                <!-- Loading State -->
                <template x-if="loading">
                    <div class="flex items-center justify-center my-8">
                        <div class="animate-spin rounded-full h-6 w-6 border-2 border-[var(--ink-gray-3)] border-t-[var(--ink-gray-7)]"></div>
                    </div>
                </template>

                <!-- No Query State -->
                <template x-if="!loading && !query">
                    <div class="my-8 text-center text-base text-[var(--ink-gray-6)]">
                        {{ _("Type to search documentation") }}
                    </div>
                </template>

                <!-- No Results State -->
                <template x-if="!loading && query && results.length === 0 && !error">
                    <div class="my-8 text-center text-base text-[var(--ink-gray-6)]">
                        {{ _("No results for") }} "<b class="text-[var(--ink-gray-9)]" x-text="query"></b>"
                    </div>
                </template>

                <!-- Error State -->
                <template x-if="!loading && error">
                    <div class="my-8 text-center text-base text-[var(--ink-gray-6)]" x-text="error"></div>
                </template>

                <!-- Results List -->
                <template x-if="!loading && results.length > 0">
                    <ul class="mt-3 mb-2">
                        <template x-for="(result, index) in results" :key="index">
                            <li class="px-2.5">
                                <a :href="'/' + result.route"
                                   data-testid="search-result"
                                   @click.prevent="navigateTo(result.route)"
                                   @mouseenter="selectedIndex = index"
                                   :class="selectedIndex === index ? 'bg-[var(--surface-gray-3)]' : ''"
                                   class="flex w-full min-w-0 items-start gap-3 rounded-4 px-2 py-2 outline-none cursor-pointer">
                                    {{ render_icon("file-text", "mt-0.5 shrink-0 text-[var(--ink-gray-6)]") }}
                                    <span class="flex min-w-0 flex-1 flex-col gap-1">
                                        <span class="text-base font-medium text-[var(--ink-gray-7)] overflow-hidden text-ellipsis whitespace-nowrap [&_mark]:bg-transparent [&_mark]:text-[var(--ink-gray-9)] [&_mark]:font-semibold" x-html="result.title"></span>
                                        <span class="text-p-sm text-[var(--ink-gray-5)] line-clamp-2 [&_mark]:bg-transparent [&_mark]:text-[var(--ink-gray-8)] [&_mark]:font-semibold" x-html="result.content"></span>
                                    </span>
                                </a>
                            </li>
                        </template>
                    </ul>
                </template>
            </div>

            {#- Footer: keyboard hints only. There is no keyboard to hint at on a
                touch device, and at 390px the four groups wrap into a cramped
                two-line block — so it starts at sm, matching the docs palette,
                which is only reachable by ⌘K in the first place. -#}
            <div class="mt-2 hidden sm:flex items-center justify-between border-t border-[var(--outline-gray-1)] [[data-theme=dark]_&]:border-[var(--outline-gray-2)] px-2.5 py-2 text-xs text-[var(--ink-gray-6)]">
                <div class="flex items-center gap-4">
                    <div class="flex items-center gap-1">
                        <kbd class="inline-flex items-center gap-0.5 whitespace-nowrap rounded-1 bg-[var(--surface-gray-2)] p-0.5 font-[inherit] text-[11px] font-medium leading-normal tracking-[0.02em] text-[var(--ink-gray-5)]">
                            {{ render_icon("arrow-down") }}
                        </kbd>
                        <kbd class="inline-flex items-center gap-0.5 whitespace-nowrap rounded-1 bg-[var(--surface-gray-2)] p-0.5 font-[inherit] text-[11px] font-medium leading-normal tracking-[0.02em] text-[var(--ink-gray-5)]">
                            {{ render_icon("arrow-up") }}
                        </kbd>
                        <span class="ml-1">{{ _("to navigate") }}</span>
                    </div>
                    <div class="flex items-center gap-1">
                        <kbd class="inline-flex items-center gap-0.5 whitespace-nowrap rounded-1 bg-[var(--surface-gray-2)] p-0.5 font-[inherit] text-[11px] font-medium leading-normal tracking-[0.02em] text-[var(--ink-gray-5)]">
                            {{ render_icon("corner-down-left") }}
                        </kbd>
                        <span class="ml-1">{{ _("to select") }}</span>
                    </div>
                    {#- Cmd/Ctrl+Enter opens the highlighted hit in a new tab
                        (see handleKeydown), so the docs' "new tab" hint applies
                        here too. -#}
                    <div class="flex items-center gap-1">
                        <kbd class="inline-flex items-center gap-0.5 whitespace-nowrap rounded-1 bg-[var(--surface-gray-2)] p-0.5 font-[inherit] text-[11px] font-medium leading-normal tracking-[0.02em] text-[var(--ink-gray-5)]">
                            <template x-if="isMac">{{ render_icon("command", "w-3 h-3") }}</template>
                            <template x-if="!isMac"><span class="pr-0.5">Ctrl</span></template>
                            {{ render_icon("corner-down-left") }}
                        </kbd>
                        <span class="ml-1">{{ _("new tab") }}</span>
                    </div>
                    <div class="flex items-center gap-1">
                        <kbd class="inline-flex items-center gap-0.5 whitespace-nowrap rounded-1 bg-[var(--surface-gray-2)] p-0.5 px-1 font-[inherit] font-medium leading-normal tracking-[0.02em] text-sm text-[var(--ink-gray-5)]">
                            esc
                        </kbd>
                        <span class="ml-1">{{ _("to close") }}</span>
                    </div>
                </div>
                <div class="flex items-center gap-1">
                    <kbd class="inline-flex items-center gap-0.5 whitespace-nowrap rounded-1 bg-[var(--surface-gray-2)] p-0.5 font-[inherit] text-[11px] font-medium leading-normal tracking-[0.02em] text-[var(--ink-gray-5)]">
                        <template x-if="isMac">{{ render_icon("command", "w-3 h-3") }}</template>
                        <template x-if="!isMac"><span class="pr-0.5">Ctrl</span></template>
                        <span class="text-sm">K</span>
                    </kbd>
                    <span class="ml-1">{{ _("to open") }}</span>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    function wikiSearch() {
        return {
            isOpen: false,
            isMac: navigator.platform.includes('Mac'),
            query: '',
            results: [],
            total: 0,
            loading: false,
            error: null,
            selectedIndex: 0,
            space: '{{ wiki_space.root_group if wiki_space else "" }}',

            open() {
                this.isOpen = true;
                document.body.style.overflow = 'hidden';
                this.$nextTick(() => {
                    this.$refs.searchInput.focus();
                });
            },

            close() {
                this.isOpen = false;
                document.body.style.overflow = '';
                this.query = '';
                this.results = [];
                this.total = 0;
                this.error = null;
                this.selectedIndex = 0;
            },

            async search() {
                if (!this.query.trim()) {
                    this.results = [];
                    this.total = 0;
                    this.error = null;
                    return;
                }

                this.loading = true;
                this.error = null;
                this.selectedIndex = 0;

                try {
                    const params = new URLSearchParams();
                    params.append('query', this.query);
                    if (this.space) {
                        params.append('space', this.space);
                    }

                    const response = await fetch(`/api/method/wiki.frappe_wiki.doctype.wiki_document.search.search?${params.toString()}`, {
                        method: 'GET',
                        headers: {
                            'Accept': 'application/json'
                        }
                    });

                    if (!response.ok) {
                        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
                    }

                    const data = await response.json();

                    if (data.exc_type) {
                        // Handle Frappe errors
                        console.error('Frappe error:', data);
                        this.error = {{ _('Search is temporarily unavailable. Please try again later.') | tojson }};
                        this.results = [];
                        this.total = 0;
                    } else if (data.message) {
                        this.results = data.message.results || [];
                        this.total = data.message.total || 0;
                        this.error = null;
                    } else {
                        // Unexpected response format
                        console.warn('Unexpected response format:', data);
                        this.results = [];
                        this.total = 0;
                    }
                } catch (error) {
                    console.error('Search error:', error);
                    this.error = {{ _('Search could not be completed. Please try again.') | tojson }};
                    this.results = [];
                    this.total = 0;
                } finally {
                    this.loading = false;
                }
            },

            navigateTo(route) {
                this.close();
                Alpine.store('navigation').navigateTo(route);
            },

            init() {
                // Keyboard navigation — bind once so removeEventListener
                // actually detaches the same function reference
                this.boundKeydown = this.handleKeydown.bind(this);
                this.$watch('isOpen', (value) => {
                    if (value) {
                        document.addEventListener('keydown', this.boundKeydown);
                    } else {
                        document.removeEventListener('keydown', this.boundKeydown);
                    }
                });
            },

            handleKeydown(e) {
                if (e.key === 'ArrowDown') {
                    e.preventDefault();
                    this.selectedIndex = Math.min(this.selectedIndex + 1, this.results.length - 1);
                } else if (e.key === 'ArrowUp') {
                    e.preventDefault();
                    this.selectedIndex = Math.max(this.selectedIndex - 1, 0);
                } else if (e.key === 'Enter' && this.results.length > 0) {
                    e.preventDefault();
                    const route = this.results[this.selectedIndex].route;
                    if (e.metaKey || e.ctrlKey) {
                        window.open('/' + route, '_blank', 'noopener');
                    } else {
                        this.navigateTo(route);
                    }
                }
            }
        }
    }
</script>