{{--
    Recursive partial: renders one level of the category tree.
    Variables:
      $nodes    — array of category rows at this level
      $level    — integer depth (0 = root)
      $parentId — parent id string for SortableJS data attribute ('null' for root)
--}}

<ul class="cat-list"
    data-parent-id="{{ $parentId ?? 'null' }}"
    data-parent-name="{{ $parentName ?? '' }}"
    x-init="makeSortable($el)">

    @foreach ($nodes as $node)
        @php $hasChildren = ! empty($node['children']); @endphp

        <li wire:key="{{ $node['id'] }}"
            data-id="{{ $node['id'] }}"
            data-level="{{ $level }}">

            <div class="cat-row">
                {{-- Drag handle --}}
                <span class="drag-handle">
                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 16 16">
                        <path d="M7 2a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zM7 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zM7 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zM7 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
                    </svg>
                </span>

                {{-- Expand / collapse toggle --}}
                @if ($hasChildren)
                    <button class="toggle-btn" :class="{ open: isExpanded({{ $node['id'] }}) }"
                            x-on:click="toggle({{ $node['id'] }})">
                        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" viewBox="0 0 16 16">
                            <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
                        </svg>
                    </button>
                @else
                    <span class="toggle-btn"></span>
                @endif

                {{-- Folder icon --}}
                <svg class="cat-icon {{ $hasChildren ? 'has-children' : '' }}"
                     xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                    @if ($hasChildren)
                        <path d="M9.828 3h3.982a2 2 0 0 1 1.992 2.181l-.637 7A2 2 0 0 1 13.174 14H2.825a2 2 0 0 1-1.991-1.819l-.637-7a1.99 1.99 0 0 1 .342-1.31L.5 3a2 2 0 0 1 2-2h3.672a2 2 0 0 1 1.414.586l.828.828A2 2 0 0 0 9.828 3zm-8.322.12C1.72 3.042 1.95 3 2.19 3h5.396l-.707-.707A1 1 0 0 0 6.172 2H2.5a1 1 0 0 0-1 .981l.006.139z"/>
                    @else
                        <path d="M.54 3.87.5 3a2 2 0 0 1 2-2h3.672a2 2 0 0 1 1.414.586l.828.828A2 2 0 0 0 9.828 3h3.982a2 2 0 0 1 1.992 2.181l-.637 7A2 2 0 0 1 13.174 14H2.825a2 2 0 0 1-1.991-1.819l-.637-7a1.99 1.99 0 0 1 .342-1.31zM2.19 4a1 1 0 0 0-.996 1.09l.637 7a1 1 0 0 0 .995.91h10.348a1 1 0 0 0 .995-.91l.637-7A1 1 0 0 0 13.81 4H2.19zm4.69-1.707A1 1 0 0 0 6.172 2H2.5a1 1 0 0 0-1 .981l.006.139C1.72 3.042 1.95 3 2.19 3h5.396l-.707-.707z"/>
                    @endif
                </svg>

                {{-- Category image thumbnail --}}
                @if ($node['image_url'])
                    <img src="{{ $node['image_url'] }}" alt="{{ $node['name'] }}"
                         class="cat-thumb" loading="lazy">
                @else
                    <span class="cat-thumb-empty"></span>
                @endif

                {{-- Name (+ truncated SEO description) + breadcrumb --}}
                <span class="cat-name-block">
                    <span class="cat-name">{{ $node['name'] }}</span>
                    @if (! empty($node['seo_description']))
                        <span class="cat-desc">{{ $node['seo_description'] }}</span>
                    @endif
                </span>
                @if ($level > 0)
                    <span class="cat-fullpath">{{ $node['full_name'] }}</span>
                @endif

                {{-- Product count badge — click to manage products in this category --}}
                <button class="cat-badge cat-badge-link {{ $node['product_count'] > 0 ? 'cat-badge-has-products' : '' }}"
                        wire:click="startManage({{ $node['id'] }}, '{{ addslashes($node['name']) }}')">
                    {{ $node['product_count'] }}
                </button>

                {{-- Row actions (visible on hover) --}}
                <div class="cat-actions">
                    <button class="cat-btn cat-btn-add"
                            wire:click="startCreateChild({{ $node['id'] }})">
                        + Sub
                    </button>
                    <button class="cat-btn cat-btn-assign"
                            wire:click="startAssign({{ $node['id'] }}, '{{ addslashes($node['name']) }}')">
                        + Products
                    </button>
                    <button class="cat-btn cat-btn-edit"
                            wire:click="startEdit({{ $node['id'] }})">
                        Edit
                    </button>
                    <button class="cat-btn cat-btn-del"
                            wire:click="startDelete({{ $node['id'] }}, '{{ addslashes($node['name']) }}')">
                        Delete
                    </button>
                </div>
            </div>

            {{-- Children (collapsible) --}}
            @if ($hasChildren)
                <div x-show="isExpanded({{ $node['id'] }})"
                     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">
                    @include('filament.pages.category-tree-nodes', [
                        'nodes'      => $node['children'],
                        'level'      => $level + 1,
                        'parentId'   => (string) $node['id'],
                        'parentName' => $node['name'],
                    ])
                </div>
            @endif

        </li>
    @endforeach

</ul>