@php
    $level = (int) ($level ?? 0);
    $categoryId = (int) ($node->id ?? 0);
    $categoryName = $node->local->name ?? '';
    $children = $node->children ?? collect();
    $hasChildren = $children->isNotEmpty();
    $isActive = ($activeCategoryId ?? null) !== null && (int) $activeCategoryId === $categoryId;
    $isExpanded = in_array($categoryId, $expandedCategoryIds ?? [], true);
@endphp

<li wire:key="product-category-{{ $categoryId }}">
    @if ($hasChildren)
        <div class="{{ $level === 0 ? 'w-full flex items-stretch gap-0 text-gray-200' : 'flex items-stretch gap-0 text-gray-300' }}">
            <button
                type="button"
                wire:click="setCategory({{ $categoryId }})"
                class="{{ $level === 0 ? 'flex-1 min-w-0 text-left rounded-md px-2 py-1 transition-colors hover:text-white hover:bg-le-primary/20' : 'flex-1 min-w-0 text-left font-medium rounded-md px-2 py-1 transition-colors hover:text-white hover:bg-le-primary/20' }} {{ $isActive ? 'text-le-primary bg-le-primary/10' : '' }}"
            >
                <span class="block truncate">{{ $categoryName }}</span>
            </button>
            <button
                type="button"
                wire:click.stop="toggleExpanded({{ $categoryId }})"
                class="shrink-0 inline-flex items-center justify-center rounded-md px-1.5 py-1 text-gray-500 hover:text-white hover:bg-le-primary/20 transition-colors"
                aria-expanded="{{ $isExpanded ? 'true' : 'false' }}"
                aria-label="Toggle subcategories"
            >
                <i class="ph ph-caret-down {{ $level === 0 ? 'text-xs' : 'text-[10px]' }} transition-transform duration-200 {{ $isExpanded ? 'rotate-180' : '' }}"></i>
            </button>
        </div>
        @if ($isExpanded)
            <ul class="{{ $level === 0 ? 'mt-2 pl-4 space-y-2 text-sm text-gray-400' : 'mt-1 ml-3 space-y-1 text-sm text-gray-400' }}">
                @foreach ($children as $child)
                    @include('frontend::livewire.partials.product-category-node', [
                        'node' => $child,
                        'activeCategoryId' => $activeCategoryId,
                        'expandedCategoryIds' => $expandedCategoryIds ?? [],
                        'level' => $level + 1,
                    ])
                @endforeach
            </ul>
        @endif
    @else
        <a
            href="#"
            wire:click="setCategory({{ $categoryId }})"
            wire:click.prevent
            class="{{ $level === 0 ? 'w-full flex items-center justify-between text-left text-gray-200 hover:text-white hover:bg-le-primary/20 rounded-md px-2 py-1 transition-colors' : 'block px-2 py-1 rounded-md hover:bg-le-primary/20 hover:text-white transition-colors' }} {{ $isActive ? 'text-le-primary bg-le-primary/10' : '' }}"
        >
            <span>{{ $categoryName }}</span>
        </a>
    @endif
</li>