@php
    $hasChildren = ! empty($node['children']);
    $isSelected  = $selectedGroupId === $node['id'];
    // A behúzás a mélységtől függ (a depth=0 gyökér rejtett, így az 1. szint kap 0 behúzást).
    $indent      = max(0, ($node['depth'] - 1)) * 16;
@endphp

<div wire:key="group-node-{{ $node['id'] }}" x-data="{ open: true }">
    <div style="display:flex;align-items:center;gap:2px;padding-left:{{ $indent }}px;">
        {{-- Chevron expand/collapse toggle (Preline-stílus) --}}
        @if ($hasChildren)
            <button
                @click="open = !open"
                style="display:flex;align-items:center;justify-content:center;width:18px;height:18px;flex-shrink:0;background:none;border:none;cursor:pointer;padding:0;color:#6b7280;transition:transform 0.15s;"
                :style="open ? '' : 'transform:rotate(-90deg)'"
                aria-label="Kinyit/becsuk"
            >
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="m6 9 6 6 6-6" />
                </svg>
            </button>
        @else
            <span style="width:18px;flex-shrink:0;"></span>
        @endif

        {{-- Csoport sora: ikon + név + badge --}}
        <button
            wire:click="selectGroup({{ $node['id'] }})"
            style="display:flex;align-items:center;gap:8px;flex:1;padding:5px 8px;border-radius:6px;border:none;cursor:pointer;text-align:left;font-size:13px;min-width:0;
                {{ $isSelected
                    ? 'background:#f0e8e0;color:#b83400;font-weight:700;'
                    : 'background:transparent;color:#374151;' }}"
            onmouseover="{{ ! $isSelected ? "this.style.background='#f3f4f6'" : '' }}"
            onmouseout="{{ ! $isSelected ? "this.style.background='transparent'" : '' }}"
        >
            {{-- Ikon: mappa (csoport gyerekekkel) vagy fájl (levél) --}}
            <span style="display:flex;align-items:center;flex-shrink:0;color:{{ $isSelected ? '#b83400' : '#9ca3af' }};">
                @if ($hasChildren)
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.93a2 2 0 0 1-1.66-.9l-.82-1.2A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2Z" />
                    </svg>
                @else
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" />
                        <path d="M14 2v4a2 2 0 0 0 2 2h4" />
                    </svg>
                @endif
            </span>

            <span style="flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">{{ $node['name'] }}</span>

            @if ($node['products_count'] > 0)
                <span style="flex-shrink:0;font-size:11px;padding:1px 6px;border-radius:10px;
                    {{ $isSelected ? 'background:#fcd9c8;color:#b83400;' : 'background:#e5e7eb;color:#6b7280;' }}">
                    {{ $node['products_count'] }}
                </span>
            @endif
        </button>
    </div>

    @if ($hasChildren)
        <div x-show="open" style="margin-top:1px;">
            @foreach ($node['children'] as $childIndex => $child)
                @include('livewire.supplier-portal.product-group-tree-node', [
                    'node' => $child,
                ])
            @endforeach
        </div>
    @endif
</div>