@props([
    'categories'  => [],
    'multiple'    => false,
    'name'        => 'category_id',   // form field name
    'selected'    => [],              // pre-selected IDs
    'placeholder' => null,
    'label'       => null,
    'required'    => false,
    'error'       => null,
])

@php
    $placeholder = $placeholder ?? ($multiple ? __('Select categories…') : __('Select a category…'));

    // Flatten tree to build a lookup map id => name
    $flatMap = [];
    $flatten = function ($nodes) use (&$flatten, &$flatMap) {
        foreach ($nodes as $node) {
            $flatMap[$node->id] = $node->name;
            if (!empty($node->children)) {
                $flatten($node->children);
            }
        }
    };
    $flatten($categories);

    $selectedIds   = array_filter((array) $selected);
    $selectedNames = array_values(array_filter(
        array_map(fn($id) => $flatMap[$id] ?? null, $selectedIds)
    ));

    // Encode for Alpine init
    $initIds   = json_encode(array_map('intval', $selectedIds));
    $initNames = json_encode($selectedNames);
    $flatJson  = json_encode($flatMap);
@endphp

<div
    x-data="{
        open: false,
        multiple: {{ $multiple ? 'true' : 'false' }},
        selected: {{ $initIds }},        // array of IDs
        names: {{ $initNames }},         // array of names (parallel to selected)
        flatMap: {{ $flatJson }},

        /* Called by the tree when a leaf is clicked */
        selectCategory(id, name) {
            if (this.multiple) {
                const idx = this.selected.indexOf(id);
                if (idx === -1) {
                    this.selected.push(id);
                    this.names.push(name);
                } else {
                    this.selected.splice(idx, 1);
                    this.names.splice(idx, 1);
                }
            } else {
                this.selected = [id];
                this.names    = [name];
                this.open     = false;
            }
        },

        removeTag(id) {
            const idx = this.selected.indexOf(id);
            if (idx !== -1) {
                this.selected.splice(idx, 1);
                this.names.splice(idx, 1);
            }
        },

        get displayLabel() {
            if (this.selected.length === 0) return '';
            if (!this.multiple) return this.names[0] ?? '';
            return '';
        },

        get isEmpty() {
            return this.selected.length === 0;
        }
    }"
    @click.outside="open = false"
    class="relative w-full"
>
    {{-- Label --}}
    @if ($label)
        <label class="block mb-1.5 text-sm font-medium text-gray-700 dark:text-gray-300">
            {{ $label }}
            @if ($required)
                <span class="text-red-500 ms-0.5">*</span>
            @endif
        </label>
    @endif

    {{-- ── Trigger ─────────────────────────────────────────────── --}}
    <button
        type="button"
        @click="open = !open"
        class="
            w-full flex items-center justify-between gap-2
            min-h-[2.75rem] px-3 py-2
            rounded-xl border text-start
            bg-white dark:bg-gray-900
            transition-all duration-150
            focus:outline-none focus:ring-2 focus:ring-primary/40
            {{ $error
                ? 'border-red-400 dark:border-red-500'
                : 'border-gray-300 dark:border-gray-700 hover:border-gray-400 dark:hover:border-gray-600' }}
        "
        :class="open ? 'ring-2 ring-primary/40 border-primary/60 dark:border-primary/60' : ''"
    >
        {{-- Content left --}}
        <span class="flex flex-wrap gap-1.5 flex-1 min-w-0">

            {{-- Single mode: plain text label --}}
            <template x-if="!multiple">
                <span
                    x-text="isEmpty ? '{{ $placeholder }}' : displayLabel"
                    :class="isEmpty ? 'text-gray-400 dark:text-gray-500' : 'text-gray-800 dark:text-gray-100'"
                    class="text-sm truncate"
                ></span>
            </template>

            {{-- Multiple mode: tags --}}
            <template x-if="multiple">
                <span class="flex flex-wrap gap-1.5 flex-1 min-w-0">
                    <template x-if="isEmpty">
                        <span class="text-sm text-gray-400 dark:text-gray-500">{{ $placeholder }}</span>
                    </template>
                    <template x-for="(id, i) in selected" :key="id">
                        <span
                            class="
                                inline-flex items-center gap-1
                                text-xs font-medium px-2 py-0.5 rounded-lg
                                bg-primary/10 dark:bg-primary/20
                                text-primary dark:text-primary-light
                                ring-1 ring-primary/20
                            "
                        >
                            <span x-text="names[i]"></span>
                            <button
                                type="button"
                                @click.stop="removeTag(id)"
                                class="hover:text-red-500 transition-colors"
                                :aria-label="'Remove ' + names[i]"
                            >
                                <svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
                                </svg>
                            </button>
                        </span>
                    </template>
                </span>
            </template>

        </span>

        {{-- Right chevron --}}
        <svg
            class="flex-shrink-0 w-4 h-4 text-gray-400 dark:text-gray-500 transition-transform duration-200"
            :class="open ? 'rotate-180' : ''"
            fill="none" viewBox="0 0 24 24" stroke="currentColor"
        >
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
        </svg>
    </button>

    {{-- Error message --}}
    @if ($error)
        <p class="mt-1 text-xs text-red-500">{{ $error }}</p>
    @endif

    {{-- ── Dropdown ─────────────────────────────────────────────── --}}
    <div
        x-show="open"
        x-cloak
        x-transition:enter="transition ease-out duration-150"
        x-transition:enter-start="opacity-0 scale-y-95 -translate-y-1"
        x-transition:enter-end="opacity-100 scale-y-100 translate-y-0"
        x-transition:leave="transition ease-in duration-100"
        x-transition:leave-start="opacity-100 scale-y-100 translate-y-0"
        x-transition:leave-end="opacity-0 scale-y-95 -translate-y-1"
        class="
            absolute z-50 mt-1.5 w-full origin-top
            rounded-2xl shadow-xl
            bg-white dark:bg-gray-900
            border border-gray-200 dark:border-gray-700
            max-h-72 overflow-y-auto
            p-2
            overscroll-contain
        "
        style="scrollbar-width: thin;"
    >
        @if (empty($categories))
            <p class="px-3 py-4 text-sm text-center text-gray-400 dark:text-gray-500">
                {{ __('No categories available.') }}
            </p>
        @else
            {{-- Pass selectCategory callback to the tree --}}
            <x-alizam.category-tree
                :categories="$categories"
                :multiple="$multiple"
                :selected="$selectedIds"
                onSelect="selectCategory"
            />
        @endif
    </div>

    {{-- ── Hidden inputs for form submission ───────────────────── --}}
    @if ($multiple)
        <template x-for="id in selected" :key="id">
            <input type="hidden" name="{{ $name }}[]" :value="id">
        </template>
    @else
        <input type="hidden" name="{{ $name }}" :value="selected[0] ?? ''">
    @endif

</div>