@props([
    'categories'  => [],
    'selected'    => [],   // array of selected IDs (passed down for highlighting)
    'multiple'    => false,
    'onSelect'    => null, // JS callback name, e.g. 'selectCategory'
    'depth'       => 0,
])

<div class="{{ $depth === 0 ? 'space-y-1' : 'space-y-0.5' }}">
    @foreach ($categories as $category)
        @php
            $hasChildren = !empty($category->children);
            $isSelected  = in_array($category->id, (array) $selected);
        @endphp

        <div x-data="{ open: {{ $isSelected || collect($category->children ?? [])->pluck('id')->intersect((array) $selected)->isNotEmpty() ? 'true' : 'false' }} }">

            {{-- Row --}}
            <div
                class="
                    group flex items-center justify-between cursor-pointer
                    px-2 py-2 md:px-3 md:py-2.5 rounded-xl
                    border
                    {{ $isSelected
                        ? 'border-primary/40 bg-primary/10 dark:bg-primary/15'
                        : 'border-transparent hover:border-gray-200 dark:hover:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800' }}
                    transition-all duration-150
                "
                @if ($hasChildren)
                    @click="open = !open"
                @else
                    @click="{{ $onSelect ? "{$onSelect}({$category->id}, '". addslashes($category->name) ."')" : '' }}"
                @endif
            >
                {{-- Left: icon + label --}}
                <div class="flex items-center gap-2.5 min-w-0">
                    @if ($category->image_url)
                        <img
                            class="
                                flex-shrink-0
                                w-8 h-8 md:w-10 md:h-10
                                object-cover rounded-lg
                                bg-gray-100 dark:bg-gray-800
                                ring-1 ring-black/5 dark:ring-white/10
                            "
                            src="{{ $category->image_url }}"
                            alt="{{ $category->name }}"
                            loading="lazy"
                        >
                    @else
                        <div class="
                            flex-shrink-0 w-8 h-8 md:w-10 md:h-10
                            rounded-lg bg-gray-100 dark:bg-gray-800
                            flex items-center justify-center
                            ring-1 ring-black/5 dark:ring-white/10
                        ">
                            <svg class="w-4 h-4 text-gray-400 dark:text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                                      d="M3 7a2 2 0 012-2h3.28a2 2 0 011.42.59l1.58 1.58A2 2 0 0012.72 7.75H19a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2V7z"/>
                            </svg>
                        </div>
                    @endif

                    <span class="
                        truncate text-sm md:text-base font-medium
                        {{ $isSelected
                            ? 'text-primary dark:text-primary-light'
                            : 'text-gray-800 dark:text-gray-200' }}
                        transition-colors
                    ">
                        {{ $category->name }}
                    </span>

                    @if ($hasChildren)
                        <span class="
                            flex-shrink-0 text-xs font-medium px-1.5 py-0.5 rounded-full
                            bg-gray-100 dark:bg-gray-700
                            text-gray-500 dark:text-gray-400
                        ">
                            {{ count($category->children) }}
                        </span>
                    @endif
                </div>

                {{-- Right: chevron or check --}}
                @if ($hasChildren)
                    <x-isax-linear.arrow-left-1
                        class="flex-shrink-0 w-4 h-4 text-gray-400 dark:text-gray-500 transition-transform duration-200"
                        ::class="open ? '-rotate-90' : ''"
                    />
                @elseif ($isSelected)
                    <svg class="flex-shrink-0 w-4 h-4 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/>
                    </svg>
                @endif
            </div>

            {{-- Children --}}
            @if ($hasChildren)
                <div
                    x-show="open"
                    x-cloak
                    x-collapse
                    class="ms-5 md:ms-8 mt-0.5 border-r-2 border-gray-100 dark:border-gray-700/60 ps-2.5 md:ps-3"
                >
                    <x-alizam.category-tree
                        :categories="$category->children"
                        :selected="$selected"
                        :multiple="$multiple"
                        :onSelect="$onSelect"
                        :depth="$depth + 1"
                    />
                </div>
            @endif

        </div>
    @endforeach
</div>