@php
    $locale = app()->getLocale();
    $tabLabels = ['all' => __('site.search_tab_all')];
    if (site_shows_products()) {
        $tabLabels['products'] = __('site.search_tab_products');
        $tabLabels['categories'] = __('site.search_tab_categories');
    }
    if (site_feature_enabled('articles_blog')) {
        $tabLabels['articles'] = __('site.search_tab_articles');
    }
    if (site_feature_enabled('news')) {
        $tabLabels['news'] = __('site.search_tab_news');
    }
    if (site_shows_services()) {
        $tabLabels['services'] = __('site.search_tab_services');
    }
    $trendingLimit = (int) config('site.search.trending_limit', 8);
    $articleCounts = \App\Models\Article::query()
        ->active()
        ->whereNotNull('category_id')
        ->selectRaw('category_id, COUNT(*) as aggregate')
        ->groupBy('category_id')
        ->pluck('aggregate', 'category_id');

    $trendingCategories = \App\Models\Category::query()
        ->active()
        ->where(fn ($query) => $query->where('parent_id', 0)->orWhereNull('parent_id'))
        ->orderBy('name_fa')
        ->get();

    if ($trendingCategories->isEmpty()) {
        $trendingCategories = \App\Models\Category::query()
            ->active()
            ->orderBy('name_fa')
            ->limit($trendingLimit)
            ->get();
    }

    $trending = $trendingCategories
        ->sortByDesc(fn ($category) => (int) $articleCounts->get($category->id, 0))
        ->take($trendingLimit)
        ->map(fn ($category) => locale_category_name($category))
        ->filter(fn ($name) => is_string($name) && trim($name) !== '')
        ->unique()
        ->values()
        ->all();

    $config = [
        'searchRoute' => route('site.search', ['locale' => $locale]),
        'suggestionsRoute' => route('site.search.suggestions', ['locale' => $locale]),
        'minQueryLength' => (int) config('site.search.min_query_length', 2),
        'historyLimit' => (int) config('site.search.history_limit', 6),
        'debounceMs' => (int) config('site.search.debounce_ms', 220),
        'trending' => $trending,
        'loadError' => __('site.search_error_loading'),
        'tabLabels' => $tabLabels,
    ];
@endphp

<div
    x-data="siteSearch(@js($config))"
    x-cloak
    x-show="open"
    @keydown.escape.window="close()"
    @keydown.arrow-down.prevent="selectNext()"
    @keydown.arrow-up.prevent="selectPrevious()"
    @keydown.enter.prevent="confirmActive()"
    class="fixed inset-0 eca-search-modal"
    style="z-index: var(--z-modal)"
    role="dialog"
    aria-modal="true"
    aria-label="{{ __('site.search_dialog_title') }}"
>
    <div class="absolute inset-0 bg-slate-950/60 backdrop-blur-md" @click="close()"></div>

    <div class="relative mx-auto flex min-h-full w-full items-start justify-center p-3 pt-[max(4rem,8vh)] sm:p-6 sm:pt-20">
        <div x-transition.scale.origin.top.duration.200ms class="eca-search-modal__panel w-full max-w-4xl overflow-hidden rounded-2xl shadow-2xl">
            <div class="border-b eca-theme-border px-4 py-3 sm:px-6" style="background: color-mix(in srgb, var(--eca-card) 70%, transparent);">
                <div class="flex items-center gap-3 rounded-full border eca-theme-border px-4 py-2" style="background: var(--eca-card);">
                    <x-site.svg-icon name="category" class="h-6 w-6 shrink-0 eca-theme-text-muted" />
                    <input id="site-search-input" x-ref="searchInput" x-model="query" type="search" autocomplete="off" placeholder="{{ site_profile()->label('search_placeholder', __('site.search_placeholder')) }}" class="min-w-0 flex-1 border-0 bg-transparent py-1 text-base eca-theme-text outline-none focus:ring-0" />
                    <button type="button" class="site-pressable rounded-lg border eca-theme-border px-3 py-1.5 text-sm font-semibold eca-theme-text" @click="close()">{{ __('site.close') }}</button>
                </div>
                <div class="mt-3 flex flex-wrap gap-2">
                    <template x-for="(label, key) in tabLabels" :key="key">
                        <button type="button" class="rounded-full px-3 py-1 text-xs font-semibold transition" :class="activeTab === key ? 'bg-brand-accent text-white' : 'eca-theme-text-muted border eca-theme-border'" @click="setTab(key)" x-text="label"></button>
                    </template>
                </div>
            </div>

            <div class="max-h-[min(72vh,42rem)] overflow-y-auto p-4 sm:p-6" style="background: var(--eca-surface);">
                <template x-if="showSuggestions()">
                    <div class="space-y-6 pt-2">
                        <div x-show="recentSearches.length > 0" x-cloak>
                            <h3 class="mb-2 text-xs font-bold uppercase eca-theme-text-muted">{{ __('site.search_recent') }}</h3>
                            <div class="flex flex-wrap gap-2">
                                <template x-for="term in recentSearches" :key="`recent-${term}`">
                                    <button type="button" class="rounded-full border eca-theme-border px-3 py-1.5 text-sm eca-theme-text" @click="selectSuggestion(term)" x-text="term"></button>
                                </template>
                            </div>
                        </div>
                        <div x-show="trending.length > 0" x-cloak>
                            <h3 class="mb-2 text-xs font-bold uppercase eca-theme-text-muted">{{ site_profile()->label('search_trending', __('site.search_trending')) }}</h3>
                            <div class="flex flex-wrap gap-2">
                                <template x-for="term in trending" :key="`trend-${term}`">
                                    <button type="button" class="rounded-full border eca-theme-border px-3 py-1.5 text-sm eca-theme-text" @click="selectSuggestion(term)" x-text="term"></button>
                                </template>
                            </div>
                        </div>
                        <div x-show="popular.products?.length || popular.articles?.length || popular.services?.length || popular.news?.length">
                            <h3 class="mb-3 text-xs font-bold uppercase eca-theme-text-muted">{{ __('site.search_popular') }}</h3>
                            <div class="grid gap-2 sm:grid-cols-2">
                                <template x-for="item in [...(popular.products||[]), ...(popular.articles||[]), ...(popular.services||[]), ...(popular.news||[])]" :key="item.url">
                                    <a :href="item.url" class="flex gap-3 rounded-xl border eca-theme-border p-3 transition hover:border-brand-accent/40">
                                        <img :src="item.image || ''" alt="" class="h-12 w-12 rounded-lg object-cover" x-show="item.image" />
                                        <span class="text-sm font-semibold eca-theme-text" x-text="item.title"></span>
                                    </a>
                                </template>
                            </div>
                        </div>
                    </div>
                </template>

                <template x-if="loading">
                    <div class="space-y-3">
                        <template x-for="index in 4" :key="`sk-${index}`">
                            <div class="site-skeleton-card h-20 rounded-xl"></div>
                        </template>
                    </div>
                </template>

                <template x-if="error">
                    <p class="rounded-xl border border-red-300/40 bg-red-500/10 px-4 py-3 text-sm text-red-600" x-text="error"></p>
                </template>

                <template x-if="!loading && !error && hasResults()">
                    <div class="space-y-4">
                        <template x-for="group in filteredGroups()" :key="group.key">
                            <section>
                                <h3 class="mb-2 text-xs font-bold uppercase eca-theme-text-muted" x-text="group.label"></h3>
                                <div class="space-y-2">
                                    <template x-for="item in group.items" :key="item.id">
                                        <button type="button" class="flex w-full gap-3 rounded-xl border eca-theme-border p-3 text-start transition hover:border-brand-accent/40" :class="item.flatIndex === activeIndex ? 'border-brand-accent/50 bg-brand-accent/5' : ''" :data-search-result-index="item.flatIndex" @mouseenter="activate(item.flatIndex)" @click="goTo(item)">
                                            <img :src="item.image || ''" alt="" class="h-14 w-14 shrink-0 rounded-lg object-cover" x-show="item.image" />
                                            <div class="min-w-0 flex-1">
                                                <p class="text-[11px] font-bold uppercase eca-theme-text-muted" x-text="item.meta"></p>
                                                <h4 class="text-sm font-semibold eca-theme-text" x-html="highlight(item.title)"></h4>
                                                <p class="mt-1 text-xs eca-theme-text-muted" x-html="highlight(item.subtitle)"></p>
                                            </div>
                                        </button>
                                    </template>
                                </div>
                            </section>
                        </template>
                    </div>
                </template>

                <template x-if="showEmptyState()">
                    <p class="py-10 text-center text-sm eca-theme-text-muted">{{ __('site.search_empty_title') }}</p>
                </template>
            </div>
        </div>
    </div>
</div>