<div x-data="sidebarSearch()" class="px-2 py-2">
    <x-filament::input.wrapper class="relative">
        <x-filament::input
            type="text"
            placeholder="Search…"
            x-ref="search"
            x-on:input.debounce.300ms="filterItems($event.target.value)"
            x-on:keydown.escape="clearSearch"
            class="w-full rounded border px-2 py-1 text-sm"
        />
    </x-filament::input.wrapper>

    <script>
        document.addEventListener('alpine:init', () => {
            Alpine.data('sidebarSearch', () => ({
                init() {
                    this.$refs.search.value = ''
                },
                filterItems(searchTerm) {
                    const groups = document.querySelectorAll('.fi-sidebar-nav-groups .fi-sidebar-group')
                    searchTerm = searchTerm.toLowerCase()

                    groups.forEach(group => {
                        const groupButton = group.querySelector('.fi-sidebar-group-button')
                        const groupText = (groupButton?.textContent || '').toLowerCase()
                        const items = group.querySelectorAll('.fi-sidebar-item')

                        let hasVisibleItems = false
                        const groupMatches = groupText.includes(searchTerm)

                        items.forEach(item => {
                            const itemText = item.textContent.toLowerCase()
                            const isVisible = itemText.includes(searchTerm) || groupMatches
                            item.style.display = isVisible ? '' : 'none'
                            if (isVisible) hasVisibleItems = true
                        })

                        group.style.display = (hasVisibleItems || groupMatches) ? '' : 'none'
                    })
                },
                clearSearch() {
                    this.$refs.search.value = ''
                    this.filterItems('')
                },
            }))
        })
    </script>
</div>
