@php $filterMode = $filterMode ?? false; @endphp
<div class="col-span-full relative"
     x-data="documentFolderPicker(@js($formData['initialFolder']), @js($formData['folderGroups']), @js($formData['selectedType']))"
     @click.outside="closePicker(false)"
     @focusin.window="if (open && !$el.contains($event.target)) closePicker(false)">
    @if(!$filterMode)
    <label class="form-label" id="folder-label">Folder <span class="text-red-500">*</span></label>
    @endif
    <input type="hidden" name="folder_id" x-model="selId" />

    <button type="button"
            x-ref="fstrigger"
            role="combobox"
            aria-haspopup="listbox"
            :aria-expanded="open.toString()"
            @if($filterMode) aria-label="Filter by folder" @else aria-labelledby="folder-label" @endif
            :aria-activedescendant="activeIndex >= 0 ? 'folder-option-' + activeIndex : null"
            @keydown.escape.prevent="closePicker(false)"
            @keydown.arrow-down.prevent="moveActive(1)"
            @keydown.arrow-up.prevent="moveActive(-1)"
            @keydown.enter.prevent="open ? selectActive() : openPicker()"
            @keydown.space.prevent="open ? selectActive() : openPicker()"
            @keydown.tab="closePicker(false)"
            @click="open ? closePicker(false) : openPicker()"
            class="flex {{ $filterMode ? 'h-11' : 'min-h-11' }} w-full items-center gap-3 rounded-xl border border-surface-200 bg-white px-3 py-2 text-left shadow-sm transition-all duration-150 focus:outline-none focus-visible:ring-4 focus-visible:ring-primary-500/10"
            :class="open ? 'border-primary-500' : 'hover:border-surface-300 hover:shadow-md'">
        @if($filterMode)
        <span class="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-primary-50 text-primary-600">
            <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M3 7a2 2 0 012-2h4l2 2h8a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2V7z"/>
            </svg>
        </span>
        @else
        <span class="w-9 h-[30px] shrink-0">
            <svg viewBox="0 0 72 60" fill="none" class="h-full w-full">
                <path d="M2 10C2 7.239 4.239 5 7 5H27L35 13H65C67.761 13 70 15.239 70 18V50C70 52.761 67.761 55 65 55H7C4.239 55 2 52.761 2 50V10Z"
                      class="transition-colors duration-150" :class="selId ? selFolderBack : 'fill-surface-200'"/>
                <path d="M2 18C2 15.239 4.239 13 7 13H65C67.761 13 70 15.239 70 18V50C70 52.761 67.761 55 65 55H7C4.239 55 2 52.761 2 50V18Z"
                      class="transition-colors duration-150" :class="selId ? selFolderFront : 'fill-surface-100'"/>
            </svg>
        </span>
        @endif

        <span class="block min-w-0 flex-1">
            <span x-show="!selId && selectedType" class="block text-sm {{ $filterMode ? 'font-medium text-surface-600' : 'text-surface-400' }}">{{ $filterMode ? 'All folders' : 'Select a folder...' }}</span>
            <span x-show="!selId && !selectedType" class="block text-sm text-surface-400">Select a document type first...</span>
            <span x-show="selId" class="block min-w-0">
                <span x-text="selName" :title="selPath" class="block truncate text-sm font-semibold text-surface-900"></span>
                @if(!$filterMode)
                <span x-text="selLabel + (selParentPath ? ' / ' + selParentPath : '')"
                      :title="selLabel + (selParentPath ? ' / ' + selParentPath : '')"
                      class="mt-0.5 block truncate text-[11px] text-surface-400"></span>
                @endif
            </span>
        </span>

        <svg class="h-4 w-4 shrink-0 text-surface-400 transition-transform duration-200" :class="open ? 'rotate-180' : ''" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
        </svg>
    </button>

    <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"
         class="absolute left-0 right-0 z-50 mt-1 overflow-hidden rounded-2xl border border-surface-200 bg-white shadow-2xl"
         style="display:none;">
        <div class="border-b border-surface-50 p-3">
            <div class="flex items-center gap-2.5 rounded-xl border border-surface-200 bg-surface-50 px-3.5 py-2">
                <svg class="h-3.5 w-3.5 shrink-0 text-surface-400" fill="none" viewBox="0 0 24 24"
                     stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                    <circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/>
                </svg>
                 <input type="text"
                        x-ref="fsearch"
                        x-model="query"
                        @input="onQueryChange()"
                        placeholder="Search folders..."
                        @keydown.escape.prevent="closePicker(true)"
                        @keydown.arrow-down.prevent="moveActive(1)"
                        @keydown.arrow-up.prevent="moveActive(-1)"
                        @keydown.enter.prevent="selectActive()"
                        @keydown.tab="closePicker(false)"
                        class="flex-1 bg-transparent text-sm text-surface-900 outline-none placeholder:text-surface-400" />
                <button x-show="query"
                        type="button"
                        @click.stop="query=''"
                        class="flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-full bg-surface-200 text-[10px] font-bold text-surface-500 hover:bg-surface-300">&times;</button>
            </div>
        </div>

        <div class="max-h-80 overflow-y-auto px-4 py-3" role="listbox">
            @if($filterMode)
                <button type="button" role="option" :aria-selected="!selId" data-folder-option data-folder-id=""
                        @click="pick({ id: '', name: '' }, { type: selectedType })"
                        class="mb-2 w-full rounded-xl px-3 py-2 text-left text-sm font-semibold text-surface-600 hover:bg-surface-50">All Folders</button>
            @endif
            <div x-show="query" class="mb-4 flex items-center gap-2 px-1 pt-1">
                <svg class="h-3.5 w-3.5 text-surface-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/>
                </svg>
                <span class="text-[11px] font-extrabold uppercase tracking-wider text-surface-400">Search results</span>
                <span class="rounded-md bg-surface-100 px-1.5 py-0.5 text-[10px] font-bold text-surface-500" x-text="folderResultCount"></span>
            </div>

            <div x-show="hasMatches" class="mb-2 flex items-center gap-2 px-1">
                <svg class="h-3.5 w-3.5 text-surface-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M3 7.5A1.5 1.5 0 014.5 6H9l2 2h8.5A1.5 1.5 0 0121 9.5v8a1.5 1.5 0 01-1.5 1.5h-15A1.5 1.5 0 013 17.5v-10z"/>
                </svg>
                <span class="text-[11px] font-extrabold uppercase tracking-wider text-surface-400">Folders</span>
                <span class="rounded-md bg-surface-100 px-1.5 py-0.5 text-[10px] font-bold text-surface-500" x-text="folderResultCount"></span>
            </div>

            <template x-for="(group, groupIndex) in filteredGroups" :key="group.type">
                <div role="group" :aria-label="group.label">
                    <template x-for="(folder, folderIndex) in group.folders" :key="folder.id">
                        <div>
                            <button type="button"
                                    data-folder-option
                                    :data-folder-id="folder.id"
                                    :id="'folder-option-' + groupIndex + '-' + folderIndex"
                                    role="option"
                                    :aria-selected="String(selId) === String(folder.id)"
                                    @click="pick(folder, group)"
                                    class="flex w-full cursor-pointer items-center justify-between gap-3 rounded-xl border-none px-2 py-3 text-left transition-colors duration-100 hover:bg-surface-50"
                                    :class="[
                                        String(selId) === String(folder.id) ? 'bg-primary-50/60' : '',
                                        activeIndex >= 0 && visibleOptions[activeIndex] === $el ? 'ring-2 ring-inset ring-primary-200' : ''
                                    ]">
                                <div class="flex min-w-0 items-center gap-3">
                                    <svg viewBox="0 0 72 60" fill="none" class="h-9 w-11 shrink-0">
                                        <path d="M2 10C2 7.239 4.239 5 7 5H27L35 13H65C67.761 13 70 15.239 70 18V50C70 52.761 67.761 55 65 55H7C4.239 55 2 52.761 2 50V10Z"
                                              :class="group.folderBackClass"/>
                                        <path d="M2 18C2 15.239 4.239 13 7 13H65C67.761 13 70 15.239 70 18V50C70 52.761 67.761 55 65 55H7C4.239 55 2 52.761 2 50V18Z"
                                              :class="group.folderFrontClass"/>
                                    </svg>
                                    <div class="min-w-0">
                                        <span class="block truncate text-sm font-semibold text-surface-900" x-text="folder.name"></span>
                                        <span class="mt-1 block truncate text-xs text-surface-400"
                                              x-text="group.label + (folder.parent_path ? ' / ' + folder.parent_path : '')"></span>
                                    </div>
                                </div>
                                <svg x-show="String(selId) === String(folder.id)" class="h-4 w-4 shrink-0 text-primary-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5" aria-hidden="true">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                                </svg>
                            </button>
                        </div>
                    </template>
                </div>
            </template>

            <div x-show="!hasMatches" class="flex flex-col items-center gap-2 px-3 py-8 text-center">
                <svg class="h-8 w-8 text-surface-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M9.5 9.5l5 5m0-5l-5 5M12 21a9 9 0 100-18 9 9 0 000 18z"/>
                </svg>
                <p class="text-xs text-surface-400">No folders match "<span x-text="query" class="font-medium text-surface-500"></span>"</p>
            </div>
        </div>
    </div>

    @error('folder_id')
        <p class="mt-1.5 text-xs text-red-600">{{ $message }}</p>
    @enderror
</div>